/* ==========================================================================
   Much Much Media — Brand Work Case Study
   Ported 1:1 from the supplied design. Colors/fonts as CSS custom
   properties so future brand-work pages can reuse this stylesheet.
   ========================================================================== */

:root {
	--mmbw-cream:        #FAF7F1;
	--mmbw-ink:           #1B1916;
	--mmbw-near-black:    #141210;
	--mmbw-cta-black:     #161411;
	--mmbw-footer-black:  #12100E;
	--mmbw-beige:         #F4EFE7;
	--mmbw-beige-dark:    #EDE7DC;
	--mmbw-yellow:        #FFE81A;
	--mmbw-rust:          #B3540F;
	--mmbw-red:           #E5484D;
	--mmbw-coral:         #FF6B62;
	--mmbw-body-gray:     #4A453E;
	--mmbw-muted-gray:    #7E776B;

	--mmbw-font-body: 'Open Sauce One';
	--mmbw-font-mono: 'Open Sauce One';
	--mmbw-font-serif: ui-sans-serif;
	--mmbw-font-heading: 'Open Sauce One';

	--mmbw-card-white:    #FFFDF9;
	--mmbw-card-border:   rgba(27,25,22,0.10);
}

/* ---------- headings ---------- */
.mmbw-page h1, .mmbw-page h2, .mmbw-page h3, .mmbw-page h4,
.mmbw-hero-title,
.mmbw-context-headline,
.mmbw-metric-value,
.mmbw-scope-title,
.mmbw-related-name,
.mmbw-film-title,
.mmbw-cta-heading {
	font-family: var(--mmbw-font-heading);
}

/* ---------- reset / base ---------- */
.mmbw-page, .mmbw-page * { box-sizing: border-box; }
.mmbw-page { margin: 0; padding: 0; background: var(--mmbw-cream); color: var(--mmbw-ink); overflow-x: clip; }
.mmbw-page { font-family: var(--mmbw-font-body); -webkit-font-smoothing: antialiased; cursor: none; }
.mmbw-page ::selection { background: var(--mmbw-yellow); color: var(--mmbw-ink); }
.mmbw-page a { color: var(--mmbw-ink); text-decoration: none; }
.mmbw-page a:hover { color: var(--mmbw-rust); }
.mmbw-page button, .mmbw-page [data-cursor] { cursor: none; }
.mmbw-mono { font-family: 'open sauce one'; }
.mmbw-yellow { color: var(--mmbw-yellow); }
.mmbw-inner { max-width: 1240px; margin: 0 auto; }
.mmbw-inner--relative { position: relative; }
.mmbw-inner--narrow { max-width: 1030px; margin: 0 auto; position: relative; }
.mmbw-section { padding: clamp(60px, 10vh, 110px) clamp(20px, 4vw, 44px); }
.mmbw-empty-note { font-size: 13px; color: var(--mmbw-muted-gray); font-style: italic; }

/* reveal-on-scroll base state (JS toggles to visible) */
[data-reveal] { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.25,1); }

/* clip-path wipe-in, plays once on load/mount */
@keyframes mmbw-sweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
[data-sweep] { animation: mmbw-sweep 1.1s cubic-bezier(.2,.8,.25,1) .15s both; }

@keyframes mmbw-muchpulse { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-2.5deg) translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
	.mmbw-page { cursor: auto; }
	.mmbw-page button, .mmbw-page [data-cursor] { cursor: pointer; }
	[data-sweep] { animation: none !important; clip-path: none !important; }
	.mmbw-hide-rm { display: none !important; }
}
@media (max-width: 760px) {
	.mmbw-hide-rm { display: none !important; }
	.mmbw-page { cursor: auto; }
	.mmbw-page button, .mmbw-page [data-cursor] { cursor: pointer; }
}

