/*
Theme Name:  Made in Restaurants
Theme URI:   https://github.com/BravelyCreated/mir-site
Description: Bespoke theme for the Made in Restaurants campaign microsite (National Restaurant
             Association). Built by Bravely. Standalone — no parent theme. Uses the Elementor
             plugin as the page builder.
Author:      Bravely
Version:     0.1.0
Text Domain: mir
*/

/* =========================================================
   DESIGN TOKENS  (values ported from the approved comp)
========================================================= */
:root {
	--red:   #ec1c2f;
	--blue:  #163785;
	--black: #111111;
	--dark:  #1a1a1a;
	--mid:   #444444;
	--grey:  #666666;
	--lgrey: #999999;
	--light: #f2f2f2;
	--white: #ffffff;

	--fb: #1877f2;
	--ig: #ff0069;
	--li: #0a66c2;
	--x:  #000000;

	--font-primary: 'Raleway', sans-serif;
	--font-size-base: 16px;

	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 32px;
	--spacing-lg: 72px;
	--spacing-xl: 120px;
	--spacing-section: 150px;

	--max-width: 1100px;
	--nav-height: 68px;
	--mir-topbar-height: 84px; /* the video page's static logo bar */

	--hero-overlay: rgba(20, 20, 20, 0.75);

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-pill: 999px;

	--transition-base: 0.2s ease;
	--transition-spring: 0.28s cubic-bezier(0.34, 1.36, 0.64, 1);
}

/* =========================================================
   BASE
========================================================= */
html { scroll-behavior: smooth; }

body {
	font-family: var(--font-primary);
	color: var(--mid);
	background: var(--white);
	overflow-x: hidden;
	font-size: var(--font-size-base);
}

a { text-decoration: none; color: inherit; }

/* Read by screen readers, invisible on screen, and contributes no layout box —
   safe inside elements whose measured width drives other elements (the hero). */
.mir-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Scroll targets are focused programmatically so a screen reader's cursor follows
   an in-page jump (mir.js). They're not tab stops, so they need no focus ring. */
[tabindex="-1"]:focus { outline: none; }

/* =========================================================
   HERO  (rendered by the Mir_Hero Elementor widget)
   Place the widget in a full-width Elementor section with no padding.
========================================================= */
.mir-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--nav-height);
	overflow: hidden;
	text-align: center;
	background-color: #000;
}

.mir-hero__bg {
	position: absolute;
	top: -15%;
	left: 0;
	right: 0;
	bottom: -15%;
	background-size: cover;
	background-position: center 30%;
	z-index: 0;
}

.mir-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}

.mir-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--hero-overlay);
	z-index: 2;
}

.mir-hero__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 680px;
	padding: 80px 24px 100px;
}

.mir-hero__headline {
	font-size: 100px;
	font-weight: 900;
	color: var(--white);
	line-height: 0.85;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin: 0 0 10px;
	transition: opacity 0.28s ease, transform 0.28s ease;
	will-change: opacity, transform;
}
/* Word-cycler states (driven by mir.js) */
.mir-hero__headline.is-out { opacity: 0; transform: translateY(-36px); transition: opacity 0.22s ease, transform 0.22s ease; }
.mir-hero__headline.is-in { opacity: 0; transform: translateY(36px); transition: none; }
.mir-hero__headline.is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.28s ease, transform 0.28s ease; }

/* .mir-hero scope beats Elementor's `.elementor img { height:auto }` (0,1,1). */
.mir-hero .mir-hero__lockup {
	display: block;
	width: auto;
	height: 32px;
}

.mir-hero__tagline {
	font-size: 38px;
	font-weight: 700;
	color: var(--white);
	margin: 25px 0 14px;
	line-height: 1.1;
}

.mir-hero__body {
	font-size: 18px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.65;
	max-width: 520px;
	margin: 0 0 28px;
}

.mir-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--white);
	border: 2px solid var(--white);
	border-radius: var(--radius-md);
	color: var(--black);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 13px 22px;
	cursor: pointer;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.mir-hero__pill:hover {
	background: transparent;
	color: var(--white);
}

.mir-hero__pill-icon {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	order: 2;
}

.mir-hero__scroll {
	position: absolute;
	bottom: 42px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: mirScrollBob 1.8s ease-in-out infinite;
}

@keyframes mirScrollBob {
	0%, 100% { transform: translateX(-50%) translateY(0);    opacity: 0.55; }
	50%      { transform: translateX(-50%) translateY(10px); opacity: 1; }
}

.mir-hero__ch {
	width: 30px;
	height: 30px;
	border-right: 3px solid rgba(255, 255, 255, 0.85);
	border-bottom: 3px solid rgba(255, 255, 255, 0.85);
	transform: rotate(45deg);
}

.mir-hero__ch:nth-child(2) { margin-top: -16px; }

