.image-state-frame{position:relative}
.image-state-message{position:absolute;inset:0;display:grid;place-items:center;color:#463e30;background:#f2e7ce;font-size:12px;text-align:center;padding:1rem}
.image-state-message[hidden],.brake-stage[hidden],.inspection-point[hidden],.part-caption[hidden]{display:none}
.brake-stage[data-image-state="loading"] .inspection-point,.brake-stage[data-image-state="error"] .inspection-point{visibility:hidden}
@media(min-width:761px){
  .services{display:grid;grid-template-columns:minmax(0,58%) minmax(0,38%);gap:0 4%;min-height:0;padding-bottom:60px;overflow:visible}
  .services-heading{grid-column:1;grid-row:1;width:100%}
  .services-heading h2{font-size:clamp(100px,13.25vw,225px)}
  .service-list{grid-column:2;grid-row:1/3;width:100%;margin:0;padding-top:clamp(70px,7vw,140px)}
  .brake-stage{grid-column:1;grid-row:2;position:relative;inset:auto;width:100%;max-width:1050px;margin:0;aspect-ratio:1;align-self:start}
  .part-caption{grid-column:2;grid-row:2;position:relative;inset:auto;width:auto;align-self:end;margin:0 0 60px;pointer-events:none}
}
@media(max-width:760px){
  .services{min-height:0;padding-bottom:35px;overflow:hidden}
  .service-list{width:100%;margin-top:35px}
  .service-body>.brake-stage{position:relative;inset:auto;width:100%;max-width:560px;margin:5px auto 22px;aspect-ratio:1;transform:none!important}
  .brake-stage .inspection-point-caliper{left:31%;top:43%}
  .brake-stage .inspection-point-rotor{left:77%;top:30%}
  .part-caption{display:none}
  .inspection-point .part-note{width:min(240px,72vw);max-width:72vw}
  .inspection-point-caliper .part-note{left:-65px;bottom:45px}
  .inspection-point-rotor .part-note{right:-20px;bottom:45px}
}

/* Give the handwritten part caption its own row below the service copy. */
@media(min-width:761px){
  .brake-stage{grid-row:2/4}
  .part-caption{grid-row:3;align-self:start;margin:28px 0 40px}
}

/* Keep both mechanics and the pointing hand in the narrow shop composition. */
@media(min-width:761px){
  .part-caption .handwritten{display:block;line-height:1.2}
  .part-caption p{margin-top:32px}
}

@media(max-width:760px){
  .the-shop{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none}
  .shop-photo{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;object-position:center}
  .the-shop:after{display:none}
  .shop-content{width:auto;margin:34px var(--gutter) 0}
  .process-step p{max-width:none}
  .process-step p br{display:initial}
  .shop-note{position:relative;inset:auto;align-self:flex-end;margin:0 var(--gutter) 36px;max-width:calc(100% - 2 * var(--gutter))}
  .shop-promise{position:relative;inset:auto;margin:0 var(--gutter) 32px}
}
/* The inspection bench: stamped index, a warm lamp, and parts with weight. */
.bench-object{position:absolute;inset:0;transform:translate(var(--bench-x,0px),var(--bench-y,0px)) rotate(var(--bench-tilt,0deg));transform-origin:50% 65%;transition:transform .28s cubic-bezier(.18,.75,.3,1)}
.bench-object .brake-photo{display:block;filter:drop-shadow(12px 22px 10px #41371e30)}
.brake-stage .inspection-light{background:radial-gradient(ellipse 200px 180px at var(--light-x,50%) var(--light-y,50%),#ffe0a380 0%,#ffd39224 52%,transparent 100%);transition:opacity .45s;mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}
.brake-stage:hover .inspection-light{opacity:0}
.brake-stage.bench-lit .inspection-light,.brake-stage:focus-within .inspection-light{opacity:1}
.bench-stamp{position:absolute;top:4%;left:4%;right:5%;display:flex;align-items:center;gap:12px;color:var(--red);pointer-events:none;transform:rotate(-2deg)}
.bench-stamp-number{display:grid;place-items:center;min-width:43px;height:43px;border:2px solid currentColor;font:400 26px/1 'Pit Display',sans-serif;box-shadow:inset 0 0 0 2px var(--cream),inset 0 0 0 3px #b6392560}
.bench-stamp-label{max-width:160px;font:700 10px/1.25 'Pit Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.bench-stamp-rule{height:9px;flex:1;max-width:120px;opacity:.4;border-bottom:1px solid currentColor;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 9px)}
.bench-point{transform:translate(-50%,-50%)}
.bench-point .part-marker{width:44px;height:44px;border:1px solid #b6392540;box-shadow:0 0 0 7px #f2e7ce42,0 3px 13px #19171230}
.bench-point .part-marker:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.bench-point .part-marker:disabled{pointer-events:none}
.brake-stage[data-image-state="idle"] .inspection-point{visibility:hidden}
.brake-stage .bench-note{z-index:20;left:4%;right:auto;bottom:5%;width:min(360px,92%);max-width:92%;padding:21px 42px 19px 23px;border:1px solid #19171240;border-top:3px solid var(--red);box-shadow:3px 5px 0 #b6392520,0 12px 32px #19171225;transform:rotate(-1deg)}
.bench-note strong{font-size:27px}
.bench-note p{font-size:14px;margin:9px 0 12px}
.bench-note-close{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:36px;height:36px;font-size:27px;color:var(--red);background:transparent}
.bench-note-close:focus-visible,.image-state-retry:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.brake-stage>.image-state-message{inset:14% 10%;z-index:15;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;background:transparent;color:var(--red);font:700 11px/1.5 'Pit Sans',sans-serif;letter-spacing:.05em}
.brake-stage>.image-state-message[hidden]{display:none}
.bench-lamp{width:45px;height:60px;transform-origin:50% 0;animation:bench-lamp-sway 1.8s ease-in-out infinite alternate;filter:drop-shadow(0 3px 12px #d39a4240)}
.image-state-retry{color:var(--cream);background:var(--red);padding:11px 18px;font:700 12px/1.2 'Pit Sans',sans-serif;letter-spacing:.04em}
.image-state-retry[hidden]{display:none}
.brake-stage[data-image-state="error"] .bench-lamp{animation:none}
.brake-stage[data-bench-visible="false"] .bench-lamp{animation-play-state:paused}
@keyframes bench-lamp-sway{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@media(max-width:760px){
  .bench-stamp{top:1%;left:1%;right:1%;gap:9px}
  .bench-stamp-number{min-width:32px;height:32px;font-size:20px}
  .bench-stamp-label{font-size:8px;max-width:120px}
  .bench-stamp-rule{max-width:80px;height:7px}
  .brake-stage .bench-note{left:1%;bottom:0;width:98%;max-width:98%;padding:14px 39px 14px 17px}
  .bench-note strong{font-size:23px}
  .bench-note p{font-size:13px;line-height:1.35;margin:7px 0 9px}
  .bench-note span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.bench-object{transform:none!important;transition:none}.bench-lamp{animation:none}.brake-stage .inspection-light{display:none}}
html[data-motion="quiet"] .bench-object{transform:none!important;transition:none}
html[data-motion="quiet"] .bench-lamp{animation:none}
html[data-motion="quiet"] .brake-stage .inspection-light{display:none}
@media(forced-colors:active){.bench-stamp-rule,.inspection-light{display:none}.bench-point .part-marker,.bench-note,.image-state-retry{border:2px solid ButtonText}.bench-object .brake-photo{filter:none}}