/* ==========================================================================
   MM Live Page — Much Much Media
   Mobile-first. All colours come from the ACF palette via --mm-* vars.
   ========================================================================== */

.mm-live {
	--mm-serif: ui-sans-serif;
	--mm-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--mm-sans: 'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mm-font-heading: 'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mm-pad-x: clamp(18px, 4vw, 44px);
	--mm-pad-y: clamp(52px, 9vh, 110px);
	--mm-ease: cubic-bezier(.2, .8, .25, 1);

	font-family: var(--mm-sans);
	background: var(--mm-bg);
	color: var(--mm-ink);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

/* Headings use Open Sauce One — font-family only, deliberately not touching
   line-height here: each heading class already sets its own tight
   line-height, and overriding it at this level clipped ascenders/descenders. */
.mm-live h1,
.mm-live h2,
.mm-live h3,
.mm-live h4,
.mm-live h5,
.mm-live h6 {
	font-family: var(--mm-font-heading);
}

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

.mm-live img,
.mm-live video { max-width: 100%; display: block; }

.mm-live a { color: inherit; text-decoration: none; }

.mm-wrap {
	max-width: var(--mm-max);
	margin-inline: auto;
	position: relative;
	width: 100%;
}

.mm-mono {
    font-family: 'Open Sauce One';
    font-size: 11px;
    letter-spacing: .2em;
}

.mm-mono--faint {
 
    letter-spacing: .16em;
    font-size: 12px;
    font-family: 'Open Sauce One';
    color: #fff626;
    font-weight: 800;
}
.mm-italic {
    font-family: var(--mm-serif);
    font-style: italic;
    font-weight: 700;
    color: #ff4949;
    display: inline-block;

}
h2.mm-h2.mm-h2--center.is-in .mm-italic {
    font-family: var(--mm-serif);
    font-style: italic;
    font-weight: 700;
    color: #ff4949;
    display: inline-block;
    font-size: 55px;
}
h2.mm-h2.is-in .mm-italic {
    font-family: var(--mm-serif);
    font-style: italic;
    font-weight: 700;
    color: #ff4949;
    display: inline-block;
    font-size: 45px;
}
.mm-mt { margin-top: clamp(40px, 4.5vh, 46px); }
.mm-mt-sm { margin-top: 24px; }

/* ---------------------------------------------------------------- chrome */
.mm-progress {
	position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70;
	background: rgba(27, 25, 22, .08); pointer-events: none;
}
.mm-progress i { display: block; height: 100%; width: 0; background: var(--mm-yellow); transition: width .12s linear; }

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

.mm-cursor {
	position: fixed; left: 0; top: 0; z-index: 100; width: 10px; height: 10px;
	border-radius: 50%; background: var(--mm-ink); pointer-events: none;
	transform: translate(-50%, -50%); opacity: 0;
	transition: width .2s, height .2s, opacity .2s;
}


/* Touch / small screens: no custom cursor, no grain. */
@media (hover: none), (pointer: coarse), (max-width: 860px) {
	.mm-desk-only { display: none !important; }
}

/* ---------------------------------------------------------------- buttons */
.mm-btn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 15px 30px; border-radius: 999px;
	font-weight: 700; font-size: 15px; line-height: 1;
	transition: transform .2s ease-out, background .25s, color .25s;
	will-change: transform;
}
.mm-btn--sm { padding: 11px 22px; font-size: 13px; }
.mm-btn--yellow { background: #fff626; color: var(--mm-ink)!important; }
.mm-btn--dark { background: var(--mm-ink); color: var(--mm-cream); }
.mm-btn--ghost {
	padding: 10px 20px; font-size: 13px;
	border: 1.5px solid currentColor; white-space: nowrap;
}
@media (max-width: 520px) {
	.mm-btn--ghost { padding: 8px 14px; font-size: 12px; }
}

/* ---------------------------------------------------------------- banner */
.mm-banner { display: block; width: 100%; line-height: 0; position: relative; }
.mm-banner__img {
	width: 100%; display: block;
	/*aspect-ratio: 19 / 6;  ~1900x600 */
	object-fit: cover; object-position: center;
}
 

/* ------------------------------------------------------------------- hero */
.mm-hero {
	position: relative; min-height: 100vh; min-height: 92svh;
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(96px, 14vh, 150px) var(--mm-pad-x) clamp(56px, 8vh, 72px);
	overflow: hidden; background: var(--mm-dark); color: var(--mm-cream);
}
.mm-hero__media {
	position: absolute; inset: 0;
	background: radial-gradient(120% 80% at 68% 12%, rgba(255, 232, 26, .06), transparent 60%), var(--mm-dark);
	will-change: transform;
}
.mm-hero__media img,
.mm-hero__media video,
.mm-hero__embed iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	border: 0;
}
.mm-hero__embed { position: absolute; inset: 0; }
.mm-hero__embed iframe { pointer-events: none; }
.mm-hero__veil {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(18, 16, 14, calc(var(--mm-veil, .55) + .2)) 0%, rgba(18, 16, 14, var(--mm-veil, .55)) 40%, rgba(18, 16, 14, calc(var(--mm-veil, .55) * .35)) 100%);
}
.mm-hero__copy {
	position: relative; max-width: var(--mm-max); margin-inline: auto;
	width: 100%; will-change: transform, opacity;
}
.mm-hero__eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mm-rule { width: 34px; height: 1px; background: rgba(250, 247, 241, .35); display: inline-block; }
.mm-dot {
	width: 8px; height: 8px; border-radius: 50%; background: var(--mm-coral);
	animation: mm-livedot 1.8s ease-in-out infinite;
}
@keyframes mm-livedot {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.45); opacity: .55; }
}
span.mm-fmt__copy:hover {
    color: #ff4949!important;
    font-weight: 600;
}

