/* ==========================================================================
   MM Work Page — Much Much Media
   ========================================================================== */

.mmw-page {
	--mmw-ink: #1B1916;
	--mmw-ink-deep: #141210;
	--mmw-ink-deeper: #12100E;
	--mmw-cream: #FAF7F1;
	--mmw-card: #FFFDF8;
	--mmw-tint: #F4EFE7;
	--mmw-yellow: #fff626;
	--mmw-rust: #B3540F;
	--mmw-red: #E5484D;
	--mmw-coral: #ff4949;
	--mmw-body: #4A453E;
	--mmw-muted: #8F8B85;
	--mmw-radius: 16px;
	--mmw-max: 1240px;
	--mmw-pad-x: clamp(18px, 4vw, 44px);
	--mmw-pad-y: clamp(52px, 9vh, 110px);
	--mmw-ease: cubic-bezier(.2, .8, .25, 1);
	--mmw-sans: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mmw-serif: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mmw-mono: 'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mmw-heading: 'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	font-family: var(--mmw-sans);
	background: var(--mmw-cream);
	color: var(--mmw-ink);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
.mmw-page *, .mmw-page *::before, .mmw-page *::after { box-sizing: border-box; }
.mmw-page img, .mmw-page video { max-width: 100%; display: block; }
.mmw-page a { color: inherit; text-decoration: none; }

.mmw-wrap { max-width: var(--mmw-max); margin-inline: auto; position: relative; width: 100%; }
.mmw-wrap--full { max-width: none; }
.mmw-mono { font-family: 'Open Sauce One';font-size: 12px; letter-spacing: .2em; }
.mmw-mono--faint {
    /* opacity: .55; */
    letter-spacing: .16em;
    font-size: 12px;
    font-family: 'Open Sauce One';
    color: #fff626;
    font-weight: 800;
}
.mmw-accent {
    font-family: ui-sans-serif;
    font-style: italic;
    font-weight: 800;
    color: #ff4949;
    display: inline-block;
}
.mmw-mt { margin-top: clamp(28px, 4.5vh, 46px); }

/* ---------------------------------------------------------------- chrome */
.mmw-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70; background: rgba(27,25,22,.08); pointer-events: none; }
.mmw-progress i { display: block; height: 100%; width: 0; background: #fff626; transition: width .12s linear; }
.mmw-cursor { position: fixed; left: 0; top: 0; z-index: 100; width: 10px; height: 10px; border-radius: 50%; background: var(--mmw-ink); pointer-events: none; transform: translate(-50%,-50%); opacity: 0; transition: width .2s, height .2s, opacity .2s; }
.mmw-cursor-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: #fff626; color: var(--mmw-ink); font-weight: 800; font-size: 11px; letter-spacing: .12em; transform: translate(-50%,-50%) scale(0); transition: transform .3s var(--mmw-ease); box-shadow: 0 10px 30px -10px rgba(27,25,22,.35); }
@media (hover: none), (pointer: coarse), (max-width: 860px) { .mmw-hide-rm { display: none !important; } }

/* ---------------------------------------------------------------- buttons */
.mmw-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; font-family:'Open Sauce One'; }
.mmw-btn--yellow { background: #fff626; color: var(--mmw-ink)!important; }

/* Hero's own reveal is a one-time load-in fade (JS adds .mmw-hero-in on a
   short stagger after DOMContentLoaded) — deliberately NOT tied to scroll
   position, so it always plays immediately regardless of what's stacked
   above the hero (e.g. an optional Banner). Everything else uses the
   continuous scroll-linked reveal instead (inline style via JS). */
.mmw-hero [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--mmw-ease), transform .8s var(--mmw-ease); }
.mmw-hero [data-reveal].mmw-hero-in { opacity: 1; transform: none; }
.mmw-hero [data-sweep] { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--mmw-ease); }
.mmw-hero [data-sweep].mmw-hero-in { clip-path: inset(0 0% 0 0); }
@media (prefers-reduced-motion: reduce) { .mmw-hero [data-reveal], .mmw-hero [data-sweep] { transition: none; } }

/* ---------------------------------------------------------------- banner */
.mmw-banner { display: block; width: 100%; line-height: 0; position: relative; }
.mmw-banner-img { width: 100%; display: block;  object-fit: cover; object-position: center; }
a.mmw-banner { cursor: pointer; }
 

