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

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

/* breadcrumb */
.cw44f297cf53 { min-width: 0; }
.cw44f297cf53 ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .9375rem; color: var(--ez8d7025ceb6); }
.cw44f297cf53 li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.cw44f297cf53 li + li::before { content: "›"; color: var(--qs60066a3123); font-weight: 600; }
.cw44f297cf53 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pna00a55c1eb); text-decoration: underline; text-decoration-color: var(--kw077a85c718); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.cw44f297cf53 a:hover { color: var(--jdb1af146b9f); text-decoration-color: var(--qs4feaa5d759); }
.cw44f297cf53 [aria-current] { color: var(--nx288a33ba36); font-weight: 600; }

/* ------------------------------------------------------------------ first screen: statement + overlapping pair */
.mdac7492da84 { padding: calc(var(--tv0cc1a300dc) + 2px) 0 clamp(48px, 7vw, 104px); overflow-x: clip; }
.qsd16a548185 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.bl30951a8bdb { min-width: 0; padding-top: 4px; }
.gt06b642ba59 { display: block; font: 720 clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem)/1 var(--tv5e2d069ee4); letter-spacing: -.037em; margin: 0 0 20px; }
.bl4c123d33c8 { display: block; overflow: clip; padding-bottom: .07em; margin-bottom: -.07em; }
.bl4c123d33c8 > span { display: block; animation: lineUp .95s var(--ao7108158d92) both; }
.ez21ea6ebe24 > span { animation-delay: .12s; color: var(--qs60066a3123); }
.rpef3a424ef7 { font-size: 1.125rem; line-height: 1.58; color: var(--pna00a55c1eb); max-width: 50ch; margin-bottom: 18px; }
.rp6d8e33f079 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.nxc9e717151d { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 650 1.1875rem/1.2 var(--fy7276b31332); font-variant-numeric: tabular-nums; color: var(--nx288a33ba36); text-decoration: none; }
.cwa2985e6bb3 { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--pn71afe3f51e); background: linear-gradient(180deg, var(--ez04b7c3ee03), var(--rp51320f952c)); box-shadow: inset 0 1px 0 rgb(255 248 222 / .7), 0 2px 6px rgb(60 40 8 / .18); }
.cwa2985e6bb3 .gt22446f5d07 { width: 20px; height: 20px; }
.nxc9e717151d > span:last-child { border-bottom: 2px solid var(--qs4feaa5d759); padding-bottom: 2px; }
.vh60a9336b06 { color: var(--ez8d7025ceb6); font-weight: 500; }
.nxc9e717151d:hover > span:last-child { color: var(--jdb1af146b9f); }
.cw7754334346 { min-width: 0; margin-top: 36px; }
.ux03d47a0b42 .uxabbb7531a2 { aspect-ratio: 5 / 4; }

/* ------------------------------------------------------------------ what stays the same: numbered principles beside an arch */
.mdc1edba4e59 { background: var(--jd1987c1d99e); overflow-x: clip; }
.kwe6b663b8c2 { display: grid; gap: 32px; }
.lya0501cb511 { min-width: 0; }
.kw3ad2691868 { color: var(--pna00a55c1eb); max-width: 46ch; }
.gtfb5eae83c0 { margin-top: 8px; aspect-ratio: 5 / 4; border-radius: 999px 999px var(--qsbc025a5d5a) var(--qsbc025a5d5a); overflow: hidden; background: var(--bl53a7d1a247); }
.gtfb5eae83c0 img { width: 100%; height: 100%; object-fit: cover; }
.tvd091338a2c { min-width: 0; border-top: 1.5px solid var(--nx288a33ba36); }
.ir580b45274b { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 22px 0 8px; border-bottom: 1px solid var(--kw077a85c718); }
.sm94e6a6bad2 { margin: 0; font: 700 2.25rem/1 var(--tv5e2d069ee4); letter-spacing: -.04em; color: var(--qs60066a3123); font-variant-numeric: tabular-nums; }
.gt77618725eb { min-width: 0; }
.lyea9cea2654 { font: 700 1.375rem/1.2 var(--tv5e2d069ee4); letter-spacing: -.02em; margin: 4px 0 10px; }
.gt77618725eb .sme61f3381ea { color: var(--pna00a55c1eb); }

/* ------------------------------------------------------------------ older hardware: the one dark band */
.ly00fc1ac025 { overflow-x: clip; }
.mdcc509d0369 { display: grid; gap: 40px; }
.rpda58679b36 { position: relative; padding-bottom: 18%; min-width: 0; }
.jdb2ba71f252 { aspect-ratio: 4 / 3; border-radius: var(--qsbc025a5d5a); overflow: hidden; background: var(--pn2653273b71); }
.jdb2ba71f252 img, .ao4d9494071e img { width: 100%; height: 100%; object-fit: cover; }
.nx06fda9b04a { position: absolute; right: 6%; bottom: 0; width: 40%; }
.ao4d9494071e { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--pn2653273b71); box-shadow: 0 0 0 6px var(--qs9cc4b19a16), 0 0 0 8px var(--vh270c9f70de), 0 18px 40px rgb(0 0 0 / .45); }
.ux3314a566fe { min-width: 0; }
.ux3314a566fe .sme61f3381ea { color: var(--mdb9f100aa81); max-width: 56ch; }
.qsa458428a06 { color: var(--mdb9f100aa81); border-bottom-color: var(--vh270c9f70de); }
.qsa458428a06 .gt22446f5d07 { color: var(--vh270c9f70de); }
.qsa458428a06:hover { color: var(--vh270c9f70de); }

