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

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

/* breadcrumb */
.ux08bf212fb4 { min-width: 0; }
.ux08bf212fb4 ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .9375rem; color: var(--db4f9573676e); }
.ux08bf212fb4 li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.ux08bf212fb4 li + li::before { content: "›"; color: var(--bl7a6f4bb230); font-weight: 600; }
.ux08bf212fb4 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gtd106776c00); text-decoration: underline; text-decoration-color: var(--md7dc8acc4e9); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.ux08bf212fb4 a:hover { color: var(--rpf7bd5ad86c); text-decoration-color: var(--md3581f6c49b); }
.ux08bf212fb4 [aria-current] { color: var(--kwebcdbb0bad); font-weight: 600; }

/* ------------------------------------------------------------------ first screen: statement + overlapping pair */
.kw5e8c1b265f { padding: calc(var(--ezb0b31c3a01) + 2px) 0 clamp(48px, 7vw, 104px); overflow-x: clip; }
.nx2fe69b3e21 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.vhe6ad7001c3 { min-width: 0; padding-top: 4px; }
.db2fa9d1e864 { display: block; font: 720 clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem)/1 var(--qsc9e153a337); letter-spacing: -.037em; margin: 0 0 20px; }
.rp7bbac365fe { display: block; overflow: clip; padding-bottom: .07em; margin-bottom: -.07em; }
.rp7bbac365fe > span { display: block; animation: lineUp .95s var(--tvea9d66807c) both; }
.rp3be022996e > span { animation-delay: .12s; color: var(--bl7a6f4bb230); }
.fyc294110ff2 { font-size: 1.125rem; line-height: 1.58; color: var(--gtd106776c00); max-width: 50ch; margin-bottom: 18px; }
.bl69ab20dc32 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.ez17d921ae31 { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 650 1.1875rem/1.2 var(--rp8e14a09b4a); font-variant-numeric: tabular-nums; color: var(--kwebcdbb0bad); text-decoration: none; }
.fy6beaf4de9e { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ly7f52d1eb86); background: linear-gradient(180deg, var(--ez839a2f81b3), var(--ez6645b92994)); box-shadow: inset 0 1px 0 rgb(255 248 222 / .7), 0 2px 6px rgb(60 40 8 / .18); }
.fy6beaf4de9e .kw88c5f9840d { width: 20px; height: 20px; }
.ez17d921ae31 > span:last-child { border-bottom: 2px solid var(--md3581f6c49b); padding-bottom: 2px; }
.aobdba72d90c { color: var(--db4f9573676e); font-weight: 500; }
.ez17d921ae31:hover > span:last-child { color: var(--rpf7bd5ad86c); }
.jd95069b0ed8 { min-width: 0; margin-top: 36px; }
.fy15bb90757d .mdc0d68b1b63 { aspect-ratio: 5 / 4; }

/* ------------------------------------------------------------------ what stays the same: numbered principles beside an arch */
.fy22ede9f732 { background: var(--ux19767fca8d); overflow-x: clip; }
.jd283681dfdb { display: grid; gap: 32px; }
.vh53eec012ca { min-width: 0; }
.gtc194b50d3d { color: var(--gtd106776c00); max-width: 46ch; }
.rpe3173c4201 { margin-top: 8px; aspect-ratio: 5 / 4; border-radius: 999px 999px var(--qs1e683eb73f) var(--qs1e683eb73f); overflow: hidden; background: var(--qsbb9d0a3a1e); }
.rpe3173c4201 img { width: 100%; height: 100%; object-fit: cover; }
.kwf657b249ac { min-width: 0; border-top: 1.5px solid var(--kwebcdbb0bad); }
.kw1f9f5f90f8 { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 22px 0 8px; border-bottom: 1px solid var(--md7dc8acc4e9); }
.rp4873a9dce2 { margin: 0; font: 700 2.25rem/1 var(--qsc9e153a337); letter-spacing: -.04em; color: var(--bl7a6f4bb230); font-variant-numeric: tabular-nums; }
.ezaa9536ded4 { min-width: 0; }
.gt091b77236e { font: 700 1.375rem/1.2 var(--qsc9e153a337); letter-spacing: -.02em; margin: 4px 0 10px; }
.ezaa9536ded4 .ly21f31aef5d { color: var(--gtd106776c00); }

/* ------------------------------------------------------------------ older hardware: the one dark band */
.aobde22f6a51 { overflow-x: clip; }
.fy85afb37f95 { display: grid; gap: 40px; }
.rpd16ca854f4 { position: relative; padding-bottom: 18%; min-width: 0; }
.md005fb371c6 { aspect-ratio: 4 / 3; border-radius: var(--qs1e683eb73f); overflow: hidden; background: var(--nx13bfd9a973); }
.md005fb371c6 img, .gt01a2127830 img { width: 100%; height: 100%; object-fit: cover; }
.uxd4b9a3f2d5 { position: absolute; right: 6%; bottom: 0; width: 40%; }
.gt01a2127830 { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--nx13bfd9a973); box-shadow: 0 0 0 6px var(--kw5005062492), 0 0 0 8px var(--jd696e92ea1a), 0 18px 40px rgb(0 0 0 / .45); }
.md51888f9ecd { min-width: 0; }
.md51888f9ecd .ly21f31aef5d { color: var(--sm73b67899d5); max-width: 56ch; }
.bl2d0c93a26f { color: var(--sm73b67899d5); border-bottom-color: var(--jd696e92ea1a); }
.bl2d0c93a26f .kw88c5f9840d { color: var(--jd696e92ea1a); }
.bl2d0c93a26f:hover { color: var(--jd696e92ea1a); }

