@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
 --ink:#431b21;
 --muted:#79696a;
 --teal:#cf3043;
 --teal2:#7b202d;
 --line:#e6cfcc;
 --paper:#f4dfdc;
 --white:#fff;
 --lime:#df9da0;
 --shadow:0 18px 50px rgba(18,48,57,.1);
 --radius:22px
}
*{
 box-sizing:border-box
}
html{
 scroll-behavior:smooth
}
body{
 margin:0;
 color:var(--ink);
 background:var(--paper);
 font:16px/1.65 'DM Sans',Arial,sans-serif
}
h1,h2,h3,h4{
 font-family:Manrope,'DM Sans',sans-serif;
 line-height:1.12;
 letter-spacing:-.035em;
 margin:0 0 16px
}
h1{
 font-size:clamp(2.7rem,6.5vw,5.6rem);
 font-weight:700;
 max-width:850px
}
h2{
 font-size:clamp(2rem,4vw,3.35rem)
}
h3{
 font-size:1.25rem
}
p{
 margin:0 0 16px;
 color:var(--muted)
}
a{
 color:inherit;
 text-decoration:none
}
.wrap{
 width:min(1160px,calc(100% - 48px));
 margin:auto
}
.topline{
 background:var(--ink);
 color:#d8e7e8;
 font-size:12px;
 letter-spacing:.03em
}
.topline .wrap{
 display:flex;
 justify-content:space-between;
 padding:8px 0
}
.topline a{
 color:white
}
.header{
 position:sticky;
 top:0;
 z-index:50;
 background:rgba(247,250,249,.94);
 backdrop-filter:blur(14px);
 border-bottom:1px solid rgba(19,45,58,.08)
}
.nav{
 height:80px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:24px
}
.brand{
 display:flex;
 align-items:center;
 gap:11px;
 font:800 16px Manrope,sans-serif;
 letter-spacing:-.03em
}
.brand img{
 width:auto;
 height:58px;
 max-width:250px;
 object-fit:contain
}
.brand small{
 display:block;
 font:600 9px 'DM Sans',sans-serif;
 letter-spacing:.18em;
 color:var(--muted);
 margin-top:1px
}
.links{
 display:flex;
 align-items:center;
 gap:27px;
 font-size:14px;
 font-weight:600
}
.links a:not(.btn):hover,.links a.active{
 color:var(--teal2)
}
.btn{
 display:inline-flex;
 justify-content:center;
 align-items:center;
 gap:9px;
 background:var(--teal);
 color:#062e32;
 padding:14px 20px;
 border-radius:999px;
 font-weight:700;
 font-size:14px;
 transition:.2s;
 border:0;
 cursor:pointer
}
.btn:hover{
 transform:translateY(-2px);
 background:#df5966;
 box-shadow:0 9px 23px #cf304330
}
.btn.dark{
 background:var(--ink);
 color:white
}
.btn.dark:hover{
 background:#24566a
}
.btn.line{
 background:transparent;
 border:1px solid #d9c1bf;
 color:var(--ink)
}
.btn.small{
 padding:10px 15px;
 font-size:13px
}
.menu{
 display:none;
 background:none;
 border:0;
 font-size:26px;
 color:var(--ink)
}
.eyebrow{
 display:inline-flex;
 gap:9px;
 align-items:center;
 text-transform:uppercase;
 font-size:11px;
 letter-spacing:.17em;
 font-weight:700;
 color:var(--teal2);
 margin-bottom:20px
}
.eyebrow:before{
 content:'';
 width:24px;
 height:2px;
 background:var(--teal)
}
.hero{
 padding:82px 0 75px;
 overflow:hidden;
 position:relative;
 background:radial-gradient(ellipse at 87% 36%,#f0d0cd 0,#f4dfdc 20%,transparent 48%),var(--paper)
}
.hero-grid{
 display:grid;
 grid-template-columns:1.04fr .96fr;
 align-items:center;
 gap:36px
}
.hero h1 em{
 font-style:normal;
 color:var(--teal2)
}
.hero-copy{
 font-size:18px;
 max-width:570px;
 margin:24px 0 28px
}
.actions{
 display:flex;
 gap:12px;
 flex-wrap:wrap
}
.proofline{
 display:flex;
 gap:20px;
 flex-wrap:wrap;
 margin-top:30px;
 color:var(--muted);
 font-size:12px;
 font-weight:600
}
.proofline span:before{
 content:'✓';
 color:var(--teal2);
 font-size:15px;
 margin-right:7px
}
.visual{
 position:relative;
 min-height:435px;
 display:grid;
 place-items:center
}
.visual:before{
 content:'';
 position:absolute;
 width:390px;
 height:390px;
 border-radius:50%;
 background:#efcfcd
}
.visual:after{
 content:'';
 position:absolute;
 width:280px;
 height:280px;
 border-radius:50%;
 border:1px solid #c98589;
 opacity:.55
}
.machine{
 position:relative;
 z-index:1;
 width:min(100%,470px);
 filter:drop-shadow(0 24px 25px #431b2126)
}
.tag{
 position:absolute;
 z-index:2;
 background:#fff;
 border:1px solid var(--line);
 border-radius:14px;
 padding:11px 15px;
 box-shadow:var(--shadow);
 font-size:12px;
 font-weight:700
}
.tag.one{
 right:1%;
 top:16%
}
.tag.two{
 left:0;
 bottom:17%
}
.tag i{
 display:inline-block;
 width:8px;
 height:8px;
 background:var(--teal);
 border-radius:50%;
 margin-right:7px
}
.section{
 padding:86px 0
}
.section.white{
 background:white
}
.section.dark{
 background:var(--ink);
 color:white
}
.section.dark p{
 color:#b6c8cc
}
.section-head{
 display:flex;
 align-items:end;
 justify-content:space-between;
 gap:24px;
 margin-bottom:36px
}
.section-head>div{
 max-width:660px
}
.section-head p{
 max-width:580px
}
.grid3{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:18px
}
.grid2{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:18px
}
.card{
 background:white;
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:25px;
 transition:.22s
}
.card:hover{
 transform:translateY(-4px);
 box-shadow:var(--shadow);
 border-color:#b9ded8
}
.iconbox{
 width:52px;
 height:52px;
 border-radius:16px;
 background:#f3e5e3;
 color:var(--teal2);
 display:grid;
 place-items:center;
 margin-bottom:22px
}
.iconbox svg{
 width:26px;
 height:26px
}
.textlink{
 font-weight:700;
 color:var(--teal2);
 font-size:14px;
 display:inline-flex;
 align-items:center;
 gap:7px;
 margin-top:5px
}
.textlink:hover{
 gap:12px
}
.pill{
 display:inline-flex;
 padding:7px 12px;
 border-radius:999px;
 background:#f4e3e0;
 color:var(--teal2);
 font-size:11px;
 font-weight:700;
 letter-spacing:.06em;
 text-transform:uppercase
}
.split{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:60px;
 align-items:center
}
.visualpanel{
 min-height:375px;
 border-radius:28px;
 background:linear-gradient(140deg,#68202b,#9f2636);
 position:relative;
 overflow:hidden;
 padding:35px;
 color:white;
 display:flex;
 align-items:end
}
.visualpanel:before,.visualpanel:after{
 content:'';
 position:absolute;
 border:1px solid #e0a2a050;
 border-radius:50%;
 width:340px;
 height:340px;
 top:-100px;
 right:-60px
}
.visualpanel:after{
 width:230px;
 height:230px;
 top:-45px;
 right:-5px
}
.visualpanel svg{
 position:absolute;
 inset:7% 12% auto auto;
 width:70%;
 height:75%;
 opacity:.9
}
.visualpanel .caption{
 position:relative;
 z-index:2
}
.visualpanel .caption strong{
 font:700 22px Manrope
}
.visualpanel .caption p{
 color:#ead2d0;
 margin:8px 0 0
}
.listcheck{
 list-style:none;
 padding:0;
 margin:22px 0
}
.listcheck li{
 padding:10px 0 10px 30px;
 position:relative;
 border-bottom:1px solid var(--line);
 color:var(--ink)
}
.listcheck li:before{
 content:'✓';
 position:absolute;
 left:0;
 color:var(--teal2);
 font-weight:700
}
.cta-band{
 border-radius:28px;
 background:var(--lime);
 padding:42px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px
}
.cta-band h2{
 font-size:clamp(1.8rem,3vw,2.65rem);
 max-width:650px;
 margin:0
}
.cta-band p{
 color:#624c4d;
 margin:10px 0 0
}
.cta-band .btn{
 flex-shrink:0;
 background:var(--ink);
 color:white
}
.pagehero{
 padding:70px 0 54px;
 background:radial-gradient(ellipse at 90% 15%,#f0d0cd 0,transparent 40%),var(--paper)
}
.pagehero h1{
 font-size:clamp(2.5rem,5vw,4.3rem);
 max-width:840px
}
.pagehero p{
 font-size:17px;
 max-width:730px;
 margin-top:18px
}
.product{
 padding:0;
 overflow:hidden
}
.product-art{
 height:190px;
 background:linear-gradient(145deg,#f5e5e2,#eccac8);
 display:grid;
 place-items:center;
 position:relative
}
.product-art svg,.product-art img{
 width:74%;
 height:74%;
 object-fit:contain
}
.product-body{
 padding:23px
}
.product-body h3{
 margin:14px 0 9px
}
.product-body p{
 font-size:13px;
 min-height:62px
}
.product-filter{
 display:flex;
 gap:9px;
 flex-wrap:wrap;
 margin-bottom:28px
}
.filter{
 border:1px solid var(--line);
 border-radius:999px;
 padding:9px 15px;
 background:#fff;
 font:600 13px 'DM Sans';
 cursor:pointer;
 color:var(--ink)
}
.filter.active,.filter:hover{
 background:var(--ink);
 color:white;
 border-color:var(--ink)
}
.specbox{
 background:#f6e8e6;
 border:1px solid var(--line);
 padding:22px;
 border-radius:18px
}
.specbox h3{
 margin-bottom:15px
}
.specgrid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:12px
}
.spec{
 padding:14px;
 background:white;
 border-radius:12px
}
.spec b{
 display:block;
 font-size:14px
}
.spec span{
 font-size:12px;
 color:var(--muted)
}
.note{
 font-size:12px;
 color:var(--muted);
 margin-top:12px
}
.steps{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:18px;
 counter-reset:steps
}
.step{
 padding:22px;
 border-top:2px solid var(--teal);
 background:#f7eae8
}
.step:before{
 counter-increment:steps;
 content:'0' counter(steps);
 font:700 27px Manrope;
 color:var(--teal2);
 display:block;
 margin-bottom:18px
}
.step p{
 font-size:14px
}
.contactgrid{
 display:grid;
 grid-template-columns:.8fr 1.2fr;
 gap:28px
}
.contactcard{
 background:var(--ink);
 color:white;
 padding:30px;
 border-radius:24px
}
.contactcard p{
 color:#ddc5c3
}
.contactline{
 padding:17px 0;
 border-top:1px solid #ffffff35
}
.contactline small{
 display:block;
 color:#c7a8a8;
 font-size:11px;
 text-transform:uppercase;
 letter-spacing:.12em
}
.contactline a,.contactline strong{
 font-weight:600
}
.formcard{
 background:white;
 border:1px solid var(--line);
 border-radius:24px;
 padding:30px
}
.formgrid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:16px
}
.field{
 display:flex;
 flex-direction:column;
 gap:7px
}
.field.full{
 grid-column:1/-1
}
.field label{
 font-size:13px;
 font-weight:700
}
.field input,.field textarea,.field select{
 width:100%;
 border:1px solid #cad8d9;
 border-radius:11px;
 padding:12px 13px;
 font:14px 'DM Sans';
 background:#fff;
 color:var(--ink)
}
.field input:focus,.field textarea:focus,.field select:focus{
 outline:2px solid #54beb0;
 border-color:transparent
}
.field textarea{
 min-height:120px;
 resize:vertical
}
.formhint{
 font-size:12px;
 margin-top:13px
}
.footer{
 background:#f7faf9;
 color:var(--ink);
 padding:55px 0 20px;
 border-top:1px solid rgba(19,45,58,.08)
}
.footergrid{
 display:grid;
 grid-template-columns:1.4fr .8fr .8fr 1fr;
 gap:34px
}
.footer p,.footer a{
 color:#53666e;
 font-size:13px
}
.footer h4{
 font-size:13px;
 letter-spacing:.08em;
 text-transform:uppercase;
 color:var(--ink);
 margin-bottom:17px
}
.footer a{
 display:block;
 margin:9px 0
}
.footer a:hover{
 color:var(--teal2)
}
.footerbottom{
 border-top:1px solid rgba(19,45,58,.12);
 margin-top:36px;
 padding-top:18px;
 color:#71838a;
 font-size:12px;
 display:flex;
 justify-content:space-between;
 gap:20px
}
.mobile-cta{
 display:none
}
.hidden{
 display:none!important
}
@media(max-width:900px){
 .links{
  gap:15px
 }
.links a{
  font-size:13px
 }
.links .btn{
  padding:11px 14px
 }
.hero-grid{
  gap:12px
 }
.visual{
  min-height:360px
 }
.visual:before{
  width:310px;
  height:310px
 }
.visual:after{
  width:225px;
  height:225px
 }
.grid3{
  grid-template-columns:repeat(2,1fr)
 }
.footergrid{
  grid-template-columns:repeat(2,1fr)
 }
}
@media(max-width:680px){
 .wrap{
  width:min(100% - 34px,560px)
 }
.topline .wrap{
  justify-content:center
 }
.topline span:first-child{
  display:none
 }
.nav{
  height:68px
 }
.menu{
  display:block
 }
.links{
  display:none;
  position:absolute;
  top:68px;
  left:0;
  right:0;
  background:var(--paper);
  padding:17px 22px 23px;
  box-shadow:0 18px 26px #431b2114;
  flex-direction:column;
  align-items:stretch;
  gap:4px
 }
.links.open{
  display:flex
 }
.links a{
  padding:10px 4px;
  font-size:15px
 }
.links .btn{
  margin-top:8px
 }
.hero{
  padding:53px 0 40px
 }
.hero-grid,.split,.contactgrid{
  grid-template-columns:1fr
 }
.hero-copy{
  font-size:16px
 }
.visual{
  min-height:300px;
  margin-top:8px
 }
.visual:before{
  width:275px;
  height:275px
 }
.visual:after{
  width:205px;
  height:205px
 }
.tag.one{
  right:0;
  top:8%
 }
.tag.two{
  left:0;
  bottom:8%
 }
.section{
  padding:62px 0
 }
.section-head{
  display:block
 }
.section-head>.textlink{
  margin-top:9px
 }
.grid3,.grid2{
  grid-template-columns:1fr
 }
.card{
  padding:22px
 }
.visualpanel{
  min-height:300px
 }
.cta-band{
  padding:27px;
  align-items:flex-start;
  flex-direction:column
 }
.pagehero{
  padding:48px 0 35px
 }
.pagehero p{
  font-size:15px
 }
.specgrid{
  grid-template-columns:1fr
 }
.steps{
  grid-template-columns:1fr
 }
.formcard,.contactcard{
  padding:23px
 }
.formgrid{
  grid-template-columns:1fr
 }
.field.full{
  grid-column:auto
 }
.footergrid{
  grid-template-columns:1fr 1fr;
  gap:24px
 }
.footergrid>div:first-child{
  grid-column:1/-1
 }
.footerbottom{
  flex-direction:column
 }
.mobile-cta{
  display:none
 }
}/* Motion and interaction details */ .hero{
 background-size:180% 180%;
 animation:heroGlow 18s ease-in-out infinite alternate
}
.machine{
 animation:machineFloat 6.5s ease-in-out infinite;
 transform-origin:50% 50%
}
.visual:after{
 animation:orbit 34s linear infinite
}
.tag.one{
 animation:tagBob 5s ease-in-out infinite
}
.card{
 transform:translateZ(0);
 transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s
}
.card:hover{
 transform:translateY(-8px);
 box-shadow:0 24px 55px rgba(67,27,33,.16);
 border-color:#d08c91
}
.card:hover .iconbox{
 transform:rotate(-6deg) scale(1.08);
 background:#f0d2d0
}
.iconbox{
 transition:transform .35s,background .35s
}
.product-art{
 overflow:hidden
}
.product-art:after{
 content:'';
 position:absolute;
 inset:0;
 background:linear-gradient(110deg,transparent 25%,#fff8 48%,transparent 70%);
 transform:translateX(-130%);
 transition:transform .65s
}
.product:hover .product-art:after{
 transform:translateX(130%)
}
.product-art img,.product-art svg{
 transition:transform .45s cubic-bezier(.2,.8,.2,1)
}
.product:hover .product-art img,.product:hover .product-art svg{
 transform:scale(1.1) rotate(-2deg)
}
.links a:not(.btn){
 position:relative
}
.links a:not(.btn):after{
 content:'';
 position:absolute;
 left:0;
 right:100%;
 bottom:-5px;
 height:2px;
 background:#cf3043;
 transition:right .24s
}
.links a:not(.btn):hover:after,.links a.active:after{
 right:0
}
.btn{
 position:relative;
 overflow:hidden
}
.btn:after{
 content:'';
 position:absolute;
 top:-80%;
 bottom:-80%;
 width:36%;
 left:-45%;
 background:linear-gradient(90deg,transparent,#fff8,transparent);
 transform:rotate(20deg);
 transition:left .65s
}
.btn:hover:after{
 left:120%
}
.brand-grid{
 display:flex;
 flex-wrap:wrap;
 gap:12px
}
.brand-chip{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:54px;
 padding:12px 19px;
 background:#fff;
 border:1px solid #e4cecc;
 border-radius:13px;
 color:#5a2329;
 font:700 13px Manrope,sans-serif;
 box-shadow:0 5px 15px rgba(67,27,33,.04);
 transition:transform .25s,box-shadow .25s,color .25s,border-color .25s
}
.brand-chip:hover{
 transform:translateY(-5px);
 box-shadow:0 14px 24px rgba(67,27,33,.12);
 color:#c52b3c;
 border-color:#cf8990
}
.roster-title{
 margin:0 0 18px;
 color:#7b202d;
 font-size:1.05rem
}
.motion-ready [data-reveal]{
 opacity:0;
 transform:translateY(22px);
 transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)
}
.motion-ready [data-reveal].is-visible{
 opacity:1;
 transform:none
}
.motion-ready .grid3 [data-reveal]:nth-child(3n+2){
 transition-delay:.09s
}
.motion-ready .grid3 [data-reveal]:nth-child(3n){
 transition-delay:.17s
}
@keyframes machineFloat{
 0%,100%{
  transform:translateY(0)
 }
50%{
  transform:translateY(-10px)
 }
}
@keyframes tagBob{
 0%,100%{
  transform:translateY(0)
 }
50%{
  transform:translateY(-7px)
 }
}
@keyframes orbit{
 to{
  transform:rotate(360deg)
 }
}
@keyframes heroGlow{
 0%{
  background-position:0 45%
 }
100%{
  background-position:100% 55%
 }
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{
  scroll-behavior:auto!important;
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important
 }
.motion-ready [data-reveal]{
  opacity:1;
  transform:none
 }
}.network-section{
 overflow:hidden
}
.brand-lane{
 margin-top:32px
}
.brand-lane-title{
 font-size:14px;
 color:var(--muted);
 margin:0 0 14px;
 letter-spacing:.04em
}
.brand-marquee{
 overflow:hidden;
 position:relative;
 mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)
}
.brand-track{
 display:flex;
 width:max-content;
 gap:16px;
 animation:brand-scroll 68s linear infinite
}
.brand-lane:hover .brand-track,.brand-lane:focus-within .brand-track{
 animation-play-state:paused
}
.brand-lane:last-child .brand-track{
 animation-duration:88s
}
.brand-card{
 width:166px;
 height:116px;
 flex:none;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:10px;
 padding:14px 12px;
 background:#fff;
 border:1px solid #e8eeee;
 border-radius:16px;
 transition:transform .22s,box-shadow .22s,border-color .22s
}
.brand-card:hover{
 transform:translateY(-6px) scale(1.035);
 border-color:#e7aeb2;
 box-shadow:0 12px 28px #6d263018
}
.brand-logo-box{
 height:58px;
 width:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:6px
}
.brand-logo{
 max-width:150px;
 max-height:50px;
 object-fit:contain
}
.brand-monogram{
 display:flex;
 align-items:center;
 justify-content:center;
 min-width:40px;
 height:36px;
 padding:0 5px;
 border-radius:10px;
 background:#fff0ef;
 color:#a71d2b;
 font-weight:800;
 font-size:13px;
 letter-spacing:-.04em
}
.brand-name{
 font-size:12px;
 line-height:1.25;
 font-weight:700;
 color:#243b46;
 text-align:center
}
.brand-lane:nth-of-type(3) .brand-track{
 animation-direction:reverse
}
@keyframes brand-scroll{
 from{
  transform:translateX(0)
 }
to{
  transform:translateX(-50%)
 }
}@media(max-width:680px){
 .brand-card{
  width:146px;
  height:106px
 }
.brand-track{
  gap:11px
 }
}
@media(prefers-reduced-motion:reduce){
 .brand-track{
  animation:none!important
 }
.brand-marquee{
  overflow-x:auto;
  mask-image:none
 }
}.whatsapp-float{
 position:fixed;
 right:24px;
 bottom:24px;
 z-index:100;
 display:flex;
 align-items:center;
 gap:10px;
 padding:13px 18px;
 background:#20b768;
 color:#fff;
 border-radius:999px;
 box-shadow:0 8px 24px #173d2b35;
 font:700 14px/1 'DM Sans',sans-serif;
 transition:transform .2s,box-shadow .2s
}
.whatsapp-float:hover{
 transform:translateY(-3px);
 box-shadow:0 12px 28px #173d2b45;
 color:#fff
}
.whatsapp-float svg{
 width:23px;
 height:23px;
 fill:currentColor;
 flex:none
}@media(max-width:680px){
 .whatsapp-float{
  right:16px;
  bottom:16px;
  padding:14px;
  border-radius:50%
 }
.whatsapp-float span{
  display:none
 }
.whatsapp-float svg{
  width:26px;
  height:26px
 }
}.brand-card{
 background:transparent!important;
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important;
 padding:12px 8px;
 transition:transform .22s,opacity .22s
}
.brand-card:hover{
 transform:translateY(-4px) scale(1.035);
 border-color:transparent!important;
 box-shadow:none!important
}
.brand-logo-box{
 height:58px
}
.brand-logo{
 max-width:150px;
 max-height:50px
}
.controller-note{
 grid-column:1/-1;
 margin:18px 0 0
}
.accessory-name{
 font-size:19px;
 line-height:1.3;
 margin:0 0 18px
}
.product-filter{
 flex-wrap:wrap
}.controller-subfilter{margin-top:-14px;margin-bottom:24px}.controller-subfilter[hidden]{display:none!important}.controller-subfilter .filter{font-size:12px;padding:8px 14px}/* Consistent, aligned navigation across every page */ .header{
 background:rgba(255,255,255,.96);
 border-bottom:1px solid rgba(67,27,33,.12)
}.nav{
 position:relative;
 height:78px;
 gap:24px
}.nav>.brand{
 flex:0 0 auto
}.nav>.brand img{
 height:70px;
 max-width:270px
}.links{
 margin-left:auto;
 gap:clamp(13px,1.55vw,22px);
 font-size:13px;
 white-space:nowrap;
 flex-wrap:nowrap
}.links>a,.dropdown-toggle{
 line-height:1.2
}.nav-dropdown{
 position:relative;
 display:flex;
 align-items:center
}.dropdown-toggle{
 display:inline-flex;
 align-items:center;
 gap:7px;
 padding:10px 0;
 border:0;
 background:transparent;
 color:var(--ink);
 font:600 13px 'DM Sans',Arial,sans-serif;
 cursor:pointer;
 white-space:nowrap
}.dropdown-toggle:hover,.nav-dropdown.open>.dropdown-toggle{
 color:var(--teal2)
}.dropdown-caret{
 font-size:17px;
 line-height:1;
 transition:transform .2s
}.nav-dropdown.open .dropdown-caret{
 transform:rotate(180deg)
}.dropdown-menu{
 display:none;
 position:absolute;
 z-index:80;
 top:calc(100% + 13px);
 left:-18px;
 min-width:270px;
 padding:9px;
 background:#fff;
 border:1px solid #ead8d6;
 border-radius:14px;
 box-shadow:0 18px 40px rgba(67,27,33,.16)
}.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu,.nav-dropdown.open .dropdown-menu{
 display:block
}.links .dropdown-menu a{
 display:block;
 padding:11px 12px;
 border-radius:9px;
 color:var(--ink);
 font-size:13px;
 white-space:normal;
 line-height:1.35
}.links .dropdown-menu a:hover{
 background:#faefed;
 color:var(--teal2)
}.links .dropdown-menu a:after{
 display:none
}.links>a.btn.small{
 padding:11px 15px;
 margin-left:2px;
 font-size:12px
}@media(max-width:900px){
 .nav{
  height:74px
 }.nav>.brand img{
  height:50px;
  max-width:205px
 }.menu{
  display:block;
  flex:0 0 auto;
  padding:8px 4px
 }.links{
  display:none;
  position:absolute;
  top:calc(100% + 1px);
  left:0;
  right:0;
  margin:0;
  padding:12px 18px 18px;
  background:#fff;
  border:1px solid #ead8d6;
  border-top:0;
  border-radius:0 0 16px 16px;
  box-shadow:0 18px 30px rgba(67,27,33,.13);
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  white-space:normal
 }.links.open{
  display:flex
 }.links>a:not(.btn),.links>.nav-dropdown>.dropdown-toggle{
  display:flex;
  width:100%;
  padding:12px 8px;
  font-size:15px
 }.nav-dropdown{
  display:block;
  width:100%
 }.dropdown-toggle{
  justify-content:space-between
 }.dropdown-menu{
  position:static;
  min-width:0;
  margin:0 0 5px;
  padding:5px 8px;
  border:0;
  border-radius:10px;
  box-shadow:none;
  background:#fbf4f2
 }.links>a.btn.small{
  align-self:flex-start;
  margin:9px 0 0;
  padding:12px 16px;
  font-size:13px
 }
}@media(max-width:680px){
 .nav{
  height:68px
 }
.links{
  top:calc(100% + 1px)
 }
}/* Subtle scroll polish */ .scroll-progress{
 position:fixed;
 inset:0 0 auto;
 height:3px;
 z-index:200;
 pointer-events:none;
 background:linear-gradient(90deg,#cf3043,#7b202d);
 transform:scaleX(0);
 transform-origin:left center;
 will-change:transform
}.header{
 transition:box-shadow .24s ease,background-color .24s ease
}.header.is-scrolled{
 background:rgba(255,255,255,.98);
 box-shadow:0 8px 26px rgba(67,27,33,.09)
}@media(prefers-reduced-motion:reduce){
 .scroll-progress{
  transition:none!important
 }
}
/* Homepage inspection image */
.visual .machine{width:min(112%,540px);max-height:430px;object-fit:contain;border-radius:22px}
@media(max-width:680px){.visual .machine{width:min(112%,480px);max-height:360px}}

/* Lift the hero label clear of the inspection image */
.visual .tag.one{top:-5%}
@media(max-width:680px){.visual .tag.one{top:-14%}}

.product-specs{margin:16px 0 18px}
.product-specs h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 9px;color:var(--muted)}
.product-specs .specgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.product-specs .spec{padding:10px}
.product-specs .spec b{font-size:12px}
.product-specs .spec span{font-size:11px;line-height:1.4}
.spec-note{font-size:11px!important;min-height:0!important;margin:8px 0 0;color:var(--muted)}
@media(max-width:520px){.product-specs .specgrid{grid-template-columns:1fr 1fr}}


/* Lighting catalog: product image on the left, details on the right */
#catalog .grid3{grid-template-columns:1fr;gap:22px}
#catalog .product{display:grid;grid-template-columns:minmax(230px,.78fr) minmax(0,1.5fr);align-items:stretch}
#catalog .product-art{height:100%;min-height:300px;padding:26px}
#catalog .product-art img,#catalog .product-art svg{width:82%;height:82%;object-fit:contain}
#catalog .product-body{padding:25px 30px;display:flex;flex-direction:column;align-items:flex-start}
#catalog .product-body h3{margin-top:8px}
#catalog .product-body>p{min-height:0;max-width:720px}
#catalog .product-specs{width:100%}
#catalog .product-body>.textlink{margin-top:auto}
@media(max-width:680px){#catalog .product{grid-template-columns:1fr}#catalog .product-art{height:220px;min-height:220px}#catalog .product-body{padding:21px}}

/* Lens catalogue inspired by the HWYL reference page. */
.lens-catalog{display:grid;gap:24px}
.lens-product{display:grid;grid-template-columns:minmax(280px,40%) 1fr;overflow:hidden;border:1px solid rgba(20,40,50,.12);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(13,35,43,.06)}
.lens-product-image{min-height:300px;display:grid;place-items:center;padding:26px;background:#f4f5f5;border-right:1px solid rgba(20,40,50,.1)}
.lens-product-image img{display:block;width:100%;height:260px;object-fit:contain}
.lens-product-details{padding:28px 34px;align-self:center}
.lens-product-details h3{margin:12px 0 10px;font-size:1.45rem}
.lens-product-details>p{max-width:760px;color:var(--muted,#68757a);line-height:1.7}
.lens-spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}
.lens-spec-grid>div{padding:12px 14px;border-radius:9px;background:#f6f7f7}
.lens-spec-grid b,.lens-spec-grid span{display:block}
.lens-spec-grid b{margin-bottom:5px;font-size:.82rem;color:var(--ink,#172a30)}
.lens-spec-grid span{font-size:.9rem;color:var(--muted,#68757a);line-height:1.45}
@media(max-width:760px){.lens-product{grid-template-columns:1fr}.lens-product-image{min-height:220px;border-right:0;border-bottom:1px solid rgba(20,40,50,.1)}.lens-product-image img{height:185px}.lens-product-details{padding:24px}.lens-spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.lens-spec-grid{grid-template-columns:1fr}}
.product-art img.blend-white{mix-blend-mode:multiply}



/* Our Products page scroll-to-top control */
.back-to-top{position:fixed;right:26px;bottom:94px;z-index:1000;width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:var(--burgundy,#7b1e2b);color:#fff;font-size:25px;line-height:1;box-shadow:0 8px 24px rgba(20,30,40,.22);cursor:pointer;transition:transform .2s ease,background .2s ease,opacity .2s ease}
.back-to-top:hover{transform:translateY(-3px);background:var(--teal,#153a45)}
.back-to-top[hidden]{display:none!important}
@media(max-width:600px){.back-to-top{right:18px;bottom:88px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}