/* Responsive — aligned to the comp's 960 / 640 breakpoints */
@media (max-width: 960px) {
	.mir-hero__content { max-width: 100%; }
}
@media (max-width: 640px) {
	.mir-hero__headline { font-size: 52px; }
	.mir-hero .mir-hero__lockup { width: 100%; height: auto; max-width: 280px; }
	.mir-hero__tagline { font-size: 22px; margin-top: 16px; }
	.mir-hero__body { font-size: 15px; max-width: 100%; }
	.mir-hero__content { padding: 60px 20px 80px; }
}

/* =========================================================
   SHARED SECTION UTILITIES (eyebrow / title / body)
========================================================= */
.mir-eyebrow {
	display: inline-block;
	border: 1px solid var(--black);
	color: var(--black);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 5px 14px;
	margin-bottom: 14px;
}
.mir-eyebrow--on-red,
.mir-eyebrow--on-dark { border-color: var(--white); color: var(--white); }

.mir-section-title {
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	color: var(--black);
	line-height: 1.1;
	margin: 0 0 16px;
}
.mir-section-title--white { color: var(--white); }

.mir-section-body {
	font-size: 18px;
	font-weight: 400;
	color: var(--grey);
	line-height: 1.65;
}
.mir-section-body--muted { color: rgba(255, 255, 255, 0.65); }

/* =========================================================
   WHERE AMERICA GATHERS  (Mir_Gather widget)
========================================================= */
.mir-gather {
	position: relative;
	padding: 150px 32px 160px;
	text-align: center;
	overflow: hidden;
}
.mir-gather__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.mir-gather__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.91);
}
.mir-gather__inner {
	position: relative;
	z-index: 1;
	max-width: 540px;
	margin: 0 auto;
	text-align: center;
}

@media (max-width: 960px) {
	.mir-gather { padding: 100px 32px 110px; }
	.mir-section-title { font-size: 28px; }
	.mir-section-body { font-size: 16px; }
	.mir-eyebrow { font-size: 10px; }
}
@media (max-width: 640px) {
	.mir-gather { padding: 72px 20px 80px; }
}

/* =========================================================
   MOMENTS THAT MATTER — stories (Mir_Stories widget)
========================================================= */
.mir-stories {
	position: relative;
	padding: 120px 32px 140px;
	text-align: center;
	overflow: hidden;
	background-color: var(--red);
}
.mir-stories__bg {
	position: absolute;
	top: -15%; left: 0; right: 0; bottom: -15%;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.mir-stories__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(236, 28, 47, 0.88);
}
.mir-stories__inner { position: relative; z-index: 1; }
.mir-stories .mir-section-title { color: var(--white); }
.mir-stories .mir-section-body { color: rgba(255, 255, 255, 0.88); max-width: 500px; margin: 0 auto 36px; }

.mir-stories__cards {
	display: grid;
	grid-template-columns: repeat(var(--mir-cols, 4), 1fr);
	column-gap: 16px;
	/* Row gap must clear the 28px photo overhang (.mir-story-card__thumb margin-top: -28px),
	   or a wrapped row's photos overlap the row above. */
	row-gap: 44px;
	max-width: 1100px;
	margin: 0 auto;
	text-align: left;
	padding-top: 28px;
}

.mir-story-card {
	background: var(--white);
	display: flex;
	flex-direction: column;
	cursor: pointer;
	overflow: visible;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border: none; outline: none; appearance: none; -webkit-appearance: none;
	text-align: left;
	font-family: inherit;
	padding: 0;
	width: 100%;
}
.mir-story-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}
.mir-story-card__thumb {
	position: relative;
	width: calc(100% - 24px);
	margin: -28px auto 0;
	padding-top: 62%;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* .mir-story-card scope for the same reason as .mir-hero__lockup: Elementor's
   `.elementor img { height:auto }` is (0,1,1), and so was `.mir-story-card__thumb img`
   on its own — a tie that Elementor's later stylesheet won, so `height:100%` never
   applied and every image rendered at its natural aspect: portrait overflowed the box,
   wide ones left a gap under them. 3:2 stock happened to land within 4px of the 62% box,
   which is why it went unnoticed until Shane uploaded something else. */
.mir-story-card .mir-story-card__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.4s ease;
}
.mir-story-card:hover .mir-story-card__thumb img { transform: scale(1.05); }
.mir-story-card__thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.42) 100%);
	z-index: 1;
}
.mir-story-card__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	color: var(--white);
	opacity: 0.9;
	z-index: 2;
	line-height: 1;
	transition: opacity 0.2s, transform 0.2s;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
.mir-story-card:hover .mir-story-card__play { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
.mir-story-card__info { padding: 14px 14px 16px; flex: 1; display: flex; flex-direction: column; }
.mir-story-card__title { font-size: 20px; font-weight: 700; color: var(--black); line-height: 1.25; margin-bottom: 10px; }
.mir-story-card__excerpt { font-size: 16px; color: var(--grey); line-height: 1.6; flex: 1; margin-bottom: 14px; }
.mir-story-card__author { font-size: 14px; font-weight: 700; color: var(--black); line-height: 1.3; }
.mir-story-card__role { font-size: 14px; color: var(--red); font-weight: 600; }

/* CTA card */
.mir-story-card--cta {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 32px 22px;
	cursor: default;
	overflow: visible;
}
.mir-story-card--cta:hover { transform: none; box-shadow: none; }
.mir-cta__icon { font-size: 52px; color: var(--white); margin-bottom: 14px; line-height: 1; filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.3)); }
/* Margin fully specified: this is an <h3> (so the card is reachable by heading
   navigation) and would otherwise pick up the UA's default heading margins. */
