/* MIXOO background continuity override
   Safe version: clean dark continuous background, no fake smoke/gradient experiment.
   Keeps the glass UI intact and removes hard horizontal section bands. */

html,
html body{
  background:#010208!important;
  min-height:100%!important;
}

html body{
  position:relative!important;
  isolation:isolate!important;
  background:#010208!important;
}

html body::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(1100px 680px at 50% 34%,rgba(15,23,42,.34),rgba(1,2,8,0) 70%),
    linear-gradient(180deg,#010208 0%,#02040b 48%,#03040d 100%)!important;
  opacity:1!important;
  display:block!important;
}

html body::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.28) 58%,rgba(0,0,0,.42) 100%)!important;
  opacity:1!important;
  display:block!important;
}

html body > *{
  position:relative;
  z-index:2;
}

html body .nav{
  z-index:60!important;
}

html body main,
html body main#top,
html body main#top > section,
html body main#top > section.hero,
html body main#top > section#mix-products,
html body .performances,
html body .process,
html body .order,
html body .policies,
html body .team,
html body .testimonials,
html body .showcase{
  background:transparent!important;
  background-color:transparent!important;
  border-top-color:transparent!important;
  border-bottom-color:transparent!important;
}

html body main#top > section.hero{
  margin-bottom:0!important;
}

html body main#top > section#mix-products{
  margin-top:-21px!important;
  padding-top:1px!important;
}

html body main#top > section#mix-products::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:-96px!important;
  height:176px!important;
  pointer-events:none!important;
  z-index:0!important;
  background:linear-gradient(180deg,rgba(1,2,8,0),rgba(2,4,11,.74) 54%,rgba(2,4,11,0))!important;
  filter:blur(22px)!important;
}

html body main#top > section#mix-products > .wrap{
  position:relative!important;
  z-index:1!important;
}

html body main > section:not(.hero):not(.final) > .wrap{
  background:linear-gradient(145deg,rgba(255,255,255,.078),rgba(255,255,255,.03) 42%,rgba(118,98,180,.036))!important;
  border-top-color:rgba(216,245,255,.10)!important;
  border-bottom-color:rgba(216,245,255,.06)!important;
}

html body .section-head{
  border-bottom-color:rgba(255,255,255,.07)!important;
}

@media(max-width:820px){
  html body main#top > section#mix-products{
    margin-top:8px!important;
    padding-top:0!important;
  }

  html body main#top > section#mix-products::before{
    top:-28px!important;
    height:48px!important;
    filter:blur(14px)!important;
  }

  html body main#top > section#mix-products > .wrap,
  html body main#top > section:not(.hero):not(#mix-products):not(.final) > .wrap,
  html body .pricing-card,
  html body .form-shell,
  html body .why,
  html body .quotes,
  html body .faq-list{
    width:calc(100% - 48px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  html body #mix-products .product-grid,
  html body #mix-products .product-grid.has-expanded,
  html body #mix-products .product-grid:has(.mix-product.selected-product),
  html body .services,
  html body .steps,
  html body .addons,
  html body .quotes{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }

  html body #mix-products .mix-product,
  html body .service,
  html body .step,
  html body .addon,
  html body .quote,
  html body .pricing-card,
  html body .form-shell{
    box-sizing:border-box!important;
  }

  html body main#top > section:not(.hero) .section-head h2,
  html body main#top > section:not(.hero) h2{
    font-size:clamp(24px,7vw,30px)!important;
    line-height:1!important;
    letter-spacing:-.045em!important;
  }

  html body #mix-products .product-heading h2{
    font-size:clamp(22px,6.2vw,25px)!important;
  }

  html body main#top > section:not(.hero) .section-head p,
  html body main#top > section:not(.hero) p,
  html body #mix-products .product-heading p{
    font-size:12px!important;
    line-height:1.4!important;
  }

  html body #mix-products .mix-product > h3,
  html body .service h3,
  html body .step h3,
  html body .addon strong,
  html body .quote blockquote,
  html body .form-page h3{
    font-size:14px!important;
    line-height:1.15!important;
    letter-spacing:-.02em!important;
  }

  html body #mix-products .mix-product > h3{
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:13.5px!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }

  html body #mix-products .mix-product > .product-price{
    font-size:22px!important;
    line-height:1!important;
  }

  html body #mix-products .mix-product > .product-tagline,
  html body #mix-products .mix-product > ul,
  html body .service p,
  html body .step p,
  html body .include li,
  html body .quote small,
  html body .faq-answer{
    font-size:11px!important;
    line-height:1.35!important;
  }

  html body .services{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    align-items:stretch!important;
  }

  html body .services > .service{
    width:100%!important;
    min-width:0!important;
    min-height:82px!important;
    height:auto!important;
    padding:12px 10px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:4px!important;
  }

  html body .services > .service > span{
    display:none!important;
  }

  html body .services > .service > div{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  html body .services > .service h3,
  html body .services > .service p{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  html body main#top > section:not(.hero){
    padding-top:0!important;
    padding-bottom:0!important;
    margin-top:10px!important;
    margin-bottom:0!important;
  }

  html body main#top > section:not(.hero) > .wrap{
    margin-top:0!important;
    margin-bottom:0!important;
  }

  html body main#top > section.process{
    padding-top:0!important;
  }

  html body main#top > section.final{
    width:calc(100% - 48px)!important;
    max-width:none!important;
    margin:10px auto 18px!important;
    padding:34px 14px!important;
    box-sizing:border-box!important;
    border-bottom:1px solid rgba(216,245,255,.16)!important;
  }

  html body main#top > section.final > div{
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  html body footer.footer{
    padding:11px 10px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    min-height:36px!important;
    border-top-width:1px!important;
    box-sizing:border-box!important;
  }

  html body footer.footer .footer-links{
    grid-column:1!important;
    justify-self:start!important;
    justify-content:flex-start!important;
    gap:7px!important;
    min-width:0!important;
    margin:0!important;
    white-space:nowrap!important;
  }

  html body footer.footer .footer-instagram{
    grid-column:2!important;
    justify-self:center!important;
    margin:0!important;
  }

  html body footer.footer .footer-copy{
    grid-column:3!important;
    justify-self:end!important;
    text-align:right!important;
    max-width:none!important;
    margin:0!important;
    white-space:nowrap!important;
  }

  html body footer.footer .footer-links a,
  html body footer.footer .footer-copy{
    font-size:8.5px!important;
    line-height:1!important;
  }

  html body footer.footer .footer-instagram span{
    width:17px!important;
    height:17px!important;
  }

  html body footer.footer .footer-instagram span:before{
    width:5.5px!important;
    height:5.5px!important;
    left:4px!important;
    top:4px!important;
  }
}

