/* Hover-only sheen layered above the existing red suit rollover. */
.liquid-layer{position:absolute!important;inset:0;z-index:1!important;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0;mix-blend-mode:normal;transition:opacity .12s ease-out}
.liquid-layer canvas{display:block;width:100%!important;height:100%!important}
.suit-button:has(> .liquid-layer){isolation:isolate}
.suit-button > .button-copy{position:relative!important;z-index:4!important;isolation:isolate;opacity:1!important;color:#fff!important;-webkit-text-fill-color:#fff;mix-blend-mode:normal!important;filter:none!important;text-shadow:0 1px 2px #0009}
.suit-button > .button-copy > span{position:relative;z-index:1}
.suit-button:has(> .liquid-layer):is(:hover,:focus-visible) > .button-copy{text-shadow:0 2px 3px #000,0 0 6px #000b}
.liquid-ripple{position:absolute!important;z-index:3!important;pointer-events:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#fff9,transparent 70%);animation:liquid-ripple .6s ease-out forwards}
@keyframes liquid-ripple{from{transform:translate(-50%,-50%) scale(0);opacity:.6}to{transform:translate(-50%,-50%) scale(12);opacity:0}}
@media(prefers-reduced-motion:reduce){.liquid-layer,.liquid-ripple{display:none}}
/* Keep mobile card corners consistent even if an older main stylesheet is cached. */
@media(max-width:700px){
 .services .service .card-top > span:nth-child(2),.about-copy .text-link > span,.enquiry .form-heading > span:nth-child(2){display:none!important}
 .services .service > .service-symbol{position:absolute!important;grid-area:auto!important;inset:18px 24px auto auto!important;align-self:start!important;justify-self:auto!important;margin:0;font-size:34px;line-height:1;pointer-events:none}
 .services .service .service-hat img{width:49px;height:auto}
}