/* Mix shell: shared background, soft seams between blocks, unified fonts */
html,body{margin:0;padding:0}
body.mx-page{background:var(--mx-tone);min-height:100vh;overflow-x:hidden}
.mx-bg{position:fixed;inset:-8%;z-index:-2;background:url("bg.jpg") center/cover no-repeat;filter:blur(var(--mx-blur,26px)) saturate(1.1)}
.mx-bg::after{content:"";position:absolute;inset:0;background:var(--mx-tone);opacity:var(--mx-veil,.55)}
.mx-block{position:relative}
.mx-block.mx-same{background:transparent!important}
/* Seam between blocks: each block starts with a band that overlaps the end of the previous one and blurs it
   progressively (backdrop blur under a gradient mask), so sections melt into each other while scrolling.
   Cheaper than masking whole sections (a tall video section is too heavy to mask).
   Length, blur and tint vary per seam (inline --mx-seam, --mx-seam-blur, --mx-seam-tint). */
.mx-block.mx-seam-blur{margin-top:calc(var(--mx-seam) * -1);padding-top:var(--mx-seam)}
.mx-block.mx-seam-net::before{display:none}
/* Diagonal cut: the previous block loses a triangle at the bottom (clip-path, cheap even on tall sections);
   the next block overlaps that height. "diag-blur" adds the blur band along the diagonal. */
/* (clip-path is written inline per block: top edge from its own diagonal seam, bottom edge from the next one) */
.mx-block.mx-seam-diag{margin-top:calc(var(--mx-seam) * -1)}
.mx-block.mx-seam-off{margin-top:0!important;padding-top:0!important}.mx-block.mx-seam-off::before{display:none!important}
.mx-block.mx-seam-diag:not(.mx-diag-blur)::before{display:none}
.mx-block.mx-diag-blur::before{height:var(--mx-seam)!important;-webkit-mask-image:linear-gradient(var(--mx-diag),transparent 22%,#000000 50%,transparent 78%)!important;mask-image:linear-gradient(var(--mx-diag),transparent 22%,#000000 50%,transparent 78%)!important}
.mx-dir-l{--mx-diag:to bottom left}.mx-dir-r{--mx-diag:to bottom right}
.mx-block.mx-seam::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--mx-seam,120px) * 1.35);z-index:4;pointer-events:none;
 -webkit-backdrop-filter:blur(var(--mx-seam-blur,12px));backdrop-filter:blur(var(--mx-seam-blur,12px));
 background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--mx-tone) var(--mx-seam-tint,30%),transparent));
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000000 55%,transparent);mask-image:linear-gradient(to bottom,transparent,#000000 55%,transparent)}
.mx-block.mx-seam:not(.mx-same)>main{border-radius:0}
.mx-page h1,.mx-page h2,.mx-page h3,.mx-page .brand,.mx-page .logo{font-family:"Manrope",Georgia,serif!important}
.mx-page p,.mx-page li,.mx-page a,.mx-page button,.mx-page summary,.mx-page small,.mx-page span,.mx-page label,.mx-page input{font-family:"DM Sans",Arial,sans-serif}
.mx-page :is(h1,h2,h3,h4) :is(span,em,i,b,strong,a,small){font-family:inherit!important}
.mx-block:not(.mx-home) .reveal,.mx-block:not(.mx-home) [class*="reveal"]{opacity:1!important;transform:none!important;filter:none!important}
/* blocks without their template's script: show what the script would reveal */
.mx-block:not(.mx-home) :is([data-fade],[data-split],[data-reveal],[data-scrub],[data-depth]){opacity:1!important;transform:none!important;clip-path:none!important;visibility:visible!important}
/* floating pictures in card blocks */
@keyframes mx-float{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
.mx-float :is(figure,.card,article,picture)>img,.mx-float img{animation:mx-float 6s ease-in-out infinite alternate}
.mx-float img:nth-of-type(2n){animation-duration:7.5s;animation-delay:-2s}
.mx-float img:nth-of-type(3n){animation-duration:8.5s;animation-delay:-4s}
@media(prefers-reduced-motion:reduce){.mx-float img{animation:none}}
.mx-lightbox{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#000d;padding:24px}
.mx-lightbox img{max-width:100%;max-height:100%;border-radius:12px}