/* massamedia: live palette without orange + gap logo + heart effects. GENERATED by _build/make_mono.py - do not edit, re-run it. */

/* from _lp/header-site-v1.css */
.foot .foot-wm:not(#_) { -webkit-mask: url(/_lp/massamedia-gap-v1.svg) center / contain no-repeat; mask: url(/_lp/massamedia-gap-v1.svg) center / contain no-repeat; }

/* from _lp/info-foot-v1.css */
.mm-info-foot .mif-wm:not(#_) { -webkit-mask: url(/_lp/massamedia-gap-v1.svg) center / contain no-repeat; mask: url(/_lp/massamedia-gap-v1.svg) center / contain no-repeat; }

/* ---- from _build/mono_extra.css ---- */
/* Hand-written part of /_lp/mono-v1.css (appended by _build/make_mono.py). No colour is changed: the palette is exactly the live one (Danny, 12 Nov 2026). */

/* ---- logo: the gap version everywhere ---- */
.mm-wm:not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: currentColor !important; clip-path: none !important;
  -webkit-mask: url(/_lp/massamedia-gap-v1.svg) center / contain no-repeat !important; mask: url(/_lp/massamedia-gap-v1.svg) center / contain no-repeat !important; }
/* the script wordmark used as a picture over the big headlines and in the footer: same colour as live, gap shape */
img[src$="/svg/massamedia.svg"] { content: url(/_lp/massamedia-gap-live-v1.svg); }

/* ---- (brand tiles and the Let's connect panel keep their live colours: Danny, 12 Nov 2026, "go back to the live colours, only remove the yellow") ---- */
/* the corner Start a project button steps aside while a panel or the menu is open (it sat on top of the panel's links) */
html.lenis-stopped .mm-sticky:not(#_) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* ---- heart effects (/_lp/heartfx-v1.js) ---- */
canvas.mmfx-fluid { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 340; mix-blend-mode: screen; opacity: .85; }
canvas.mmfx-heart { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
html.mmfx-has-heart body > main, html.mmfx-has-heart body > footer, html.mmfx-has-heart body > header { position: relative; z-index: 1; }
html.mmfx-has-heart main, html.mmfx-has-heart main > section { background-color: transparent !important; }
#mm-charge { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; }
/* our heart at the end of the home-style pages (About us, Studio, Services), in place of the dotted one.
   It sits INSIDE the footer, behind the quote, drawn solid (it looked faded when it was laid over the text). */
html.mmfx-foot-heart footer[class*="style_footer__"] { position: relative; }
html.mmfx-foot-heart footer[class*="style_footer__"] > *:not(canvas) { position: relative; z-index: 1; }
canvas.mmfx-foot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .7s ease; }
canvas.mmfx-foot.is-on { opacity: 1; }
html.mmfx-foot-heart canvas.mm-heart { display: none !important; }

/* ---- static pages (Websites, Business Systems, guides ...) ---- */
/* the hero mock-up picture made way for the heart; section rules no longer cut across it */
html.mmfx-has-heart .mm-dev { display: none !important; }
html.mmfx-has-heart main > section { border-color: transparent !important; }
@media (min-width: 1200px) {
  /* content starts on the logo's left edge instead of a centred column, and uses a little more of the width */
  main .wrap:not(#_), body > footer .wrap:not(#_), .foot .wrap:not(#_), .mm-info-foot .wrap:not(#_), .mm-info-foot .mif-wrap:not(#_) { max-width: none !important; margin-left: 0 !important; margin-right: auto !important; padding-left: calc(var(--mmr, 8.33px) * 2.04) !important; }
  :root:not(#_) { --wrap: 100%; }                                   /* content runs the width of the page */
  .mm-hero2.mm-h1-short h1:not(#_) { max-width: 1180px; }          /* the hero headline sizes itself from its box: keep that box as it was */
}
/* a step lighter: headings 800 -> 700, bold running text 700 -> 500 */
html.mmfx-lp h1:not(#_), html.mmfx-lp h2:not(#_), html.mmfx-lp h3:not(#_) { font-weight: 700; }
html.mmfx-lp main p:not(#_), html.mmfx-lp main li:not(#_) { font-weight: 500; }

/* ---- round 8 (Danny, 12 Nov 2026) ---- */
/* the red and cream rings that followed the mouse are gone: the fluid is the pointer effect now */
div[class*="styles_cursor__"]:not(#_) { display: none !important; }
/* while Let's connect or the menu is open, the Standard / Interactive switch steps aside too (it covered the panel's links) */
html.lenis-stopped nav.mmsw:not(#_) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* ---- side bar: Let's connect as a plain bar item, white lettering on the bar's own dark, no coloured block (Danny, 12 Nov 2026) ---- */
[class*="styles_header_btn__"]:not(#_):not(#_) { background-color: transparent !important; color: #fff !important; --almost-black: rgb(255, 255, 255); }   /* plain bar */
[class*="styles_header_btn__"]:not(#_) * { color: #fff !important; }
[class*="styles_header_btn__"]:not(#_) svg path { fill: #fff !important; stroke: #fff; }

/* ---- cream writing on dark is white, like the home page (class set by heartfx-v1.js on text that really is cream on a dark
   background). Buttons being hovered are left to their own hover colours (they fill cream with dark text). ---- */
.mmfx-w:not(:is(.btn, button, [class*="btn"], [class*="cta"]):hover):not(:is(.btn, button, [class*="btn"], [class*="cta"]):hover *) { color: #fff !important; }

/* ---- lighter grey for the quiet supporting text ("We reply within one business day." and the like), site-wide (Danny) ---- */
:root:not(#_) { --grey: #c9c5bf; }   /* was #a39a8f */

/* ---- footer small print in the same lighter grey (Danny) ---- */
.mm-info-foot :is(.mif-brand p, .mif-brand a, .mif-legal, .mif-legal a, .mif-legal span):not(#_), .foot :is(.foot-brand p, .foot-legal, .foot-legal a):not(#_) { color: #c9c5bf !important; }

/* ---- round 23 (Danny) ---- */
/* play discs are white with a black arrow */
[class*="styles_cursorPlay_content__"]:not(#_), [class*="styles_buttonPlayFilled__"]:not(#_) { background-color: #fff !important; }
[class*="styles_cursorPlay_content__"] svg path, [class*="styles_buttonPlayFilled__"] svg path { fill: #0a0a0a !important; }
/* About us: the showreel row sat on the very bottom edge of its screen, so its round play button was cut on short windows */
/* (the showreel row is no longer lifted: on short windows the whole block is scaled instead, below) */

/* ---- footer wordmark in white, to match the white text (Danny, 13 Nov 2026) ---- */
.mm-info-foot .mif-wm:not(#_):not(#_), .foot .foot-wm:not(#_):not(#_) { color: #fff !important; background-color: #fff !important; }

/* ---- logo grids on the sub-pages: white logos on the page's own black, no tiles, sized like the home page's (Danny).
   The pictures are black logos on coral: the filter makes each a white logo on black, and "lighten" against a strip in the
   page colour drops the black square completely. ---- */
main .logos:not(#_) { background: #0a0a0a; isolation: isolate; }
main .logos img:not(#_) { filter: grayscale(1) invert(1) brightness(.7) contrast(8); mix-blend-mode: lighten; border-radius: 0; background: none; scale: .8; }

/* ---- round 24 (Danny) ---- */
/* the big "SCOPE. PROPOSE. BUILD. LAUNCH." line is a paragraph, so the lighter body weight had thinned it: back to its heavy weight */
.mm-proc-big:not(#_):not(#_), .mm-proc-big:not(#_):not(#_) * { font-weight: 800 !important; }
/* the menu's hover underline is white, like the menu's lettering */
div[class*="styles_menu__"] [class*="styles_underlineAlt__"]:not(#_)::before, div[class*="styles_menu__"] [class*="styles_underline"]:not(#_)::before, div[class*="styles_menu__"] [class*="styles_underline"]:not(#_)::after { background-color: #fff !important; border-color: #fff !important; }

/* ---- round 26 (Danny) ---- */
/* About us, "Our mission" screen: on short windows the type was taller than the screen and was cut top and bottom */
@media (min-width: 1200px) and (max-height: 820px) {
  [class*="styles_introduce_top__title"]:not(#_) { font-size: min(10.2rem, 9.2vh) !important; line-height: 1.04 !important; }
  [class*="styles_introduce_top__desc"]:not(#_) { font-size: min(1.8rem, 2.4vh) !important; }
  [class*="styles_introduce_container__"]:not(#_) { padding-top: 9vh !important; padding-bottom: 5vh !important; }
}

/* ---- round 27 (Danny): Studio page ---- */
/* "Scroll to discover" waits for the page to finish loading (it showed on the black screen before the loader) */
/* it waits until the side bar has been revealed, which is when the page has really finished its intro */
html:not(:has(header[class*="styles_reavel__"])) [class*="styles_scrollToDiscover__"] { opacity: 0 !important; visibility: hidden !important; }
/* the two small intro paragraphs, larger */
/* (the two intro paragraphs keep their own size: their line breaks are set for it, a larger size wrapped badly) */
/* Studio hero: the small logo shows through the big title; Scroll to discover sits bottom left in black (the switch has the right corner) */
html.mmfx-studio a[class*="styles_mmLogo__"] { z-index: 399 !important; mix-blend-mode: difference; }
html.mmfx-studio [class*="styles_aboutHero_scrolling__"]:not(#_) { left: calc(var(--header-width, 60px) + 2.2rem) !important; right: auto !important; justify-content: flex-start !important; }
html.mmfx-studio [class*="styles_aboutHero_scrolling__"]:not(#_) *, html.mmfx-studio [class*="styles_aboutHero_scrolling__"]:not(#_) { color: #0a0a0a !important; }
html.mmfx-studio [class*="styles_aboutHero_scrolling__"] [class*="indicator"]:not(#_) { background-color: #0a0a0a !important; }

/* ---- no heart in the quote footer at all: neither ours nor the old dotted one (Danny, 13 Nov 2026) ---- */
canvas.mm-heart, canvas.mmfx-foot { display: none !important; }

/* ---- fluid in the menu (Danny, 13 Nov 2026): while the menu is open the fluid canvas sits above it (the menu is z-index 400).
   It only adds light and takes no clicks, so the links read and work as before. On the home page the frame's own canvas
   is only shown while the menu is open. ---- */
html:has([class*="styles_menuOpen__"]) canvas.mmfx-fluid:not(#_) { z-index: 401; }
canvas.mmfx-fluid.mmfx-menu:not(#_) { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
html:has([class*="styles_menuOpen__"]) canvas.mmfx-fluid.mmfx-menu:not(#_) { opacity: .85; visibility: visible; transition: opacity .35s ease; }

/* ---- SELL MORE, drawn (13 Nov 2026): the video is painted into the letters on a canvas (heartfx-v1.js) instead of the browser
   blend, which Chrome on Windows sometimes drops. The class is only there while the canvas is really drawing. ---- */
.mm-hero-mask > canvas.mmfx-maskx:not(#_) { position: absolute !important; z-index: 1; pointer-events: none; opacity: 0; background: none !important; box-shadow: none !important; mix-blend-mode: normal !important; }
.js-heroSec.mm-go .mm-hero-mask.is-playing.mmfx-cv > canvas.mmfx-maskx:not(#_) { opacity: 1; }
.js-heroSec.mm-go .mm-hero-mask.is-playing.mmfx-cv > .mm-hero-maskv:not(#_) { opacity: 0 !important; }
.js-heroSec.mm-go .mm-hero-mask.is-playing.mmfx-cv > :not(.mm-hero-maskv):not(.mm-hero-maskc):not(.mmfx-maskx):not(#_) { background: none !important; box-shadow: none !important; mix-blend-mode: normal !important; }
.js-heroSec.mm-go .mm-hero-mask.is-playing.mmfx-cv > h2:not(#_):not(#_):not(#_), .js-heroSec.mm-go .mm-hero-mask.is-playing.mmfx-cv > div:not(.mm-hero-maskc) h2:not(#_):not(#_):not(#_) { color: transparent !important; }

/* ---- the left bar on cream sections (13 Nov 2026): Let's connect is white on the dark bar, so on the cream bar it is dark ---- */
html.mmfx-rail-light [class*="styles_header_btn__"]:not(#_):not(#_):not(#_) { color: #050505 !important; --almost-black: rgb(5, 5, 5); }
html.mmfx-rail-light [class*="styles_header_btn__"]:not(#_):not(#_) * { color: #050505 !important; }
html.mmfx-rail-light [class*="styles_header_btn__"]:not(#_):not(#_) svg path { fill: #050505 !important; stroke: #050505; }

/* ---- bar labels that are not the open one keep the bar's own grey (the white class stays on them after they close) ---- */
html:not(.mmfx-rail-light) header [class*="styles_scrollToItem__"]:not([class*="styles_active__"]) .mmfx-w:not(#_):not(#_) { color: #4e4e4e !important; }