/* About page (ab) — Oakville Lock & Key design sample.
   How the business works, not a founding story. Builds on style.bl6993a923e1; new classes start with .db95177c555a. */

/* The phone/tablet header on this page comes from global.bl6993a923e1 (one rule for every inner page). */

/* breadcrumb */
.vh81ecf83d76 { min-width: 0; }
.vh81ecf83d76 ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .9375rem; color: var(--ao39f558a728); }
.vh81ecf83d76 li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.vh81ecf83d76 li + li::before { content: "›"; color: var(--md6d1d5b6137); font-weight: 600; }
.vh81ecf83d76 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fy23b77fdc97); text-decoration: underline; text-decoration-color: var(--rp34ed57e295); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.vh81ecf83d76 a:hover { color: var(--vhb88816fa09); text-decoration-color: var(--nxeaf674207e); }
.vh81ecf83d76 [aria-current] { color: var(--ir6711abc0eb); font-weight: 600; }

/* ------------------------------------------------------------------ first screen: statement + overlapping pair */
.fy3cff771aa6 { padding: calc(var(--ezad32c02e52) + 2px) 0 clamp(48px, 7vw, 104px); overflow-x: clip; }
.kw5dff8c2406 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.rp2772f01b91 { min-width: 0; padding-top: 4px; }
.kwf3b457d11f { display: block; font: 720 clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem)/1 var(--gtcddd364f29); letter-spacing: -.037em; margin: 0 0 20px; }
.bl7a778dc8fa { display: block; overflow: clip; padding-bottom: .07em; margin-bottom: -.07em; }
.bl7a778dc8fa > span { display: block; animation: lineUp .95s var(--ao4485f849a2) both; }
.db70100a6238 > span { animation-delay: .12s; color: var(--md6d1d5b6137); }
.mde834182356 { font-size: 1.125rem; line-height: 1.58; color: var(--fy23b77fdc97); max-width: 50ch; margin-bottom: 18px; }
.md1855aa0b73 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.ez84c06cb957 { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 650 1.1875rem/1.2 var(--sm48a4c9efd2); font-variant-numeric: tabular-nums; color: var(--ir6711abc0eb); text-decoration: none; }
.vhec464d9679 { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--aobaa15f4502); background: linear-gradient(180deg, var(--aoa2732dc452), var(--vh7759212e02)); box-shadow: inset 0 1px 0 rgb(255 248 222 / .7), 0 2px 6px rgb(60 40 8 / .18); }
.vhec464d9679 .pn36160b2c04 { width: 20px; height: 20px; }
.ez84c06cb957 > span:last-child { border-bottom: 2px solid var(--nxeaf674207e); padding-bottom: 2px; }
.ire54f792c2f { color: var(--ao39f558a728); font-weight: 500; }
.ez84c06cb957:hover > span:last-child { color: var(--vhb88816fa09); }
.vh97db8fa454 { min-width: 0; margin-top: 36px; }
.md7cc728762b .gt216604499e { aspect-ratio: 5 / 4; }

/* ------------------------------------------------------------------ what stays the same: numbered principles beside an arch */
.qsb484371b74 { background: var(--bla271e237af); overflow-x: clip; }
.rp46c9a2d6f0 { display: grid; gap: 32px; }
.ux81f9475568 { min-width: 0; }
.rp2f0af6bf46 { color: var(--fy23b77fdc97); max-width: 46ch; }
.kw476a76af56 { margin-top: 8px; aspect-ratio: 5 / 4; border-radius: 999px 999px var(--tv0ea447eb32) var(--tv0ea447eb32); overflow: hidden; background: var(--ir1fd3dc30b3); }
.kw476a76af56 img { width: 100%; height: 100%; object-fit: cover; }
.tv04503286c5 { min-width: 0; border-top: 1.5px solid var(--ir6711abc0eb); }
.kw980d093abb { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 22px 0 8px; border-bottom: 1px solid var(--rp34ed57e295); }
.db6f7d28b75c { margin: 0; font: 700 2.25rem/1 var(--gtcddd364f29); letter-spacing: -.04em; color: var(--md6d1d5b6137); font-variant-numeric: tabular-nums; }
.jdf491fba2c7 { min-width: 0; }
.ir449ac54a3d { font: 700 1.375rem/1.2 var(--gtcddd364f29); letter-spacing: -.02em; margin: 4px 0 10px; }
.jdf491fba2c7 .uxf68c118d6c { color: var(--fy23b77fdc97); }

