/* Monetize Media - implemented from Claude Design handoff (Monetize Media.dc.html) */

/* Inter, self-hosted (SIL Open Font License). Served from our own domain so that
   no visitor IP address is transmitted to Google. Do not switch back to the
   Google Fonts CDN without a legal review. */
@font-face{font-family:'Inter';font-style:normal;font-weight:200;font-display:swap;src:url('../assets/fonts/inter-200-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:200;font-display:swap;src:url('../assets/fonts/inter-200-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../assets/fonts/inter-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../assets/fonts/inter-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Colour tokens. Every foreground colour in this file is rgba(var(--fg-rgb),a)
   or var(--fg), so a theme is just a different set of these values.
   Dark is the default; add class="theme-light" to <body> for the light one. */
:root{--bg:#141414;--fg:#ffffff;--fg-rgb:255,255,255;--ok-rgb:74,201,118;--bg-translucent:rgba(20,20,20,.6);--bg-translucent-strong:rgba(20,20,20,.94)}
/* --ok is the green used for "included" ticks; darker on light so it keeps contrast. */
body.theme-light{--bg:#f6f5f3;--fg:#141414;--fg-rgb:20,20,20;--ok-rgb:30,150,80;--bg-translucent:rgba(246,245,243,.72);--bg-translucent-strong:rgba(246,245,243,.95)}
/* The logo files are white artwork, so flip them on the light theme. */
body.theme-light .brand-logo,body.theme-light .mm-hero-logo,body.theme-light .mm-why-logo,body.theme-light .mm-cta-logo{filter:invert(1)}
/* A dark vignette over a light page reads as dirt, and the grain goes muddy. */
body.theme-light #mm-vignette{display:none}
/* at this opacity the grain is invisible on white, so skip the full-screen layer */
body.theme-light #mm-grain{display:none}
/* Production page, light theme: white stays dominant with soft grey pools in two
   corners. It sits on a fixed layer behind the page, painted once, so scrolling never
   repaints it; the sections drop their flat fill to show it. */
body.page-production.theme-light{background:transparent}
body.page-production.theme-light::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 700px at 0% 0%,rgba(20,20,20,.075),transparent 70%),
  radial-gradient(900px 800px at 100% 100%,rgba(20,20,20,.07),transparent 70%),
  linear-gradient(180deg,#fbfaf8 0%,#f1f0ed 100%)}
/* html keeps the dark --bg from :root; match it here so no dark edge shows past the body */
html:has(body.page-production.theme-light){background:#f3f2ef}
body.page-production.theme-light :is(.hero,#value,#what,.work-section,#contact,footer){background:transparent}
body.theme-light [data-card]::before{background:conic-gradient(from var(--mm-shim),transparent 0deg,transparent 292deg,rgba(20,20,20,.55) 340deg,transparent 360deg)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:300;letter-spacing:.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(var(--fg-rgb),.16);color:var(--fg)}
input::placeholder,textarea::placeholder{color:rgba(var(--fg-rgb),.28)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid rgba(var(--fg-rgb),.55);outline-offset:4px;border-radius:6px}

.container{width:min(1120px,calc(100% - 48px));margin:0 auto}

/* ---------- card hover: shimmer border ---------- */
@property --mm-shim{syntax:'<angle>';inherits:false;initial-value:0deg}
[data-card]{position:relative;border:1px solid rgba(var(--fg-rgb),.11);border-radius:18px;transition:border-color .6s ease}
[data-card]::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--mm-shim),transparent 0deg,transparent 292deg,rgba(var(--fg-rgb),.9) 340deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .6s ease;pointer-events:none}
[data-card]:hover{border-color:rgba(var(--fg-rgb),.28)}
[data-card]:hover::before{opacity:1}
@keyframes mm-shim{to{--mm-shim:360deg}}

/* ---------- scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)}
[data-drawline]{height:1px;background:rgba(var(--fg-rgb),.12);transform:scaleX(0);transform-origin:center;transition:transform 1.2s cubic-bezier(.22,.61,.36,1),opacity 1.1s ease}

/* ---------- fixed overlays ---------- */
#mm-progress{position:fixed;top:0;left:0;height:1px;width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform;background:linear-gradient(90deg,rgba(var(--fg-rgb),.35),rgba(var(--fg-rgb),.95));z-index:200;pointer-events:none;box-shadow:0 0 8px rgba(var(--fg-rgb),.5)}
#mm-grain{position:fixed;inset:0;pointer-events:none;z-index:155;opacity:.0125;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 1 0 0 0 1 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:220px 220px}
/* 20 stops along a smoothstep curve, 0 to .14 alpha across 45%-100% of the radius */
#mm-vignette{position:fixed;inset:0;pointer-events:none;z-index:150;background:radial-gradient(130% 120% at 50% 50%,rgba(0,0,0,0) 45%,rgba(0,0,0,.001) 47.9%,rgba(0,0,0,.004) 50.8%,rgba(0,0,0,.009) 53.7%,rgba(0,0,0,.016) 56.6%,rgba(0,0,0,.024) 59.5%,rgba(0,0,0,.033) 62.4%,rgba(0,0,0,.043) 65.2%,rgba(0,0,0,.054) 68.2%,rgba(0,0,0,.065) 71.1%,rgba(0,0,0,.075) 73.9%,rgba(0,0,0,.086) 76.8%,rgba(0,0,0,.097) 79.8%,rgba(0,0,0,.107) 82.6%,rgba(0,0,0,.116) 85.5%,rgba(0,0,0,.124) 88.4%,rgba(0,0,0,.131) 91.3%,rgba(0,0,0,.136) 94.2%,rgba(0,0,0,.139) 97.1%,rgba(0,0,0,.14) 100%)}

/* ---------- header ---------- */
#mm-header{position:sticky;top:0;z-index:100;background:var(--bg-translucent-strong);border-bottom:1px solid rgba(var(--fg-rgb),.08)}
#mm-header .header-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:height .4s cubic-bezier(.22,.61,.36,1)}
#mm-header.mm-shrink .header-inner{height:60px}
#mm-header.mm-shrink{background:var(--bg-translucent-strong);border-bottom-color:rgba(var(--fg-rgb),.16)}
.brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:var(--fg)}
.brand-logo{width:34px;height:34px;object-fit:contain}
.brand-name{font-weight:300;font-size:18px;letter-spacing:.02em}
.nav-desktop{display:flex;align-items:center;gap:34px}
.nav-desktop a{color:rgba(var(--fg-rgb),.62);font-size:14px;font-weight:300;letter-spacing:.01em;text-decoration:none;transition:color .35s ease}
.nav-desktop a:hover{color:var(--fg)}
.nav-desktop a.mm-nav-active{color:var(--fg)!important}
.header-actions{display:flex;align-items:center;gap:12px}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(var(--fg-rgb),.22);background:transparent;color:var(--fg);cursor:pointer;transition:border-color .4s ease,background-color .4s ease}
.theme-btn:hover{border-color:rgba(var(--fg-rgb),.6);background:rgba(var(--fg-rgb),.05)}
.menu-btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(var(--fg-rgb),.16);background:transparent;color:var(--fg);cursor:pointer;font-size:16px;font-weight:300}
.nav-mobile{display:none;flex-direction:column;gap:2px;padding-bottom:16px}
.nav-mobile.open{display:flex}
.nav-mobile a{color:rgba(var(--fg-rgb),.62);font-weight:300;padding:12px 4px;text-decoration:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;background:transparent;font-weight:300;letter-spacing:.02em;text-decoration:none;transition:border-color .4s ease,background-color .4s ease,color .4s ease,transform .4s ease}
.btn--nav{padding:11px 20px;color:var(--fg);font-size:14px;border:1px solid rgba(var(--fg-rgb),.4)}
.btn--nav:hover{border-color:rgba(var(--fg-rgb),.85);background:rgba(var(--fg-rgb),.05)}
.btn--lg{padding:16px 30px;font-size:15px}
.btn--md{padding:15px 28px;font-size:15px}
.btn--primary{color:var(--fg);border:1px solid rgba(var(--fg-rgb),.5)}
.btn--primary:hover{border-color:rgba(var(--fg-rgb),.95);background:rgba(var(--fg-rgb),.06);transform:translateY(-2px)}
.btn--ghost{color:rgba(var(--fg-rgb),.85);border:1px solid rgba(var(--fg-rgb),.18)}
.btn--ghost:hover{border-color:rgba(var(--fg-rgb),.45);color:var(--fg);transform:translateY(-2px)}
.mm-arr{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
a:hover .mm-arr,button:hover .mm-arr{transform:translateX(3px)}

/* ---------- eyebrows ---------- */
.eyebrow{font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(var(--fg-rgb),.4)}
.mm-eyebrow-num{font-variant-numeric:tabular-nums;color:rgba(var(--fg-rgb),.35);margin-right:.7em}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg);color:var(--fg);padding:150px 0 160px;text-align:center}
.hero-glow{position:absolute;left:0;right:0;top:0;height:340px;pointer-events:none;background:radial-gradient(120% 100% at 50% 0%,rgba(var(--fg-rgb),.09),transparent 62%)}
.mm-hero-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1400px;pointer-events:none;user-select:none;transition:opacity .5s ease}
.mm-hero-logo--out{opacity:.055}
.mm-hero-logo--fill{opacity:0}
[data-watermark]{-webkit-mask:radial-gradient(circle at 50% 50%,#000 26%,rgba(0,0,0,.35) 52%,transparent 70%);mask:radial-gradient(circle at 50% 50%,#000 26%,rgba(0,0,0,.35) 52%,transparent 70%);animation:none;}
@keyframes mm-drift{0%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}50%{transform:translate(-50%,-52%) scale(1.045) rotate(1.4deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}}
.hero-inner{position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:9px 17px;border:1px solid rgba(var(--fg-rgb),.15);border-radius:999px;font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--fg-rgb),.62)}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--fg)}
.hero h1{font-weight:200;letter-spacing:-.04em;line-height:1.03;font-size:clamp(46px,7.2vw,94px);margin:34px auto 26px;max-width:1000px}
.hero-sub{max-width:600px;margin:0 auto 44px;color:rgba(var(--fg-rgb),.55);font-size:clamp(17px,2vw,20px);font-weight:300;line-height:1.7}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- stats bar ---------- */
.stats-section{background:var(--bg);padding:0 0 20px}
.stats-wrap{border-top:1px solid rgba(var(--fg-rgb),.08);border-bottom:1px solid rgba(var(--fg-rgb),.08)}
.stats-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr}
.stat{padding:44px 32px}
.stat + .stat{border-left:1px solid rgba(var(--fg-rgb),.08)}
.stat-value{font-weight:200;font-size:clamp(34px,4vw,52px);letter-spacing:-.02em;color:var(--fg);line-height:1}
.stat-value--revenue{font-variant-numeric:tabular-nums}
#mm-revenue{transition:opacity .6s ease}
.stat-label{color:rgba(var(--fg-rgb),.45);font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;margin-top:14px}
.stats-note{color:rgba(var(--fg-rgb),.32);font-size:12px;font-weight:300;line-height:1.65;margin:18px auto 0;max-width:820px}
#mm-arrow{display:inline-block;margin-right:.12em;transform:translateY(-.04em)}
#mm-arrow.mm-pulse{animation:mm-arrowpulse .9s cubic-bezier(.22,.61,.36,1)}
@keyframes mm-arrowpulse{0%{opacity:.25;transform:translateY(.35em)}55%{opacity:1;transform:translateY(-.12em)}100%{opacity:1;transform:translateY(-.04em)}}