/* ---------- custom cursor ---------- */
.mmbw-cur-dot {
	position: fixed; left: 0; top: 0; z-index: 100; width: 10px; height: 10px; border-radius: 50%;
	background: var(--mmbw-ink); pointer-events: none; transform: translate(-50%, -50%);
}
.mmbw-cur-chip {
	position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none; display: flex; align-items: center; justify-content: center;
	width: 84px; height: 84px; border-radius: 50%; background: var(--mmbw-yellow); color: var(--mmbw-ink);
	font-weight: 800; font-size: 12px; letter-spacing: 0.14em;
	transform: translate(-50%, -50%) scale(0);
	transition: transform .3s cubic-bezier(.2,.8,.25,1), background .3s;
	box-shadow: 0 10px 30px -10px rgba(27,25,22,0.35);
}

/* ---------- scroll progress ---------- */
.mmbw-progress-track { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: rgba(27,25,22,0.08); pointer-events: none; }
.mmbw-progress-fill { height: 100%; width: 0%; background: var(--mmbw-yellow); transition: width .12s linear; }

/* ---------- grain overlay ---------- */
.mmbw-grain {
	position: fixed; inset: 0; z-index: 68; pointer-events: none; opacity: 0.42; mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMyIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMTYiLz48L3N2Zz4=");
}

/* ---------- header / nav ---------- */

