html{scroll-behavior:smooth}
.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}

.border-brand-dark\/5{border-color:hsl(var(--brand-dark)/.05)}
.border-brand-dark\/10{border-color:hsl(var(--brand-dark)/.1)}
.border-brand-dark\/15{border-color:hsl(var(--brand-dark)/.15)}
.bg-brand-dark\/5{background-color:hsl(var(--brand-dark)/.05)}
.bg-brand-dark\/80{background-color:hsl(var(--brand-dark)/.8)}
.hover\:bg-brand-dark\/10:hover{background-color:hsl(var(--brand-dark)/.1)}
.hover\:bg-brand-dark\/\[0\.03\]:hover{background-color:hsl(var(--brand-dark)/.03)}
.from-brand-dark\/85{--tw-gradient-from:hsl(var(--brand-dark)/.85) var(--tw-gradient-from-position);--tw-gradient-to:hsl(var(--brand-dark)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-brand-dark\/40{--tw-gradient-from:hsl(var(--brand-dark)/.4) var(--tw-gradient-from-position);--tw-gradient-to:hsl(var(--brand-dark)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-brand-dark\/50{--tw-gradient-to:hsl(var(--brand-dark)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsl(var(--brand-dark)/.5) var(--tw-gradient-via-position),var(--tw-gradient-to)}
.to-brand-dark\/20{--tw-gradient-to:hsl(var(--brand-dark)/.2) var(--tw-gradient-to-position)}
.text-brand-teal\/15{color:hsl(var(--brand-teal)/.15)}
.focus\:ring-brand-teal\/20:focus{--tw-ring-color:hsl(var(--brand-teal)/.2)}
.focus\:border-brand-teal:focus{border-color:hsl(var(--brand-teal))}
.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}

.icon-x{display:none}
#mnav-open:checked~header .icon-menu{display:none}
#mnav-open:checked~header .icon-x{display:block}
#mnav-open:checked~header .mnav-panel{display:block}

.mega-panel{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.mega-panel:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px}
@media (min-width:1024px){
  .mnav-panel{display:none!important}
  .hdr-bar:has(.mega-blog:hover) .panel-blog,
  .hdr-bar:has(.mega-services:hover) .panel-services,
  .hdr-bar:has(.mega-about:hover) .panel-about,
  .hdr-bar:has(.mega-offers:hover) .panel-offers,
  .hdr-bar:has(.panel-blog:hover) .panel-blog,
  .hdr-bar:has(.panel-services:hover) .panel-services,
  .hdr-bar:has(.panel-about:hover) .panel-about,
  .hdr-bar:has(.panel-offers:hover) .panel-offers{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
  .hdr-bar:has(.mega-blog:hover) .mega-blog .nav-chev,
  .hdr-bar:has(.panel-blog:hover) .mega-blog .nav-chev,
  .hdr-bar:has(.mega-services:hover) .mega-services .nav-chev,
  .hdr-bar:has(.panel-services:hover) .mega-services .nav-chev,
  .hdr-bar:has(.mega-about:hover) .mega-about .nav-chev,
  .hdr-bar:has(.panel-about:hover) .mega-about .nav-chev,
  .hdr-bar:has(.mega-offers:hover) .mega-offers .nav-chev,
  .hdr-bar:has(.panel-offers:hover) .mega-offers .nav-chev{
    transform:rotate(180deg);
  }
}

@supports (animation-timeline:scroll()){
  .hdr-bar{
    animation:gg-header linear both;
    animation-timeline:scroll();
    animation-range:0 40px;
  }
}
@keyframes gg-header{
  to{
    background:#ffffffb8;
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid #2d2d2d14;
    box-shadow:0 1px 2px 0 rgb(0 0 0 / .05);
  }
}

.mnav-sub{display:none}
#mnav-blog:checked~.mnav-sub,
#mnav-services:checked~.mnav-sub,
#mnav-about:checked~.mnav-sub,
#mnav-offers:checked~.mnav-sub{display:flex}
#mnav-blog:checked+label .nav-chev,
#mnav-services:checked+label .nav-chev,
#mnav-about:checked+label .nav-chev,
#mnav-offers:checked+label .nav-chev{transform:rotate(180deg)}

body:has(#mnav-open:checked){overflow:hidden}
@media (min-width:1024px){
  body:has(#mnav-open:checked){overflow:auto}
}

.city-name{display:none}
.svc-page:has(#loc-london:checked) .city-london,
.svc-page:has(#loc-birmingham:checked) .city-birmingham,
.svc-page:has(#loc-kent:checked) .city-kent,
.svc-page:has(#loc-guildford:checked) .city-guildford,
.svc-page:has(#loc-manchester:checked) .city-manchester{display:inline}

.loc-tab{background:hsl(var(--secondary));color:hsl(var(--brand-dark))}
.loc-tab:hover{background:hsl(var(--brand-dark)/.1)}
.svc-page:has(#loc-london:checked) label[for=loc-london],
.svc-page:has(#loc-birmingham:checked) label[for=loc-birmingham],
.svc-page:has(#loc-kent:checked) label[for=loc-kent],
.svc-page:has(#loc-guildford:checked) label[for=loc-guildford],
.svc-page:has(#loc-manchester:checked) label[for=loc-manchester]{
  background:hsl(var(--brand-teal));
  color:#fff;
}

.faq-body{display:grid;grid-template-rows:0fr;opacity:0;transition:all .3s}
.faq-body>div{overflow:hidden}
.faq-item:has(input:checked){border-color:hsl(var(--brand-teal));box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1)}
.faq-item:has(input:checked) .faq-body{grid-template-rows:1fr;opacity:1}
.faq-item:has(input:checked) .faq-chev{transform:rotate(180deg)}

.enquiry-form{display:block}
.enquiry-thanks{display:none}
#enquiry-sent:checked~.enquiry-form{display:none}
#enquiry-sent:checked~.enquiry-thanks{display:block}