/* ---------- how it works ---------- */
#how{position:relative;overflow:hidden;background:var(--bg);padding:130px 0}
.mm-how-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mm-how-bg svg{position:absolute;top:52%;width:min(520px,44%);height:auto;color:var(--fg);opacity:0;transition:opacity 1s ease,transform 1s cubic-bezier(.22,.61,.36,1)}
.mm-how-bg--1{left:0;transform:translate(-24%,-50%) scale(.92)}
.mm-how-bg--2{left:50%;transform:translate(-50%,-50%) scale(.92)}
.mm-how-bg--3{right:0;transform:translate(24%,-50%) scale(.92)}
#how:has([data-steps] article:nth-of-type(1):hover) .mm-how-bg--1{opacity:.025;transform:translate(-24%,-50%) scale(1)}
#how:has([data-steps] article:nth-of-type(2):hover) .mm-how-bg--2{opacity:.025;transform:translate(-50%,-50%) scale(1)}
#how:has([data-steps] article:nth-of-type(3):hover) .mm-how-bg--3{opacity:.025;transform:translate(24%,-50%) scale(1)}
#how .mm-how-inner{position:relative;z-index:1}
.section-head{text-align:center;max-width:620px;margin:0 auto 72px}
.section-head h2{font-weight:200;letter-spacing:-.02em;font-size:clamp(32px,4.2vw,56px);margin:22px 0 0;line-height:1.06;color:var(--fg)}
.section-head p{color:rgba(var(--fg-rgb),.5);font-size:18px;font-weight:300;line-height:1.7;margin:22px 0 0}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{padding:38px 34px;min-height:270px;display:flex;flex-direction:column}
.step-icon{width:48px;height:48px;border-radius:13px;border:1px solid rgba(var(--fg-rgb),.16);display:grid;place-items:center;color:var(--fg);margin-bottom:36px;transition:border-color .5s ease,background-color .5s ease}
article[data-card]:hover .step-icon{border-color:rgba(var(--fg-rgb),.5);background:rgba(var(--fg-rgb),.05)}
.step-num{font-weight:400;font-size:11px;letter-spacing:.22em;color:rgba(var(--fg-rgb),.4);margin-bottom:14px}
.step h3{font-weight:300;font-size:22px;letter-spacing:-.01em;margin:0 0 12px;color:var(--fg)}
.step p{color:rgba(var(--fg-rgb),.5);font-size:15px;font-weight:300;line-height:1.65;margin:0}

