/* Adapted from the supplied circle-centre layout and translation values. */
.hero-icons{position:relative;container-type:inline-size;width:100%;max-width:800px;aspect-ratio:800/530;margin-top:-35px}
.hero-icons .icon{position:absolute;width:25cqw;transform:translate(-50%,-50%);text-align:center;color:#fff;font-weight:700;text-transform:uppercase;text-decoration:none;translate:0 0;transition:translate 300ms linear,color 300ms ease;will-change:translate}
.hero-icons .icon__media{position:relative;display:block;width:100%;height:auto;aspect-ratio:1;margin:0 auto 1cqw;transform:none!important}
.hero-icons .icon__media img{display:block;width:100%;height:100%;margin:0;object-fit:contain}
.hero-icons .icon__media:after{transition:border-color 300ms ease}
.hero-icons .icon strong{white-space:nowrap;font-size:clamp(14px,2.75cqw,22px);margin-top:0}
.hero-icons .icon:is(:hover,:focus-visible){color:var(--green)}
.hero-icons .icon:is(:hover,:focus-visible) .icon__media:after{border-color:var(--green)}
.hero-icons .icon--boilers{left:18.9%;top:24.3%}
.hero-icons .icon--heatpumps{left:53.75%;top:34.3%}
.hero-icons .icon--aircon{left:86.5%;top:19%}
.hero-icons .icon--service{left:26.1%;top:84.2%}
.hero-icons .icon--care{left:82.9%;top:82.1%}
/* Move the group together; keep individual rollover highlighting independent. */
.hero-icons:is(:hover,:focus-within) .icon--boilers{translate:-6.6cqw .75cqw}
.hero-icons:is(:hover,:focus-within) .icon--heatpumps{translate:-6.25cqw -4.4cqw}
.hero-icons:is(:hover,:focus-within) .icon--aircon{translate:-5.6cqw 2.4cqw}
.hero-icons:is(:hover,:focus-within) .icon--service{translate:6.6cqw -2.4cqw}
.hero-icons:is(:hover,:focus-within) .icon--care{translate:-7.75cqw -.6cqw}
@media(max-width:950px) and (min-width:651px){.hero-icons{margin-top:0;aspect-ratio:800/850}.hero-icons .icon{width:34cqw}.hero-icons .icon--boilers{left:19%;top:20%}.hero-icons .icon--heatpumps{left:52%;top:46%}.hero-icons .icon--aircon{left:83%;top:20%}.hero-icons .icon--service{left:24%;top:75%}.hero-icons .icon--care{left:79%;top:75%}.hero-icons .icon strong{font-size:14px}}
@media(max-width:650px){.hero-visual{display:block}.hero-icons{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;aspect-ratio:auto;margin:0 0 28px}.hero-icons .icon{position:static;width:100%;transform:none;translate:none!important;will-change:auto}.hero-icons .icon__media{width:155px;max-width:100%;margin-bottom:12px}.hero-icons .icon strong{font-size:17px;white-space:normal}.hero-visual .credentials{margin-top:0}}
@media(hover:none){.hero-icons:is(:hover,:focus-within) .icon{translate:none;will-change:auto}}
@media(prefers-reduced-motion:reduce){.hero-icons .icon,.hero-icons .icon__media:after{transition:none;will-change:auto}.hero-icons:is(:hover,:focus-within) .icon{translate:none}}
@media(min-width:951px){.hero-visual{min-height:670px}}