/* ---------- hero ---------- */
.mmbw-hero {
	position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end;
	padding: clamp(104px, 14vh, 150px) clamp(20px, 4vw, 44px) clamp(48px, 7vh, 64px); overflow: hidden; background: var(--mmbw-near-black);
}
.mmbw-hero-media {
	position: absolute; inset: 0; background: radial-gradient(120% 80% at 70% 10%, rgba(255,232,26,0.05), transparent 60%), var(--mmbw-near-black);
	background-size: cover; background-position: center;
}
.mmbw-hero-fade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,16,14,0.6) 0%, transparent 60%); pointer-events: none; }
.mmbw-hero-video-wrap { position: absolute; inset: 0; z-index: 5; background: #000; }
.mmbw-hero-video-wrap[hidden] { display: none; }
.mmbw-hero-video-stage, .mmbw-hero-video-stage iframe, .mmbw-hero-video-stage video {
	position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
	max-width: none !important; max-height: none !important; border: 0 !important; object-fit: contain; background: #000;
}

/* Autoplay-in-the-background mode: the iframe is scaled to cover the hero
   (16:9 sources never letterbox) and stays click-through. */
.mmbw-hero-bgvideo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.mmbw-hero-bgvideo.is-playing { opacity: 1; }
.mmbw-hero-bgvideo iframe {
	position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
	width: 100vw !important; height: 56.25vw !important; min-height: 100% !important; min-width: 177.78vh !important;
	max-width: none !important; max-height: none !important; border: 0 !important; pointer-events: none;
}
.mmbw-hero-bgvideo video {
	position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
	max-width: none !important; max-height: none !important; object-fit: cover;
}
button.mmbw-film-thumb {
    border: unset;
}
.mmbw-hero-bgvideo::after { content: ''; position: absolute; inset: 0; background: rgba(18,16,14,0.35); }
.mmbw-hero-video-close {
	position: absolute; top: 20px; right: 20px; z-index: 6; width: 40px; height: 40px; border-radius: 50%;
	background: rgba(18,16,14,0.7); color: var(--mmbw-cream); border: 1px solid rgba(250,247,241,0.3);
	font-size: 16px; line-height: 1; cursor: pointer;
}
.mmbw-hero-copy { position: relative; max-width: 1240px; margin: 0 auto; width: 100%; color: var(--mmbw-cream); }
.mmbw-hero-eyebrow-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mmbw-hero-eyebrow-row .mmbw-mono { font-size: 12px; letter-spacing: 0.24em; color: rgba(250,247,241,0.6); }
.mmbw-eyebrow-line {
    width: 34px;
    height: 1px;
    background: rgba(250,247,241,0.35);
    display: none;
}
.mmbw-hero-brands {
    display: flex;
    align-items: center;
    gap: clamp(0px, 1vw, 0px);
    flex-wrap: wrap;
    margin-top: 26px;
}
.mmbw-brand-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(64px, 7vw, 65px);
    min-width: clamp(50px, 1vw, 60px);
    padding: 0 clamp(0px, 0vw, 0px);
    border: 1px solid rgba(250,247,241,0.22);
    border-radius: 14px;
    background: rgba(250,247,241,0.05);
}
button.mmbw-film-watch {
    margin-top: 15px;
    display:none;
}
.mmbw-brand-box img { max-height: 100%; max-width: 100%; object-fit: contain; }
.mmbw-brand-placeholder { font-family: var(--mmbw-font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(250,247,241,0.5); text-align: center; line-height: 1.5; }
.mmbw-x {
    font-weight: 300;
    font-size: clamp(20px, 4vw, 18px);
    line-height: 1;
    color: rgba(250,247,241,0.4);
}
.mmbw-hero-title {
    font-weight: 700;
    font-size: clamp(42px, 11vw, 101px);
    letter-spacing: -0.04em;
    margin: 24px 0 8px;
    line-height: 120px;
}
.mmbw-scroll-hint {
	display:none;
}

/* ---------- eyebrow rows (shared by content sections) ---------- */
.mmbw-eyebrow-row { display: flex; align-items: baseline; gap: 18px; }
.mmbw-eyebrow-row .mmbw-mono { font-size: 12px; font-weight: 800; letter-spacing: 0.26em; }
.mmbw-eyebrow--rust { color: #ff4949; }
.mmbw-eyebrow--yellow { color: #fff626; }
.mmbw-eyebrow-line--dark { flex: 1; height: 1px; background: linear-gradient(to right, rgba(27,25,22,0.16), transparent); }
.mmbw-eyebrow-line--light { flex: 1; height: 1px; background: linear-gradient(to right, rgba(250,247,241,0.2), transparent); }

/* ---------- in collaboration with ---------- */
.mmbw-section--collab { background: var(--mmbw-cream); }
.mmbw-collab-grid { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 22px); margin-top: 32px; }
.mmbw-collab-card {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: clamp(150px, 17vw, 210px); height: clamp(92px, 9vw, 124px);
	padding: clamp(14px, 1.8vw, 22px); border-radius: 18px;
	background: var(--mmbw-card-white); border: 1px solid var(--mmbw-card-border);
	transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s;
}
.mmbw-collab-card:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -24px rgba(27,25,22,0.28); }
.mmbw-collab-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 600px) {
	.mmbw-collab-card { width: calc(50% - 7px); height: clamp(84px, 22vw, 104px); }
}

/* ---------- the film ---------- */
.mmbw-section--film { background: var(--mmbw-beige); }
.mmbw-video-embed { margin-top: 38px; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(27,25,22,0.3); }
.mmbw-video-embed iframe { width: 100%; aspect-ratio: 16/9; display: block; }
.mmbw-video-placeholder {
	margin-top: 38px; border-radius: 18px; overflow: hidden; position: relative; aspect-ratio: 16/9;
	background: var(--mmbw-beige-dark); box-shadow: 0 30px 60px -28px rgba(27,25,22,0.3); cursor: pointer;
}
.mmbw-video-pattern {
	position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #211f1c 0 18px, #1a1815 18px 36px);
	transition: transform .7s cubic-bezier(.2,.8,.25,1);
}
.mmbw-video-placeholder:hover .mmbw-video-pattern { transform: scale(1.08); }
.mmbw-video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.mmbw-play-circle {
	width: 88px; height: 88px; border-radius: 50%; border: 1px solid rgba(250,247,241,0.35); background: rgba(250,247,241,0.1);
	display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--mmbw-cream);
}
.mmbw-video-caption { font-size: 10px; letter-spacing: 0.34em; color: rgba(250,247,241,0.5); text-align: center; padding: 0 20px; }
.mmbw-video-badge {
	position: absolute; left: 16px; top: 15px; font-size: 9.5px; letter-spacing: 0.14em; background: var(--mmbw-ink);
	color: var(--mmbw-yellow); padding: 5px 11px; border-radius: 5px;
}

