/* brass — engine-family additions to the approved template 1 CSS (style.ux7a1cdb455f, global.ux7a1cdb455f, page-*.ux7a1cdb455f are the
   hand-built pages' own files, unchanged). Only what the engine needs beyond the hand-built pages:
   the drawn-steps "How a visit goes" (garage), a three-step journey, and the plainer inner pages.
   Nothing here may scroll sideways: every grid/flex child min-width 0, long words wrap. */

/* three-step 3D journey (content gives three steps) */
.ezfb5da9762c.kw9f78f16721 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 360px; }

/* drawn steps: the non-3D "How a visit goes" */
.tv0a6c23e691 { background: var(--ez9661d0f209); }
.tv0a6c23e691 .pncb8b1317ab { max-width: 62ch; margin-bottom: clamp(20px, 4vw, 40px); }
.tv0a6c23e691 .pncb8b1317ab .nxe4493fb7a5 { margin-bottom: 14px; }
.nxf1b4e8e05b { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); counter-reset: bx; }
@media (min-width: 768px) { .nxf1b4e8e05b { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.jd628f8536a6 { min-width: 0; background: var(--md09ce7b68b4); border-radius: var(--uxe44c50bc46); padding: 22px 22px 24px; box-shadow: var(--cwd5d5c0e88d); position: relative; }
.jd628f8536a6 .mda488cf5cc7 { width: 72px; height: 72px; color: var(--rp7b59b15e2e); margin-bottom: 12px; }
.jd628f8536a6 .fye171138dd1 { font: 650 .8125rem/1 var(--ux44cf7e2f0c); letter-spacing: .1em; color: var(--rpaf5978fd5d); margin: 0 0 8px; }
.jd628f8536a6 .vh266683760a { font: 650 1.25rem/1.22 var(--ux44cf7e2f0c); margin: 0 0 8px; overflow-wrap: anywhere; }
.jd628f8536a6 p:last-child { margin: 0; color: var(--rp7b59b15e2e); overflow-wrap: break-word; }
@media (min-width: 768px) { .jd628f8536a6:nth-child(2) { transform: translateY(18px); } .jd628f8536a6:nth-child(3) { transform: translateY(36px); } .nxf1b4e8e05b { padding-bottom: 36px; } }

/* inner pages built from content (services, areas, questions, about, contact, site map) */
.jd4b81acc6af { overflow-wrap: break-word; }
.tvd31efdcfdf .nxa77a7a49d6 { margin-top: 10px; }
.tvd31efdcfdf .nxe4493fb7a5 a, .rp4e783662a0 .nxe4493fb7a5 a, .gte8f23a69c7 .nxe4493fb7a5 a { color: inherit; text-decoration: none; }
.tvd31efdcfdf .nxe4493fb7a5 a:hover, .rp4e783662a0 .nxe4493fb7a5 a:hover, .gte8f23a69c7 .nxe4493fb7a5 a:hover { color: var(--rpaf5978fd5d); }
.nxa8547c0904 .rp2458167e2a { border-radius: var(--uxe44c50bc46); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--cwd5d5c0e88d); }
@media (min-width: 768px) { .nxa8547c0904 .rp2458167e2a { aspect-ratio: 16 / 9; } }
.nxa8547c0904 .rp2458167e2a iframe { width: 100%; height: 100%; border: 0; display: block; }
.rp4e783662a0 { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 700px) { .rp4e783662a0 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; } .rp4e783662a0:nth-of-type(even) .ao7dd8b1859f { order: 2; } }
.ao7dd8b1859f, .aob4a27459e7 { min-width: 0; }
.ao7dd8b1859f img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--nx895878b85a); display: block; }
.rp4e783662a0:nth-of-type(3n+1) .ao7dd8b1859f img { border-radius: 999px 999px var(--nx895878b85a) var(--nx895878b85a); }
.fy185c277b28 { font-size: .9375rem; color: var(--nx7e9a7fd411); border-left: 3px solid var(--pn9ad34388c9); padding-left: 12px; }
.rp4e783662a0 .ezb03e20900c { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.nx42d9df675c { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 14px; }
.md454e77bb92 { margin: 0; }
.md454e77bb92 img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; display: block; box-shadow: 0 0 0 5px var(--tv27607136fa), var(--cwd5d5c0e88d); }
.sm1a9716c868 { color: var(--ira7368661db); margin: 8px 0 18px; }
.dbe39637b2f5 h2 { font: 650 1.375rem/1.2 var(--qs0af0864fdf); margin: 0 0 10px; }