/* ---------- why it works ---------- */
#why{position:relative;overflow:hidden;background:var(--bg);padding:40px 0 130px}
.why-outer{position:relative}
.why-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:start}
.mm-why-sticky{position:sticky;top:118px}
.why-head{position:relative}
.mm-why-logo{position:absolute;left:-78%;top:44%;transform:translateY(-50%);width:min(820px,220%);pointer-events:none;user-select:none;z-index:0;transition:opacity .5s ease}
.mm-why-logo--out{opacity:.07}
.mm-why-logo--fill{opacity:0}
.why-head-inner{position:relative;z-index:1}
.why-rule{width:44px;height:1px;background:rgba(var(--fg-rgb),.25);margin:30px 0 22px}
.why-head h2{font-weight:200;letter-spacing:-.02em;font-size:clamp(40px,4.8vw,68px);line-height:1;margin:0;color:var(--fg)}
.why-head h2 span{font-weight:400}
.why-head-inner p{max-width:340px;margin:26px 0 0;color:rgba(var(--fg-rgb),.5);font-size:clamp(15px,1.7vw,18px);font-weight:300;line-height:1.7}
.mm-why-idx{display:inline-block;font-size:13px;font-weight:400;letter-spacing:.28em;color:rgba(var(--fg-rgb),.4);font-variant-numeric:tabular-nums;margin-bottom:18px}
.mm-why-item{position:relative}
.mm-why-item h3{font-weight:200;letter-spacing:-.02em;font-size:clamp(28px,3.2vw,44px);line-height:1.05;margin:0;color:var(--fg);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.mm-why-item:hover h3{transform:translateX(10px)}
.mm-why-item p{max-width:520px;margin:20px 0 0;color:rgba(var(--fg-rgb),.5);font-size:clamp(15px,1.7vw,18px);font-weight:300;line-height:1.7}
.mm-why-wm{position:absolute;top:50%;right:2%;transform:translateY(-50%);width:clamp(110px,11vw,168px);height:auto;color:var(--fg);opacity:.05;pointer-events:none;user-select:none;transition:opacity .55s ease;z-index:0}
.mm-why-item:hover .mm-why-wm{opacity:.1}
.mm-why-item > span,.mm-why-item > h3,.mm-why-item > p{position:relative;z-index:1}

/* ---------- roster (who we work with) ---------- */
.roster-section{background:var(--bg);padding:92px 0 0}
.roster-head{text-align:center;max-width:620px;margin:0 auto 40px}
.roster-head h2{font-weight:200;letter-spacing:-.02em;font-size:clamp(28px,3.4vw,44px);margin:22px 0 0;line-height:1.08;color:var(--fg)}
.roster-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
/* every tile is the same box: same width, same height, same padding */
.roster-tile{display:flex;flex-direction:row;align-items:center;gap:16px;padding:20px 24px;width:424px;height:92px;text-decoration:none;box-sizing:border-box}
.roster-avatar{flex:0 0 auto;width:52px;height:52px;border-radius:50%;object-fit:cover}
.roster-avatar--next{display:grid;place-items:center;border:1px dashed rgba(var(--fg-rgb),.3);color:rgba(var(--fg-rgb),.75)}
.roster-id{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.roster-name{font-weight:400;font-size:16px;letter-spacing:-.01em;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-handle{font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--fg-rgb),.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-stat{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.roster-count{font-weight:400;font-size:19px;letter-spacing:-.01em;line-height:1.2;color:var(--fg);font-variant-numeric:tabular-nums}
.roster-meta{font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--fg-rgb),.4);white-space:nowrap}
.roster-tile--next{border-style:dashed;color:var(--fg)}
.roster-tile--next:hover{border-style:solid}
.roster-tile--next .roster-stat{color:rgba(var(--fg-rgb),.75)}
@media(max-width:820px){.roster-tile{width:100%;max-width:420px}}

/* ---------- included list + plans (business.html) ---------- */
/* Why YouTube: gets real room under the hero, whose watermark is cut off at the hero's
   edge. The chart is illustrative; it wipes in from the left once the card is revealed. */
#value{padding:120px 0 0}
#value .section-head{margin-bottom:48px}
.value-em{font-weight:400}
.value-chart{max-width:1000px;margin:0 auto;padding:36px 40px 26px}
#value .section-head{max-width:820px}
#value .section-head p{max-width:620px;margin-left:auto;margin-right:auto}
.value-chart svg{display:block;width:100%;height:clamp(170px,26vw,290px);overflow:visible}
/* wipe from the left with transforms only (clip-path would repaint the chart on every
   frame): the box moves in from the left, its content moves back the same way. The
   8px bleed keeps the round line caps at the edges from being cut off. */
.vc-plot{margin:-8px;padding:8px;overflow:hidden;transform:translateX(-100%);transition:transform 2.4s cubic-bezier(.45,.05,.25,1) .3s}
.vc-plot-in{transform:translateX(100%);transition:inherit}
.value-chart[data-shown] .vc-plot,.value-chart[data-shown] .vc-plot-in{transform:none}
.vc-axis{stroke:rgba(var(--fg-rgb),.16);stroke-width:1;vector-effect:non-scaling-stroke}
.vc-mark{stroke:rgba(var(--fg-rgb),.2);stroke-width:1;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.vc-line{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vc-post{stroke:rgba(var(--fg-rgb),.28);stroke-width:2}
.vc-ad{stroke:rgba(var(--fg-rgb),.55);stroke-width:2}
.vc-video{stroke:rgb(var(--ok-rgb));stroke-width:3}
.vc-axis-labels{position:relative;display:flex;justify-content:space-between;margin-top:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--fg-rgb),.4)}
.vc-ylabel{margin-bottom:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--fg-rgb),.4)}
.vc-budget{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.vc-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:28px;font-size:14px;color:rgba(var(--fg-rgb),.7)}
.vc-legend span{display:inline-flex;align-items:center;gap:10px}
.vc-key{display:inline-block;width:22px;height:0;border-top:2px solid rgba(var(--fg-rgb),.28);border-radius:2px}
.vc-key--video{border-top:3px solid rgb(var(--ok-rgb))}
.vc-key--ad{border-top-color:rgba(var(--fg-rgb),.55)}
.vc-note{margin:16px 0 0;text-align:center;font-size:12px;color:rgba(var(--fg-rgb),.38)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1000px;margin:64px auto 0}
.value-item{border-top:1px solid rgba(var(--fg-rgb),.12);padding-top:26px}
.value-item .mm-why-idx{margin-bottom:14px}
.value-item h3{margin:0;font-weight:300;letter-spacing:-.01em;font-size:22px;line-height:1.25;color:var(--fg)}
.value-item p{margin:12px 0 0;color:rgba(var(--fg-rgb),.5);font-size:15.5px;font-weight:300;line-height:1.7}
@media(max-width:800px){
  .value-grid{grid-template-columns:1fr;gap:32px;margin-top:48px}
  .value-chart{padding:26px 20px 22px}
  .vc-axis-labels{font-size:10px;letter-spacing:.12em}
}
@media(prefers-reduced-motion:reduce){.vc-plot,.vc-plot-in{transform:none;transition:none}}