/* Hero reuses the same play icon + caption as the Film placeholder above */
.mmbw-hero-video-icon { z-index: 4; pointer-events: none; }
.mmbw-hero-video-icon .mmbw-play-circle { transition: transform .3s cubic-bezier(.2,.8,.25,1); }
#sec-hero:hover .mmbw-hero-video-icon .mmbw-play-circle { transform: scale(1.08); }
.mmbw-hero-video-icon[hidden] { display: none; }

/* ---------- brand context ---------- */
.mmbw-section--context { background: var(--mmbw-cream); position: relative; overflow: hidden; }
.mmbw-watermark {
	position: absolute; left: auto; right: -2%; top: 6%; font-weight: 800; font-size: clamp(90px, 14vw, 200px); line-height: 1;
	color: rgba(27,25,22,0.03); letter-spacing: -0.06em; pointer-events: none; user-select: none;
}
section.mmbw-section.mmbw-section--context .mmbw-context-headline .mmbw-accent {
    font-size: 48px;
    line-height: 64px;
}
.mmbw-watermark--light { right: auto; left: -3%; top: auto; bottom: -6%; font-size: clamp(90px, 15vw, 220px); color: rgba(250,247,241,0.03); }
.mmbw-context-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 60px); margin-top: 30px; align-items: start; }
.mmbw-context-headline { font-weight: 800; font-size: clamp(28px, 4vw, 48px); line-height: 1.34; letter-spacing: -0.03em; margin: 0; }
.mmbw-highlight {
	background: var(--mmbw-yellow); box-shadow: 0.28em 0 0 var(--mmbw-yellow), -0.28em 0 0 var(--mmbw-yellow);
	box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.mmbw-accent {
    font-family: ui-sans-serif;
    font-style: italic;
    font-weight: 800;
    display: inline-block;
}
.mmbw-context-headline .mmbw-accent { color: #ff4949; }
.mmbw-context-body p { font-size: 15.5px; line-height: 1.7; color: var(--mmbw-body-gray); margin: 0; }
.mmbw-context-body p + p { margin-top: 18px; }

/* ---------- impact ---------- */
.mmbw-section--impact { background: var(--mmbw-near-black); color: var(--mmbw-cream); position: relative; overflow: hidden; }
.mmbw-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin-top: 46px; border-top: 1px solid rgba(250,247,241,0.16); }
.mmbw-metric-tile { padding: 26px clamp(14px, 2vw, 26px) 26px 0; border-right: 1px solid rgba(250,247,241,0.12); transition: background .3s; }
.mmbw-metric-tile:hover { background: rgba(250,247,241,0.03); }
.mmbw-metric-value {
    font-weight: 800;
    font-size: clamp(36px, 4.7vw, 72px);
    line-height: 72px;
    letter-spacing: -0.04em;
}
.mmbw-metric-label { font-size: 13px; color: rgba(250,247,241,0.6); margin-top: 9px; }

/* ---------- scope of work ---------- */
.mmbw-section--scope { background: var(--mmbw-beige); }
.mmbw-scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 3vw, 34px); margin-top: 44px; }
.mmbw-scope-col { padding: 24px; border-radius: 16px; background: var(--mmbw-cream); }
.mmbw-scope-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px solid var(--mmbw-ink); }
.mmbw-scope-letter {
	width: 38px; height: 38px; border-radius: 50%; background: var(--mmbw-yellow); display: flex; align-items: center;
	justify-content: center; font-weight: 800; font-size: 14px; flex: none;
}
.mmbw-scope-title { font-weight: 800; font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.015em; line-height: 1.15; }
.mmbw-scope-items { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.mmbw-scope-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--mmbw-body-gray); }
.mmbw-check { color: var(--mmbw-red); flex: none; font-weight: 700; }

