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

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

/* breadcrumb */
.blb54594e11c { min-width: 0; }
.blb54594e11c ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .9375rem; color: var(--gt1647dd7951); }
.blb54594e11c li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.blb54594e11c li + li::before { content: "›"; color: var(--cw10ace46f29); font-weight: 600; }
.blb54594e11c a { display: inline-flex; align-items: center; min-height: 44px; color: var(--kwc8f99290b6); text-decoration: underline; text-decoration-color: var(--jdeb12f0efe8); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.blb54594e11c a:hover { color: var(--gt0c91d84602); text-decoration-color: var(--gt7e345b2ebc); }
.blb54594e11c [aria-current] { color: var(--rp4c6a89fe1d); font-weight: 600; }

/* ------------------------------------------------------------------ first screen: statement + overlapping pair */
.ao1731537476 { padding: calc(var(--vh3cb8aa26ee) + 2px) 0 clamp(48px, 7vw, 104px); overflow-x: clip; }
.fyf62355f214 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.nxdb497b962f { min-width: 0; padding-top: 4px; }
.dbcf934bc83b { display: block; font: 720 clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem)/1 var(--ao21d37b5bc4); letter-spacing: -.037em; margin: 0 0 20px; }
.rp97666d9e02 { display: block; overflow: clip; padding-bottom: .07em; margin-bottom: -.07em; }
.rp97666d9e02 > span { display: block; animation: lineUp .95s var(--ly269526ac20) both; }
.dbc8a4cc90c6 > span { animation-delay: .12s; color: var(--cw10ace46f29); }
.ir8cd61f23b6 { font-size: 1.125rem; line-height: 1.58; color: var(--kwc8f99290b6); max-width: 50ch; margin-bottom: 18px; }
.vh1d61d5b24d { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.kw6ab606f96e { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 650 1.1875rem/1.2 var(--fy90701b757f); font-variant-numeric: tabular-nums; color: var(--rp4c6a89fe1d); text-decoration: none; }
.ez152f0cd94b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--qs6eddb0be9b); background: linear-gradient(180deg, var(--bld31203cc37), var(--cw696c136ece)); box-shadow: inset 0 1px 0 rgb(255 248 222 / .7), 0 2px 6px rgb(60 40 8 / .18); }
.ez152f0cd94b .qsbea13f7bbd { width: 20px; height: 20px; }
.kw6ab606f96e > span:last-child { border-bottom: 2px solid var(--gt7e345b2ebc); padding-bottom: 2px; }
.jdc68cbc1f8c { color: var(--gt1647dd7951); font-weight: 500; }
.kw6ab606f96e:hover > span:last-child { color: var(--gt0c91d84602); }
.bl95421faa77 { min-width: 0; margin-top: 36px; }
.tvffe38d7712 .dbfc8aa263b5 { aspect-ratio: 5 / 4; }

/* ------------------------------------------------------------------ what stays the same: numbered principles beside an arch */
.rp372e71916d { background: var(--cw802fd72432); overflow-x: clip; }
.ly10bd0e0139 { display: grid; gap: 32px; }
.rp85326c5407 { min-width: 0; }
.blc86a4ea3b0 { color: var(--kwc8f99290b6); max-width: 46ch; }
.mde129e116b2 { margin-top: 8px; aspect-ratio: 5 / 4; border-radius: 999px 999px var(--tv2c490b56d2) var(--tv2c490b56d2); overflow: hidden; background: var(--pn2a8a7f4aab); }
.mde129e116b2 img { width: 100%; height: 100%; object-fit: cover; }
.vh22d26ececc { min-width: 0; border-top: 1.5px solid var(--rp4c6a89fe1d); }
.kwfffd2053fb { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 22px 0 8px; border-bottom: 1px solid var(--jdeb12f0efe8); }
.qsd01dbe6aea { margin: 0; font: 700 2.25rem/1 var(--ao21d37b5bc4); letter-spacing: -.04em; color: var(--cw10ace46f29); font-variant-numeric: tabular-nums; }
.rped67a04ffc { min-width: 0; }
.tv99015cb692 { font: 700 1.375rem/1.2 var(--ao21d37b5bc4); letter-spacing: -.02em; margin: 4px 0 10px; }
.rped67a04ffc .tvf683ee6303 { color: var(--kwc8f99290b6); }

/* ------------------------------------------------------------------ older hardware: the one dark band */
.gt316966e239 { overflow-x: clip; }
.ly3f96b21996 { display: grid; gap: 40px; }
.aod65b6ada01 { position: relative; padding-bottom: 18%; min-width: 0; }
.ux897b57fd28 { aspect-ratio: 4 / 3; border-radius: var(--tv2c490b56d2); overflow: hidden; background: var(--vh057954318f); }
.ux897b57fd28 img, .cw01a6ae2624 img { width: 100%; height: 100%; object-fit: cover; }
.tv164dbcd7dd { position: absolute; right: 6%; bottom: 0; width: 40%; }
.cw01a6ae2624 { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--vh057954318f); box-shadow: 0 0 0 6px var(--uxc886771613), 0 0 0 8px var(--lyaf6347520b), 0 18px 40px rgb(0 0 0 / .45); }
.pn4f0fbe8f9f { min-width: 0; }
.pn4f0fbe8f9f .tvf683ee6303 { color: var(--jd0e69e337ac); max-width: 56ch; }
.aoe7d3bd74ea { color: var(--jd0e69e337ac); border-bottom-color: var(--lyaf6347520b); }
.aoe7d3bd74ea .qsbea13f7bbd { color: var(--lyaf6347520b); }
.aoe7d3bd74ea:hover { color: var(--lyaf6347520b); }

