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

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

/* breadcrumb */
.qsc17345ebaa { min-width: 0; }
.qsc17345ebaa ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .9375rem; color: var(--nx7e9a7fd411); }
.qsc17345ebaa li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.qsc17345ebaa li + li::before { content: "›"; color: var(--sm9d748f4b3c); font-weight: 600; }
.qsc17345ebaa a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rp7b59b15e2e); text-decoration: underline; text-decoration-color: var(--db694bd2dbf2); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.qsc17345ebaa a:hover { color: var(--rpaf5978fd5d); text-decoration-color: var(--pn9ad34388c9); }
.qsc17345ebaa [aria-current] { color: var(--ira7368661db); font-weight: 600; }

/* ------------------------------------------------------------------ first screen: statement + overlapping pair */
.pn1efbf444cc { padding: calc(var(--fyffc3ea9a04) + 2px) 0 clamp(48px, 7vw, 104px); overflow-x: clip; }
.nx9fee2e5435 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.gt120d95c987 { min-width: 0; padding-top: 4px; }
.uxced94ceb36 { display: block; font: 720 clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem)/1 var(--qs0af0864fdf); letter-spacing: -.037em; margin: 0 0 20px; }
.uxfe999caf82 { display: block; overflow: clip; padding-bottom: .07em; margin-bottom: -.07em; }
.uxfe999caf82 > span { display: block; animation: lineUp .95s var(--nxe74e88f991) both; }
.rp5004e96c1d > span { animation-delay: .12s; color: var(--sm9d748f4b3c); }
.vhbda910ff1f { font-size: 1.125rem; line-height: 1.58; color: var(--rp7b59b15e2e); max-width: 50ch; margin-bottom: 18px; }
.vh5b8559c3b6 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.fy30f026491f { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 650 1.1875rem/1.2 var(--ux44cf7e2f0c); font-variant-numeric: tabular-nums; color: var(--ira7368661db); text-decoration: none; }
.uxee0afe5867 { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ux3a7740d8fc); background: linear-gradient(180deg, var(--mdaac1b6736d), var(--ao12619aef09)); box-shadow: inset 0 1px 0 rgb(255 248 222 / .7), 0 2px 6px rgb(60 40 8 / .18); }
.uxee0afe5867 .nx17e20d1286 { width: 20px; height: 20px; }
.fy30f026491f > span:last-child { border-bottom: 2px solid var(--pn9ad34388c9); padding-bottom: 2px; }
.ez951e878ab1 { color: var(--nx7e9a7fd411); font-weight: 500; }
.fy30f026491f:hover > span:last-child { color: var(--rpaf5978fd5d); }
.gt075e1fcc5e { min-width: 0; margin-top: 36px; }
.gt6db8079299 .nxecef01bcda { aspect-ratio: 5 / 4; }

/* ------------------------------------------------------------------ what stays the same: numbered principles beside an arch */
.lyb5f3b4cec1 { background: var(--ez9661d0f209); overflow-x: clip; }
.vh93d4dfa551 { display: grid; gap: 32px; }
.ux284358b775 { min-width: 0; }
.uxe27e06503c { color: var(--rp7b59b15e2e); max-width: 46ch; }
.qs40f9376939 { margin-top: 8px; aspect-ratio: 5 / 4; border-radius: 999px 999px var(--jd284c360a23) var(--jd284c360a23); overflow: hidden; background: var(--pn3531b097f5); }
.qs40f9376939 img { width: 100%; height: 100%; object-fit: cover; }
.ly5d0dab0c84 { min-width: 0; border-top: 1.5px solid var(--ira7368661db); }
.cw4cfaaa1656 { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 22px 0 8px; border-bottom: 1px solid var(--db694bd2dbf2); }
.vhb87b27d8a9 { margin: 0; font: 700 2.25rem/1 var(--qs0af0864fdf); letter-spacing: -.04em; color: var(--sm9d748f4b3c); font-variant-numeric: tabular-nums; }
.lyb94b50e6d0 { min-width: 0; }
.ao7cfdf8fe73 { font: 700 1.375rem/1.2 var(--qs0af0864fdf); letter-spacing: -.02em; margin: 4px 0 10px; }
.lyb94b50e6d0 .cw2df50201c2 { color: var(--rp7b59b15e2e); }

/* ------------------------------------------------------------------ older hardware: the one dark band */
.rpe91ef11b41 { overflow-x: clip; }
.jd213f5ca6a5 { display: grid; gap: 40px; }
.rpf4a32b6d73 { position: relative; padding-bottom: 18%; min-width: 0; }
.tvde5bf08f7f { aspect-ratio: 4 / 3; border-radius: var(--jd284c360a23); overflow: hidden; background: var(--pne6442475dc); }
.tvde5bf08f7f img, .aodc2d9c95cd img { width: 100%; height: 100%; object-fit: cover; }
.kw513b33bccd { position: absolute; right: 6%; bottom: 0; width: 40%; }
.aodc2d9c95cd { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--pne6442475dc); box-shadow: 0 0 0 6px var(--sm57c6de7a45), 0 0 0 8px var(--jd3eaf293d33), 0 18px 40px rgb(0 0 0 / .45); }
.sme5bf2f4bd7 { min-width: 0; }
.sme5bf2f4bd7 .cw2df50201c2 { color: var(--sm5fbe5daeb8); max-width: 56ch; }
.qs76b527b282 { color: var(--sm5fbe5daeb8); border-bottom-color: var(--jd3eaf293d33); }
.qs76b527b282 .nx17e20d1286 { color: var(--jd3eaf293d33); }
.qs76b527b282:hover { color: var(--jd3eaf293d33); }

