/* LUNA corporate redesign layer. Keeps the existing brand palette intact. */
:root{
  --yd:#F5C800!important;
  --shadow:0 18px 54px rgba(16,16,16,.09);
  --shadow-strong:0 28px 80px rgba(16,16,16,.14);
}

body{
  background:
    linear-gradient(180deg,#fff 0,#fff 420px,var(--pap) 421px,var(--wh) 760px),
    var(--wh);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.55;
  background-image:
    linear-gradient(rgba(16,16,16,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,16,16,.035) 1px,transparent 1px);
  background-size:44px 44px;
}

.wrap{padding:0 clamp(1rem,3vw,2.4rem)}

nav.topnav{
  height:78px!important;
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(16px)!important;
  box-shadow:0 12px 36px rgba(16,16,16,.06)!important;
}
nav.topnav .logo img{height:48px!important}
nav.topnav .nl{gap:clamp(.8rem,1.5vw,1.7rem)}
nav.topnav .nl a{font-size:12px!important}
nav.topnav .nl a.hot,
.show-name:hover,
.hb b i,
.idx b,
.mcard .mk,
.vfloat span{
  color:var(--y)!important;
}
.btn{
  min-height:44px;
  border-radius:0;
  box-shadow:0 10px 24px rgba(245,200,0,.18);
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{box-shadow:none}

.hero{
  padding:calc(var(--nav) + 5.2rem) 0 4.8rem!important;
  position:relative;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--ln),transparent);
}
.hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(380px,.95fr)!important;
  gap:clamp(2.2rem,5vw,5.4rem)!important;
}
.hero h1{
  font-size:clamp(2.65rem,5.9vw,5.4rem)!important;
  line-height:.94!important;
  letter-spacing:-.045em!important;
  max-width:820px;
}
.hero h1 mark,
h1.page mark{
  background:linear-gradient(transparent 58%,var(--y) 58%)!important;
}
.lead{font-size:clamp(1rem,1.35vw,1.16rem);color:#4f4c45}
.hero .lead{max-width:40rem}
.hero-cta{margin-top:2.2rem!important}
.hero-proof{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0!important;
  border:1px solid var(--ln);
  background:rgba(255,255,255,.72);
  margin-top:2.6rem!important;
}
.hp{
  border-left:0!important;
  border-right:1px solid var(--ln);
  padding:1rem 1.15rem!important;
  min-width:0;
}
.hp:last-child{border-right:0}

.show{
  padding:1.3rem;
  background:linear-gradient(180deg,#fff,var(--pap));
  border:1px solid var(--ln);
  box-shadow:var(--shadow);
}
.show::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(16,16,16,.045);
  pointer-events:none;
}
.show-stage{height:min(56vh,500px)!important}
.show-stage .op{
  inset:0 .5rem!important;
  align-items:center!important;
  justify-content:center!important;
}
.show-stage .op img,
.show-stage .op.op-turning img,
.show-stage .op.op-washing img{
  width:86%!important;
  height:68%!important;
  max-width:86%!important;
  max-height:68%!important;
  object-fit:contain!important;
  object-position:center center!important;
}
.show-cap{
  border-top:1px solid var(--ln);
  padding-top:1rem;
}
.show-name{font-size:1.35rem!important}
.show-nav button{
  background:var(--bk)!important;
  color:var(--y)!important;
  border-color:var(--bk)!important;
}
.show-nav button:hover{background:var(--y)!important;color:var(--bk)!important}

.hero-base{
  background:#fff!important;
  border-top:0!important;
  border-bottom:1px solid var(--ln)!important;
}
.hero-base .wrap{
  display:grid!important;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.hb{
  padding:1.6rem 1.5rem!important;
  background:linear-gradient(180deg,#fff,var(--pap));
}

section.blk{padding:clamp(4rem,6vw,6.5rem) 0}
.sec-head{
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--ln);
}
.sec-head h2{max-width:18ch}
.idx b{color:var(--yd)!important}

.band{
  margin:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.band .wrap{padding-top:4.2rem!important;padding-bottom:4.2rem!important}
.band h2{max-width:28ch!important}

.cats2{gap:clamp(2.2rem,5vw,5.5rem)!important}
.cstep{
  padding:2rem 0!important;
  transition:background .2s,padding-left .2s;
}
.cstep:hover,.cstep.act{
  background:linear-gradient(90deg,rgba(245,200,0,.08),transparent 62%);
  padding-left:1rem!important;
}
.cats2-photo{
  background:linear-gradient(180deg,#fff,var(--pap));
  border:1px solid var(--ln);
  box-shadow:var(--shadow);
  opacity:1!important;
}
.cats2-photo .frame{inset:1rem!important}
.cat-spacer{height:55vh!important}

.card{
  border-color:var(--ln);
  box-shadow:0 1px 0 rgba(16,16,16,.03);
}
.card:hover{
  border-color:var(--bk);
  box-shadow:var(--shadow);
}
.card .im{
  background:linear-gradient(180deg,#fff,var(--pap));
  min-height:180px;
}
.card .bd{padding:1.2rem 1.25rem 1.3rem}
.card .ft .go,
.card .ft button{
  min-height:36px;
  display:inline-flex;
  align-items:center;
}

.svc .cc,
.cc{
  box-shadow:0 1px 0 rgba(16,16,16,.04);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.svc .cc:hover,
.cc:hover{
  transform:translateY(-3px);
  border-color:var(--bk);
  box-shadow:var(--shadow);
}

.pagehead{
  padding:calc(var(--nav) + 4rem) 0 3rem!important;
  background:linear-gradient(180deg,#fff,var(--pap));
  border-bottom:1px solid var(--ln);
}
h1.page{
  font-size:clamp(2.5rem,5vw,4.7rem)!important;
  line-height:.96!important;
}
.grid4{gap:1rem!important}

.fbar{
  border-top:3px solid var(--y);
  box-shadow:var(--shadow);
}
.fchip,.fsel,.fsearch{min-height:44px}
.fchip.on{box-shadow:0 8px 18px rgba(245,200,0,.18)}

footer.ft{
  background:var(--bk);
  color:#fff;
  border-top:0!important;
  margin-top:0!important;
}
footer.ft .bar,
footer.ft .cols{border-color:rgba(255,255,255,.14)!important}
footer.ft a,
footer.ft .bar,
footer.ft h5,
footer.ft .cols a{color:rgba(255,255,255,.66)!important}
footer.ft a:hover,
footer.ft .cols a:hover{color:#fff!important}

@media(max-width:1080px){
  .nr .btn{display:none}
  .hero-grid{grid-template-columns:1fr!important}
  .show{max-width:720px}
}

@media(max-width:760px){
  nav.topnav{height:70px!important}
  nav.topnav .wrap{gap:.7rem}
  nav.topnav .nl{display:none!important}
  nav.topnav .logo img{height:42px!important}
  .langsw{display:none}
  .hero{padding:calc(var(--nav) + 3rem) 0 3rem!important}
  .hero h1{
    font-size:clamp(2.3rem,13vw,3.35rem)!important;
    line-height:.96!important;
  }
  .hero-proof{display:grid!important;grid-template-columns:1fr}
  .hp{border-right:0!important;border-bottom:1px solid var(--ln)}
  .hp:last-child{border-bottom:0}
  .show{padding:.8rem}
  .show-stage{height:340px!important;min-height:300px!important}
  .hero-base .wrap{grid-template-columns:1fr 1fr}
  .hb{min-width:0!important;border-left:0!important}
  .sec-head{align-items:flex-start;flex-direction:column}
  .cats2-photo{display:none}
  .grid4,.grid3{gap:.85rem!important}
  footer.ft .bar{gap:1rem;flex-direction:column}
}

@media(max-width:520px){
  .hero-base .wrap{grid-template-columns:1fr}
  .show-cap{align-items:flex-start;flex-direction:column}
  .show-nav{width:100%}
  .show-nav button{flex:1}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* manufacturer logos */
.blogo{display:flex;align-items:center;justify-content:flex-start;min-height:72px}
.blogo img{display:block;max-width:220px;max-height:64px;width:auto;height:auto;object-fit:contain;object-position:left center}
.logo-fallback-text{display:none;font:800 24px/1 Arial,Helvetica,sans-serif;letter-spacing:.06em;color:#111}
.blogo.logo-fallback .logo-fallback-text{display:block}