/* ------------------------------------------------------------------ how a visit goes: a numbered rail */
.rp6cabfe243c { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 4px 32px; margin-bottom: 28px; }
.rp6cabfe243c .pnf6e734759c { margin: 0; }
.db11ea60c69e { position: relative; display: grid; gap: 26px; padding-left: 58px; }
.db11ea60c69e::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--jd696e92ea1a), var(--md3581f6c49b) 70%, var(--bl7a6f4bb230)); }
.tv2b7505fdb4 { position: relative; min-width: 0; }
.ly060c993874 {
  position: absolute; left: -58px; top: -2px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .9375rem/1 var(--rp8e14a09b4a); font-variant-numeric: tabular-nums;
  color: var(--kwebcdbb0bad); background: var(--mdfda17b99f6); box-shadow: inset 0 0 0 2px var(--md3581f6c49b);
}
.vhf66b64549c { font: 650 1.1875rem/1.3 var(--rp8e14a09b4a); margin: 8px 0 6px; }
.vhf66b64549c a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color .2s, color .2s; }
.vhf66b64549c a:hover { color: var(--rpf7bd5ad86c); text-decoration-color: var(--md3581f6c49b); }
.tv2b7505fdb4 p { margin: 0; color: var(--gtd106776c00); }

/* ------------------------------------------------------------------ where we work */
.pn1f3c1cb5e0 { background: var(--ux19767fca8d); overflow-x: clip; }
.smee618bc178 { display: grid; gap: 32px; }
.gt599ea09291 { aspect-ratio: 4 / 3; border-radius: var(--qsac0df52b1e); overflow: hidden; background: var(--qsbb9d0a3a1e); }
.gt599ea09291 img { width: 100%; height: 100%; object-fit: cover; }
.tva0e4a61264 { min-width: 0; }
.tva0e4a61264 .ly21f31aef5d { color: var(--gtd106776c00); max-width: 62ch; }
.pn320d6ce973 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; border-top: 1px solid var(--md7dc8acc4e9); padding-top: 14px; }
.pn320d6ce973 div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.pn320d6ce973 dt { font-size: .8125rem; line-height: 1.3; color: var(--db4f9573676e); }
.pn320d6ce973 dd { margin: 4px 0 0; font: 700 clamp(1.375rem, 1rem + 1.6vw, 2rem)/1 var(--qsc9e153a337); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pn1bd6468a6b { margin: 10px 0 22px; font-size: .8125rem; color: var(--db4f9573676e); }
.cwe510930ed8 { margin-bottom: 18px; }

/* ------------------------------------------------------------------ closing band */
.vh9607c2f829 { padding-bottom: 56px; }
.vh9607c2f829 .gt242f37f6a2 .ly21f31aef5d { color: var(--gtd106776c00); }
.jd7c48781b05 { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; }
.jd7c48781b05 .fya5027b25c3 { font-variant-numeric: tabular-nums; }

.md0eae31725b .rpe3173c4201[data-reveal].ly64197c594e, .md0eae31725b .md005fb371c6[data-reveal].ly64197c594e, .md0eae31725b .gt599ea09291[data-reveal].ly64197c594e { clip-path: inset(0 0 0 0); }
.md0eae31725b .gt01a2127830[data-reveal].ly64197c594e { clip-path: inset(-14px); }

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

/* ================================================================== ≥ 900 */
@media (min-width: 900px) {
  .nx2fe69b3e21 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .ux08bf212fb4 { grid-column: 1 / -1; }
  .jd95069b0ed8 { margin-top: 0; }
  .fy15bb90757d .mdc0d68b1b63 { aspect-ratio: 4 / 4.4; }
  .jd283681dfdb { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .md3a65fc4b12 { position: sticky; top: 104px; }
  .rpe3173c4201 { aspect-ratio: 4 / 4.2; max-width: 440px; }
  .kw1f9f5f90f8 { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 28px 0 14px; }
  .rp4873a9dce2 { font-size: 3rem; }
  .fy85afb37f95 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .smee618bc178 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .tva0e4a61264 { order: -1; }
  .gt599ea09291 { aspect-ratio: 4 / 5; }
}

/* ================================================================== ≥ 1024 */
@media (min-width: 1024px) {
  .kw5e8c1b265f { padding-top: calc(var(--ezb0b31c3a01) + 8px); }
  .db11ea60c69e { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .vh9607c2f829 { 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. */
.sm248c747bd5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 22px; border-block: 1px solid var(--md7dc8acc4e9); }
.sm248c747bd5 li { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 12px 14px 0; }
.sm248c747bd5 li + li { padding-left: 14px; border-left: 1px solid var(--cwca8565097e); }
.sm248c747bd5 b { font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.05 var(--qsc9e153a337); letter-spacing: -.02em; color: var(--kwebcdbb0bad); overflow-wrap: anywhere; }
.sm248c747bd5 span:not(.ez447959c568) { font-size: .875rem; line-height: 1.35; color: var(--db4f9573676e); }
@media (max-width: 359.98px) { .sm248c747bd5 { grid-template-columns: minmax(0, 1fr); } .sm248c747bd5 li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--cwca8565097e); } }

/* ---- no-photo variants (approved-photo swap, 2026-09-27) */
.rp5eec353b7c { display: grid; place-items: center; padding: 6% 8%; background: var(--nx13bfd9a973); color: var(--fy49af1c5cb8); --qs270680cc55: var(--jd696e92ea1a); }
.rpd16ca854f4:has(.rp5eec353b7c) { padding-bottom: 0; }
@media (min-width: 900px) { .kwcbef99a0aa { grid-template-columns: minmax(0, 1fr); } }
/*442207857855*/