#what{padding:120px 0 0}
#what .section-head{margin-bottom:48px}
.incl-card{max-width:1000px;margin:0 auto;padding:40px 48px}
.incl-grid{display:grid;grid-template-columns:repeat(4,max-content);justify-content:space-between;gap:18px 28px}
@media(max-width:600px){.incl-card{padding:28px 24px}}
.incl-item{display:flex;align-items:flex-start;gap:11px;font-size:15px;font-weight:300;line-height:1.5;color:rgba(var(--fg-rgb),.72)}
.incl-ic{flex:0 0 auto;width:19px;height:19px;margin-top:1px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(var(--ok-rgb),.5);background:rgba(var(--ok-rgb),.1);color:rgb(var(--ok-rgb))}

@media(max-width:1100px){
  .incl-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){.incl-grid{grid-template-columns:1fr}}

/* ---------- portfolio (business.html) ---------- */
.work-section{background:var(--bg);padding:130px 0}
/* Flex rather than grid so an incomplete last row centres instead of hanging left.
   360px basis plus two 20px gaps fills the 1120px container at three per row. */
.work-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.work-card{overflow:hidden;display:flex;flex-direction:column;flex:0 1 360px}
.work-play{display:block;position:relative;width:100%;aspect-ratio:16/9;padding:0;border:none;background:#000;cursor:pointer;overflow:hidden;border-radius:17px 17px 0 0}
.work-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.work-play:hover .work-thumb{opacity:.72;transform:scale(1.03)}
.work-play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:1px solid rgba(var(--fg-rgb),.5);background:rgba(0,0,0,.5);color:var(--fg);display:grid;place-items:center;transition:border-color .4s ease,background-color .4s ease}
.work-play-btn svg{margin-left:3px}
.work-play:hover .work-play-btn{border-color:rgba(var(--fg-rgb),.95);background:rgba(0,0,0,.55)}
.work-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.work-meta{padding:20px 22px 22px}
.work-meta h3{font-weight:300;font-size:17px;letter-spacing:-.01em;margin:0 0 6px;color:var(--fg);line-height:1.35}
.work-client{font-size:11px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:rgba(var(--fg-rgb),.4)}
.work-note{color:rgba(var(--fg-rgb),.32);font-size:12px;font-weight:300;line-height:1.65;margin:22px 0 0;text-align:center}
@media(max-width:900px){.work-card{flex:0 1 100%;max-width:460px}}

/* ---------- segment chooser (index.html) ---------- */
.chooser{background:var(--bg);padding:84px 0 10px;border-bottom:1px solid rgba(var(--fg-rgb),.06)}
.chooser-inner{text-align:center}
.chooser h2{font-weight:200;letter-spacing:-.02em;font-size:clamp(26px,3.2vw,40px);line-height:1.1;margin:18px 0 34px;color:var(--fg)}
.chooser-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;padding-bottom:40px}
.chooser-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:424px;padding:28px 30px;text-decoration:none;box-sizing:border-box;text-align:left}
.chooser-card-ic{width:42px;height:42px;border-radius:12px;border:1px solid rgba(var(--fg-rgb),.16);display:grid;place-items:center;color:var(--fg);margin-bottom:10px;transition:border-color .5s ease,background-color .5s ease}
.chooser-card:hover .chooser-card-ic{border-color:rgba(var(--fg-rgb),.5);background:rgba(var(--fg-rgb),.05)}
.chooser-card h3{font-weight:300;font-size:19px;letter-spacing:-.01em;margin:0;color:var(--fg)}
.chooser-card p{color:rgba(var(--fg-rgb),.5);font-size:14.5px;font-weight:300;line-height:1.6;margin:0}
.chooser-go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;color:rgba(var(--fg-rgb),.75);font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.chooser-card:hover .chooser-go{color:var(--fg)}
/* entrance: plays once on load, and not at all for visitors who ask for less motion */
.chooser-anim{opacity:0;transform:translateY(16px);animation:mm-chooser-in .75s cubic-bezier(.22,.61,.36,1) forwards}
.chooser-anim--2{animation-delay:.12s}
.chooser-anim--3{animation-delay:.22s}
.chooser-anim--4{animation-delay:.3s}
@keyframes mm-chooser-in{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.chooser-anim{animation:none;opacity:1;transform:none}}
@media(max-width:900px){.chooser-card{width:100%;max-width:460px}}