/* ---------- related brand work ---------- */
.mmbw-section--related { background: var(--mmbw-cream); }
.mmbw-related-list { margin-top: 10px; }
.mmbw-related-row {
	display: flex; align-items: baseline; gap: clamp(12px, 2vw, 26px); padding: 18px 0; border-bottom: 1px solid rgba(27,25,22,0.1);
	flex-wrap: wrap;
}
.mmbw-related-name {
	font-weight: 800; font-size: clamp(24px, 4.4vw, 40px); letter-spacing: -0.03em; color: var(--mmbw-muted-gray);
	transition: color .3s, transform .35s cubic-bezier(.2,.8,.25,1); display: inline-block;
}
.mmbw-related-arrow { margin-left: auto; font-size: 16px; color: var(--mmbw-red); }
.mmbw-related-row:hover .mmbw-related-name { color: var(--mmbw-ink); transform: translateX(14px); }

/* ---------- final cta ---------- */
.mmbw-section--cta { background: var(--mmbw-cta-black); color: var(--mmbw-cream); text-align: center; position: relative; overflow: hidden; }
.mmbw-cta-heading { font-weight: 700; font-size: clamp(30px, 5vw, 50px); line-height: 70px; letter-spacing: -0.035em; margin: 0; }
.mmbw-cta-heading .mmbw-accent { color:#ff4949;  }
.mmbw-cta-btn {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; padding: 16px 34px; border-radius: 999px;
	background: var(--mmbw-yellow); color: var(--mmbw-ink); font-weight: 700; font-size: 15px; transition: transform .2s ease-out;
}
.mmbw-cta-email { font-size: 11px; letter-spacing: 0.12em; color: rgba(250,247,241,0.45); margin-top: 20px; }

/* ---------- oEmbed responsiveness ---------- */
.mmbw-video-embed .wp-embed-responsive .wp-has-aspect-ratio { border-radius: 18px; }
.mmbw-video-embed > iframe { width: 100% !important; max-width: 100% !important; aspect-ratio: 16/9; height: auto !important; display: block; border: 0 !important; }
.mmbw-video-embed + .mmbw-video-embed { margin-top: clamp(26px, 4vw, 44px); }

/* ---------- the film: full-width caption ---------- */
.mmbw-film-caption { margin-top: 18px; max-width: 760px; }
.mmbw-film-caption .mmbw-film-title { margin: 0; }
.mmbw-film-caption .mmbw-film-text { margin-top: 8px; }

/* ---------- the film: video card grid ---------- */
.mmbw-film-grid {
	display: grid; gap: clamp(16px, 1.8vw, 24px); margin-top: 40px;
	grid-template-columns: repeat(var(--mmbw-film-cols, 4), minmax(0, 1fr));
}
.mmbw-film-grid[data-cols="2"] { --mmbw-film-cols: 2; }
.mmbw-film-grid[data-cols="3"] { --mmbw-film-cols: 3; }
.mmbw-film-grid[data-cols="4"] { --mmbw-film-cols: 4; }

.mmbw-film-card {
	display: flex; flex-direction: column; background: var(--mmbw-card-white); border: 1px solid var(--mmbw-card-border);
	border-radius: 16px; padding: 14px 14px 18px; transition: transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s;
}
.mmbw-film-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(27,25,22,0.4); }

