.image-state-frame{position:relative}
.image-state-message{position:absolute;inset:0;display:grid;place-items:center;font:12px/1.4 var(--mono);background:#dfd3b9;color:#332d25;padding:1rem;text-align:center}
.image-state-message[hidden],.hands-figure[hidden]{display:none}
.hands-figure .photo-frame{height:auto;aspect-ratio:4/3}
.hands-figure .photo-frame img{height:100%;object-fit:cover}
.hands-figure:has([data-image-key="brakes"]) .photo-frame{aspect-ratio:1/1}
.process-photo{height:auto!important;aspect-ratio:4/3}
.process-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
@media(min-width:761px){.service-workboard{grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:5%}.hands-figure{position:sticky;top:110px}}
@media(max-width:760px){.service-body>.hands-figure{margin:8px 0 24px;transform:none;opacity:1}.service-body>.hands-figure .photo-frame{height:auto;aspect-ratio:4/3}.service-body>.hands-figure figcaption{margin-top:12px}.service-body>.hands-figure .round-stamp{width:72px;height:72px;right:4px;bottom:40px;transform:rotate(11deg)}.service-body>.hands-figure .round-stamp strong{font-size:11px}}
@media(min-width:1800px){.service-workboard{grid-template-columns:minmax(0,48%) minmax(0,1fr)}}

/* Keep the working details clear of the decorative stamp. */
.hands-figure{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;row-gap:20px}
.hands-figure .photo-frame{grid-column:1/-1;grid-row:1}
.hands-figure figcaption,.service-body>.hands-figure figcaption{grid-column:1;grid-row:2;margin-top:0;align-self:center;gap:14px}
.hands-figure .round-stamp,.service-body>.hands-figure .round-stamp{grid-column:2;grid-row:2;position:relative;inset:auto;margin:5px 5px 8px 0;align-self:start}

/* The desktop caption sits below the tools instead of over marker 03. */
@media(min-width:1251px){.bay-caption{bottom:16px}}

/* Narrow layouts retain the full workshop scene and its true hotspot coordinates. */
@media(max-width:1250px){
 .workshop{display:grid;grid-template-columns:minmax(0,1fr);height:auto}
 .workshop-copy{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);column-gap:4%;max-width:none;padding:32px 6.5% 28px}
 .workshop-copy .eyebrow{grid-column:1/-1;grid-row:1;margin-bottom:18px}
 .workshop h2{grid-column:1;grid-row:2;font-size:clamp(58px,7.8vw,90px)}
 .workshop-copy .mint-rule{grid-column:1;grid-row:3;margin:18px 0 0}
 .workshop-copy>p{grid-column:2;grid-row:2/4;align-self:center}
 .workshop-image{grid-area:2/1;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;object-position:center}
 .workshop-shade{grid-area:2/1;position:relative;inset:auto;align-self:stretch;background:linear-gradient(0deg,#15191444,transparent 35%);pointer-events:none}
 .bay-markers{grid-area:2/1;position:relative;inset:auto;align-self:stretch;min-width:0}
 .bay-marker[data-bay="0"]{left:48%;top:52%}
 .bay-marker[data-bay="1"]{left:69%;top:51%}
 .bay-marker[data-bay="2"]{left:91%;top:62%}
 .bay-caption{grid-area:3/1;position:relative;inset:auto;width:auto;margin:22px 6.5% 18px}
 .workshop-coordinate{grid-area:4/1;position:relative;inset:auto;margin:0 6.5% 22px}
}
@media(max-width:600px){
 .workshop-copy{display:block;padding:30px 27px 26px}
 .workshop-copy .eyebrow{margin-bottom:23px}
 .workshop h2{font-size:68px}
 .workshop-copy .mint-rule{margin:19px 0}
 .bay-caption{margin:22px 27px 18px}
 .workshop-coordinate{margin:0 27px 22px}
 .hands-figure{column-gap:12px}
 .hands-figure figcaption,.service-body>.hands-figure figcaption{gap:8px}
}