.mm-h1 {
    font-weight: 700;
    font-size: clamp(34px, 8vw, 101px);
    line-height: 103px;
    letter-spacing: -.04em;
    margin: 20px 0 0;
    max-width: 18ch;
}
 

.mm-hero__intro {
	font-size: clamp(14.5px, 1.5vw, 18px); line-height:30px;
	color: rgba(250, 247, 241, .78); max-width: 56ch; margin: 20px 0 0;
}
.mm-hero .mm-btn--yellow { margin-top: clamp(26px, 4vh, 42px); }

.mm-scrollhint {
	display:none;
}
.mm-scrollhint span { color: var(--mm-yellow); }
@media (max-width: 600px) { .mm-scrollhint { display: none; } }
*
/* --------------------------------------------------------------- sections */
.mm-sec {
	position: relative;
	padding: var(--mm-pad-y) var(--mm-pad-x);
	overflow: hidden;
}
.mm-sec--alt { background: var(--mm-bg-alt); }
.mm-sec--dark { background: var(--mm-dark); color: var(--mm-cream); }

.mm-seclabel { display: flex; align-items: center; gap: 16px; }
.mm-seclabel span {
    font-family: 'Open Sauce One';
    font-size: clamp(11px, 1.4vw, 12px);
    font-weight: 800;
    letter-spacing: .24em;
    color: #ff4949;
    white-space: nowrap;
}
.mm-seclabel i { flex: 1; height: 1px; background: linear-gradient(to right, rgba(27, 25, 22, .16), transparent); }
.mm-seclabel.is-dark span {
    color: #fff626;
}
.mm-seclabel.is-dark i { background: linear-gradient(to right, rgba(250, 247, 241, .2), transparent); }

