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

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

/* breadcrumb */
.cw5fe97ad4be { min-width: 0; }
.cw5fe97ad4be ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .9375rem; color: var(--ly354b4c24fc); }
.cw5fe97ad4be li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.cw5fe97ad4be li + li::before { content: "›"; color: var(--kwb6cc9f5d9d); font-weight: 600; }
.cw5fe97ad4be a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sm59eac5f6ad); text-decoration: underline; text-decoration-color: var(--uxb7d00afdd6); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.cw5fe97ad4be a:hover { color: var(--ir22ec1c8f01); text-decoration-color: var(--db9ed1df0a22); }
.cw5fe97ad4be [aria-current] { color: var(--md0127c7ea9a); font-weight: 600; }

/* ------------------------------------------------------------------ first screen: statement + overlapping pair */
.ez5a49df40b9 { padding: calc(var(--ir4c29004302) + 2px) 0 clamp(48px, 7vw, 104px); overflow-x: clip; }
.cw22b4bbfa6b { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.uxf7ea076a91 { min-width: 0; padding-top: 4px; }
.kwcf81479550 { display: block; font: 720 clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem)/1 var(--kw82e769e05b); letter-spacing: -.037em; margin: 0 0 20px; }
.md1051eb32b1 { display: block; overflow: clip; padding-bottom: .07em; margin-bottom: -.07em; }
.md1051eb32b1 > span { display: block; animation: lineUp .95s var(--gtb6778ec305) both; }
.db037e893fa2 > span { animation-delay: .12s; color: var(--kwb6cc9f5d9d); }
.rp7ba86fac92 { font-size: 1.125rem; line-height: 1.58; color: var(--sm59eac5f6ad); max-width: 50ch; margin-bottom: 18px; }
.qsaed08f9243 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.db6d98b93b69 { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 650 1.1875rem/1.2 var(--nx4fa2a5c852); font-variant-numeric: tabular-nums; color: var(--md0127c7ea9a); text-decoration: none; }
.pn2db73a7a64 { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ux4483d6d26c); background: linear-gradient(180deg, var(--ezdb188bbfab), var(--sm66eb5de1f7)); box-shadow: inset 0 1px 0 rgb(255 248 222 / .7), 0 2px 6px rgb(60 40 8 / .18); }
.pn2db73a7a64 .qs049f454820 { width: 20px; height: 20px; }
.db6d98b93b69 > span:last-child { border-bottom: 2px solid var(--db9ed1df0a22); padding-bottom: 2px; }
.blbb9d401536 { color: var(--ly354b4c24fc); font-weight: 500; }
.db6d98b93b69:hover > span:last-child { color: var(--ir22ec1c8f01); }
.md4bf7ed4973 { min-width: 0; margin-top: 36px; }
.tvd53a04a6de .dbfb091b6d69 { aspect-ratio: 5 / 4; }

/* ------------------------------------------------------------------ what stays the same: numbered principles beside an arch */
.bl82003e54cc { background: var(--md23fc9e1f20); overflow-x: clip; }
.qs88e8978cc2 { display: grid; gap: 32px; }
.gt54f5fd7fb8 { min-width: 0; }
.kw66b7902d9a { color: var(--sm59eac5f6ad); max-width: 46ch; }
.db3a2ca30dcc { margin-top: 8px; aspect-ratio: 5 / 4; border-radius: 999px 999px var(--fy38f0f4d7cd) var(--fy38f0f4d7cd); overflow: hidden; background: var(--jdbf96ef1070); }
.db3a2ca30dcc img { width: 100%; height: 100%; object-fit: cover; }
.cw29d45c245d { min-width: 0; border-top: 1.5px solid var(--md0127c7ea9a); }
.fy9dd87012e2 { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 22px 0 8px; border-bottom: 1px solid var(--uxb7d00afdd6); }
.ux95bb68bdcc { margin: 0; font: 700 2.25rem/1 var(--kw82e769e05b); letter-spacing: -.04em; color: var(--kwb6cc9f5d9d); font-variant-numeric: tabular-nums; }
.vh88a357a9b6 { min-width: 0; }
.kw1f36ec49ea { font: 700 1.375rem/1.2 var(--kw82e769e05b); letter-spacing: -.02em; margin: 4px 0 10px; }
.vh88a357a9b6 .nxfb4d4df960 { color: var(--sm59eac5f6ad); }