/* ------------------------------------------------------------------ older hardware: the one dark band */
.bl35e9d575f8 { overflow-x: clip; }
.gtbcfa8c690e { display: grid; gap: 40px; }
.kwe5b3d6982a { position: relative; padding-bottom: 18%; min-width: 0; }
.bl516fc92e7d { aspect-ratio: 4 / 3; border-radius: var(--tv0ea447eb32); overflow: hidden; background: var(--fy40ff8fec74); }
.bl516fc92e7d img, .jd9e81df215a img { width: 100%; height: 100%; object-fit: cover; }
.kw1733858d8e { position: absolute; right: 6%; bottom: 0; width: 40%; }
.jd9e81df215a { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--fy40ff8fec74); box-shadow: 0 0 0 6px var(--ux6e915e6fff), 0 0 0 8px var(--gt74fefbfa5a), 0 18px 40px rgb(0 0 0 / .45); }
.irf5f5b9d41d { min-width: 0; }
.irf5f5b9d41d .uxf68c118d6c { color: var(--fy787bf352c6); max-width: 56ch; }
.qs306443ba1c { color: var(--fy787bf352c6); border-bottom-color: var(--gt74fefbfa5a); }
.qs306443ba1c .pn36160b2c04 { color: var(--gt74fefbfa5a); }
.qs306443ba1c:hover { color: var(--gt74fefbfa5a); }

/* ------------------------------------------------------------------ how a visit goes: a numbered rail */
.ir85f47e776c { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 4px 32px; margin-bottom: 28px; }
.ir85f47e776c .sm375e17722e { margin: 0; }
.nx3a73803818 { position: relative; display: grid; gap: 26px; padding-left: 58px; }
.nx3a73803818::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--gt74fefbfa5a), var(--nxeaf674207e) 70%, var(--md6d1d5b6137)); }
.sm0628d4d74f { position: relative; min-width: 0; }
.ez11a27de4ea {
  position: absolute; left: -58px; top: -2px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .9375rem/1 var(--sm48a4c9efd2); font-variant-numeric: tabular-nums;
  color: var(--ir6711abc0eb); background: var(--kw436a9fb76a); box-shadow: inset 0 0 0 2px var(--nxeaf674207e);
}
.tve761421eb0 { font: 650 1.1875rem/1.3 var(--sm48a4c9efd2); margin: 8px 0 6px; }
.tve761421eb0 a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color .2s, color .2s; }
.tve761421eb0 a:hover { color: var(--vhb88816fa09); text-decoration-color: var(--nxeaf674207e); }
.sm0628d4d74f p { margin: 0; color: var(--fy23b77fdc97); }