/* ------------------------------------------------------------------ how a visit goes: a numbered rail */
.lyfa2421eccc { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 4px 32px; margin-bottom: 28px; }
.lyfa2421eccc .nxe4493fb7a5 { margin: 0; }
.db403c39fa42 { position: relative; display: grid; gap: 26px; padding-left: 58px; }
.db403c39fa42::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--jd3eaf293d33), var(--pn9ad34388c9) 70%, var(--sm9d748f4b3c)); }
.nx9ababdbac8 { position: relative; min-width: 0; }
.gt9d6f1ed42f {
  position: absolute; left: -58px; top: -2px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .9375rem/1 var(--ux44cf7e2f0c); font-variant-numeric: tabular-nums;
  color: var(--ira7368661db); background: var(--mdc991ad1395); box-shadow: inset 0 0 0 2px var(--pn9ad34388c9);
}
.ir7a6067606f { font: 650 1.1875rem/1.3 var(--ux44cf7e2f0c); margin: 8px 0 6px; }
.ir7a6067606f a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color .2s, color .2s; }
.ir7a6067606f a:hover { color: var(--rpaf5978fd5d); text-decoration-color: var(--pn9ad34388c9); }
.nx9ababdbac8 p { margin: 0; color: var(--rp7b59b15e2e); }

/* ------------------------------------------------------------------ where we work */
.pnf9250f8f83 { background: var(--ez9661d0f209); overflow-x: clip; }
.dbf644ee8b53 { display: grid; gap: 32px; }
.nx4cf4cacc15 { aspect-ratio: 4 / 3; border-radius: var(--nx895878b85a); overflow: hidden; background: var(--pn3531b097f5); }
.nx4cf4cacc15 img { width: 100%; height: 100%; object-fit: cover; }
.pnfb7c18d521 { min-width: 0; }
.pnfb7c18d521 .cw2df50201c2 { color: var(--rp7b59b15e2e); max-width: 62ch; }
.ir89d866bc65 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; border-top: 1px solid var(--db694bd2dbf2); padding-top: 14px; }
.ir89d866bc65 div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.ir89d866bc65 dt { font-size: .8125rem; line-height: 1.3; color: var(--nx7e9a7fd411); }
.ir89d866bc65 dd { margin: 4px 0 0; font: 700 clamp(1.375rem, 1rem + 1.6vw, 2rem)/1 var(--qs0af0864fdf); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ir31caa36891 { margin: 10px 0 22px; font-size: .8125rem; color: var(--nx7e9a7fd411); }
.bl9c1d011ba5 { margin-bottom: 18px; }

/* ------------------------------------------------------------------ closing band */
.ir61fae792e4 { padding-bottom: 56px; }
.ir61fae792e4 .mdab026d3d25 .cw2df50201c2 { color: var(--rp7b59b15e2e); }
.uxe95cab9f37 { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; }
.uxe95cab9f37 .qs3d7c706969 { font-variant-numeric: tabular-nums; }

.ir1766e425fd .qs40f9376939[data-reveal].gtc390b18d37, .ir1766e425fd .tvde5bf08f7f[data-reveal].gtc390b18d37, .ir1766e425fd .nx4cf4cacc15[data-reveal].gtc390b18d37 { clip-path: inset(0 0 0 0); }
.ir1766e425fd .aodc2d9c95cd[data-reveal].gtc390b18d37 { clip-path: inset(-14px); }

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

/* ================================================================== ≥ 900 */
@media (min-width: 900px) {
  .nx9fee2e5435 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .qsc17345ebaa { grid-column: 1 / -1; }
  .gt075e1fcc5e { margin-top: 0; }
  .gt6db8079299 .nxecef01bcda { aspect-ratio: 4 / 4.4; }
  .vh93d4dfa551 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .dbbcc96f61ef { position: sticky; top: 104px; }
  .qs40f9376939 { aspect-ratio: 4 / 4.2; max-width: 440px; }
  .cw4cfaaa1656 { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 28px 0 14px; }
  .vhb87b27d8a9 { font-size: 3rem; }
  .jd213f5ca6a5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .dbf644ee8b53 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .pnfb7c18d521 { order: -1; }
  .nx4cf4cacc15 { aspect-ratio: 4 / 5; }
}

/* ================================================================== ≥ 1024 */
@media (min-width: 1024px) {
  .pn1efbf444cc { padding-top: calc(var(--fyffc3ea9a04) + 8px); }
  .db403c39fa42 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .ir61fae792e4 { 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. */
.gta9f65cddb7 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 22px; border-block: 1px solid var(--db694bd2dbf2); }
.gta9f65cddb7 li { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 12px 14px 0; }
.gta9f65cddb7 li + li { padding-left: 14px; border-left: 1px solid var(--nxa06e1176c3); }
.gta9f65cddb7 b { font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.05 var(--qs0af0864fdf); letter-spacing: -.02em; color: var(--ira7368661db); overflow-wrap: anywhere; }
.gta9f65cddb7 span:not(.rp53d9a77480) { font-size: .875rem; line-height: 1.35; color: var(--nx7e9a7fd411); }
@media (max-width: 359.98px) { .gta9f65cddb7 { grid-template-columns: minmax(0, 1fr); } .gta9f65cddb7 li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--nxa06e1176c3); } }

/* ---- no-photo variants (approved-photo swap, 2026-09-27) */
.db3259a7e417 { display: grid; place-items: center; padding: 6% 8%; background: var(--pne6442475dc); color: var(--db7dc254b831); --smb957a96fce: var(--jd3eaf293d33); }
.rpf4a32b6d73:has(.db3259a7e417) { padding-bottom: 0; }
@media (min-width: 900px) { .qscb24455e34 { grid-template-columns: minmax(0, 1fr); } }
/*5d903a18ed9a*/