:root{ --color-bg:#202020; --color-black:#000; --color-text:#b9b9b9; --color-text-muted:#8b8b8b; --color-border:#4d4d4d; --color-white:#fff; --color-paper:#fff; --color-accent:#19A9E6; /* was #ff5841 (red) — the only changed colour value */ --color-accent-rgb:25,169,230; --font-display:"BarlowCondensed",sans-serif; --font-body:"NonSans",sans-serif; --font-mono:"Archivo",sans-serif; /* Custom noise overlay tuning */ --mz-noise-opacity:0.4; --mz-noise-blend:normal; --mz-noise-z:9998; } /* Disable the captured site's JS TV-static canvas */ canvas.-noise{display:none!important;} /* Replace the WebGL form background with a flat blue painted on the section itself (behind all content) */ .form-gl{display:none!important;} .form-bg{display:none!important;} .-component.form{background:var(--color-accent)!important;} @font-face{ font-family:Archivo; src:url("/fonts/archivo-latin-600-normal.woff2") format("woff2"); font-display:swap; font-style:normal; /* single 600 cut mapped to all weights so every old AuxMono rule renders it */ font-weight:100 900; } @font-face{ font-family:BarlowCondensed; src:url("/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); font-display:swap; font-style:normal; font-weight:500; } @font-face{ font-family:BarlowCondensed; src:url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-display:swap; font-style:normal; font-weight:600; } @font-face{ font-family:BarlowCondensed; src:url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-display:swap; font-style:normal; font-weight:700; } /* ============================================================================ Approach — second homepage section under the hero. Clean editorial block in the shared section rhythm (marker + headline/lede + two columns), matching the spacing, type scales and IntersectionObserver reveal of .mz-about / .mz-faq. Global because the page is built via set:html. ============================================================================ */ /* ============================================================================ ROI & Image Section — Split-screen "Aside" Layout (Modelled after the GPS Jamming section on Warehouse & Industrial) ============================================================================ */ .mz-roi-split{ position:relative; width:100%; background:var(--color-bg); color:var(--color-text); border-top:1px solid var(--color-border); padding:clamp(6rem,8vw,12rem) clamp(3.2rem,5vw,7rem); } .mz-roi-split__inner{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 420px); gap:clamp(3rem, 6vw, 8rem); align-items:start; } @media (max-width: 980px) { .mz-roi-split__inner{ grid-template-columns:1fr; } } .mz-roi-split__media{ position:relative; width:100%; height:clamp(360px, 50vh, 600px); border-radius:12px; overflow:hidden; border:1px solid var(--color-border); } .mz-roi-split__media img{ width:100%; height:100%; object-fit:cover; display:block; } .mz-roi-split__aside{ display:flex; flex-direction:column; border-top:1px solid var(--color-border); padding-top:2.4rem; } .mz-roi-split__header{ display:flex; align-items:flex-start; gap:1.6rem; margin-bottom:3.2rem; } .mz-roi-split__icon{ width:40px; height:40px; flex:0 0 auto; } .mz-roi-split__title{ margin:0; font-family:var(--font-mono),monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-white); padding-top:4px; } .mz-roi-split__content{ display:flex; flex-direction:column; gap:2.4rem; } .mz-roi-split__headline{ margin:0; font-family:var(--font-display),sans-serif; font-weight:500; font-size:clamp(2.8rem, 3.5vw, 4rem); line-height:1.05; letter-spacing:-.02em; color:var(--color-white); } .mz-roi-split__lead{ margin:0; font-family:var(--font-body),sans-serif; font-weight:500; font-size:clamp(1.6rem, 1.4vw, 2rem); line-height:1.4; color:var(--color-white); } .mz-roi-split__body{ margin:0; font-family:var(--font-body),sans-serif; font-size:clamp(1.4rem, 1.2vw, 1.6rem); line-height:1.6; color:var(--color-text-muted); } /* CTA button in the projects panel. Single source of truth: overrides the captured .insight-button rule (fixed 120px / 48px) so the pill sizes to its label with balanced padding, one height, perfectly centred text, and a clean invert on hover with no layout shift (border stays 1px in both states). */ .insightsBlock .mz-ctabtn{ display:inline-flex!important; align-items:center; justify-content:center; width:auto!important; min-width:0!important; height:4.6rem!important; padding:0 2.6rem!important; border:1px solid var(--color-text)!important; border-radius:999px!important; background:var(--color-white); color:var(--color-bg); font-size:1.3rem; font-weight:500; letter-spacing:.04em; line-height:1; white-space:nowrap; text-align:center; box-sizing:border-box; transition:background .2s ease,color .2s ease; } .insightsBlock .mz-ctabtn:hover{ background:transparent; color:var(--color-text)!important; border:1px solid var(--color-text)!important; } .mz-approach{ background:var(--color-bg);color:var(--color-text); border-top:1px solid var(--color-border); } .mz-approach__inner{ padding:clamp(5.5rem,8vw,10rem) clamp(3.2rem,5vw,7rem); } .mz-approach__marker{ display:inline-flex;align-items:center;gap:1rem;margin:0 0 clamp(3rem,5vw,4.5rem); font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--color-white); } .mz-approach__dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent);display:inline-block} .mz-approach__lede{ display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(2.5rem,6vw,6rem);align-items:start; padding-bottom:clamp(4rem,7vw,7rem); } .mz-approach__headline{ margin:0;font-family:var(--font-body),sans-serif;font-weight:500; font-size:clamp(3rem,4vw,5rem);line-height:1.02;letter-spacing:-.03em; text-transform:uppercase;color:var(--color-white); } .mz-approach__hl-line{display:block;white-space:nowrap} .mz-approach__support{display:flex;flex-direction:column;gap:1.4rem;padding-top:.6rem} .mz-approach__lead{ margin:0;font-family:var(--font-body),sans-serif;font-weight:500; font-size:clamp(1.9rem,1.6vw,2.3rem);line-height:1.3;letter-spacing:-.01em; color:var(--color-white);max-width:30ch; } .mz-approach__body{ margin:0;font-family:var(--font-body),sans-serif; font-size:clamp(1.5rem,1.2vw,1.7rem);line-height:1.6;color:var(--color-text-muted); max-width:46ch;text-wrap:pretty; } .mz-approach__cols{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,4rem); } .mz-approach__col{ display:flex;flex-direction:column;gap:1.4rem; padding-top:clamp(1.2rem,1.6vw,1.6rem);border-top:1px solid var(--color-border); } .mz-approach__eyebrow{ display:flex;align-items:center;gap:1rem;margin:0; font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--color-white); } .mz-approach__tick{width:7px;height:7px;background:var(--color-accent);display:inline-block} .mz-approach__coltext{ margin:0;font-family:var(--font-body),sans-serif; font-size:clamp(1.5rem,1.2vw,1.7rem);line-height:1.6;color:var(--color-text-muted); text-wrap:pretty; } .mz-approach__link{ display:inline-flex;align-items:center;gap:1rem;margin-top:.4rem; font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--color-white);text-decoration:none;transition:color .25s ease; } .mz-approach__arrow{transition:transform .25s ease,color .25s ease} .mz-approach__link:hover{color:var(--color-accent)} .mz-approach__link:hover .mz-approach__arrow{transform:translateX(6px);color:var(--color-accent)} /* Entrance reveal (IntersectionObserver toggles [data-revealed]) — matches siblings. */ .mz-approach .mz-approach__support, .mz-approach .mz-approach__cols, .mz-approach .mz-approach__hl-line{ opacity:0;transform:translateY(18px); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1); will-change:opacity,transform; } .mz-approach .mz-approach__hl-line:nth-child(2){transition-delay:.08s} .mz-approach .mz-approach__hl-line:nth-child(3){transition-delay:.16s} .mz-approach[data-revealed] .mz-approach__support, .mz-approach[data-revealed] .mz-approach__cols, .mz-approach[data-revealed] .mz-approach__hl-line{opacity:1;transform:translateY(0)} .mz-approach[data-revealed] .mz-approach__support{transition-delay:.12s} .mz-approach[data-revealed] .mz-approach__cols{transition-delay:.2s} @media (max-width:980px) and (min-width:751px){ .mz-approach__lede{grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.6rem)} .mz-approach__support{padding-top:0} .mz-approach__lead{max-width:none} } @media (max-width:750px){ .mz-approach__lede{grid-template-columns:1fr;gap:1.8rem;padding-bottom:3rem} .mz-approach__support{padding-top:0} .mz-approach__headline{font-size:clamp(2.6rem,9vw,3.4rem);letter-spacing:-.02em} .mz-approach__hl-line{white-space:normal} .mz-approach__lead{max-width:none} .mz-approach__cols{grid-template-columns:1fr;gap:2rem} } @media (prefers-reduced-motion:reduce){ .mz-approach .mz-approach__support, .mz-approach .mz-approach__cols, .mz-approach .mz-approach__hl-line{opacity:1!important;transform:none!important;transition:none!important} } /* Native scroll restore — pairs with isSmooth=!1 patch in the JS bundle. The captured native-scroll path reads scroll from pageContent.parentNode, where pageContent = .app, so BODY is the scroll container the engine expects. getScroll()/ScrollTrigger read body.scrollTop, so every section reveal fires. This is the exact path the real site runs on mobile. */ html { overflow: hidden !important; height: 100vh !important; } body { height: var(--vh, 100vh) !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Insights sticky-scroll pin — native CSS replacement for the disabled smooth engine. Original design pinned .sticky-content via per-frame transform; with smooth off, the JS pin is dead and the .-fixed fallback loses to the scoped position:absolute. Re-implement as native position:sticky: lay the two columns side by side in flow, the 72rem left panel sticks while the taller 72rem articles column scrolls past. Scoped to the same min-width:750px the captured desktop rules use, so the mobile .insightsBlock-nonSticky stacked variant is untouched. */ @media screen and (min-width:750px){ .insightsBlock .insightsBlock-sticky{ display:flex !important; align-items:flex-start !important; } .insightsBlock .sticky-content{ position:sticky !important; top:0 !important; height:100vh !important; height:var(--vh,100vh) !important; width:72rem !important; flex:0 0 72rem !important; transform:none !important; } /* Neutralise the dead JS .-fixed toggle: keep it sticky, never position:fixed full-screen. */ .insightsBlock .sticky-content.-fixed{ position:sticky !important; top:0 !important; left:auto !important; width:72rem !important; height:100vh !important; height:var(--vh,100vh) !important; } /* Articles is now the second flex column, not an absolute-overlay offset. */ .insightsBlock .sticky-articles{ margin-left:0 !important; flex:1 1 auto !important; } } /* ============================================================================ Mezzanine Floor 3D — scroll-driven wireframe section (ported from Mezzanine Production, themed to this site). Styles live here (global) because the page is built via set:html, so Astro cannot inject scoped