/* ------------------------------------------------------------------ where we work */
.lyb8073fc5d0 { background: var(--bla271e237af); overflow-x: clip; }
.tvac4782de45 { display: grid; gap: 32px; }
.cw424c26f18d { aspect-ratio: 4 / 3; border-radius: var(--ezcd1486607d); overflow: hidden; background: var(--ir1fd3dc30b3); }
.cw424c26f18d img { width: 100%; height: 100%; object-fit: cover; }
.ir931eb61389 { min-width: 0; }
.ir931eb61389 .uxf68c118d6c { color: var(--fy23b77fdc97); max-width: 62ch; }
.lyb3e193d848 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; border-top: 1px solid var(--rp34ed57e295); padding-top: 14px; }
.lyb3e193d848 div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.lyb3e193d848 dt { font-size: .8125rem; line-height: 1.3; color: var(--ao39f558a728); }
.lyb3e193d848 dd { margin: 4px 0 0; font: 700 clamp(1.375rem, 1rem + 1.6vw, 2rem)/1 var(--gtcddd364f29); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.qs7e73716be1 { margin: 10px 0 22px; font-size: .8125rem; color: var(--ao39f558a728); }
.smd58033d733 { margin-bottom: 18px; }

/* ------------------------------------------------------------------ closing band */
.blf240b58516 { padding-bottom: 56px; }
.blf240b58516 .mddebf8b1eb1 .uxf68c118d6c { color: var(--fy23b77fdc97); }
.nxbdf6d6b2b2 { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; }
.nxbdf6d6b2b2 .irbe42c92d9b { font-variant-numeric: tabular-nums; }

.qs6d83beefe3 .kw476a76af56[data-reveal].vh13bf567a7d, .qs6d83beefe3 .bl516fc92e7d[data-reveal].vh13bf567a7d, .qs6d83beefe3 .cw424c26f18d[data-reveal].vh13bf567a7d { clip-path: inset(0 0 0 0); }
.qs6d83beefe3 .jd9e81df215a[data-reveal].vh13bf567a7d { clip-path: inset(-14px); }

/* ================================================================== ≥ 640 */
@media (min-width: 640px) {
  .nx3a73803818 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; gap: 28px 40px; }
  .nx3a73803818::before { display: none; }
  .sm0628d4d74f { padding-top: 58px; }
  .ez11a27de4ea { left: 0; top: 0; }
  .sm0628d4d74f::after { content: ""; position: absolute; left: 54px; right: 0; top: 21px; height: 2px; border-radius: 2px; background: var(--ir1fd3dc30b3); }
  .tve761421eb0 { margin-top: 0; }
}

/* ================================================================== ≥ 900 */
@media (min-width: 900px) {
  .kw5dff8c2406 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .vh81ecf83d76 { grid-column: 1 / -1; }
  .vh97db8fa454 { margin-top: 0; }
  .md7cc728762b .gt216604499e { aspect-ratio: 4 / 4.4; }
  .rp46c9a2d6f0 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .qsbd3744a0ed { position: sticky; top: 104px; }
  .kw476a76af56 { aspect-ratio: 4 / 4.2; max-width: 440px; }
  .kw980d093abb { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 28px 0 14px; }
  .db6f7d28b75c { font-size: 3rem; }
  .gtbcfa8c690e { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .tvac4782de45 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .ir931eb61389 { order: -1; }
  .cw424c26f18d { aspect-ratio: 4 / 5; }
}

/* ================================================================== ≥ 1024 */
@media (min-width: 1024px) {
  .fy3cff771aa6 { padding-top: calc(var(--ezad32c02e52) + 8px); }
  .nx3a73803818 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .blf240b58516 { padding-bottom: 176px; }
}

/* ------------------------------------------------------------------ trust points (site-wide rules, 2026-09-27)
   Years in business (value from site content, class data-years), 24/7, and a promise already made on this page. */
.dbae7ede2426 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 22px; border-block: 1px solid var(--rp34ed57e295); }
.dbae7ede2426 li { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 12px 14px 0; }
.dbae7ede2426 li + li { padding-left: 14px; border-left: 1px solid var(--ly97f7e5469a); }
.dbae7ede2426 b { font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.05 var(--gtcddd364f29); letter-spacing: -.02em; color: var(--ir6711abc0eb); overflow-wrap: anywhere; }
.dbae7ede2426 span:not(.blc62fb671bf) { font-size: .875rem; line-height: 1.35; color: var(--ao39f558a728); }
@media (max-width: 359.98px) { .dbae7ede2426 { grid-template-columns: minmax(0, 1fr); } .dbae7ede2426 li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--ly97f7e5469a); } }

/* ---- no-photo variants (approved-photo swap, 2026-09-27) */
.kw4671358d2f { display: grid; place-items: center; padding: 6% 8%; background: var(--fy40ff8fec74); color: var(--ux55f9f16bd8); --jd72574f53a4: var(--gt74fefbfa5a); }
.kwe5b3d6982a:has(.kw4671358d2f) { padding-bottom: 0; }
@media (min-width: 900px) { .vh3a07735414 { grid-template-columns: minmax(0, 1fr); } }
/*2d14ac0a7e4c*/