.catalogue-intro{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-top:50px;align-items:center}.catalogue-intro h1{font-size:var(--landing-title)}.catalogue-intro .hero-lead{margin-top:0}.catalogue-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 30px}.catalogue-grid img{width:100%;aspect-ratio:1.2;object-fit:contain;background:var(--soft)}.catalogue-grid h2{font-size:var(--lead);margin-top:24px}.catalogue-grid p{margin-top:14px}.supply-route,.stock-route,.material-pair,.finish-evidence{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.supply-route img{width:100%;height:400px;object-fit:cover}.supply-route p,.stock-route p,.finish-evidence p{margin-top:26px;max-width:44ch}.stock-route{background:var(--soft);padding:42px}.material-pair img{width:100%;aspect-ratio:1;object-fit:contain}.material-pair figcaption,.finish-evidence figcaption{font-size:var(--small);padding-top:18px}.material-pair h3{font-size:var(--lead);margin-top:26px}.material-pair h3:first-child{margin-top:0}.material-pair p{margin-top:14px}.finish-routes{display:grid;grid-template-columns:1fr 1fr;gap:40px 8%}.finish-routes h3{font-size:var(--lead)}.finish-routes p{margin-top:20px;max-width:48ch}.finish-evidence img{width:100%;aspect-ratio:1.1;object-fit:contain;background:var(--soft)}.factory-strip{display:grid;grid-template-columns:1fr 1fr;gap:24px}.factory-strip img{width:100%;height:340px;object-fit:cover}.factory-strip figcaption{font-size:var(--small);padding-top:16px}.inquiry-buttons{display:flex;gap:16px;align-items:center;margin-top:24px;flex-wrap:wrap}.inquiry-buttons .button-light{margin-top:0}.inquiry-cancel{background:transparent;color:inherit;border:0;min-height:48px;padding:10px}.inquiry-cancel[hidden]{display:none}.inquiry-status{font-size:16px;line-height:1.5;margin-top:16px;min-height:0}.inquiry-status:empty{display:none}.contact .inquiry-status a{text-decoration:underline}.inquiry-progress{width:100%;height:8px;accent-color:var(--focus);margin-top:18px}.inquiry-progress[hidden]{display:none}.inquiry-honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.contact .inquiry-fields input[aria-invalid=true],.contact textarea[aria-invalid=true]{outline:3px solid #b74836;outline-offset:2px}.contact button:disabled{opacity:.7;cursor:wait;transform:none}.contact .inquiry-status:focus{outline:3px solid var(--focus);outline-offset:5px}.tool-picker img,.tool-range article:last-child>img{object-fit:contain;background:var(--paper)}
@media(max-width:1000px){.stock-route{padding:32px}.supply-route img{height:350px}.factory-strip img{height:260px}}
@media(max-width:650px){.catalogue-intro,.catalogue-grid,.supply-route,.stock-route,.material-pair,.finish-evidence,.finish-routes,.factory-strip{display:block}.catalogue-intro{padding-top:26px}.catalogue-intro>div{margin-top:28px}.catalogue-grid article+article{margin-top:40px}.supply-route figure,.material-pair>div,.finish-evidence>div{margin-top:30px}.stock-route{padding:28px}.stock-route>div{margin-top:26px}.stock-route p{margin-top:0}.finish-routes>div+div{margin-top:32px}.factory-strip figure+figure{margin-top:30px}.factory-strip img{height:280px}.supply-route img{height:290px}}
@media(prefers-reduced-motion:no-preference){.detail-summary h1[data-reveal].entered{animation:visible-arrive .5s ease-out}}
.keyboard-page section.detail-section{display:block}
.keyboard-page .detail-section img{height:auto;aspect-ratio:auto;object-fit:contain;max-height:none}.keyboard-page .keyboard-film video,.keyboard-page .keyboard-hero video{object-fit:contain}
.catalogue-grid img{display:block;aspect-ratio:1;object-fit:cover;background:#fff}
.tool-photo-page .detail-main>img,.tool-photo-page .detail-thumbs img,.tool-photo-page .detail-section img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;max-height:none;background:#fff}
.tool-photo-page .detail-thumbs>[data-gallery-item]{padding:0}
.switch-opener-page .opening-title{font-size:clamp(30px,3vw,44px)}
.switch-opener-page .opener-finish-points{padding-left:1.1em;margin-top:24px;max-width:46ch}
.switch-opener-page .opener-finish-points li+li{margin-top:16px}
.switch-opener-page .opener-finishing .text-link{margin-top:20px}
.switch-opener-page .opener-profiles{margin-top:24px;max-width:44ch}
.switch-opener-page .opener-profiles>div+div{margin-top:18px}
.switch-opener-page .opener-profiles dt{font-weight:650}
.switch-opener-page .opener-profiles dd{margin:6px 0 0}
.tool-function-list{margin-top:24px;max-width:44ch}
.tool-function-list>div+div{margin-top:16px}
.tool-function-list dt{font-weight:650}
.tool-function-list dd{margin:6px 0 0}
.puller-use-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.puller-use-pair img,.tool-range article>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#fff}
.puller-use-pair figcaption{display:grid;gap:10px;font-size:var(--small);margin-top:20px;max-width:48ch}
@media(max-width:650px){.puller-use-pair{grid-template-columns:1fr;gap:36px}}
.keycap-puller-page .puller-functions{row-gap:36px}
.keycap-puller-page .puller-functions img{height:auto;aspect-ratio:auto;object-fit:contain;max-height:none}
.keycap-puller-page .puller-functions figcaption{display:grid;gap:8px;font-size:var(--small);margin-top:16px}
.keycap-puller-page .puller-functions figcaption strong{font-weight:650}
.puller-function-views{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
@media(max-width:650px){.puller-function-views{grid-template-columns:1fr;gap:32px}}
.puller-profile-photo{position:relative}
.puller-profile-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.puller-profile-leaders>path{vector-effect:non-scaling-stroke}
.puller-profile-label{position:absolute;padding:6px 10px;background:var(--paper);color:var(--accent);font-size:clamp(13px,1.1vw,16px);font-weight:650;line-height:1.3;pointer-events:none}
.puller-profile-label-expand{top:15%;left:8%}
.puller-profile-label-reduce{right:5%;bottom:5%}
.keycap-puller-page .puller-function-overview figcaption{gap:18px}
.puller-function-overview figcaption>div{display:grid;gap:4px}
/* Trim ceiling/background while retaining the inspection staff, workbench and hands. */
.company-solution img{width:100%;height:auto;max-height:none;aspect-ratio:1.8;object-fit:cover;object-position:center bottom}
.quality-details{align-content:space-between;row-gap:clamp(40px,4vw,64px)}
.quality-copy>img{width:100%;height:auto;max-height:none;aspect-ratio:1.8;object-fit:cover;object-position:center bottom}
.keycaps-page .construction-photo img{height:auto;max-height:none;aspect-ratio:2.15;object-fit:cover;object-position:center}
.keycaps-page .construction-copy h2{font-size:clamp(30px,3vw,46px)}
.keycaps-page .packaging-banner img{height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 70%}
.keycaps-page .detail-section img[src$="keycap-window-tin-packaging.webp"]{height:auto;max-height:none;aspect-ratio:2;object-fit:cover;object-position:50% 60%}
/* Retain 68% of the packing photograph around the actual product group.
   The reciprocal scale and matching origin keep the visible 3:2 frame unchanged. */
.quality-product-scenes figure:last-child{overflow:hidden}
.quality-product-scenes img[src$="quality-keycap-packing.webp"]{clip-path:inset(12% 22% 20% 10%);transform:scale(1.4705882353);transform-origin:31.25% 37.5%}
@media(min-width:651px){.contact-panel>.contact-intro{position:static;align-self:center}}
@media(max-width:650px){.company-solution img,.quality-copy>img{aspect-ratio:auto;object-fit:contain}.quality-details{row-gap:36px}}
.case-hero figure>img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.keycap-gallery img[src$="keycap-light.webp"]{object-position:50% 72%}
@media(min-width:651px){.keycap-gallery figure:not(:first-child) img{height:auto;aspect-ratio:1.65;flex:0 0 auto}}
/* Center complete content groups when translations change their height. */
@media(min-width:651px){
 body :is(.hero-grid,.company-solution,.company-location,.construction-layout,.project-starter,.document-layout,.about-story,.assembly-specs,.detail-layout,.contact-panel,.quality-grid){align-items:center}
 .about-story>h2{position:static;align-self:center}
 .quality-grid>.quality-details{align-self:stretch}
}
/* Preserve the original supporting frames; wide compositions carry the subject. */
.work-strip img,.company-tracks img,.sample-evidence img{object-position:center}
.work-strip figure,.sample-evidence figure{overflow:clip}
:is(.work-strip,.sample-evidence) img[src$="tin-supporting-20261021.webp"]{object-position:48.5% 50%}
:is(.work-strip,.sample-evidence) img[src$="carton-supporting-20261021.webp"]{object-position:55% 50%}
.company-tracks img[src$="h60-black-interior-supporting-20261021.svg"]{object-fit:contain;background:#303030}
/* Enlarge the product inside its existing frame; inverse clipping retains that frame. */
@media(min-width:1440px){.work-strip img{clip-path:inset(15.5172413793%);transform:scale(1.45)}}
@media(min-width:1001px){.sample-evidence img:is([src$="tin-supporting-20261021.webp"],[src$="carton-supporting-20261021.webp"],[src$="cannon-opener-supporting-20261021.webp"]){clip-path:inset(15.5172413793%);transform:scale(1.45)}}
/* Keep the original picture frame filled without contain-mode sidebars. */
.finish-evidence img[src$="detail-metal-shaft-opener.webp"]{object-fit:cover;background:transparent}
/* Native picture sources retain complete square originals on phones. */
.sample-evidence picture{display:block}
/* A following technical introduction is intentional here; other split rows stay centered. */
.project-technical>.technical-intro{position:static;align-self:start}
@media(min-width:1001px) and (min-height:651px){.project-technical>.technical-intro:not([data-sticky-too-tall]){position:sticky;top:40px}}