/* ---------- about ---------- */
#about{background:var(--bg);border-top:1px solid rgba(var(--fg-rgb),.08);padding:130px 0}
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.about-card{padding:40px}
.about-icon{width:62px;height:62px;border-radius:16px;border:1px solid rgba(var(--fg-rgb),.16);display:grid;place-items:center;color:var(--fg);margin-bottom:32px}
.about-card h3{font-weight:300;font-size:24px;letter-spacing:-.01em;margin:0 0 28px;max-width:290px;line-height:1.2;color:var(--fg)}
.about-checks{display:grid;gap:18px}
.check-row{display:flex;gap:14px;align-items:flex-start}
.check-row > span:last-child{color:rgba(var(--fg-rgb),.6);font-size:15px;line-height:1.55;font-weight:300}
.check-ic{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid rgba(var(--fg-rgb),.22);display:grid;place-items:center;color:var(--fg);margin-top:1px}
.about-copy h2{font-weight:200;letter-spacing:-.02em;font-size:clamp(30px,3.6vw,46px);margin:22px 0 26px;line-height:1.1;color:var(--fg)}
.about-lede{color:rgba(var(--fg-rgb),.6);font-size:17px;font-weight:300;line-height:1.75;margin:0 0 18px}
.about-body{color:rgba(var(--fg-rgb),.45);font-size:15.5px;font-weight:300;line-height:1.75;margin:0 0 34px}
.about-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- contact ---------- */
#contact{background:var(--bg);border-top:1px solid rgba(var(--fg-rgb),.08);padding:130px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
#contact h2{font-weight:200;letter-spacing:-.02em;font-size:clamp(32px,4vw,52px);margin:22px 0 22px;line-height:1.05;color:var(--fg)}
.contact-lede{color:rgba(var(--fg-rgb),.5);font-size:17px;font-weight:300;line-height:1.75;margin:0 0 38px;max-width:420px}
.contact-cards{display:grid;gap:14px;max-width:430px}
.contact-link{display:flex;align-items:center;gap:16px;padding:20px;text-decoration:none;background:transparent;font-family:inherit;text-align:left;cursor:pointer;width:100%}
#mm-toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);background:rgba(20,20,20,.92);border:1px solid rgba(var(--fg-rgb),.25);color:var(--fg);font-weight:300;font-size:14px;letter-spacing:.02em;padding:12px 22px;border-radius:999px;z-index:300;opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#mm-toast.show{opacity:1;transform:translate(-50%,0)}
.contact-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:1px solid rgba(var(--fg-rgb),.16);display:grid;place-items:center;color:var(--fg)}
.contact-k{display:block;font-size:11px;color:rgba(var(--fg-rgb),.4);font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.contact-v{display:block;font-size:15px;color:var(--fg);font-weight:300;margin-top:4px}
.form-card{padding:38px}
.field{margin-bottom:26px}
.field--last{margin-bottom:34px}
.field label{display:block;font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--fg-rgb),.4);margin:0 0 10px}
.field input,.field textarea{width:100%;padding:12px 2px;border:none;border-bottom:1px solid rgba(var(--fg-rgb),.18);background:transparent;font-family:inherit;font-weight:300;font-size:16px;color:var(--fg);outline:none;transition:border-color .4s ease}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{border-bottom-color:rgba(var(--fg-rgb),.7)}
.form-consent{color:rgba(var(--fg-rgb),.38);font-size:12px;font-weight:300;line-height:1.65;margin:0 0 20px}
.form-consent a{color:rgba(var(--fg-rgb),.7);text-decoration:underline;text-underline-offset:2px}
.form-consent a:hover{color:var(--fg)}
.form-submit{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 22px;border-radius:999px;background:transparent;color:var(--fg);font-family:inherit;font-weight:300;font-size:15px;letter-spacing:.02em;border:1px solid rgba(var(--fg-rgb),.5);cursor:pointer;transition:border-color .4s ease,background-color .4s ease}
.form-submit:hover{border-color:rgba(var(--fg-rgb),.95);background:rgba(var(--fg-rgb),.06)}
#contact-form{transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
#contact-form.is-leaving{opacity:0;transform:translateY(-12px)}
.form-submit:disabled{cursor:default}
.mm-spin{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(var(--fg-rgb),.25);border-top-color:var(--fg);animation:mm-ring-spin .7s linear infinite}
@keyframes mm-ring-spin{to{transform:rotate(360deg)}}
.form-card{display:flex;flex-direction:column}
.form-success{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;flex:1;gap:16px;padding:24px 4px;opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.form-success.show{opacity:1;transform:none}
.form-success[hidden]{display:none}
.form-success-ic{width:52px;height:52px;border-radius:50%;border:1px solid rgba(var(--fg-rgb),.25);display:grid;place-items:center;color:var(--fg);transform:scale(.55);transition:transform .6s cubic-bezier(.22,.61,.36,1) .15s}
.form-success.show .form-success-ic{transform:scale(1)}
.form-success-ic svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s cubic-bezier(.22,.61,.36,1) .4s}
.form-success.show .form-success-ic svg path{stroke-dashoffset:0}
.form-success h3{font-weight:300;font-size:24px;letter-spacing:-.01em;margin:0;color:var(--fg)}
.form-success p{color:rgba(var(--fg-rgb),.5);font-size:15px;font-weight:300;line-height:1.6;margin:0}

/* ---------- strategy CTA ---------- */
.cta-section{background:var(--bg);padding:0 0 130px}
.cta-card{overflow:hidden;padding:clamp(44px,5vw,72px);display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.mm-cta-logo{position:absolute;right:-140px;top:50%;transform:translateY(-50%);width:520px;pointer-events:none;user-select:none;transition:opacity 1s ease}
.mm-cta-logo--out{opacity:.05}
.mm-cta-logo--fill{opacity:0}
[data-card]:hover .mm-cta-logo--out{opacity:0!important}
[data-card]:hover .mm-cta-logo--fill{opacity:.5!important}
.cta-copy{position:relative}
.cta-copy h2{font-weight:200;letter-spacing:-.02em;font-size:clamp(30px,3.8vw,50px);margin:22px 0 22px;line-height:1.06;color:var(--fg)}
.cta-copy p{color:rgba(var(--fg-rgb),.5);font-size:17px;font-weight:300;line-height:1.7;margin:0 0 36px;max-width:440px}
.cta-perks{display:grid;gap:20px}
.perk{display:flex;align-items:center;gap:16px}
.perk > span:last-child{font-size:15px;font-weight:300;color:rgba(var(--fg-rgb),.75)}
.perk-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;border:1px solid rgba(var(--fg-rgb),.16);color:var(--fg);display:grid;place-items:center}

/* ---------- footer ---------- */
footer{background:var(--bg);border-top:1px solid rgba(var(--fg-rgb),.08);padding:64px 0 34px;color:var(--fg)}
.footer-grid{display:grid;grid-template-columns:1.6fr .8fr .9fr;gap:44px}
.brand-logo--footer{width:32px;height:32px}
.brand-name--footer{font-size:17px}
.footer-blurb{color:rgba(var(--fg-rgb),.45);font-size:14.5px;font-weight:300;line-height:1.8;margin:22px 0 0;max-width:360px}
.footer-col h4{font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--fg-rgb),.4);margin:0 0 18px}
.footer-col a{display:block;color:rgba(var(--fg-rgb),.55);font-size:14px;font-weight:300;padding:6px 0;text-decoration:none;transition:color .3s ease}
.footer-col a:hover{color:var(--fg)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid rgba(var(--fg-rgb),.08);margin-top:48px;padding-top:26px;flex-wrap:wrap}
.footer-copy{color:rgba(var(--fg-rgb),.35);font-size:13px;font-weight:300}
.footer-legal{display:flex;gap:22px;flex-wrap:wrap}
.footer-legal a{color:rgba(var(--fg-rgb),.55);font-size:13px;font-weight:300;text-decoration:none;transition:color .3s ease}
.footer-legal a:hover{color:var(--fg);text-decoration:underline}
.footer-legal-id{color:rgba(var(--fg-rgb),.35);font-size:12.5px;font-weight:300;line-height:1.7;margin:36px 0 0}