.mir-cta__title { font-size: 20px; font-weight: 800; color: var(--white); line-height: 1.25; margin: 0 0 12px; }
.mir-cta__body { font-size: 16px; color: rgba(255, 255, 255, 0.88); line-height: 1.6; margin: 0; }
.mir-cta__body strong { color: var(--white); font-weight: 800; display: block; }
.mir-cta__btns { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; margin-top: 18px; }
.mir-btn-gather {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--white); color: var(--red);
	font-family: var(--font-primary); font-size: 11px; font-weight: 800;
	letter-spacing: 0.14em; text-transform: uppercase;
	border: 2px solid var(--white); padding: 11px 16px; cursor: pointer; width: 100%;
	transition: background 0.2s, color 0.2s;
}
.mir-btn-gather:hover { background: transparent; color: var(--white); }
.mir-btn-tell {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 1.5px solid var(--white); color: var(--white);
	font-family: var(--font-primary); font-size: 11px; font-weight: 800;
	letter-spacing: 0.14em; text-transform: uppercase;
	padding: 10px 16px; background: transparent; cursor: pointer; width: 100%;
	transition: background 0.2s, color 0.2s;
}
.mir-btn-tell:hover { background: var(--white); color: var(--red); }

@media (max-width: 960px) { .mir-stories__cards:not(.mir-stories__cards--carousel) { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 44px; } }
@media (max-width: 640px) { .mir-stories__cards:not(.mir-stories__cards--carousel) { grid-template-columns: 1fr; gap: 52px; } }

/* ---- Stories carousel (more stories than fit in a view) ----
   The story cards slide inside a scroll-snap viewport with dot nav (mir.js); the CTA
   card is pinned beside the viewport on desktop and stacks below it on tablet/mobile.
   Per-view card width comes from --mir-per-view (set inline = "Cards to Show"), with
   media queries stepping it down to 2 (tablet) then ~1 (mobile). The viewport carries
   vertical padding so the thumb overhang (margin-top:-28px) and the hover lift aren't
   clipped by the horizontal overflow. */
.mir-stories__cards--carousel {
	display: flex;
	align-items: stretch;
	column-gap: 16px;
	max-width: 1100px;
	margin: 0 auto;
	padding-top: 0;
	text-align: left;
}
.mir-stories__carousel {
	flex: var(--mir-per-view, 3) 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.mir-stories__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	padding: 40px 0 40px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.mir-stories__viewport::-webkit-scrollbar { display: none; }
.mir-stories__track {
	display: flex;
	column-gap: 16px;
	align-items: stretch;
}
.mir-stories__track .mir-story-card {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--mir-per-view, 3) - 1) * 16px) / var(--mir-per-view, 3));
}
.mir-stories__cards--carousel > .mir-story-card--cta {
	flex: 1 1 0;
	margin: 40px 0 40px;
	align-self: stretch;
}
.mir-stories__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}
.mir-stories__dot {
	width: 9px; height: 9px;
	padding: 0;
	border: none; border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}
.mir-stories__dot:hover { background: rgba(255, 255, 255, 0.72); }
.mir-stories__dot[aria-current="true"] { background: var(--white); transform: scale(1.35); }
.mir-stories__dot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

@media (max-width: 960px) {
	.mir-stories__cards--carousel { flex-direction: column; column-gap: 0; }
	.mir-stories__carousel { flex: 1 1 auto; width: 100%; }
	.mir-stories__cards--carousel > .mir-story-card--cta { flex: 1 1 auto; margin: 0; }
	.mir-stories__track .mir-story-card { flex: 0 0 calc((100% - 20px) / 2); } /* 2 per view */
	.mir-stories__track { column-gap: 20px; }
}
@media (max-width: 640px) {
	.mir-stories__track .mir-story-card { flex: 0 0 84%; } /* 1 per view, with a peek */
	.mir-stories__viewport { padding: 36px 0 34px; }
}

/* =========================================================
   NEWSLETTER  (Mir_Newsletter widget)
========================================================= */
.mir-newsletter { position: relative; padding: 175px 32px; overflow: hidden; }
.mir-newsletter__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.mir-newsletter__bg::after { content: ''; position: absolute; inset: 0; background: rgba(15, 15, 15, 0.84); }
.mir-newsletter__inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.mir-newsletter__left .mir-section-title { color: var(--white); font-size: 22px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
.mir-newsletter__left .mir-section-body { color: rgba(255, 255, 255, 0.65); font-size: 18px; }
.mir-newsletter__right { background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.1); padding: 32px 28px; }

