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

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

/* breadcrumb */
.cw520e24d15f { min-width: 0; }
.cw520e24d15f ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .9375rem; color: var(--smdc151fbe37); }
.cw520e24d15f li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.cw520e24d15f li + li::before { content: "›"; color: var(--nx480a772a70); font-weight: 600; }
.cw520e24d15f a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tv56bf30af03); text-decoration: underline; text-decoration-color: var(--kw8548f09db1); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.cw520e24d15f a:hover { color: var(--fy68173624b7); text-decoration-color: var(--qs9c4fa9b552); }
.cw520e24d15f [aria-current] { color: var(--db24da33ad48); font-weight: 600; }

/* ------------------------------------------------------------------ first screen: statement + overlapping pair */
.vh155d95dcd5 { padding: calc(var(--kw14684a23e9) + 2px) 0 clamp(48px, 7vw, 104px); overflow-x: clip; }
.pn3c62e8e3f6 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.pn2fb20fb96c { min-width: 0; padding-top: 4px; }
.cwf6c97932a7 { display: block; font: 720 clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem)/1 var(--qs099d721572); letter-spacing: -.037em; margin: 0 0 20px; }
.vh3c89df7050 { display: block; overflow: clip; padding-bottom: .07em; margin-bottom: -.07em; }
.vh3c89df7050 > span { display: block; animation: lineUp .95s var(--qs92f629bc3d) both; }
.jdcaf338bdea > span { animation-delay: .12s; color: var(--nx480a772a70); }
.pn9145ade880 { font-size: 1.125rem; line-height: 1.58; color: var(--tv56bf30af03); max-width: 50ch; margin-bottom: 18px; }
.mda7e266872a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.kw9c30c3a136 { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 650 1.1875rem/1.2 var(--jd09c6e7d0f6); font-variant-numeric: tabular-nums; color: var(--db24da33ad48); text-decoration: none; }
.blda7acea3c9 { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ezabd91c7742); background: linear-gradient(180deg, var(--lya0aa7ceab2), var(--ly5c97162845)); box-shadow: inset 0 1px 0 rgb(255 248 222 / .7), 0 2px 6px rgb(60 40 8 / .18); }
.blda7acea3c9 .ao18ecf3df34 { width: 20px; height: 20px; }
.kw9c30c3a136 > span:last-child { border-bottom: 2px solid var(--qs9c4fa9b552); padding-bottom: 2px; }
.ezee09afe3f1 { color: var(--smdc151fbe37); font-weight: 500; }
.kw9c30c3a136:hover > span:last-child { color: var(--fy68173624b7); }
.kw66e8cef5e3 { min-width: 0; margin-top: 36px; }
.gta3169be8b8 .pn9c1425c4bb { aspect-ratio: 5 / 4; }

/* ------------------------------------------------------------------ what stays the same: numbered principles beside an arch */
.gtb9fe119f43 { background: var(--qs891ddc0523); overflow-x: clip; }
.kw89df1cc74d { display: grid; gap: 32px; }
.lya1965f6c7b { min-width: 0; }
.ir303d8f0d84 { color: var(--tv56bf30af03); max-width: 46ch; }
.fy4b52e8df23 { margin-top: 8px; aspect-ratio: 5 / 4; border-radius: 999px 999px var(--ir19f78e1596) var(--ir19f78e1596); overflow: hidden; background: var(--uxeebf9f4232); }
.fy4b52e8df23 img { width: 100%; height: 100%; object-fit: cover; }
.lyd6fb76eeba { min-width: 0; border-top: 1.5px solid var(--db24da33ad48); }
.ir506305e6c1 { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 22px 0 8px; border-bottom: 1px solid var(--kw8548f09db1); }
.pna5a0b38a45 { margin: 0; font: 700 2.25rem/1 var(--qs099d721572); letter-spacing: -.04em; color: var(--nx480a772a70); font-variant-numeric: tabular-nums; }
.gt6b09923e79 { min-width: 0; }
.gt7ac768c616 { font: 700 1.375rem/1.2 var(--qs099d721572); letter-spacing: -.02em; margin: 4px 0 10px; }
.gt6b09923e79 .fyce1a8a64dd { color: var(--tv56bf30af03); }

/* ------------------------------------------------------------------ older hardware: the one dark band */
.vhc7f43743d9 { overflow-x: clip; }
.dbf7f70f2801 { display: grid; gap: 40px; }
.ao90c67807a5 { position: relative; padding-bottom: 18%; min-width: 0; }
.gtf6f55c1e95 { aspect-ratio: 4 / 3; border-radius: var(--ir19f78e1596); overflow: hidden; background: var(--cw9886717d22); }
.gtf6f55c1e95 img, .rp72ab8bb111 img { width: 100%; height: 100%; object-fit: cover; }
.rp51e267bd82 { position: absolute; right: 6%; bottom: 0; width: 40%; }
.rp72ab8bb111 { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--cw9886717d22); box-shadow: 0 0 0 6px var(--cw7da1c53aa6), 0 0 0 8px var(--sm37216b796d), 0 18px 40px rgb(0 0 0 / .45); }
.jdcba180c434 { min-width: 0; }
.jdcba180c434 .fyce1a8a64dd { color: var(--aod78d2df39b); max-width: 56ch; }
.pncc5c4ea61d { color: var(--aod78d2df39b); border-bottom-color: var(--sm37216b796d); }
.pncc5c4ea61d .ao18ecf3df34 { color: var(--sm37216b796d); }
.pncc5c4ea61d:hover { color: var(--sm37216b796d); }