.mm-h2 {
	font-weight: 800; font-size: clamp(26px, 4.6vw, 40px); line-height: 1.05;
	letter-spacing: -.035em; margin: 30px 0 0; max-width: 24ch;
}
.mm-h2--center { max-width: none; margin: 0; }
.mm-h3 {
	font-weight: 800; font-size: clamp(21px, 2.6vw, 30px); line-height: 1.1;
	letter-spacing: -.03em; margin: 18px 0 0;
}
.mm-h3--lg { font-size: clamp(24px, 3.8vw, 40px); line-height: 1.03; margin-top: 12px; }
.mm-body {
	font-size: clamp(14px, 1.3vw, 15.5px); line-height: 1.7;
	color: var(--mm-muted); margin: 12px 0 0; max-width: 100ch;
}
.mm-sec--dark .mm-body { color: rgba(250, 247, 241, .7); }
.mm-kicker {
    color: #ff4949;
    font-family: 'Open Sauce One';
    font-size: 12px;
    letter-spacing: .2em;
    font-weight: 700;
}
.mm-empty { margin-top: 28px; color: rgba(250, 247, 241, .6); font-size: 15px; }

.mm-headrow {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 14px; flex-wrap: wrap; margin-top: 18px;
}
.mm-headrow .mm-h2 { margin: 0; }

.mm-wm {
	position: absolute; font-weight: 800; font-size: clamp(90px, 14vw, 200px);
	line-height: 1; letter-spacing: -.06em; pointer-events: none; user-select: none;
	color: rgba(27, 25, 22, .028); z-index: 0;
}
.mm-wm--right { right: -1%; top: 4%; }
.mm-wm--left { left: -2%; bottom: 2%; }
.mm-sec--dark .mm-wm { color: rgba(250, 247, 241, .03); }
@media (max-width: 720px) { .mm-wm { display: none; } }

/* ------------------------------------------------------------------ grids */
.mm-grid { display: grid; gap: clamp(18px, 3vw, 28px); }
.mm-grid--2 { grid-template-columns: 1fr; }
.mm-grid--3 { grid-template-columns: 1fr; }

@media (min-width: 680px) {
	.mm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.mm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 4vw, 54px); }
	.mm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ media frame */
