/* INDEX 2026-11-09 | registration, graphite reveal, zero-ghost return */
/* The board photograph, SVG tool cutouts, hit targets and returned masks MUST
   use the same centered "cover" transform at all viewport sizes. */
@media (min-width:1700px){
  /* Full native 3:2 master: no vertical cropping of hanging tools, hook holes or key tag. */
  .board-scene{height:auto !important;max-height:none !important;aspect-ratio:3/2 !important}
  .board-scene .board-photo,.board-scene .board-photo>img{object-position:50% 50% !important}
  .hero-brand{top:52.5%}
  .hero-note{top:43%}
}
/* Sample business identity belongs to the first screen at every breakpoint. */
.site-quick-contact{position:relative;z-index:35;display:flex;align-items:center;justify-content:flex-end;gap:clamp(14px,2.6vw,44px);min-height:48px;padding:8px 3.4%;background:#394336;color:#f0ecdf;border-bottom:1px solid #202a20}
.site-quick-contact .quick-kicker{font:700 9px/1.25 'Nimbus Sans',sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#cdd3c4;margin-right:auto}
.site-quick-contact button{display:flex;gap:8px;align-items:center;color:inherit;background:transparent;border:0;border-bottom:1px solid #a8b19d55;padding:7px 1px;text-align:left;font:500 12px/1.35 'Nimbus Sans',sans-serif;cursor:pointer}
.site-quick-contact button:hover,.site-quick-contact button:focus-visible{border-bottom-color:#f0ecdf;outline-offset:3px}
.site-quick-contact .icon{font-size:16px;flex:none}
@media(max-width:820px){.site-quick-contact{padding:8px 4%;gap:12px;justify-content:space-between}.site-quick-contact .quick-kicker{display:block;font-size:9px;letter-spacing:1px}.site-quick-contact button{font-size:11px}}
@media(max-width:540px){.site-quick-contact{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;padding:7px 18px;min-height:58px}.site-quick-contact .quick-kicker{grid-column:1/-1}.site-quick-contact button{font-size:11px;max-width:100%}.site-quick-contact button span{white-space:normal}.site-quick-contact .icon{font-size:15px}}

.checked{--graphite-progress:0%}
.checked.graphite-ready:not(.graphite-drawing):not(.graphite-done) .mechanic-sketch{clip-path:inset(0 0 100% 0)}
.checked.graphite-drawing .mechanic-sketch{
  clip-path:inset(0 0 calc(100% - var(--graphite-progress)) 0);
  will-change:clip-path;
}
.checked.graphite-done .mechanic-sketch{clip-path:none;will-change:auto}
.graphite-pencil{
  position:absolute;
  z-index:2;
  right:12.5%;
  top:0;
  width:27px;
  height:58px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-36px) rotate(38deg);
  filter:drop-shadow(2px 4px 3px #28302039)
}
.graphite-pencil svg{display:block;width:100%;height:100%}
.checked.graphite-drawing .graphite-pencil{opacity:.88}
.checked.graphite-done .graphite-pencil{opacity:0}
@media(max-width:800px){.graphite-pencil{right:11%;width:18px;height:42px}}
@media(prefers-reduced-motion:reduce){
  .checked .mechanic-sketch{clip-path:none}
  .graphite-pencil{display:none}
}
/* Every native scroll surface carries the workshop's olive and paper contrast. */
html,.paper-dialog,.mobile-nav{scrollbar-color:#77816a #e8e4da;scrollbar-width:thin}
html::-webkit-scrollbar,.paper-dialog::-webkit-scrollbar,.mobile-nav::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track,.paper-dialog::-webkit-scrollbar-track,.mobile-nav::-webkit-scrollbar-track{background:#e8e4da}
html::-webkit-scrollbar-thumb,.paper-dialog::-webkit-scrollbar-thumb,.mobile-nav::-webkit-scrollbar-thumb{background:#77816a;border:2px solid #e8e4da;border-radius:9px}
html::-webkit-scrollbar-thumb:hover,.paper-dialog::-webkit-scrollbar-thumb:hover,.mobile-nav::-webkit-scrollbar-thumb:hover{background:#4d5944}
@media(forced-colors:active){html,.paper-dialog,.mobile-nav{scrollbar-color:auto}}

/* Pixel-to-pixel registration beats a floating, rotating mask in the key handoff. */
.return-keys{transform:none;will-change:opacity}