/* ------------------------------------------------------------------ how a visit goes: a numbered rail */
.lyc80ccb0758 { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 4px 32px; margin-bottom: 28px; }
.lyc80ccb0758 .gtfccb4c2761 { margin: 0; }
.rpe13037da9b { position: relative; display: grid; gap: 26px; padding-left: 58px; }
.rpe13037da9b::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--sm37216b796d), var(--qs9c4fa9b552) 70%, var(--nx480a772a70)); }
.blb730755664 { position: relative; min-width: 0; }
.md653bde75d1 {
  position: absolute; left: -58px; top: -2px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .9375rem/1 var(--jd09c6e7d0f6); font-variant-numeric: tabular-nums;
  color: var(--db24da33ad48); background: var(--aoa866135fb1); box-shadow: inset 0 0 0 2px var(--qs9c4fa9b552);
}
.jdc7e1dd09ad { font: 650 1.1875rem/1.3 var(--jd09c6e7d0f6); margin: 8px 0 6px; }
.jdc7e1dd09ad a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color .2s, color .2s; }
.jdc7e1dd09ad a:hover { color: var(--fy68173624b7); text-decoration-color: var(--qs9c4fa9b552); }
.blb730755664 p { margin: 0; color: var(--tv56bf30af03); }

/* ------------------------------------------------------------------ where we work */
.vh40263a69df { background: var(--qs891ddc0523); overflow-x: clip; }
.vh4aa54c5f7a { display: grid; gap: 32px; }
.db6e3883e9f8 { aspect-ratio: 4 / 3; border-radius: var(--kw80761bb997); overflow: hidden; background: var(--uxeebf9f4232); }
.db6e3883e9f8 img { width: 100%; height: 100%; object-fit: cover; }
.ux9f008404fe { min-width: 0; }
.ux9f008404fe .fyce1a8a64dd { color: var(--tv56bf30af03); max-width: 62ch; }
.irdc0c067f9a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; border-top: 1px solid var(--kw8548f09db1); padding-top: 14px; }
.irdc0c067f9a div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.irdc0c067f9a dt { font-size: .8125rem; line-height: 1.3; color: var(--smdc151fbe37); }
.irdc0c067f9a dd { margin: 4px 0 0; font: 700 clamp(1.375rem, 1rem + 1.6vw, 2rem)/1 var(--qs099d721572); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vhe7f9a305fb { margin: 10px 0 22px; font-size: .8125rem; color: var(--smdc151fbe37); }
.ez66d695f68f { margin-bottom: 18px; }

/* ------------------------------------------------------------------ closing band */
.fy972c15e1a9 { padding-bottom: 56px; }
.fy972c15e1a9 .cw321b532c88 .fyce1a8a64dd { color: var(--tv56bf30af03); }
.ly5890ad5f6a { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; }
.ly5890ad5f6a .qs92253679c9 { font-variant-numeric: tabular-nums; }

.rpa9f5a16042 .fy4b52e8df23[data-reveal].md18b363c249, .rpa9f5a16042 .gtf6f55c1e95[data-reveal].md18b363c249, .rpa9f5a16042 .db6e3883e9f8[data-reveal].md18b363c249 { clip-path: inset(0 0 0 0); }
.rpa9f5a16042 .rp72ab8bb111[data-reveal].md18b363c249 { clip-path: inset(-14px); }

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

/* ================================================================== ≥ 900 */
@media (min-width: 900px) {
  .pn3c62e8e3f6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .cw520e24d15f { grid-column: 1 / -1; }
  .kw66e8cef5e3 { margin-top: 0; }
  .gta3169be8b8 .pn9c1425c4bb { aspect-ratio: 4 / 4.4; }
  .kw89df1cc74d { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .ir3d0afc0dc3 { position: sticky; top: 104px; }
  .fy4b52e8df23 { aspect-ratio: 4 / 4.2; max-width: 440px; }
  .ir506305e6c1 { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 28px 0 14px; }
  .pna5a0b38a45 { font-size: 3rem; }
  .dbf7f70f2801 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .vh4aa54c5f7a { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .ux9f008404fe { order: -1; }
  .db6e3883e9f8 { aspect-ratio: 4 / 5; }
}

/* ================================================================== ≥ 1024 */
@media (min-width: 1024px) {
  .vh155d95dcd5 { padding-top: calc(var(--kw14684a23e9) + 8px); }
  .rpe13037da9b { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .fy972c15e1a9 { 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. */
.dbd2dae840c0 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 22px; border-block: 1px solid var(--kw8548f09db1); }
.dbd2dae840c0 li { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 12px 14px 0; }
.dbd2dae840c0 li + li { padding-left: 14px; border-left: 1px solid var(--nxbbcc0d1203); }
.dbd2dae840c0 b { font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.05 var(--qs099d721572); letter-spacing: -.02em; color: var(--db24da33ad48); overflow-wrap: anywhere; }
.dbd2dae840c0 span:not(.nxf4e9f4e84c) { font-size: .875rem; line-height: 1.35; color: var(--smdc151fbe37); }
@media (max-width: 359.98px) { .dbd2dae840c0 { grid-template-columns: minmax(0, 1fr); } .dbd2dae840c0 li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--nxbbcc0d1203); } }

/* ---- no-photo variants (approved-photo swap, 2026-09-27) */
.md7a6e48f303 { display: grid; place-items: center; padding: 6% 8%; background: var(--cw9886717d22); color: var(--rpad4aaccffd); --eze9929cc000: var(--sm37216b796d); }
.ao90c67807a5:has(.md7a6e48f303) { padding-bottom: 0; }
@media (min-width: 900px) { .tvbbeb12bccd { grid-template-columns: minmax(0, 1fr); } }
/*a8e8962ed4c8*/