@media(min-width:821px){
  html body main#top > section:not(.hero) h2,
  html body main#top > section:not(.hero) .section-head h2,
  html body main#top > section.final h2{
    font-size:clamp(44px,4.6vw,66px)!important;
    line-height:.88!important;
    letter-spacing:-.058em!important;
  }

  html body main#top > section:not(.hero):not(#mix-products) > .wrap,
  html body main#top > section.final{
    padding-top:34px!important;
    padding-bottom:34px!important;
  }

  html body main#top > section:not(.hero){
    margin-top:18px!important;
    margin-bottom:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  html body main#top > section#mix-products{
    margin-top:8px!important;
    padding-top:0!important;
  }

  html body main#top > section:not(.hero) > .wrap,
  html body main#top > section.final{
    margin-top:0!important;
    margin-bottom:0!important;
  }

  html{
    scroll-padding-top:72px!important;
  }

  html body main#top > section,
  html body main#top > section[id],
  html body main#top > section#listen,
  html body main#top > section#mix-products,
  html body main#top > section#faq,
  html body main#top > section.performances,
  html body main#top > section.process,
  html body main#top > section.order,
  html body main#top > section.policies,
  html body main#top > section.final{
    scroll-margin-top:72px!important;
  }

  html body .gallery-toggle.is-sticky{
    position:fixed!important;
    inset:auto 22px 32px auto!important;
    top:auto!important;
    right:22px!important;
    bottom:32px!important;
    left:auto!important;
    transform:none!important;
    z-index:999!important;
    min-width:0!important;
    writing-mode:vertical-rl!important;
  }

  html body .gallery-toggle.is-sticky:hover{
    transform:none!important;
  }

  html body main#top > .hero .hero-title-line{
    overflow:visible!important;
    padding-right:.18em!important;
    margin-right:-.18em!important;
  }

  html body main#top > .hero .hero-title-accent{
    display:inline-block!important;
    padding-right:.20em!important;
    margin-right:-.20em!important;
    background:linear-gradient(90deg,#27b9ff 0%,#7e7cff 52%,#d64dff 100%)!important;
    background-size:118% 100%!important;
    background-position:left center!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    color:transparent!important;
    -webkit-text-fill-color:transparent!important;
    overflow:visible!important;
    box-decoration-break:clone!important;
    -webkit-box-decoration-break:clone!important;
  }
}

html body main#top > .hero .hero-heading,
html body main#top > .hero .hero-heading h1{
  overflow:visible!important;
}

html body main#top > .hero .hero-title-line{
  display:inline-block!important;
  max-width:calc(100% + .7em)!important;
  padding-right:.36em!important;
  padding-left:.03em!important;
  margin-right:-.36em!important;
  overflow:visible!important;
  box-decoration-break:clone!important;
  -webkit-box-decoration-break:clone!important;
}

html body main#top > .hero .hero-title-accent{
  padding-right:.28em!important;
  margin-right:-.28em!important;
  overflow:visible!important;
}