.mm-frame {
	position: relative; aspect-ratio: 16 / 11; border-radius: var(--mm-radius);
	overflow: hidden; background: #EDE7DC; border: 1px solid rgba(27, 25, 22, .08);
}
.mm-frame__img,
.mm-frame__ph {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .7s var(--mm-ease);
}
.mm-frame__ph { background: repeating-linear-gradient(45deg, #EDE7DC 0 14px, #E3DCD0 14px 28px); }
.mm-frame__badge {
    display:none;
}
@media (hover: hover) {
	.mm-frame:hover .mm-frame__img,
	.mm-frame:hover .mm-frame__ph { transform: scale(1.06); }
}

.mm-strand { display: block; min-width: 0; }

/* ---------------------------------------------------------------- formats */
.mm-formats { display: block; }
.mm-fmt {
	display: grid; grid-template-columns: 34px 1fr; gap: 12px;
	align-items: baseline; padding: 18px 0;
	border-top: 1px solid rgba(27, 25, 22, .12);
	transition: padding-left .35s var(--mm-ease);
}
.mm-fmt__num { font-size: 11px; color: var(--mm-muted); letter-spacing: .1em; }
.mm-fmt__body {
	min-width: 0; display: inline-grid; align-items: baseline;
	gap: clamp(0px, 0vw, 26px); flex-wrap: wrap;
}
.mm-fmt__name {
	font-weight: 800; font-size: clamp(20px, 3.6vw, 40px); letter-spacing: -.03em;
	color: #7E776B; transition: color .3s, transform .35s var(--mm-ease);
	display: inline-block;
}
.mm-fmt__side { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
.mm-fmt__copy {
	font-size: 14px; line-height: 1.55; color: var(--mm-muted);
	transition: color .3s; max-width: 55ch;
}
.mm-fmt__end { border-top: 1px solid rgba(27, 25, 22, .12); }
.mm-fmt__tag { display: none; }
@media (hover: hover) {
	.mm-fmt:hover { padding-left: 14px; }
	.mm-fmt:hover .mm-fmt__name { color: var(--mm-ink); transform: translateX(6px); }
.mm-fmt:hover .mm-fmt__copy {
    color: #ff4949;
    font-weight: 700;
    font-size: 12px;
}
	.mm-fmt:hover .mm-fmt__tag { opacity: 1; transform: translateX(0); }
}
@media (min-width: 900px) {
	.mm-fmt { grid-template-columns: 44px 1fr auto; gap: 28px; align-items: center; }
	.mm-fmt__side {
		grid-column: auto; justify-self: end; justify-content: flex-end;
		text-align: right; max-width: 320px;
	}
	.mm-fmt__copy {
		max-width: 260px; text-align: right;
		opacity: 0; transform: translateX(10px);
		transition: opacity .35s var(--mm-ease), transform .35s var(--mm-ease), color .3s;
	}
	.mm-fmt:hover .mm-fmt__copy { opacity: 1; transform: translateX(0); }
	.mm-fmt__tag {
		display: inline-block; align-self: center;
		font-size: 11px; font-weight: 800; letter-spacing: .18em;
		color: #ff4949; text-transform: uppercase; white-space: nowrap;
		opacity: 0; transform: translateX(8px);
		transition: opacity .35s var(--mm-ease), transform .35s var(--mm-ease);
	}
}

/* --------------------------------------------------------------- featured */
.mm-feature {
	display: grid; grid-template-columns: 1fr; gap: clamp(22px, 4vw, 54px);
	align-items: center; margin-top: clamp(30px, 6vh, 74px);
}
.mm-feature__media,
.mm-feature__text { min-width: 0; }
@media (min-width: 900px) {
	.mm-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mm-feature.is-flipped .mm-feature__media { order: 2; }
	.mm-feature.is-flipped .mm-feature__text { order: 1; }
}
.mm-feature .mm-btn { margin-top: 26px; }

.mm-brands {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 15px 15px; margin-top: 14px; align-items: center;
}
.mm-brand {
	min-height: 52px; display: flex; align-items: center; justify-content: flex-start;margin:0 auto;
	text-align: center; padding: 0px; font-weight: 700; font-size: 14px;
	color: #8F8B85; filter: grayscale(1); transition: all .3s ease;
}
.mm-brand img { max-height: 40px; width: auto; object-fit: contain; }
@media (hover: hover) {
	.mm-brand:hover { color: var(--mm-ink); filter: grayscale(0); transform: scale(1.06); }
}

/* ---------------------------------------------------------------- metrics */
.mm-metrics {
	display: grid; gap: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mm-metrics--sm { margin-top: 24px; border-top: 1px solid rgba(27, 25, 22, .14); }
 
@media (min-width: 680px) {
	.mm-metrics--sm { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
	.mm-metrics--lg { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.mm-metric { min-width: 0; padding: 18px 0px 0 0; text-align:center;}
.mm-metric--lg { padding: 24px 20px 0 0; }
.mm-metric__n {
	font-weight: 800; line-height: 1; letter-spacing: -.035em;
	font-size: clamp(24px, 4vw, 58px); color: var(--mm-ink);
	font-variant-numeric: tabular-nums;
}
.mm-metric--lg .mm-metric__n { font-size: clamp(34px, 5.4vw, 72px); letter-spacing: -.04em; }
.mm-metric__l { font-size: 12px; color: var(--mm-muted); margin-top: 7px; }
.mm-metric--lg .mm-metric__l { font-size: 13px; margin-top: 9px; }

/* ----------------------------------------------------------------- events */
.mm-event {
	min-width: 0; display: flex; flex-direction: column;
	background: rgba(250, 247, 241, .04);
	border: 1px solid rgba(250, 247, 241, .14);
	border-radius: var(--mm-radius); padding: 20px;
	transition: transform .35s var(--mm-ease), background .3s, border-color .3s;
}
@media (hover: hover) {
	.mm-event:hover {
		transform: translateY(-6px);
		background: rgba(250, 247, 241, .08);
		border-color: rgba(255, 232, 26, .5);
	}
	.mm-event:hover .mm-btn { transform: translateX(4px); }
}
.mm-event__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.mm-tag {
    font-family: 'Open Sauce One';
    font-size: 9px;
    letter-spacing: .14em;
    padding: 5px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}
.mm-tag--outline {
	border: 1px solid rgba(250, 247, 241, .24);
	color: rgba(250, 247, 241, .7); background: none;
}
.mm-event__name { font-weight: 800; font-size: 20px; letter-spacing: -.02em; margin: 16px 0 0; line-height: 1.2; }
.mm-event__format { color: var(--mm-yellow); margin-top: 9px; font-size: 10px; letter-spacing: .14em; }
.mm-event__desc { font-size: 13.5px; line-height: 1.6; color: rgba(250, 247, 241, .68); margin: 11px 0 0; }
.mm-event__meta {
	margin-top: 16px; padding-top: 13px;
	border-top: 1px solid rgba(250, 247, 241, .14);
	display: flex; flex-direction: column; gap: 7px;
	font-size: 12.5px; color: rgba(250, 247, 241, .78);
	flex: 1;
}
.mm-event__meta > div { display: flex; gap: 9px; align-items: flex-start; }
.mm-ico {
	width: 14px; height: 14px; flex: none; margin-top: 2px;
	fill: none; stroke: var(--mm-yellow); stroke-width: 1.9;
	stroke-linecap: round; stroke-linejoin: round;
}
.mm-event .mm-btn { align-self: flex-start; margin-top: 18px; }

/* ------------------------------------------------------------ testimonials */
.mm-quote {
	min-width: 0; margin: 0; display: flex; flex-direction: column;
	background: var(--mm-card); border: 1px solid rgba(27, 25, 22, .1);
	border-radius: var(--mm-radius); padding: 24px;
	transition: transform .35s var(--mm-ease), box-shadow .35s;
}
@media (hover: hover) {
	.mm-quote:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(27, 25, 22, .3); }
}
.mm-quote__mark { font-family: var(--mm-serif); font-style: italic; font-size: 44px; line-height: .6; color: var(--mm-red); }
.mm-quote blockquote { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: #3A3630; flex: 1; }
.mm-quote figcaption {
	margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(27, 25, 22, .1);
	display: flex; align-items: center; gap: 12px;
}
.mm-quote__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.mm-quote__name { display: block; font-weight: 700; font-size: 15px; }
.mm-quote__role { display: block; font-size: 12.5px; color: var(--mm-muted); margin-top: 3px; }

/* -------------------------------------------------------------------- CTA */
.mm-cta {
	background: var(--mm-darker); color: var(--mm-cream); text-align: center;
	padding: clamp(64px, 12vh, 130px) var(--mm-pad-x);
	position: relative; overflow: hidden;
}
.mm-cta__inner { max-width: 900px; margin-inline: auto; position: relative; }
.mm-cta__inner .mm-h2 {
    font-size: clamp(27px, 5vw, 50px)!important;
    font-weight: 700;
    line-height:70px;
}
.mm-cta .mm-btn { margin-top: 30px; }
.mm-cta__mail { margin-top: 18px; color: rgba(250, 247, 241, .5); letter-spacing: .12em; font-size: 11px; }

/* ----------------------------------------------------------------- reveal */
.mm-live [data-reveal] {
	opacity: 0; transform: translateY(26px);
	transition: opacity .7s var(--mm-ease), transform .7s var(--mm-ease);
}
.mm-live [data-reveal].is-in { opacity: 1; transform: none; }
.mm-live.no-js [data-reveal] { opacity: 1; transform: none; }

/* ------------------------------------------------- reduced motion / print */
@media (prefers-reduced-motion: reduce) {
	.mm-live *,
	.mm-live *::before,
	.mm-live *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.mm-live [data-reveal] { opacity: 1 !important; transform: none !important; }
	.mm-noise, .mm-cursor { display: none !important; }
}

@media print {
	.mm-header, .mm-noise, .mm-progress, .mm-cursor, .mm-scrollhint { display: none !important; }
	.mm-live { background: #fff; color: #000; }
}
@media(max-width:768px){
.mm-hero {
	position: relative;  min-height: 55svh!important;
 
}
}