/* ------------------------------------------------------------------ older hardware: the one dark band */
.md7f8b63394d { overflow-x: clip; }
.rp656c015d00 { display: grid; gap: 40px; }
.dbdfce0eb644 { position: relative; padding-bottom: 18%; min-width: 0; }
.nxbacbfcef2f { aspect-ratio: 4 / 3; border-radius: var(--fy38f0f4d7cd); overflow: hidden; background: var(--kwbe1a8f0f98); }
.nxbacbfcef2f img, .cw6e57aa5658 img { width: 100%; height: 100%; object-fit: cover; }
.blf0f8fee28a { position: absolute; right: 6%; bottom: 0; width: 40%; }
.cw6e57aa5658 { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--kwbe1a8f0f98); box-shadow: 0 0 0 6px var(--aodb692b8a80), 0 0 0 8px var(--bl990ffe3a7b), 0 18px 40px rgb(0 0 0 / .45); }
.cwce591c550f { min-width: 0; }
.cwce591c550f .nxfb4d4df960 { color: var(--ir8a48d44548); max-width: 56ch; }
.aobb5794952f { color: var(--ir8a48d44548); border-bottom-color: var(--bl990ffe3a7b); }
.aobb5794952f .qs049f454820 { color: var(--bl990ffe3a7b); }
.aobb5794952f:hover { color: var(--bl990ffe3a7b); }

/* ------------------------------------------------------------------ how a visit goes: a numbered rail */
.kw3ab49e68aa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 4px 32px; margin-bottom: 28px; }
.kw3ab49e68aa .rp3baeda44c3 { margin: 0; }
.tvfc6b911c2a { position: relative; display: grid; gap: 26px; padding-left: 58px; }
.tvfc6b911c2a::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--bl990ffe3a7b), var(--db9ed1df0a22) 70%, var(--kwb6cc9f5d9d)); }
.ira5091e16c4 { position: relative; min-width: 0; }
.tv905837c264 {
  position: absolute; left: -58px; top: -2px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .9375rem/1 var(--nx4fa2a5c852); font-variant-numeric: tabular-nums;
  color: var(--md0127c7ea9a); background: var(--sm5d8e27fd34); box-shadow: inset 0 0 0 2px var(--db9ed1df0a22);
}
.gt5c657413a0 { font: 650 1.1875rem/1.3 var(--nx4fa2a5c852); margin: 8px 0 6px; }
.gt5c657413a0 a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color .2s, color .2s; }
.gt5c657413a0 a:hover { color: var(--ir22ec1c8f01); text-decoration-color: var(--db9ed1df0a22); }
.ira5091e16c4 p { margin: 0; color: var(--sm59eac5f6ad); }