/* advice article: a printed page (rule 60) */
.eze8a1c71247 { background: var(--cw4ed40edecc); border-radius: var(--jd284c360a23); padding: clamp(18px, 4vw, 44px); box-shadow: var(--smb939c63c78); position: relative;
  background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--ira7368661db) 2.5%, transparent) 0 1px, transparent 1px 4px); }
.ly827e1e1429 { border-bottom: 3px double var(--ira7368661db); padding-bottom: 14px; margin-bottom: 18px; text-align: center; }
.tv8b2e4ddaa4 { font: 700 .75rem/1.2 var(--ux44cf7e2f0c); letter-spacing: .22em; text-transform: uppercase; color: var(--rpaf5978fd5d); margin: 0 0 10px; overflow-wrap: anywhere; }
.cw001d032c9c { font: 760 clamp(1.75rem, 1.1rem + 3vw, 3rem)/1.04 var(--qs0af0864fdf); letter-spacing: -.02em; margin: 0 0 10px; overflow-wrap: anywhere; text-wrap: balance; }
.tvb209ef5a18 { font: 500 .8125rem/1.3 var(--ux44cf7e2f0c); letter-spacing: .08em; text-transform: uppercase; color: var(--nx7e9a7fd411); margin: 0; border-top: 1px solid var(--db694bd2dbf2); padding-top: 8px; }
.md66923baeca { margin: 0 0 18px; }
.md66923baeca img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; filter: sepia(.12) contrast(1.02); }
.cw324fd7b5a8 { font: 500 1.1875rem/1.55 var(--ux44cf7e2f0c); }
.cw324fd7b5a8::first-letter { float: left; font: 800 3.6em/.82 var(--qs0af0864fdf); margin: .06em .08em 0 0; color: var(--rpaf5978fd5d); }
.ez31d3e76c4c { columns: 1; column-gap: 36px; column-rule: 1px solid var(--nxa06e1176c3); }
@media (min-width: 900px) { .ez31d3e76c4c { columns: 2; } }
.fy5b089f9c99 { break-inside: avoid-column; }
.fy5b089f9c99 h2 { font: 700 1.1875rem/1.25 var(--qs0af0864fdf); margin: 0 0 8px; border-top: 1px solid var(--ira7368661db); padding-top: 10px; overflow-wrap: anywhere; }
.fy5b089f9c99 p { margin: 0 0 18px; overflow-wrap: break-word; }

/* "What happened?" tiles: a photo that is dark on its own is lifted, and the shade under the words eased,
   so no tile reads as a black square (Tamir's note on the High Security Locks tile, 2026-09-27) */
.fyf4c16ecf48.smf6b80a3013 img { filter: brightness(1.38) saturate(1.06); }
.fyf4c16ecf48.smf6b80a3013::after { background: linear-gradient(0deg, color-mix(in srgb, var(--aoc2d55de0cc) 78%, transparent) 0%, color-mix(in srgb, var(--aoc2d55de0cc) 26%, transparent) 44%, color-mix(in srgb, var(--aoc2d55de0cc) 0%, transparent) 66%); }

/* ------------------------------------------------------------------ clip slots (the engine's approved clips, 2026-09-28)
   The photo is on screen first and stays under the clip. The clip sits exactly on the photo's box (no
   layout shift), fades in only once it is really playing (never a black box), and under reduced motion
   there is no clip at all (app.md6ce7be2b14 also removes it). */
figure[data-clip-frame] { position: relative; }
video[data-clip-v] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ly119476bb41); pointer-events: none; }
[data-playing] > video[data-clip-v] { opacity: 1; }
/* the still under a clip is the clip's own first frame: both sit on exactly the same crop, with no zoom or drift,
   so the fade from still to moving picture shows no jump */
img[data-clip-still], video[data-clip-v] { object-position: 50% 50% !important; animation: none !important; transform: none !important; }
video[data-clip-v]::-webkit-media-controls, video[data-clip-v]::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.vhb8aa420eeb[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { video[data-clip-v] { display: none; } }

/* ------------------------------------------------------------------ dark-ground themes (palette skin "dark", rule 73)
   Colours only. The two 3D scroll stages are rendered on a light ground (re-tinted per theme by --ir8acc9c6bc8),
   so on a dark site they stay light islands and keep dark words. */
[data-skin="dark"] .kw0b784fd44e, [data-skin="dark"] .jd45cece1f21 {
  --ira7368661db: #141A22; --rp7b59b15e2e: #2B313A; --nx7e9a7fd411: #4F4A42; --rpaf5978fd5d: var(--qsfb236b084f);
  --pn3531b097f5: rgb(20 26 34 / .16); --nxa06e1176c3: rgb(20 26 34 / .13); --db694bd2dbf2: rgb(20 26 34 / .24);
  color: #141A22;
}
/*f7fa968b69a2*/