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

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

/* breadcrumb */
.sm427a1d9c1a { min-width: 0; }
.sm427a1d9c1a ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .9375rem; color: var(--jd62aad3d520); }
.sm427a1d9c1a li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.sm427a1d9c1a li + li::before { content: "›"; color: var(--tvd64b36dbc0); font-weight: 600; }
.sm427a1d9c1a a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gt7a7a88d293); text-decoration: underline; text-decoration-color: var(--rp07702d249c); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.sm427a1d9c1a a:hover { color: var(--pnc483dc6f98); text-decoration-color: var(--ir96b6db450d); }
.sm427a1d9c1a [aria-current] { color: var(--kwec49d77425); font-weight: 600; }

/* ------------------------------------------------------------------ first screen: statement + overlapping pair */
.pn320a215883 { padding: calc(var(--gt747f40e343) + 2px) 0 clamp(48px, 7vw, 104px); overflow-x: clip; }
.ir7614d687af { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.nx11e72a5fa1 { min-width: 0; padding-top: 4px; }
.kw1ba8eadde4 { display: block; font: 720 clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem)/1 var(--ezd21601a375); letter-spacing: -.037em; margin: 0 0 20px; }
.ez5dfcfb959f { display: block; overflow: clip; padding-bottom: .07em; margin-bottom: -.07em; }
.ez5dfcfb959f > span { display: block; animation: lineUp .95s var(--rp74b4a52561) both; }
.gta6ddc813c5 > span { animation-delay: .12s; color: var(--tvd64b36dbc0); }
.sm7ab61a422e { font-size: 1.125rem; line-height: 1.58; color: var(--gt7a7a88d293); max-width: 50ch; margin-bottom: 18px; }
.eza9d7fcd604 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.fyd286b0929a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 650 1.1875rem/1.2 var(--ezc1b721f72e); font-variant-numeric: tabular-nums; color: var(--kwec49d77425); text-decoration: none; }
.smc2d0da72ae { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--lye3cc2d6459); background: linear-gradient(180deg, var(--tva3f3a468eb), var(--rp7dc2d9d39b)); box-shadow: inset 0 1px 0 rgb(255 248 222 / .7), 0 2px 6px rgb(60 40 8 / .18); }
.smc2d0da72ae .ble1dbdb9e29 { width: 20px; height: 20px; }
.fyd286b0929a > span:last-child { border-bottom: 2px solid var(--ir96b6db450d); padding-bottom: 2px; }
.md9d9cbde1d1 { color: var(--jd62aad3d520); font-weight: 500; }
.fyd286b0929a:hover > span:last-child { color: var(--pnc483dc6f98); }
.qsd3164e6a04 { min-width: 0; margin-top: 36px; }
.vh12cdda39a1 .tv4a22529109 { aspect-ratio: 5 / 4; }

/* ------------------------------------------------------------------ what stays the same: numbered principles beside an arch */
.jd8562f8d652 { background: var(--ez1038ce1454); overflow-x: clip; }
.jdc039136648 { display: grid; gap: 32px; }
.ao16283fa2c2 { min-width: 0; }
.db614a1170bb { color: var(--gt7a7a88d293); max-width: 46ch; }
.cw1e4e13e47d { margin-top: 8px; aspect-ratio: 5 / 4; border-radius: 999px 999px var(--bl4a5fddf6b9) var(--bl4a5fddf6b9); overflow: hidden; background: var(--vha0884a416f); }
.cw1e4e13e47d img { width: 100%; height: 100%; object-fit: cover; }
.ao77359dd82a { min-width: 0; border-top: 1.5px solid var(--kwec49d77425); }
.ao6a45952da0 { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 22px 0 8px; border-bottom: 1px solid var(--rp07702d249c); }
.irad94f8f6fb { margin: 0; font: 700 2.25rem/1 var(--ezd21601a375); letter-spacing: -.04em; color: var(--tvd64b36dbc0); font-variant-numeric: tabular-nums; }
.vh446d2db743 { min-width: 0; }
.ez3316d9f25d { font: 700 1.375rem/1.2 var(--ezd21601a375); letter-spacing: -.02em; margin: 4px 0 10px; }
.vh446d2db743 .tv86a88a74f4 { color: var(--gt7a7a88d293); }

/* ------------------------------------------------------------------ older hardware: the one dark band */
.cwe6721f8da6 { overflow-x: clip; }
.mdc23a82d639 { display: grid; gap: 40px; }
.ly9d795dd6d6 { position: relative; padding-bottom: 18%; min-width: 0; }
.fy76f9f9206f { aspect-ratio: 4 / 3; border-radius: var(--bl4a5fddf6b9); overflow: hidden; background: var(--kwa1c6626cda); }
.fy76f9f9206f img, .ez9b2abe3a55 img { width: 100%; height: 100%; object-fit: cover; }
.db2232844a50 { position: absolute; right: 6%; bottom: 0; width: 40%; }
.ez9b2abe3a55 { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--kwa1c6626cda); box-shadow: 0 0 0 6px var(--nxf2f1791684), 0 0 0 8px var(--qs2c99a0cbb6), 0 18px 40px rgb(0 0 0 / .45); }
.tv243efdb069 { min-width: 0; }
.tv243efdb069 .tv86a88a74f4 { color: var(--nxb2097dc064); max-width: 56ch; }
.vh035f610d61 { color: var(--nxb2097dc064); border-bottom-color: var(--qs2c99a0cbb6); }
.vh035f610d61 .ble1dbdb9e29 { color: var(--qs2c99a0cbb6); }
.vh035f610d61:hover { color: var(--qs2c99a0cbb6); }