/* ---------- legal pages (privacy.html, terms.html) ---------- */
.legal-head{border-bottom:1px solid rgba(var(--fg-rgb),.08);padding:26px 0}
.legal-head .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.legal-back{color:rgba(var(--fg-rgb),.55);font-size:14px;font-weight:300;text-decoration:none;transition:color .3s ease}
.legal-back:hover{color:var(--fg)}
.legal-main{padding:76px 0 110px}
.legal-wrap{width:min(760px,calc(100% - 48px));margin:0 auto}
.legal-wrap h1{font-weight:200;letter-spacing:-.03em;font-size:clamp(34px,5vw,54px);line-height:1.05;margin:0 0 14px;color:var(--fg)}
.legal-updated{color:rgba(var(--fg-rgb),.4);font-size:13px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.legal-intro{color:rgba(var(--fg-rgb),.6);font-size:17px;font-weight:300;line-height:1.75;margin:0 0 46px}
.legal-wrap h2{font-weight:300;letter-spacing:-.01em;font-size:22px;line-height:1.3;margin:46px 0 14px;color:var(--fg)}
.legal-wrap h2 span{color:rgba(var(--fg-rgb),.35);font-variant-numeric:tabular-nums;margin-right:.6em}
.legal-wrap p,.legal-wrap li{color:rgba(var(--fg-rgb),.55);font-size:15.5px;font-weight:300;line-height:1.75}
.legal-wrap p{margin:0 0 14px}
.legal-wrap ul{margin:0 0 14px;padding-left:20px}
.legal-wrap li{margin-bottom:8px}
.legal-wrap a{color:rgba(var(--fg-rgb),.8);text-decoration:underline;text-underline-offset:2px}
.legal-wrap a:hover{color:var(--fg)}
.legal-wrap strong{color:rgba(var(--fg-rgb),.85);font-weight:400}
.legal-table{width:100%;border-collapse:collapse;margin:0 0 18px;display:block;overflow-x:auto}
.legal-table th,.legal-table td{text-align:left;padding:12px 14px;border:1px solid rgba(var(--fg-rgb),.1);font-size:14.5px;font-weight:300;color:rgba(var(--fg-rgb),.55);vertical-align:top}
.legal-table th{color:rgba(var(--fg-rgb),.8);font-weight:400}
.legal-fill{border:1px solid rgba(var(--fg-rgb),.22);border-radius:12px;padding:20px 22px;margin:0 0 32px;background:rgba(var(--fg-rgb),.03)}
.legal-fill p{margin:0;color:rgba(var(--fg-rgb),.7);font-size:14.5px}
.legal-foot{border-top:1px solid rgba(var(--fg-rgb),.08);padding:30px 0 44px}
.legal-foot .container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}