/* ------------------------------------------------------------------ how a visit goes: a numbered rail */
.pn7e5cf2325a { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 4px 32px; margin-bottom: 28px; }
.pn7e5cf2325a .qsad4fbc9f87 { margin: 0; }
.qs67bd39e02a { position: relative; display: grid; gap: 26px; padding-left: 58px; }
.qs67bd39e02a::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--lyaf6347520b), var(--gt7e345b2ebc) 70%, var(--cw10ace46f29)); }
.fyfac96104d4 { position: relative; min-width: 0; }
.bl1686535f4d {
  position: absolute; left: -58px; top: -2px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .9375rem/1 var(--fy90701b757f); font-variant-numeric: tabular-nums;
  color: var(--rp4c6a89fe1d); background: var(--kw1c233ec6a1); box-shadow: inset 0 0 0 2px var(--gt7e345b2ebc);
}
.ao419ffe6064 { font: 650 1.1875rem/1.3 var(--fy90701b757f); margin: 8px 0 6px; }
.ao419ffe6064 a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color .2s, color .2s; }
.ao419ffe6064 a:hover { color: var(--gt0c91d84602); text-decoration-color: var(--gt7e345b2ebc); }
.fyfac96104d4 p { margin: 0; color: var(--kwc8f99290b6); }

/* ------------------------------------------------------------------ where we work */
.tvf75c63b184 { background: var(--cw802fd72432); overflow-x: clip; }
.vhf22b7efc1e { display: grid; gap: 32px; }
.pne79d7a927b { aspect-ratio: 4 / 3; border-radius: var(--qsfedcc0ca01); overflow: hidden; background: var(--pn2a8a7f4aab); }
.pne79d7a927b img { width: 100%; height: 100%; object-fit: cover; }
.jd7fa7847754 { min-width: 0; }
.jd7fa7847754 .tvf683ee6303 { color: var(--kwc8f99290b6); max-width: 62ch; }
.ir5e2022f45c { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; border-top: 1px solid var(--jdeb12f0efe8); padding-top: 14px; }
.ir5e2022f45c div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.ir5e2022f45c dt { font-size: .8125rem; line-height: 1.3; color: var(--gt1647dd7951); }
.ir5e2022f45c dd { margin: 4px 0 0; font: 700 clamp(1.375rem, 1rem + 1.6vw, 2rem)/1 var(--ao21d37b5bc4); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.md4ba5f29de8 { margin: 10px 0 22px; font-size: .8125rem; color: var(--gt1647dd7951); }
.cwdbb81c0ba1 { margin-bottom: 18px; }

/* ------------------------------------------------------------------ closing band */
.vh31a4c631be { padding-bottom: 56px; }
.vh31a4c631be .fyc39e65c238 .tvf683ee6303 { color: var(--kwc8f99290b6); }
.bl248e843134 { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; }
.bl248e843134 .pn4ce1c91f2e { font-variant-numeric: tabular-nums; }

.vh63bcfa902a .mde129e116b2[data-reveal].uxdbd57c230f, .vh63bcfa902a .ux897b57fd28[data-reveal].uxdbd57c230f, .vh63bcfa902a .pne79d7a927b[data-reveal].uxdbd57c230f { clip-path: inset(0 0 0 0); }
.vh63bcfa902a .cw01a6ae2624[data-reveal].uxdbd57c230f { clip-path: inset(-14px); }

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

/* ================================================================== ≥ 900 */
@media (min-width: 900px) {
  .fyf62355f214 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .blb54594e11c { grid-column: 1 / -1; }
  .bl95421faa77 { margin-top: 0; }
  .tvffe38d7712 .dbfc8aa263b5 { aspect-ratio: 4 / 4.4; }
  .ly10bd0e0139 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .ezcea902212a { position: sticky; top: 104px; }
  .mde129e116b2 { aspect-ratio: 4 / 4.2; max-width: 440px; }
  .kwfffd2053fb { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 28px 0 14px; }
  .qsd01dbe6aea { font-size: 3rem; }
  .ly3f96b21996 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .vhf22b7efc1e { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .jd7fa7847754 { order: -1; }
  .pne79d7a927b { aspect-ratio: 4 / 5; }
}

/* ================================================================== ≥ 1024 */
@media (min-width: 1024px) {
  .ao1731537476 { padding-top: calc(var(--vh3cb8aa26ee) + 8px); }
  .qs67bd39e02a { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .vh31a4c631be { 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. */
.cw435a273d0c { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 22px; border-block: 1px solid var(--jdeb12f0efe8); }
.cw435a273d0c li { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 12px 14px 0; }
.cw435a273d0c li + li { padding-left: 14px; border-left: 1px solid var(--lyc2bc327957); }
.cw435a273d0c b { font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.05 var(--ao21d37b5bc4); letter-spacing: -.02em; color: var(--rp4c6a89fe1d); overflow-wrap: anywhere; }
.cw435a273d0c span:not(.bl84c42eb100) { font-size: .875rem; line-height: 1.35; color: var(--gt1647dd7951); }
@media (max-width: 359.98px) { .cw435a273d0c { grid-template-columns: minmax(0, 1fr); } .cw435a273d0c li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--lyc2bc327957); } }

/* ---- no-photo variants (approved-photo swap, 2026-09-27) */
.smae534c6f8b { display: grid; place-items: center; padding: 6% 8%; background: var(--vh057954318f); color: var(--cwcc0827171e); --md8f69c37b86: var(--lyaf6347520b); }
.aod65b6ada01:has(.smae534c6f8b) { padding-bottom: 0; }
@media (min-width: 900px) { .pn9bb36c0752 { grid-template-columns: minmax(0, 1fr); } }
/*83ecdb72cadf*/