.mmbw-film-thumb {
	position: relative; display: block; width: 100%; aspect-ratio: 16/10; border: 0; padding: 0; margin: 0;
	border-radius: 10px; overflow: hidden; background-color: var(--mmbw-beige-dark);
	background-size: cover; background-position: center; cursor: pointer;
}
.mmbw-film-thumb--pattern {
	background-image: repeating-linear-gradient(45deg, #EFE9DE 0 14px, #E6DFD2 14px 28px);
}
.mmbw-film-tag {
	position: absolute; left: 10px; top: 10px; z-index: 2; background: var(--mmbw-ink); color: var(--mmbw-yellow);
	font-size: 9.5px; letter-spacing: 0.14em; padding: 5px 9px; border-radius: 5px; text-transform: uppercase;
}
.mmbw-film-meta {
	position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(27,25,22,0.72); color: var(--mmbw-cream);
	font-size: 9px; letter-spacing: 0.14em; padding: 4px 9px; border-radius: 5px; text-transform: uppercase;
}
.mmbw-film-thumb-play {
	position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
	font-size: 22px; color: var(--mmbw-cream); background: rgba(18,16,14,0.28);
	opacity: 0; transition: opacity .3s ease;
}
.mmbw-film-thumb:hover .mmbw-film-thumb-play,
.mmbw-film-thumb:focus-visible .mmbw-film-thumb-play { opacity: 1; }

.mmbw-film-title { font-weight: 700; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.25; letter-spacing: -0.02em; margin: 16px 0 0; }
.mmbw-film-text { font-size: 14px; line-height: 1.55; color: var(--mmbw-body-gray); margin: 8px 0 16px; }
.mmbw-film-watch {
	align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--mmbw-ink); background: transparent;
	font-family: var(--mmbw-font-body); font-weight: 600; font-size: 13.5px; color: var(--mmbw-ink);
	cursor: pointer; transition: background .25s, color .25s;
}
.mmbw-film-watch:hover { background: var(--mmbw-ink); color: var(--mmbw-cream); }
.mmbw-film-watch span { font-size: 10px; }

/* ---------- video lightbox ---------- */
.mmbw-lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 4vw, 40px); }
.mmbw-lightbox[hidden] { display: none; }
.mmbw-lightbox-backdrop { position: absolute; inset: 0; background: rgba(12,10,9,0.9); backdrop-filter: blur(3px); cursor: pointer; }
.mmbw-lightbox-inner { position: relative; width: min(1100px, 100%); }
.mmbw-lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.mmbw-lightbox-title { font-size: 11px; letter-spacing: 0.18em; color: rgba(250,247,241,0.72); text-transform: uppercase; }
.mmbw-lightbox-close {
	width: 38px; height: 38px; flex: none; border-radius: 50%; background: rgba(250,247,241,0.1); color: var(--mmbw-cream);
	border: 1px solid rgba(250,247,241,0.3); font-size: 15px; line-height: 1; cursor: pointer;
}
.mmbw-lightbox-close:hover { background: var(--mmbw-yellow); color: var(--mmbw-ink); }
.mmbw-lightbox-stage { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 14px; overflow: hidden; }
.mmbw-lightbox-stage iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; border: 0 !important; }
body.mmbw-noscroll { overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.mmbw-film-grid[data-cols="3"], .mmbw-film-grid[data-cols="4"] { --mmbw-film-cols: 2; }
}
@media (max-width: 600px) {
	.mmbw-film-grid { --mmbw-film-cols: 1 !important; gap: 18px; }
	.mmbw-film-card { padding: 12px 12px 16px; }
	.mmbw-film-thumb { aspect-ratio: 16/9; }
	.mmbw-film-title { font-size: 18px; }
	.mmbw-film-watch { width: 100%; justify-content: center; }
	.mmbw-lightbox { padding: 12px; align-items: flex-start; padding-top: 64px; }
	.mmbw-lightbox-head { margin-bottom: 8px; }
	/* Tall screens: a 16:9 background iframe covers by height instead. */
	.mmbw-hero-bgvideo iframe { width: 177.78vh; height: 100vh; min-width: 100%; }
}
@media (max-width: 760px) {
	.mmbw-hero-video-close { top: 12px; right: 12px; }
}