/* ---------- responsive ---------- */
@media(max-width:900px){
  [data-desktop-nav]{display:none!important}
  [data-menu-btn]{display:inline-flex!important}
  [data-split]{grid-template-columns:1fr!important}
  [data-steps]{grid-template-columns:1fr!important}
  [data-watermark]{width:820px!important;left:50%!important}
  .mm-why-sticky{position:static!important;top:auto!important}
}
@media(max-width:640px){.mm-why-wm{display:none}}
@media(max-width:620px){[data-stats]{grid-template-columns:1fr 1fr!important}}
/* ---------- welcome gate (index.html) ---------- */
.gate-body{margin:0;background:#141414;overflow:hidden}
.gate{display:flex;min-height:100vh;min-height:100svh;position:relative}
.gate-half{position:relative;flex:1 1 50%;display:flex;align-items:center;justify-content:center;padding:150px 44px 90px;text-decoration:none;overflow:hidden;transition:flex-basis .7s cubic-bezier(.22,.61,.36,1),background-color .5s ease}
.gate-half--dark{background:#141414;color:#fff}
.gate-half--light{background:#f6f5f3;color:#141414}
.gate-half--dark:hover{background:#0e0e0e}
.gate-half--light:hover{background:#fffefc}
.gate:hover .gate-half{flex-basis:43%}
.gate:hover .gate-half:hover{flex-basis:57%}
.gate-inner{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:420px;transition:opacity 1s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.gate-half:hover .gate-inner{transform:translateY(-6px)}
.gate-eyebrow{font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;opacity:.45}
.gate-title{font-weight:200;letter-spacing:-.03em;font-size:clamp(30px,3.6vw,50px);line-height:1.04}
.gate-sub{font-size:15.5px;font-weight:300;line-height:1.7;opacity:.55;max-width:380px}
.gate-go{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:13px 26px;border-radius:999px;border:1px solid currentColor;font-size:14px;font-weight:300;letter-spacing:.03em;opacity:.55;transition:opacity .4s ease,gap .4s cubic-bezier(.22,.61,.36,1)}
.gate-half:hover .gate-go{opacity:1;gap:14px}
/* divider between the halves */
.gate-half--light::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(20,20,20,.12)}
.gate-head{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;padding:46px 20px 0;pointer-events:none;mix-blend-mode:difference;color:#fff;text-align:center}
.gate-logo{width:40px;height:40px;object-fit:contain;margin-bottom:10px}
.gate-welcome{margin:0;font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;opacity:.65}
.gate-question{margin:0;font-weight:200;letter-spacing:-.02em;font-size:clamp(24px,3vw,38px);line-height:1.2}
.gate-foot{position:fixed;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 28px;font-size:12px;font-weight:300;pointer-events:none;mix-blend-mode:difference;color:#fff}
.gate-foot-links{display:flex;gap:18px;flex-wrap:wrap;pointer-events:auto}
.gate-foot a{color:inherit;text-decoration:none;opacity:.6;transition:opacity .3s ease}
.gate-foot a:hover{opacity:1;text-decoration:underline}
/* Intro: logo alone in the middle, then the panel dissolves while the gate content
   is already easing in underneath, so the two read as one movement. */
.gate-intro{position:fixed;inset:0;z-index:400;background:#141414;pointer-events:none;animation:mm-intro-panel 1.5s cubic-bezier(.22,.61,.36,1) forwards}
.gate-intro-logos{position:fixed;inset:0;z-index:401;display:grid;place-items:center;pointer-events:none}
.gate-intro-logo{grid-area:1/1;width:clamp(112px,15vw,188px);height:auto;object-fit:contain;will-change:transform,opacity}
/* Two stacked copies read as one mark until they part. */
.gate-intro-logo--l{animation:mm-intro-split-l 1.5s cubic-bezier(.22,.61,.36,1) forwards}
.gate-intro-logo--r{animation:mm-intro-split-r 1.5s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes mm-intro-panel{0%,56%{opacity:1;visibility:visible}96%{opacity:0;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes mm-intro-split-l{
  0%{opacity:0;transform:translateX(0) rotate(0deg) scale(.62)}
  16%{opacity:1;transform:translateX(0) rotate(0deg) scale(1)}
  54%{opacity:1;transform:translateX(0) rotate(720deg) scale(1)}
  62%{opacity:1;transform:translateX(0) rotate(720deg) scale(1.04)}
  100%{opacity:0;transform:translateX(-26vw) rotate(720deg) scale(.34)}
}
/* The copy heading right lands on the light half, and the artwork is white, so it
   inverts to dark on the way across or it would vanish into the background. */
@keyframes mm-intro-split-r{
  0%{opacity:0;transform:translateX(0) rotate(0deg) scale(.62);filter:invert(0)}
  16%{opacity:1;transform:translateX(0) rotate(0deg) scale(1);filter:invert(0)}
  54%{opacity:1;transform:translateX(0) rotate(720deg) scale(1);filter:invert(0)}
  62%{opacity:1;transform:translateX(0) rotate(720deg) scale(1.04);filter:invert(0)}
  78%{filter:invert(1)}
  100%{opacity:0;transform:translateX(26vw) rotate(720deg) scale(.34);filter:invert(1)}
}
@media(prefers-reduced-motion:reduce){.gate-intro,.gate-intro-logos{display:none}}
@media(max-width:860px){
  @keyframes mm-intro-split-l{0%{opacity:0;transform:translateY(0) rotate(0deg) scale(.62)}16%{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}54%{opacity:1;transform:translateY(0) rotate(720deg) scale(1)}62%{opacity:1;transform:translateY(0) rotate(720deg) scale(1.04)}100%{opacity:0;transform:translateY(-24vh) rotate(720deg) scale(.34)}}
  @keyframes mm-intro-split-r{0%{opacity:0;transform:translateY(0) rotate(0deg) scale(.62);filter:invert(0)}16%{opacity:1;transform:translateY(0) rotate(0deg) scale(1);filter:invert(0)}54%{opacity:1;transform:translateY(0) rotate(720deg) scale(1);filter:invert(0)}62%{opacity:1;transform:translateY(0) rotate(720deg) scale(1.04);filter:invert(0)}78%{filter:invert(1)}100%{opacity:0;transform:translateY(24vh) rotate(720deg) scale(.34);filter:invert(1)}}
}

/* Arriving at the gate: the two colour fields are there from the first frame, and
   the content eases up into them one after the other, so nothing pops in. Gated on
   the .js class (set in the page head) so that without JavaScript everything is
   simply visible instead of stuck at zero opacity. */
.js .gate-head,.js .gate-inner,.js .gate-foot{opacity:0}
.js .gate-head,.js .gate-foot{transform:translateY(14px);transition:opacity 1s ease,transform 1s cubic-bezier(.22,.61,.36,1)}
.js .gate-head{transition-delay:.15s}
/* Both options share one delay so they surface together. */
.js .gate-inner{transition-delay:.38s}
.js .gate-foot{transition-delay:.75s}
.js .gate.is-in .gate-head,.js .gate.is-in .gate-inner,.js .gate-foot.is-in{opacity:1}
.js .gate.is-in .gate-head,.js .gate-foot.is-in{transform:none}
@media(prefers-reduced-motion:reduce){
  .js .gate-head,.js .gate-inner,.js .gate-foot{opacity:1;transform:none;transition:none}
}

/* Leaving the gate: the chosen half grows to fill the screen while everything else
   drops away, so the next page appears to come out of that colour. The veil on the
   destination page (.page-veil) continues the same motion. */
.gate.is-leaving .gate-half{transition:flex-basis .55s cubic-bezier(.65,0,.35,1),opacity .45s ease}
.gate.is-leaving .gate-half.is-chosen{flex-basis:100%}
.gate.is-leaving .gate-half:not(.is-chosen){flex-basis:0%;opacity:0}
/* These have to out-specify the entrance rules above, which hold opacity at 1.
   The footer is a sibling of .gate, so it carries the classes itself. */
.js .gate.is-in.is-leaving .gate-inner,
.js .gate.is-in.is-leaving .gate-head,
.js .gate-foot.is-in.is-leaving,
.gate.is-leaving .gate-inner,
.gate.is-leaving .gate-head{opacity:0;transition:opacity .3s ease}
.gate.is-leaving .gate-half--light::before{opacity:0}

/* Page arrives out of its own background colour. var(--bg) means the dark pages
   fade up from dark and business.html fades up from light, matching the half the
   visitor just clicked. */
.page-veil{position:fixed;inset:0;z-index:300;background:var(--bg);pointer-events:none;animation:mm-veil-out .65s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes mm-veil-out{from{opacity:1}99%{opacity:0;visibility:visible}to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.page-veil{display:none}}
@media(prefers-reduced-motion:reduce){
  .gate-half,.gate-inner,.gate-go{transition:none}
  .gate:hover .gate-half,.gate:hover .gate-half:hover{flex-basis:50%}
}
@media(max-width:860px){
  .gate-body{overflow:auto}
  .gate{flex-direction:column;min-height:auto}
  .gate-half{flex:none;min-height:56vh;padding:132px 28px 64px}
  .gate-half--light{padding-top:56px}
  .gate:hover .gate-half,.gate:hover .gate-half:hover{flex-basis:auto}
  .gate-half--light::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .gate-foot{position:static;mix-blend-mode:normal;color:#141414;background:#f6f5f3;justify-content:center;text-align:center}
}
/* ---------- Production page: green accents ----------
   The same green as the ticks in "What we do", used sparingly on the small marks
   (numbers, rules, the live dot, focus and progress) so the page feels alive without
   turning green. --ok-rgb is defined per theme, so it also works in dark mode. */
.page-production .hero-badge-dot{position:relative;background:rgb(var(--ok-rgb))}
.page-production .hero-badge-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgb(var(--ok-rgb));animation:mm-live 2.6s ease-out infinite}
@keyframes mm-live{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(3.3);opacity:0}}
.page-production .mm-eyebrow-num,
.page-production .mm-why-idx{color:rgb(var(--ok-rgb))}
.page-production .why-rule{background:rgba(var(--ok-rgb),.7)}
.page-production .value-item{position:relative}
.page-production .value-item::before{content:'';position:absolute;top:-1px;left:0;width:44px;height:1px;background:rgb(var(--ok-rgb))}
.page-production #mm-progress{background:linear-gradient(90deg,rgba(var(--ok-rgb),.35),rgb(var(--ok-rgb)));box-shadow:0 0 8px rgba(var(--ok-rgb),.45)}
.page-production ::selection{background:rgba(var(--ok-rgb),.22)}
.page-production .btn--primary .mm-arr{color:rgb(var(--ok-rgb))}
.page-production .field input:focus,.page-production .field textarea:focus{border-bottom-color:rgb(var(--ok-rgb))}
.page-production .nav-desktop a{position:relative}
.page-production .nav-desktop a::after{content:'';position:absolute;left:50%;bottom:-8px;width:0;height:1px;background:rgb(var(--ok-rgb));transform:translateX(-50%);transition:width .35s ease}
.page-production .nav-desktop a.mm-nav-active::after{width:16px}
@media(prefers-reduced-motion:reduce){.page-production .hero-badge-dot::after{animation:none;opacity:0}}

/* How it works: five steps on one line joined by a hairline that runs through the
   number circles. On narrow
   screens the steps stack and the line runs down the left. */
/* follows Our work, whose own 130px bottom padding is the gap */
#process{padding:0}
#process .section-head{max-width:820px;margin-bottom:56px}
.proc{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative}
.proc::before{content:'';position:absolute;top:22px;left:10%;right:10%;height:1px;background:rgba(var(--fg-rgb),.14)}
.proc-step{position:relative;text-align:center}
.proc-num{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;margin:0 auto;border-radius:50%;border:1px solid rgba(var(--ok-rgb),.5);background:var(--bg);box-shadow:inset 0 0 0 44px rgba(var(--ok-rgb),.08);color:rgb(var(--ok-rgb));font-size:15px;font-weight:400}
.proc-step h3{margin:18px 0 0;font-weight:300;font-size:20px;line-height:1.25;color:var(--fg)}
.proc-step p{margin:8px auto 0;max-width:210px;font-size:14.5px;line-height:1.65;color:rgba(var(--fg-rgb),.5)}
@media(max-width:900px){
  .proc{grid-template-columns:1fr;gap:28px;max-width:520px}
  .proc::before{top:22px;bottom:22px;left:22px;right:auto;width:1px;height:auto}
  .proc-step{display:grid;grid-template-columns:44px 1fr;column-gap:18px;text-align:left}
  .proc-num{grid-row:1 / span 2;margin:0}
  .proc-step h3{margin-top:10px}
    .proc-step p{max-width:none;margin:8px 0 0}
}
/* Pricing (trial): the optional pilot on its own wide line with the green accent,
   then the three monthly plans; Pro is lifted with a green border and a badge. */
#pricing{padding:120px 0}
#pricing .section-head{max-width:820px;margin-bottom:48px}
.pilot-card{max-width:1000px;margin:0 auto 24px;padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:32px;border-color:rgba(var(--ok-rgb),.4);background:rgba(var(--ok-rgb),.04)}
.price-tag{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid rgba(var(--ok-rgb),.45);background:rgba(var(--ok-rgb),.07);color:rgb(var(--ok-rgb));font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.pilot-main h3{margin:14px 0 0;font-weight:300;font-size:24px;line-height:1.2;color:var(--fg)}
.price-feats{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.price-feats li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.5;color:rgba(var(--fg-rgb),.75)}
.pilot-main .price-feats{display:flex;flex-wrap:wrap;gap:10px 28px}
.price-note{margin:14px 0 0;font-size:13.5px;color:rgba(var(--fg-rgb),.5)}
.pilot-price{flex:0 0 auto;text-align:right}
.price{display:block;font-weight:200;letter-spacing:-.03em;font-size:clamp(40px,4.4vw,56px);line-height:1;color:var(--fg)}
.pilot-price .price{color:rgb(var(--ok-rgb))}
.price-per{display:block;margin-top:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--fg-rgb),.45)}
.plan-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan-card{position:relative;display:flex;flex-direction:column;padding:32px 30px 30px}
.plan-card--pro{border-color:rgba(var(--ok-rgb),.55);box-shadow:0 22px 50px -32px rgba(var(--ok-rgb),.6)}
.plan-badge{position:absolute;top:-12px;left:30px;padding:5px 11px;border-radius:999px;background:rgb(var(--ok-rgb));color:#fff;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.plan-name{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--fg-rgb),.6)}
.plan-price{display:flex;align-items:baseline;gap:10px;margin-top:18px}
.plan-price .price{display:inline}
.plan-price .price-per{display:inline;margin:0}
.plan-sub{margin-top:10px;font-size:13px;color:rgb(var(--ok-rgb))}
.plan-card .price-feats{flex:1;align-content:start;margin-top:22px;padding-top:22px;border-top:1px solid rgba(var(--fg-rgb),.1)}
.plan-cta{justify-content:center;margin-top:26px;padding:12px 20px;font-size:14px}
.plan-card--pro .plan-cta{border-color:rgba(var(--ok-rgb),.55);color:rgb(var(--ok-rgb))}
.price-facts{list-style:none;max-width:1000px;margin:28px auto 0;padding:18px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;border-top:1px solid rgba(var(--fg-rgb),.1);border-bottom:1px solid rgba(var(--fg-rgb),.1)}
.price-facts li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(var(--fg-rgb),.72)}
.price-foot{margin:22px auto 0;text-align:center;font-size:13px;line-height:1.7;color:rgba(var(--fg-rgb),.45)}
@media(max-width:900px){
  .plan-grid{grid-template-columns:1fr;max-width:460px;gap:28px}
  .pilot-card{flex-direction:column;align-items:flex-start;gap:20px;padding:28px 24px}
  .pilot-price{text-align:left}
}

/* ---------- language switcher (EN / DE / PL) ----------
   Plain links to the same page in the other language: no script, nothing stored. In
   the header it sits before the theme button; under 900px it moves into the menu. */
.lang-switch{display:inline-flex;align-items:center;gap:2px}
.lang-switch a{padding:6px 7px;font-size:12px;font-weight:400;letter-spacing:.12em;color:rgba(var(--fg-rgb),.42);text-decoration:none;transition:color .3s ease}
.lang-switch a:hover,.lang-switch a[aria-current]{color:var(--fg)}
.page-production .lang-switch a[aria-current]{color:rgb(var(--ok-rgb))}
.lang-switch--mobile{display:flex;gap:4px;margin-top:6px;padding-top:8px;border-top:1px solid rgba(var(--fg-rgb),.08)}
.nav-mobile .lang-switch a{padding:10px 8px}
@media(max-width:900px){.header-actions .lang-switch{display:none}}
.legal-actions{display:flex;align-items:center;gap:20px}
/* gate: top right, white with difference so it reads on both halves */
.gate-lang{position:absolute;top:20px;right:22px;z-index:3;mix-blend-mode:difference}
.gate-lang a{color:#fff;opacity:.55}
.gate-lang a:hover,.gate-lang a[aria-current]{color:#fff;opacity:1}
.js .gate-lang{opacity:0;transition:opacity 1s ease .75s}
.js .gate.is-in .gate-lang{opacity:1}
.gate.is-leaving .gate-lang{opacity:0;transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){.js .gate-lang{opacity:1;transition:none}}
/* Header labels never wrap; longer translations (PL, DE) get a tighter gap first and
   switch to the menu button a little earlier instead of breaking onto two lines. */
.nav-desktop a,.btn--nav,.brand-name{white-space:nowrap}
@media(max-width:1280px){.nav-desktop{gap:24px}}
/* set by initNavFit when the links do not fit on one line */
#mm-header.nav-collapsed [data-desktop-nav],#mm-header.nav-collapsed .header-actions .lang-switch{display:none!important}
#mm-header.nav-collapsed [data-menu-btn]{display:inline-flex!important}
/* translation note under the date on the PL and DE legal pages */
.legal-note{display:inline-block;margin-top:6px;text-transform:none;letter-spacing:0;font-size:13px}