/* ------------------------------------------------------------------ how a visit goes: a numbered rail */
.bl75173906bb { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 4px 32px; margin-bottom: 28px; }
.bl75173906bb .gt4df4326ea3 { margin: 0; }
.nxac05892ea0 { position: relative; display: grid; gap: 26px; padding-left: 58px; }
.nxac05892ea0::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--vh270c9f70de), var(--qs4feaa5d759) 70%, var(--qs60066a3123)); }
.ez1f057f7d15 { position: relative; min-width: 0; }
.aofa15ef9f25 {
  position: absolute; left: -58px; top: -2px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .9375rem/1 var(--fy7276b31332); font-variant-numeric: tabular-nums;
  color: var(--nx288a33ba36); background: var(--tv217b4995b5); box-shadow: inset 0 0 0 2px var(--qs4feaa5d759);
}
.fyd18863752d { font: 650 1.1875rem/1.3 var(--fy7276b31332); margin: 8px 0 6px; }
.fyd18863752d a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color .2s, color .2s; }
.fyd18863752d a:hover { color: var(--jdb1af146b9f); text-decoration-color: var(--qs4feaa5d759); }
.ez1f057f7d15 p { margin: 0; color: var(--pna00a55c1eb); }

/* ------------------------------------------------------------------ where we work */
.ez478a6014ee { background: var(--jd1987c1d99e); overflow-x: clip; }
.gtfb46562086 { display: grid; gap: 32px; }
.fy0976eade5a { aspect-ratio: 4 / 3; border-radius: var(--ezb90f6588dd); overflow: hidden; background: var(--bl53a7d1a247); }
.fy0976eade5a img { width: 100%; height: 100%; object-fit: cover; }
.ly90303232d4 { min-width: 0; }
.ly90303232d4 .sme61f3381ea { color: var(--pna00a55c1eb); max-width: 62ch; }
.nxabe71e4889 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; border-top: 1px solid var(--kw077a85c718); padding-top: 14px; }
.nxabe71e4889 div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.nxabe71e4889 dt { font-size: .8125rem; line-height: 1.3; color: var(--ez8d7025ceb6); }
.nxabe71e4889 dd { margin: 4px 0 0; font: 700 clamp(1.375rem, 1rem + 1.6vw, 2rem)/1 var(--tv5e2d069ee4); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cw1049a23f38 { margin: 10px 0 22px; font-size: .8125rem; color: var(--ez8d7025ceb6); }
.fye5c697ea63 { margin-bottom: 18px; }

/* ------------------------------------------------------------------ closing band */
.kwadcded57a1 { padding-bottom: 56px; }
.kwadcded57a1 .ao610f2a1149 .sme61f3381ea { color: var(--pna00a55c1eb); }
.bl8fe5d09672 { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; }
.bl8fe5d09672 .cwcbd3225b8d { font-variant-numeric: tabular-nums; }

.kw8a54a8dab4 .gtfb5eae83c0[data-reveal].md983948dd86, .kw8a54a8dab4 .jdb2ba71f252[data-reveal].md983948dd86, .kw8a54a8dab4 .fy0976eade5a[data-reveal].md983948dd86 { clip-path: inset(0 0 0 0); }
.kw8a54a8dab4 .ao4d9494071e[data-reveal].md983948dd86 { clip-path: inset(-14px); }

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

/* ================================================================== ≥ 900 */
@media (min-width: 900px) {
  .qsd16a548185 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .cw44f297cf53 { grid-column: 1 / -1; }
  .cw7754334346 { margin-top: 0; }
  .ux03d47a0b42 .uxabbb7531a2 { aspect-ratio: 4 / 4.4; }
  .kwe6b663b8c2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .bl081e504b2e { position: sticky; top: 104px; }
  .gtfb5eae83c0 { aspect-ratio: 4 / 4.2; max-width: 440px; }
  .ir580b45274b { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 28px 0 14px; }
  .sm94e6a6bad2 { font-size: 3rem; }
  .mdcc509d0369 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .gtfb46562086 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .ly90303232d4 { order: -1; }
  .fy0976eade5a { aspect-ratio: 4 / 5; }
}

/* ================================================================== ≥ 1024 */
@media (min-width: 1024px) {
  .mdac7492da84 { padding-top: calc(var(--tv0cc1a300dc) + 8px); }
  .nxac05892ea0 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .kwadcded57a1 { 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. */
.vh2d653b807c { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 22px; border-block: 1px solid var(--kw077a85c718); }
.vh2d653b807c li { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 12px 14px 0; }
.vh2d653b807c li + li { padding-left: 14px; border-left: 1px solid var(--fy8111bda1c4); }
.vh2d653b807c b { font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.05 var(--tv5e2d069ee4); letter-spacing: -.02em; color: var(--nx288a33ba36); overflow-wrap: anywhere; }
.vh2d653b807c span:not(.fy52840cb660) { font-size: .875rem; line-height: 1.35; color: var(--ez8d7025ceb6); }
@media (max-width: 359.98px) { .vh2d653b807c { grid-template-columns: minmax(0, 1fr); } .vh2d653b807c li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--fy8111bda1c4); } }

/* ---- no-photo variants (approved-photo swap, 2026-09-27) */
.rp955077d45f { display: grid; place-items: center; padding: 6% 8%; background: var(--pn2653273b71); color: var(--dbf94ffd2e1f); --fyeb4204b430: var(--vh270c9f70de); }
.rpda58679b36:has(.rp955077d45f) { padding-bottom: 0; }
@media (min-width: 900px) { .ao8182bd5e0b { grid-template-columns: minmax(0, 1fr); } }
/*b869d054f855*/