/* ------------------------------------------------------------------ how a visit goes: a numbered rail */
.qsfc7b6ab267 { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 4px 32px; margin-bottom: 28px; }
.qsfc7b6ab267 .uxe208c75af6 { margin: 0; }
.ux6a61314aaa { position: relative; display: grid; gap: 26px; padding-left: 58px; }
.ux6a61314aaa::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--qs2c99a0cbb6), var(--ir96b6db450d) 70%, var(--tvd64b36dbc0)); }
.ux9b1752fff3 { position: relative; min-width: 0; }
.fy74af6f1e1b {
  position: absolute; left: -58px; top: -2px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .9375rem/1 var(--ezc1b721f72e); font-variant-numeric: tabular-nums;
  color: var(--kwec49d77425); background: var(--irbdf8b56693); box-shadow: inset 0 0 0 2px var(--ir96b6db450d);
}
.uxa7ac607ac2 { font: 650 1.1875rem/1.3 var(--ezc1b721f72e); margin: 8px 0 6px; }
.uxa7ac607ac2 a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color .2s, color .2s; }
.uxa7ac607ac2 a:hover { color: var(--pnc483dc6f98); text-decoration-color: var(--ir96b6db450d); }
.ux9b1752fff3 p { margin: 0; color: var(--gt7a7a88d293); }

/* ------------------------------------------------------------------ where we work */
.ao3a30264dc5 { background: var(--ez1038ce1454); overflow-x: clip; }
.vh56da872b02 { display: grid; gap: 32px; }
.ly9c5cff6053 { aspect-ratio: 4 / 3; border-radius: var(--mdb62a541521); overflow: hidden; background: var(--vha0884a416f); }
.ly9c5cff6053 img { width: 100%; height: 100%; object-fit: cover; }
.gtf6369f90b7 { min-width: 0; }
.gtf6369f90b7 .tv86a88a74f4 { color: var(--gt7a7a88d293); max-width: 62ch; }
.vhd31045f0ad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; border-top: 1px solid var(--rp07702d249c); padding-top: 14px; }
.vhd31045f0ad div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.vhd31045f0ad dt { font-size: .8125rem; line-height: 1.3; color: var(--jd62aad3d520); }
.vhd31045f0ad dd { margin: 4px 0 0; font: 700 clamp(1.375rem, 1rem + 1.6vw, 2rem)/1 var(--ezd21601a375); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nx749a35fc1d { margin: 10px 0 22px; font-size: .8125rem; color: var(--jd62aad3d520); }
.tv6ddfdfa841 { margin-bottom: 18px; }

/* ------------------------------------------------------------------ closing band */
.vh6f46dd43f6 { padding-bottom: 56px; }
.vh6f46dd43f6 .lycc5e4e1133 .tv86a88a74f4 { color: var(--gt7a7a88d293); }
.ira378ba3e46 { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; }
.ira378ba3e46 .nx464e050460 { font-variant-numeric: tabular-nums; }

.tvcdb2eac5aa .cw1e4e13e47d[data-reveal].pne6ff556485, .tvcdb2eac5aa .fy76f9f9206f[data-reveal].pne6ff556485, .tvcdb2eac5aa .ly9c5cff6053[data-reveal].pne6ff556485 { clip-path: inset(0 0 0 0); }
.tvcdb2eac5aa .ez9b2abe3a55[data-reveal].pne6ff556485 { clip-path: inset(-14px); }

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

/* ================================================================== ≥ 900 */
@media (min-width: 900px) {
  .ir7614d687af { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .sm427a1d9c1a { grid-column: 1 / -1; }
  .qsd3164e6a04 { margin-top: 0; }
  .vh12cdda39a1 .tv4a22529109 { aspect-ratio: 4 / 4.4; }
  .jdc039136648 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .ao466859698d { position: sticky; top: 104px; }
  .cw1e4e13e47d { aspect-ratio: 4 / 4.2; max-width: 440px; }
  .ao6a45952da0 { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 28px 0 14px; }
  .irad94f8f6fb { font-size: 3rem; }
  .mdc23a82d639 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .vh56da872b02 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .gtf6369f90b7 { order: -1; }
  .ly9c5cff6053 { aspect-ratio: 4 / 5; }
}

/* ================================================================== ≥ 1024 */
@media (min-width: 1024px) {
  .pn320a215883 { padding-top: calc(var(--gt747f40e343) + 8px); }
  .ux6a61314aaa { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .vh6f46dd43f6 { 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. */
.ly399ed6b765 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 22px; border-block: 1px solid var(--rp07702d249c); }
.ly399ed6b765 li { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 12px 14px 0; }
.ly399ed6b765 li + li { padding-left: 14px; border-left: 1px solid var(--kw04c88bba69); }
.ly399ed6b765 b { font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.05 var(--ezd21601a375); letter-spacing: -.02em; color: var(--kwec49d77425); overflow-wrap: anywhere; }
.ly399ed6b765 span:not(.pncfd4177114) { font-size: .875rem; line-height: 1.35; color: var(--jd62aad3d520); }
@media (max-width: 359.98px) { .ly399ed6b765 { grid-template-columns: minmax(0, 1fr); } .ly399ed6b765 li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--kw04c88bba69); } }

/* ---- no-photo variants (approved-photo swap, 2026-09-27) */
.fy4284f654fe { display: grid; place-items: center; padding: 6% 8%; background: var(--kwa1c6626cda); color: var(--ezcabb2762a8); --ble0c4f46681: var(--qs2c99a0cbb6); }
.ly9d795dd6d6:has(.fy4284f654fe) { padding-bottom: 0; }
@media (min-width: 900px) { .vheee0fa47d6 { grid-template-columns: minmax(0, 1fr); } }
/*c1bb18323dd8*/