/* The signup form is a Marketo embed, styled by assets/css/mir-marketo-form.css —
   the same file the client pastes into the Marketo form's own CSS box, so the form
   looks identical wherever it's embedded. That file gives the form its own dark
   panel; here the panel is already on __right, so hand it back a transparent one. */
.mir-nl__marketo { --mir-form-surface: transparent; --mir-form-border: transparent; --mir-form-padding: 0; }
/* After a signup the form is swapped for the confirmation in place — see mir.js.
   Beats the shared Marketo stylesheet, which sets .mktoForm display with !important. */
.mir-nl__marketo.is-signed-up .mktoForm { display: none !important; }
.mir-nl__confirm { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); outline: none; }
.mir-nl__notice { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }
.mir-nl__notice p + p { margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.mir-btn-blue { display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: var(--white); font-family: var(--font-primary); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; border: none; padding: 12px 20px; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.mir-btn-blue:hover { background: #0d2660; transform: scale(1.02); }

/* =========================================================
   INDUSTRY AT A GLANCE  (Mir_Industry widget)
========================================================= */
.mir-industry { position: relative; padding: 150px 32px 160px; text-align: center; overflow: hidden; background-color: #f0f0f0; }
.mir-industry__bg { position: absolute; top: -15%; left: 0; right: 0; bottom: -15%; background-size: cover; background-position: center; z-index: 0; }
.mir-industry__bg::after { content: ''; position: absolute; inset: 0; background: rgba(242, 242, 242, 0.92); }
.mir-industry__inner { position: relative; z-index: 1; }
.mir-industry .mir-section-body { max-width: 580px; margin: 0 auto 36px; }

.mir-stat-cards { display: grid; grid-template-columns: repeat(var(--mir-stat-cols, 4), 1fr); gap: 0; max-width: 1100px; margin: 0 auto 32px; text-align: left; padding-top: 52px; }
.mir-stat-card { background: rgba(255, 255, 255, 0.85); padding: 20px 20px 22px; margin: 0 4px; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; position: relative; overflow: visible; }
.mir-stat-card:first-child { margin-left: 0; }
.mir-stat-card:last-child { margin-right: 0; border-right: none; }
.mir-stat-card:hover { z-index: 2; transform: translateY(-10px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12); background: #fff; }
.mir-stat__display { font-size: clamp(48px, 6vw, 72px); font-weight: 900; color: var(--red); line-height: 1; position: relative; margin-top: -44px; margin-bottom: 8px; }
/* Numeric glyphs render low in the line box (font ascent above the cap height), so they read
   slightly lower than the icon. Nudge numbers up optically — transform, not margin, so the
   sublabels below stay aligned across all cards. */
.mir-stat__display--number { transform: translateY(-8px); }
.mir-stat__display .fa-solid { font-size: clamp(40px, 5vw, 56px); }
.mir-stat__sublabel { font-size: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; line-height: 1.3; }
.mir-stat__title { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.mir-stat__body { font-size: 16px; color: var(--grey); line-height: 1.6; flex: 1; margin-bottom: 20px; }
.mir-btn-learn { display: inline-block; background: var(--blue); color: var(--white); font-family: var(--font-primary); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 18px; border: none; cursor: pointer; align-self: flex-start; text-decoration: none; transition: background 0.2s, transform 0.15s; }
.mir-btn-learn:hover { background: #0d2660; transform: scale(1.03); }
.mir-btn-industry { display: inline-flex; align-items: center; gap: 10px; background: var(--white); border: 1.5px solid var(--red); color: var(--red); font-family: var(--font-primary); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 11px 24px; cursor: pointer; text-decoration: none; transition: background 0.2s, color 0.2s; }
.mir-btn-industry:hover { background: var(--red); color: var(--white); }

/* NRA attribution */
.mir-nra { margin: 48px auto 0; max-width: 1100px; }
.mir-nra__link { display: flex; align-items: center; gap: 20px; background: var(--white); border: 1px solid #e0e0e0; padding: 20px 28px; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.mir-nra__link:hover { border-color: var(--red); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
.mir-nra .mir-nra__logo { height: 64px; width: auto; flex-shrink: 0; }
.mir-nra__text { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.mir-nra__bold { font-size: 16px; font-weight: 800; color: var(--black); letter-spacing: 0.02em; }
.mir-nra__sub { font-size: 14px; color: var(--grey); line-height: 1.6; }
.mir-nra__learn { font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.mir-nra__arrow { font-size: 13px; color: var(--lgrey); flex-shrink: 0; transition: transform 0.2s, color 0.2s; }
.mir-nra__link:hover .mir-nra__arrow { transform: translate(2px, -2px); color: var(--red); }

@media (max-width: 960px) { .mir-stat-cards { grid-template-columns: repeat(2, 1fr); row-gap: 48px; column-gap: 32px; } .mir-stat-card { border-right: none; margin: 0; } .mir-newsletter__inner { grid-template-columns: 1fr; gap: 32px; } .mir-newsletter { padding: 100px 32px; } }
@media (max-width: 640px) { .mir-stat-cards { grid-template-columns: 1fr; gap: 52px; } .mir-stat-card { border-bottom: none; } .mir-nra__link { flex-direction: column; text-align: center; } .mir-nra__text { text-align: center; } }

/* =========================================================
   NAV  (header.php)
========================================================= */
.mir-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); transition: background 0.3s ease; }
.mir-nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); padding: 0 28px; }
.mir-nav__logo { display: flex; align-items: center; gap: 16px; }
.mir-nav__logo img { height: 20px; width: auto; display: block; }
.mir-nav__divider { width: 1px; height: 36px; background: rgba(255, 255, 255, 0.3); flex-shrink: 0; }
.mir-nav__logo .mir-nav__nra { height: 41px; }
.mir-nav__right { display: flex; align-items: center; }
.mir-nav__links { display: flex; align-items: center; list-style: none; gap: 30px; margin: 0 30px 0 0; padding: 0; }
.mir-nav__links a { color: var(--white); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; position: relative; padding-bottom: 4px; }
/* Underline uses left/right edges + scaleX (not width:100%, which resolves to 0 on an inline <a>). */
.mir-nav__links a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.mir-nav__links a:hover::after,
.mir-nav__links a.is-active::after { transform: scaleX(1); }
.mir-nav__cta { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
.mir-btn-nav-gather { background: var(--red); color: var(--white); font-family: var(--font-primary); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; border: none; height: 36px; padding: 0 16px; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.mir-btn-nav-gather:hover { background: #c8101f; }
.mir-btn-nav-social { background: transparent; color: var(--white); font-family: var(--font-primary); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; border: 1.5px solid rgba(255, 255, 255, 0.6); height: 36px; padding: 0 16px; cursor: pointer; white-space: nowrap; transition: border-color 0.2s, background 0.2s; }
.mir-btn-nav-social:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.mir-nav__hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.mir-nav__hamburger span { width: 22px; height: 2px; background: var(--white); display: block; }
/* 1240, not 960: the logo lockup + divider + NRA mark measures 424px and the links + CTAs
   another 700, so with padding the two clusters collide at 1181px. Collapse well before they
   touch — at 1200 they'd sit 20px apart and read as crowded. */
@media (max-width: 1240px) {
	.mir-nav__links, .mir-nav__cta { display: none; }
	.mir-nav__hamburger { display: flex; }
}
/* Two logos don't fit a phone at full size, so step the pair down rather than drop the
   client mark. The divider tracks the taller of the two. */
@media (max-width: 640px) {
	.mir-nav__inner { padding: 0 20px; }
	.mir-nav__logo { gap: 12px; }
	.mir-nav__logo img { height: 16px; }
	.mir-nav__logo .mir-nav__nra { height: 34px; }
	.mir-nav__divider { height: 29px; }
}
/* 430, not 400: at 401px the step above still needs ~404px of nav, so it would overflow
   in the gap between the two rules. NRA leads the sizing here — it carries three stacked
   lines of type, so it loses legibility far faster than the MIR wordmark does. */
@media (max-width: 430px) {
	.mir-nav__inner { padding: 0 14px; }
	.mir-nav__logo { gap: 9px; }
	.mir-nav__logo img { height: 14px; }
	.mir-nav__logo .mir-nav__nra { height: 32px; }
	.mir-nav__divider { height: 27px; }
}

/* Mobile drawer */
.mir-drawer__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1100; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.mir-drawer__overlay.is-open { opacity: 1; visibility: visible; }
/* Closed, the drawer is parked off-screen. `visibility: hidden` is what takes it OUT of
   the accessibility tree and the tab order — translated alone, its seven links stayed
   focusable on every viewport, so keyboard/screen-reader users hit a second, invisible
   copy of the nav right after the real one. The visibility delay matches the slide so it
   still animates out; opening flips it back with no delay. */
.mir-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 280px; max-width: 82vw; background: #111; z-index: 1101; transform: translateX(100%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s; padding: 60px 26px 28px; display: flex; flex-direction: column; }
.mir-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; }
.mir-drawer__close { position: absolute; top: 16px; right: 18px; background: none; border: none; color: var(--white); font-size: 22px; cursor: pointer; line-height: 1; }
.mir-drawer__links { list-style: none; margin: 0; padding: 0; }
.mir-drawer__links a { display: block; color: var(--white); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: color 0.2s; }
.mir-drawer__links a.is-active { color: var(--red); }
.mir-drawer__share { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.mir-drawer__share button { width: 100%; height: 42px; display: flex; align-items: center; justify-content: center; }

/* =========================================================
   VIDEO PAGE  (templates/template-video.php + Mir_Video widget)
   The standalone page (/welcome). It has no nav — the nav is fixed,
   white, and transparent until you scroll past the hero, so it is only
   legible over the campaign hero — so the branding sits in a static bar
   instead, and the page carries its own dark ground under it.
========================================================= */
.mir-topbar { background: var(--black); }
.mir-topbar__inner { display: flex; align-items: center; height: var(--mir-topbar-height); padding: 0 28px; }
.mir-topbar__logo { display: inline-flex; align-items: center; gap: 16px; }
.mir-topbar__logo img { height: 20px; width: auto; display: block; }
.mir-topbar__divider { width: 1px; height: 36px; background: rgba(255, 255, 255, 0.3); flex-shrink: 0; }
.mir-topbar__logo .mir-topbar__nra { height: 41px; }

.mir-video {
	background: var(--black);
	padding: 72px 24px 104px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Fill what the bar leaves, so a video-only page doesn't sit in a short
	   black strip with the footer pulled up under it. */
	min-height: calc(100vh - var(--mir-topbar-height));
}
.mir-video__inner { width: 100%; max-width: 980px; margin: 0 auto; text-align: center; }
.mir-video__intro { margin-bottom: 40px; }
.mir-video__intro .mir-section-body { max-width: 680px; margin: 0 auto; }

/* Fixed 16:9 box: the embed is a third-party iframe with no intrinsic size, so
   the aspect ratio has to come from the box around it. */
.mir-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.mir-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.mir-video__error { margin: 0; padding: 24px; }
.mir-video__error a { color: var(--white); text-decoration: underline; }

@media (max-width: 640px) {
	.mir-topbar__inner { height: 68px; padding: 0 20px; }
	.mir-topbar__logo { gap: 12px; }
	.mir-topbar__logo img { height: 16px; }
	.mir-topbar__logo .mir-topbar__nra { height: 33px; }
	.mir-topbar__divider { height: 29px; }
	.mir-video { padding: 44px 18px 64px; min-height: 0; }
	.mir-video__intro { margin-bottom: 28px; }
}

/* =========================================================
   MODALS — gather / share / lightbox (inc/modals.php, mir-modals.js)
========================================================= */
.mir-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); z-index: 4000; align-items: center; justify-content: center; padding: 24px; }
.mir-modal-overlay.is-open { display: flex; }
.mir-modal { background: var(--white); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; position: relative; padding: 48px 40px 40px; animation: mirModalIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mirModalIn { from { opacity: 0; transform: translateY(28px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.mir-modal__close { position: absolute; top: 16px; right: 20px; background: transparent; border: none; font-size: 26px; line-height: 1; color: var(--lgrey); cursor: pointer; padding: 4px 8px; transition: color 0.2s; }
.mir-modal__close:hover { color: var(--black); }
.mir-modal__lockup { margin-bottom: 22px; }
.mir-modal__lockup img { height: 20px; width: auto; }
.mir-modal__title { font-size: 28px; font-weight: 900; color: var(--black); line-height: 1.05; margin-bottom: 10px; text-transform: uppercase; letter-spacing: -0.02em; }
.mir-modal__sub { font-size: 14px; color: var(--grey); line-height: 1.65; margin-bottom: 28px; }
.mir-modal__sub strong { color: var(--red); font-weight: 800; }
.mir-modal__note { font-size: 12px; color: var(--lgrey); margin-top: 16px; line-height: 1.5; }

.mir-gather-steps { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
.mir-gather-step { display: flex; align-items: flex-start; gap: 16px; }
.mir-gather-step__num { width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: var(--white); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.mir-gather-step__body { display: flex; flex-direction: column; gap: 3px; }
.mir-gather-step__body strong { font-size: 15px; font-weight: 800; color: var(--black); line-height: 1.3; }
.mir-gather-step__body span { font-size: 13px; color: var(--grey); line-height: 1.6; }
.mir-gather-note { font-size: 12px; color: var(--lgrey); line-height: 1.5; margin-bottom: 0; }
.mir-gather-social-link { background: transparent; border: none; color: var(--red); font-family: var(--font-primary); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; }
.mir-gather-social-link:hover { color: #c8101f; }

.mir-share-grid { display: flex; flex-direction: column; gap: 10px; }
.mir-share-card { display: flex; align-items: center; gap: 16px; border: 1.5px solid #e8e8e8; background: var(--white); padding: 14px 18px; cursor: pointer; text-align: left; width: 100%; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.mir-share-card:hover { border-color: var(--red); background: #fdf5f5; transform: translateX(4px); }
.mir-share-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--white); flex-shrink: 0; }
.mir-share-icon--fb { background: var(--fb); }
.mir-share-icon--ig { background: var(--ig); }
.mir-share-icon--li { background: var(--li); }
.mir-share-icon--x { background: #000; }
.mir-share-icon--threads { background: #000; }
.mir-share-card__info { flex: 1; text-align: left; }
.mir-share-card__name { font-size: 14px; font-weight: 800; color: var(--black); margin-bottom: 2px; letter-spacing: 0.02em; }
.mir-share-card__desc { font-size: 12px; color: var(--grey); line-height: 1.4; }
.mir-share-card__arrow { font-size: 11px; color: var(--lgrey); flex-shrink: 0; transition: transform 0.2s, color 0.2s; }
.mir-share-card:hover .mir-share-card__arrow { transform: translateX(4px); color: var(--red); }

.mir-share-step--hidden { display: none; }

/* Embedded Gather Voices submission form. The modal widens and becomes a flex column only
   while the embed is up, so the intro step keeps its narrower reading measure. The frame
   takes whatever height is left over rather than a guessed vh — GV's own layout overlaps
   its footer CTA onto its body copy when it's short. */
.mir-modal-overlay.is-embed .mir-modal {
	max-width: 880px;
	height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 28px 24px 14px;
}
/* Trim our own chrome in embed mode — every pixel here is one GV's form gets. */
.mir-modal-overlay.is-embed .mir-modal__title { font-size: 20px; }
.mir-modal-overlay.is-embed .mir-share-back { margin-bottom: 14px; }
.mir-modal-overlay.is-embed .mir-modal__note { margin-top: 8px; font-size: 11px; }
.mir-gather-embed { width: 100%; margin-top: 16px; background: var(--light); }
.mir-gather-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
/* The step wrapper sits between the modal and the frame, so it has to pass the growth
   through: modal column → step column → embed → iframe at 100%. */
.mir-modal-overlay.is-embed .mir-gather-embed-step { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mir-modal-overlay.is-embed .mir-gather-embed { flex: 1 1 auto; min-height: 0; }
.mir-modal-overlay.is-embed .mir-modal__title { margin-bottom: 0; }
.mir-modal-overlay.is-embed .mir-modal__note { flex-shrink: 0; }
.mir-share-back { background: transparent; border: none; color: var(--grey); font-family: var(--font-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 6px; margin-bottom: 28px; transition: color 0.2s; }
.mir-share-back:hover { color: var(--black); }
.mir-share-step2-icon { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--white); margin-bottom: 18px; }
.mir-share-step2-icon--ig { background: var(--ig); }
.mir-share-action { display: inline-flex; align-items: center; gap: 10px; background: var(--red); color: var(--white); font-family: var(--font-primary); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; border: none; padding: 13px 22px; cursor: pointer; margin-top: 24px; transition: background 0.2s; text-decoration: none; }
/* Color-only hover — a scale transform here re-rasterized the text and made the copy visibly jump on a retina display. */
.mir-share-action:hover { background: #c8101f; }

.mir-ig-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.mir-ig-step { display: flex; align-items: flex-start; gap: 14px; }
.mir-ig-step__num { width: 26px; height: 26px; border-radius: 50%; background: var(--ig); color: var(--white); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mir-ig-step__text { font-size: 14px; color: var(--mid); line-height: 1.5; padding-top: 3px; }
.mir-ig-caption { background: #f7f7f7; border: 1px solid #e0e0e0; padding: 16px 18px; margin-bottom: 20px; }
.mir-ig-caption__label { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lgrey); margin-bottom: 8px; }
.mir-ig-caption__text { font-size: 14px; color: var(--mid); line-height: 1.65; margin-bottom: 14px; }
.mir-ig-copy { display: inline-flex; align-items: center; gap: 6px; background: var(--black); color: var(--white); font-family: var(--font-primary); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; border: none; padding: 8px 14px; cursor: pointer; transition: background 0.2s; }
.mir-ig-copy:hover { background: #333; }
.mir-ig-copy.is-copied { background: #2a7a3b; }

.mir-lightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); z-index: 3000; align-items: center; justify-content: center; }
.mir-lightbox.is-open { display: flex; }
.mir-lightbox__box { position: relative; width: 88%; max-width: 860px; aspect-ratio: 16 / 9; background: #000; }
.mir-lightbox__box iframe { width: 100%; height: 100%; border: none; }
.mir-lightbox__close { position: absolute; top: -46px; right: 0; background: transparent; border: none; color: var(--white); font-size: 32px; cursor: pointer; line-height: 1; opacity: 0.8; transition: opacity 0.2s; }
.mir-lightbox__close:hover { opacity: 1; }

@media (max-width: 640px) { .mir-modal { padding: 40px 24px 32px; } .mir-modal__title { font-size: 22px; } }

/* =========================================================
   SCROLL REVEALS — content is hidden ONLY after JS marks a
   below-fold element with .mir-pre-reveal, so no-JS and
   above-fold content is always visible (never stuck hidden).
========================================================= */
.mir-reveal.mir-pre-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.mir-reveal.is-revealed { opacity: 1; transform: none; }
.mir-reveal-children.mir-pre-reveal > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.mir-reveal-children.is-revealed > * { opacity: 1; transform: none; }
.mir-reveal-children.is-revealed > *:nth-child(2) { transition-delay: 0.08s; }
.mir-reveal-children.is-revealed > *:nth-child(3) { transition-delay: 0.16s; }
.mir-reveal-children.is-revealed > *:nth-child(4) { transition-delay: 0.24s; }
.mir-reveal-children.is-revealed > *:nth-child(5) { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
	.mir-reveal.mir-pre-reveal, .mir-reveal-children.mir-pre-reveal > * { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   FOOTER  (footer.php) — three tonal bands
========================================================= */
.mir-footer__band { box-sizing: border-box; width: 100%; padding: 40px 32px; }
.mir-footer__band-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mir-footer__band--sponsors { background: #f5f5f5; }
.mir-footer__sponsors-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin: 0 0 4px; }
/* Rows stack: top (primary) row above, second (secondary) row below.
   48px spacing matches the comp — both between logos in a row and between the two rows. */
.mir-footer__sponsor-logos { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 48px; }
.mir-footer__sponsor-row { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
/* Logos are normalized by HEIGHT, so a wide wordmark renders far wider than a compact
   mark. An optional per-sponsor cap (--mir-sponsor-mw, set inline from Site Settings)
   limits width; object-fit keeps aspect ratio however the browser resolves height+max-width. */
.mir-footer__sponsor-logos img { width: auto; max-width: var(--mir-sponsor-mw, none); object-fit: contain; opacity: 0.75; transition: opacity 0.2s, transform 0.2s; }
/* Per-row heights come from Site Settings (CSS vars set on the container); fallbacks match the comp. */
.mir-footer__sponsor-row--primary img { height: var(--mir-sponsor-h-primary, 75px); }
.mir-footer__sponsor-row--secondary img { height: var(--mir-sponsor-h-secondary, 28px); }
.mir-footer__sponsor-logos img:hover { opacity: 1; transform: translateY(-2px); }
.mir-footer__band--brand { background: #eeeeee; }
/* Same lockup | divider | NRA cluster as the nav, so the pairing bookends the page
   and doesn't read as one more entry in the sponsor wall directly above. Run ~1.15x the
   nav's sizes: the sponsor logos above are 75px tall, and at the nav's scale the NRA mark
   sits under them. Scaled as a unit, not NRA alone, so the campaign lockup still leads. */
.mir-footer__brand-logos { display: flex; align-items: center; gap: 18px; }
.mir-footer__lockup { height: 23px; width: auto; display: block; }
.mir-footer__divider { width: 1px; height: 41px; background: rgba(0, 0, 0, 0.2); flex-shrink: 0; }
.mir-footer__nra { height: 47px; width: auto; display: block; }
.mir-footer__social { display: flex; justify-content: center; gap: 10px; margin: 0; }
.mir-footer__social a { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--white); background: var(--black); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s; }
.mir-footer__social a:hover { transform: scale(1.2); opacity: 0.8; }
.mir-footer__band--legal { background: #1a1a1a; padding: 16px 32px; }
.mir-footer__band--legal .mir-footer__band-inner { flex-direction: column; align-items: stretch; gap: 0; }
.mir-footer__media { font-size: 12px; color: rgba(255, 255, 255, 0.55); width: 100%; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 12px; margin: 0 0 12px; }
.mir-footer__media strong { color: rgba(255, 255, 255, 0.85); }
.mir-footer__media a { color: var(--white); text-decoration: underline; }
.mir-footer__legal-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 16px; width: 100%; }
.mir-footer__links { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.mir-footer__links a { font-size: 11px; color: var(--white); padding: 0 8px; border-right: 1px solid rgba(255, 255, 255, 0.2); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.mir-footer__links li:first-child a { padding-left: 0; }
.mir-footer__links li:last-child a { border-right: none; }
.mir-footer__links a:hover { opacity: 0.65; }
.mir-footer__copyright { font-size: 11px; color: var(--white); white-space: nowrap; flex-shrink: 0; margin: 0; }
@media (max-width: 960px) {
	/* Below ~930px the links + copyright can't share one line, so the horizontal
	   pipe row wraps into a ragged mess. Stack the links centered (no pipe dividers)
	   and let the copyright wrap, all the way down to mobile. */
	.mir-footer__legal-row { flex-direction: column; gap: 16px; }
	.mir-footer__links { flex-direction: column; align-items: center; gap: 12px; }
	.mir-footer__links a { border-right: none; padding: 0; }
	.mir-footer__copyright { white-space: normal; text-align: center; }
}

@media (max-width: 640px) {
	.mir-footer__brand-logos { gap: 14px; }
	.mir-footer__lockup { height: 18px; }
	.mir-footer__nra { height: 38px; }
	.mir-footer__divider { height: 33px; }
	.mir-footer__sponsor-logos { gap: 44px; }
	.mir-footer__sponsor-row { gap: 32px; }
	.mir-footer__sponsor-logos img { max-width: calc(var(--mir-sponsor-mw, 100vw) * 0.7); }
	.mir-footer__sponsor-row--primary img { height: calc(var(--mir-sponsor-h-primary, 75px) * 0.7); }
	.mir-footer__sponsor-row--secondary img { height: calc(var(--mir-sponsor-h-secondary, 28px) * 0.7); }
}

@media (max-width: 480px) {
	/* Cluster is 384px at the 640 tier; the band's 32px side padding leaves less than
	   that below ~448px, so step it down once more rather than let it overflow. */
	.mir-footer__brand-logos { gap: 8px; }
	.mir-footer__lockup { height: 13px; }
	.mir-footer__nra { height: 30px; }
	.mir-footer__divider { height: 25px; }
}