.tool-art{background-size:contain;background-position:center!important}
.tool-gloves{background-image:url('assets/maintenance-v2.webp')}
.tool-brakes{background-image:url('assets/brakes-v2.webp')}
.tool-filter{background-image:url('assets/repairs-v2.webp')}
.tool-wrench{background-image:url('assets/diagnostics-v2.webp')}
#service-dialog{width:min(1040px,94vw);max-width:1040px}
#service-dialog .dialog-inner{display:grid;grid-template-columns:minmax(0,43%) minmax(0,1fr);gap:0 32px;align-items:start}
#service-dialog .dialog-inner>*{grid-column:2;min-width:0}
#service-dialog .dialog-close{position:absolute;right:20px;top:20px}
#service-dialog #dialog-tool{position:relative;grid-column:1;grid-row:1/8;width:100%;aspect-ratio:1;margin:20px 0 0;inset:auto;opacity:1;transform:none;background:none!important;align-self:center}
#dialog-tool img{display:block;width:100%;height:100%;object-fit:contain}
#service-dialog .dialog-inner>h2{margin-top:0;font-size:clamp(36px,4vw,52px)}
.image-state-message{position:absolute;inset:0;display:grid;place-items:center;background:#f2e7ce;color:#503c2d;font-size:12px;padding:1rem;text-align:center}
.image-state-message[hidden]{display:none}
@media(max-width:700px){#service-dialog .dialog-inner{grid-template-columns:1fr;gap:0;padding:32px 25px}#service-dialog .dialog-inner>*{grid-column:1}#service-dialog #service-dialog-kicker{grid-row:1}#service-dialog #service-dialog-title{grid-row:2}#service-dialog #dialog-tool{grid-column:1;grid-row:3;width:min(100%,310px);justify-self:center;margin:16px 0 0}#service-dialog #service-dialog-intro{grid-row:4;margin-top:15px}#service-dialog #service-dialog-list{grid-row:5}#service-dialog .dialog-note{grid-row:6}#service-dialog #service-enquire{grid-row:7}#service-dialog .dialog-close{z-index:2}}

/* Keep the painted cable inside its image column, including its hover rotation. */
@media(min-width:801px){
  .service-diagnostics .tool-art{width:94%;margin-left:0;justify-self:start}
}
@media(max-width:560px){
  .service-diagnostics .tool-art{width:94%;margin-left:0}
}
/* The wide page gutter must not consume the headline's own measure. */
@media(min-width:1650px){
  .hero-content{box-sizing:content-box;width:600px;max-width:none}
}
/* Leave paper behind the tablet copy while keeping both working hands opaque. */
@media(min-width:801px) and (max-width:1050px){
  .hero-art{mask-image:linear-gradient(to right,transparent 0,transparent calc(430px - 15vw),#000 calc(490px - 15vw)),linear-gradient(to top,transparent 0%,#000 9%)}
  .hero-art img{object-position:39% center}
  .key-note{position:static;max-width:200px;margin-top:16px}
}