html{scroll-behavior:smooth}
.reveal,.mask-text{opacity:1!important;transform:none!important}
.ui-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;pointer-events:none}
label[for]{cursor:pointer}
.icon-x{display:none}
#mnav-open:checked~header .icon-menu{display:none}
#mnav-open:checked~header .icon-x{display:block}
.mnav-overlay{visibility:hidden;opacity:0;pointer-events:none}
#mnav-open:checked~.mnav-overlay{visibility:visible;opacity:1;pointer-events:auto}
.mnav-sheet{transform:translateY(-100%)}
#mnav-open:checked~.mnav-overlay .mnav-sheet{transform:translateY(0)}
.mnav-svc-sub{display:none}
#mnav-svc:checked~.mnav-svc-sub{display:block}
#mnav-svc:checked+label .mnav-plus{transform:rotate(45deg)}
.mega-panel{visibility:hidden;opacity:0;transform:translateY(.25rem);pointer-events:none}
@media (min-width:1024px){
.mnav-overlay{display:none!important}
header:has(.nav-mega:hover) .mega-panel,
header:has(.nav-mega:focus-within) .mega-panel,
.mega-panel:hover{
visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto
}
}
.mega-panel:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px}
@supports (animation-timeline:scroll()){
header.site-header{
animation:ew-header linear both;
animation-timeline:scroll();
animation-range:0 40px;
}
header.site-header .logo-name,
header.site-header .nav-link,
header.site-header .hdr-phone{
animation:ew-ink linear both;
animation-timeline:scroll();
animation-range:0 40px;
}
header.site-header .menu-btn{
animation:ew-menu linear both;
animation-timeline:scroll();
animation-range:0 40px;
}
}
@keyframes ew-header{
to{
background-color:#ffffffb3;
-webkit-backdrop-filter:blur(20px) saturate(160%);
backdrop-filter:blur(20px) saturate(160%);
border-bottom:1px solid hsl(var(--border)/.6);
}
}
@keyframes ew-ink{
to{color:hsl(var(--foreground)/.8)}
}
@keyframes ew-menu{
to{color:hsl(var(--foreground))}
}
.glass{backdrop-filter:blur(20px) saturate(160%)}
.glass-dark{backdrop-filter:blur(20px) saturate(160%)}
.mnav-overlay{transition:opacity .5s,visibility .5s}
.mnav-sheet{transition:transform .5s}
#mnav-open:checked~header.site-header{
background-color:#ffffffb3;
-webkit-backdrop-filter:blur(20px) saturate(160%);
backdrop-filter:blur(20px) saturate(160%);
border-bottom:1px solid hsl(var(--border)/.6);
animation:none;
}
#mnav-open:checked~header.site-header .logo-name,
#mnav-open:checked~header.site-header .nav-link,
#mnav-open:checked~header.site-header .hdr-phone{
color:hsl(var(--foreground)/.8);
animation:none;
}
#mnav-open:checked~header.site-header .menu-btn{
color:hsl(var(--foreground));
animation:none;
}
.hero-slide{display:none}
section:has(#slide-0:checked) .s0,
section:has(#slide-1:checked) .s1,
section:has(#slide-2:checked) .s2,
section:has(#slide-3:checked) .s3{display:block}
.hero-dot{height:.25rem;border-radius:9999px;background:hsla(0,0%,100%,.25);width:1.5rem;border:0;padding:0;transition:all .5s;cursor:pointer}
section:has(#slide-0:checked) label[for=slide-0],
section:has(#slide-1:checked) label[for=slide-1],
section:has(#slide-2:checked) label[for=slide-2],
section:has(#slide-3:checked) label[for=slide-3]{
width:3rem;background:hsl(var(--accent))
}
.enquiry-form{display:block}
.enquiry-thanks{display:none}
#enquiry-sent:checked~.enquiry-form{display:none}
#enquiry-sent:checked~.enquiry-thanks{display:flex}
body:has(#mnav-open:checked){overflow:hidden}
@media (min-width:1024px){
body:has(#mnav-open:checked){overflow:auto}
}
.ew-input{
width:100%;
border-radius:.6rem;
border:1px solid hsl(var(--border));
background:hsl(var(--background));
padding:.7rem .9rem;
font-size:.9rem;
color:hsl(var(--foreground));
outline:none;
transition:border-color .2s,box-shadow .2s;
}
.ew-input:focus{
border-color:hsl(var(--primary));
box-shadow:0 0 0 3px hsl(var(--primary)/.12);
}