/* ------------------------------------------------------------------- hero */
.mmw-hero {
    position: relative;
    min-height: 40vh;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(104px, 7vh, 150px) clamp(20px, 4vw, 44px) clamp(90px, 7vh, 64px);
    overflow: hidden;
    background: var(--mmw-ink-deep);
    color: var(--mmw-cream);
}
a.mmw-card.is-in:hover {
    color: #ff4949;
}
.mmw-hero-media { position: absolute; inset: 0; background: radial-gradient(120% 80% at 68% 12%, rgba(255,232,26,.06), transparent 60%), var(--mmw-ink-deep); }
.mmw-hero-media img, .mmw-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mmw-hero-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(18,16,14,calc(var(--mmw-veil,.55) + .2)) 0%, rgba(18,16,14,var(--mmw-veil,.55)) 40%, rgba(18,16,14,calc(var(--mmw-veil,.55) * .35)) 100%); }
.mmw-hero-copy { position: relative; max-width: var(--mmw-max); margin-inline: auto; width: 100%; will-change: transform, opacity; }
.mmw-eyebrow-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mmw-rule { width: 34px; height: 1px; background: rgba(250,247,241,.35); display: inline-block; }
.mmw-hero-title {
    font-family: var(--mmw-heading);
    font-weight: 700;
    font-size: clamp(30px, 6.6vw, 110px);
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 18px 0 0;
    max-width: 25ch;
}
.mmw-hero-sub {
    font-size: clamp(14.5px, 1.5vw, 18px);
    line-height: 30px;
    color: rgba(250,247,241,.78);
    max-width: 54ch;
    margin: 18px 0 0;
    font-weight: 400;
    font-family: 'Open Sauce One';
}

/* --------------------------------------------------------------- sections */
.mmw-sec { position: relative; padding: var(--mmw-pad-y) var(--mmw-pad-x); overflow: hidden; }
.mmw-sec--cta { background: var(--mmw-ink-deeper); color: var(--mmw-cream); text-align: center; }
.mmw-seclabel { display: flex; align-items: center; gap: 16px; }
.mmw-seclabel span { font-family: var(--mmw-mono); font-size: clamp(11px, 1.4vw, 12px); font-weight: 800; letter-spacing: .24em; color: #ff4949; white-space: nowrap; }
.mmw-seclabel i { flex: 1; height: 1px; background: linear-gradient(to right, rgba(27,25,22,.16), transparent); }
.mmw-sec--cta .mmw-seclabel span { color: #fff626; }
.mmw-h2 { font-family: var(--mmw-heading); font-weight: 800; font-size: clamp(24px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -.03em; margin: 20px 0 0; max-width: 26ch; }
.mmw-h2--center { max-width: none; margin: 0; }
.mmw-empty { margin-top: 24px; color: var(--mmw-muted); font-size: 15px; }

/* ------------------------------------------------------------------ grid */
.mmw-grid { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .mmw-grid--cols-2, .mmw-grid--cols-3, .mmw-grid--cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .mmw-grid--cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .mmw-grid--cols-4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px) { .mmw-grid--cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.mmw-card { display: block; min-width: 0; }
.mmw-card-frame { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: var(--mmw-radius); overflow: hidden; background: var(--mmw-card); border: 1px solid rgba(27,25,22,.08); }
.mmw-card-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--mmw-ease); }
.mmw-card-ph { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, var(--mmw-tint) 0 14px, #E3DCD0 14px 28px); }
@media (hover: hover) { .mmw-card:hover .mmw-card-frame img { transform: scale(1.06); } }
.mmw-card-title { display: block; font-family: var(--mmw-heading); font-weight: 800; font-size: clamp(19px, 2.4vw, 26px); letter-spacing: -.02em; margin-top: 16px; }
.mmw-card-excerpt { display: block; font-size: 14px; line-height: 1.6; color: var(--mmw-muted); margin-top: 8px; max-width: 48ch; }

/* -------------------------------------------------------------------- CTA */
.mmw-cta-inner { max-width: 1030px; margin-inline: auto; position: relative; }
.mmw-cta-inner .mmw-h2 {
    font-size: clamp(26px, 5vw, 50px)!important;
    line-height: 70px;
}
.mmw-sec--cta .mmw-btn { margin-top: 28px; }
.mmw-cta-mail { margin-top: 16px; color: rgba(250,247,241,.5); letter-spacing: .12em; font-size: 11px; }

/* ----------------------------------------------------------------- reveal */
.mmw-page [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--mmw-ease), transform .7s var(--mmw-ease); }
.mmw-page [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.mmw-page *, .mmw-page *::before, .mmw-page *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	.mmw-page [data-reveal] { opacity: 1 !important; transform: none !important; }
	.mmw-cursor, .mmw-cursor-chip { display: none !important; }
}
.mmw-cta-mail.mmw-mono.is-in a {
    pointer-events: none;
}