/* visit3d — scroll-driven 3D cutaway of a deadbolt (Lock Rekeying page: what changes inside the lock).
   Self-contained: every class is prefixed v3d-. Reads the site tokens (--ez1038ce1454, --kwec49d77425,
   --ir96b6db450d…, --ezd21601a375, --ezc1b721f72e, --ao2e3460aa77, --ez7a23fea4fd, --gt747f40e343) and falls back if they are missing.
   Nothing here may scroll sideways: no overflow-x auto/scroll, every grid/flex child min-width 0. */

.qs6ca876ea60 {
  --ux5ba6f154a4: var(--blf88112e81f, #F5F0E6); /* the frames are composited on #F5F0E6; a palette re-tints frames and ground together (--cwe697a144f8) */
  --blfbf6c3c968: var(--gt747f40e343, 0px);            /* the site header is fixed; the stage pins under it */
  --gt70c6f97ef4: 1.2;                       /* frames are 1200 x 1000 */
  --tv6318ebbf6c: var(--rp74b4a52561, cubic-bezier(.16, 1, .3, 1));
  background: var(--ux5ba6f154a4);
  color: var(--kwec49d77425, #141A22);
  padding-block: var(--ir8b1c19e415, 96px) 0;
  overflow-x: clip;                       /* full-bleed stage on phones can never widen the page */
}
.dbc1bd4555c3 { width: min(100% - 2 * var(--ao2e3460aa77, 16px), var(--ez7a23fea4fd, 1320px)); margin-inline: auto; container: v3d / inline-size; }
/* inside a page column that already has its gutters (the service page) */
.rp434a21af12 { padding-block: clamp(24px, 5vw, 56px) 0; }
.rp434a21af12 .dbc1bd4555c3 { width: 100%; }
.nx82c6fdd7cf { margin-bottom: 10px; }
.tvcf6ba5e123 { max-width: 62ch; margin-bottom: clamp(20px, 4vw, 40px); }
.tvcf6ba5e123 .tv86a88a74f4 { margin: 0; color: var(--gt7a7a88d293, #2B313A); }
.tvcf6ba5e123 .uxe208c75af6 { margin-bottom: 14px; }

/* ---------------------------------------------------------------- phone first: stage pinned on top, steps under it */
.rp1bb63a6efa { position: relative; }
.tv62fddfb2f2 {
  position: sticky; top: var(--blfbf6c3c968); z-index: 2;
  background: var(--ux5ba6f154a4);
  padding-bottom: 12px;
}
@media (max-width: 599px) {   /* phones: the picture runs edge to edge */
  .tv62fddfb2f2 { margin-inline: calc(-1 * var(--ao2e3460aa77, 16px)); }
}
.tv62fddfb2f2::after {           /* text slides under a soft edge, not a hard cut */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: none;
  background: linear-gradient(var(--ux5ba6f154a4), transparent);
}
.nxb4eec8d5e1 { margin: 0; }
.ao207f822332 {
  position: relative; overflow: clip;
  width: min(100%, calc((100svh - var(--blfbf6c3c968) - 250px) * var(--gt70c6f97ef4)));
  min-width: min(100%, 300px);
  aspect-ratio: 6 / 5; margin-inline: auto;
}
.iree633f77b9, .dba5c7562741 { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.iree633f77b9 { object-fit: cover; }
.iree633f77b9, .dba5c7562741, .cwacd8b96126 img { filter: var(--cwe697a144f8, none); }
.dba5c7562741 { opacity: 0; }
.qs6ca876ea60.irb4bf21ae1c .dba5c7562741 { opacity: 1; }
.qs6ca876ea60.irb4bf21ae1c .iree633f77b9 { visibility: hidden; }

/* labels: placed in the page, over the render, never baked into pixels */
.jd2c8eed3784 { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.md68859062d2 {
  position: absolute; left: var(--jd059b31f636); top: var(--ao701028b37f); width: 0; height: 0;
  opacity: 0; transition: opacity .45s var(--tv6318ebbf6c);
}
.md68859062d2.qs264f253c7a { opacity: 1; }
.md68859062d2::before {            /* the dot on the part */
  content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--qs2c99a0cbb6, #DDB968); box-shadow: 0 0 0 1.5px var(--kwec49d77425, #141A22), 0 0 0 4px rgb(245 240 230 / .6);
}
.md68859062d2::after {             /* leader line, length in the frame's own width (cqw) */
  content: ""; position: absolute; top: -.5px; height: 1px; width: var(--rpca45dcdd05, 10cqw);
  background: var(--kwec49d77425, #141A22);
}
.md68859062d2 span {
  position: absolute; top: 0; transform: translateY(-50%);
  font: 650 clamp(10px, 3cqw, 13px)/1.15 var(--ezc1b721f72e, system-ui); letter-spacing: .01em; color: var(--kwec49d77425, #141A22);
  background: rgb(245 240 230 / .92); padding: .35em .6em; border-radius: 4px;
  box-shadow: 0 1px 2px rgb(40 28 8 / .12);
  width: max-content; max-width: 9.5em;
}
.ao207f822332 { container-type: inline-size; }
.db5e4ade0996::after { left: 4px; }
.db5e4ade0996 span { left: calc(var(--rpca45dcdd05, 10cqw) + 4px); }
.cw5fcb5bfdc7::after { right: 4px; }
.cw5fcb5bfdc7 span { right: calc(var(--rpca45dcdd05, 10cqw) + 4px); }

/* progress: four segments under the frame */
.cwc7560a06e5 {
  list-style: none; margin: 10px auto 0; padding: 0 var(--ao2e3460aa77, 16px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  max-width: 560px;
}
.cwc7560a06e5 li { min-width: 0; display: grid; gap: 5px; }
.cwc7560a06e5 b {
  font: 650 .6875rem/1 var(--ezc1b721f72e, system-ui); letter-spacing: .1em; color: var(--jd62aad3d520, #5B564D);
  font-variant-numeric: tabular-nums; transition: color .3s;
}
.cwc7560a06e5 i { display: block; height: 3px; border-radius: 2px; background: var(--vha0884a416f, #DDD1BA); overflow: clip; }
.cwc7560a06e5 i::before {
  content: ""; display: block; height: 100%; background: var(--ir96b6db450d, #BE8F3F);
  transform-origin: left; transform: scaleX(var(--pnd8a44ad8a7, 0));
}
.cwc7560a06e5 li.qs264f253c7a b { color: var(--pnc483dc6f98, #6E4F18); }

/* steps */
.nx5ffd4b38bf { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.kw83dc82bfeb { min-height: 82svh; }
.kw83dc82bfeb:last-child { min-height: 175svh; }   /* old key in, out; new key in, turn */
.ir13b3881c1a {
  position: sticky;
  top: calc(var(--blfbf6c3c968) + var(--uxcfef5c7a70, 360px) + 22px);
  padding-block: 4px 24px; max-width: 40ch;
}
.rp19b05be71a {
  font: 650 .8125rem/1 var(--ezc1b721f72e, system-ui); letter-spacing: .1em; color: var(--pnc483dc6f98, #6E4F18);
  font-variant-numeric: tabular-nums; margin: 0 0 8px;
}
.pn1aed0dbabc { font: 650 1.3125rem/1.22 var(--ezc1b721f72e, system-ui); letter-spacing: -.01em; margin: 0 0 8px; text-wrap: balance; }
.ir13b3881c1a p:last-child { margin: 0; color: var(--gt7a7a88d293, #2B313A); }
.cwacd8b96126 { display: none; }

/* motion: each step's text arrives as its part of the scroll does (only when JS is running) */
.qs6ca876ea60.kwcfa36f6d01 .ir13b3881c1a { opacity: .12; transform: translateY(14px); transition: opacity .5s var(--tv6318ebbf6c), transform .6s var(--tv6318ebbf6c); }
.qs6ca876ea60.kwcfa36f6d01 .kw83dc82bfeb.qs264f253c7a .ir13b3881c1a { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- desktop: graphic pinned on one side */
@container v3d (min-width: 720px) {
  .rp1bb63a6efa {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 80px); align-items: start;
  }
  .tv62fddfb2f2 {
    margin-inline: 0; padding-bottom: 0;
    top: max(calc(var(--blfbf6c3c968) + 16px), calc(50vh + var(--blfbf6c3c968) / 2 - var(--uxcfef5c7a70, 560px) / 2));
  }
  .tv62fddfb2f2::after { display: none; }
  .ao207f822332 { width: min(100%, calc((100vh - var(--blfbf6c3c968) - 120px) * var(--gt70c6f97ef4))); min-width: 0; }
  .cwc7560a06e5 { padding: 0; margin-top: 16px; }
  .kw83dc82bfeb { min-height: 88vh; }
  .kw83dc82bfeb:last-child { min-height: 185vh; }
  .kw83dc82bfeb:first-child { padding-top: 12vh; }
  /* each step's words hold at eye level while its part of the picture plays */
  .ir13b3881c1a { top: calc(50vh + var(--blfbf6c3c968) / 2 - 5.5em); padding: 0; }
  .pn1aed0dbabc { font-size: 1.625rem; }
  .qs6ca876ea60.kwcfa36f6d01 .ir13b3881c1a { opacity: .14; }
}

/* ---------------------------------------------------------------- reduced motion: four stills, no scrubbing */
@media (prefers-reduced-motion: reduce) {
  .rp1bb63a6efa { display: block; }
  .tv62fddfb2f2 { display: none; }
  .kw83dc82bfeb, .kw83dc82bfeb:last-child { min-height: 0; display: block; margin-bottom: 40px; }
  .ir13b3881c1a, .qs6ca876ea60.kwcfa36f6d01 .ir13b3881c1a { position: static; opacity: 1; transform: none; transition: none; }
  .cwacd8b96126 { display: block; margin: 0 0 16px; }
  .cwacd8b96126 img { display: block; width: 100%; height: auto; }
  .md68859062d2 { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
 @container v3d (min-width: 720px) {
  .nx5ffd4b38bf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
  .kw83dc82bfeb { margin: 0; }
}
}
/*814eabea9496*/