/* ------------------------------------------------------------------ where we work */
.ao14c6c7612d { background: var(--md23fc9e1f20); overflow-x: clip; }
.gt2d2cb802b1 { display: grid; gap: 32px; }
.ir3c56c76173 { aspect-ratio: 4 / 3; border-radius: var(--ez507db509a7); overflow: hidden; background: var(--jdbf96ef1070); }
.ir3c56c76173 img { width: 100%; height: 100%; object-fit: cover; }
.ez336edc2760 { min-width: 0; }
.ez336edc2760 .nxfb4d4df960 { color: var(--sm59eac5f6ad); max-width: 62ch; }
.db72d36598eb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; border-top: 1px solid var(--uxb7d00afdd6); padding-top: 14px; }
.db72d36598eb div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.db72d36598eb dt { font-size: .8125rem; line-height: 1.3; color: var(--ly354b4c24fc); }
.db72d36598eb dd { margin: 4px 0 0; font: 700 clamp(1.375rem, 1rem + 1.6vw, 2rem)/1 var(--kw82e769e05b); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tv2c489ecb17 { margin: 10px 0 22px; font-size: .8125rem; color: var(--ly354b4c24fc); }
.cwe3bc4c87d2 { margin-bottom: 18px; }

/* ------------------------------------------------------------------ closing band */
.nx1d23705dfb { padding-bottom: 56px; }
.nx1d23705dfb .gt26ca2e2e17 .nxfb4d4df960 { color: var(--sm59eac5f6ad); }
.pn3fcbe18266 { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; }
.pn3fcbe18266 .fy31c58c41ec { font-variant-numeric: tabular-nums; }

.md0263ac76ab .db3a2ca30dcc[data-reveal].uxa0b1ae3f41, .md0263ac76ab .nxbacbfcef2f[data-reveal].uxa0b1ae3f41, .md0263ac76ab .ir3c56c76173[data-reveal].uxa0b1ae3f41 { clip-path: inset(0 0 0 0); }
.md0263ac76ab .cw6e57aa5658[data-reveal].uxa0b1ae3f41 { clip-path: inset(-14px); }

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

/* ================================================================== ≥ 900 */
@media (min-width: 900px) {
  .cw22b4bbfa6b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .cw5fe97ad4be { grid-column: 1 / -1; }
  .md4bf7ed4973 { margin-top: 0; }
  .tvd53a04a6de .dbfb091b6d69 { aspect-ratio: 4 / 4.4; }
  .qs88e8978cc2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .tv0cab7b3e22 { position: sticky; top: 104px; }
  .db3a2ca30dcc { aspect-ratio: 4 / 4.2; max-width: 440px; }
  .fy9dd87012e2 { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 28px 0 14px; }
  .ux95bb68bdcc { font-size: 3rem; }
  .rp656c015d00 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .gt2d2cb802b1 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .ez336edc2760 { order: -1; }
  .ir3c56c76173 { aspect-ratio: 4 / 5; }
}

/* ================================================================== ≥ 1024 */
@media (min-width: 1024px) {
  .ez5a49df40b9 { padding-top: calc(var(--ir4c29004302) + 8px); }
  .tvfc6b911c2a { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .nx1d23705dfb { 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. */
.vhf6cd1d4966 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 22px; border-block: 1px solid var(--uxb7d00afdd6); }
.vhf6cd1d4966 li { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 12px 14px 0; }
.vhf6cd1d4966 li + li { padding-left: 14px; border-left: 1px solid var(--ezd06ca47db0); }
.vhf6cd1d4966 b { font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.05 var(--kw82e769e05b); letter-spacing: -.02em; color: var(--md0127c7ea9a); overflow-wrap: anywhere; }
.vhf6cd1d4966 span:not(.fy21fda71fe8) { font-size: .875rem; line-height: 1.35; color: var(--ly354b4c24fc); }
@media (max-width: 359.98px) { .vhf6cd1d4966 { grid-template-columns: minmax(0, 1fr); } .vhf6cd1d4966 li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--ezd06ca47db0); } }

/* ---- no-photo variants (approved-photo swap, 2026-09-27) */
.sm0ada5e56ce { display: grid; place-items: center; padding: 6% 8%; background: var(--kwbe1a8f0f98); color: var(--rpffe8acbdf9); --nxa495459a62: var(--bl990ffe3a7b); }
.dbdfce0eb644:has(.sm0ada5e56ce) { padding-bottom: 0; }
@media (min-width: 900px) { .qs0c0d1ae1ca { grid-template-columns: minmax(0, 1fr); } }
/*5bb5aa3d6fe4*/