/* Canvas: Lockfast Commercial Security */

@layer custom {
:root {
  --cnvs-body-font: 'Open Sans', sans-serif;
  --cnvs-primary-font: 'Rajdhani', sans-serif;
  --cnvs-secondary-font: 'Rajdhani', sans-serif;
  --cnvs-themecolor: #D62828;
  --cnvs-themecolor-rgb: 214,40,40;
  --c-ground: #F2F4F7;
  --c-ground-2: #FFFFFF;
  --c-ink: #0B1522;
  --c-muted: #4A5668;
  --c-accent: #D62828;
  --c-steel: #1E3A5F;
  --c-line: #C9D0DA;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px; --space-8: 140px;
  --band: var(--space-7);
  --band-compact: var(--space-6);
  --gutter: var(--space-4);
  --radius-s: 2px;
  --fs-display: 4.5rem; --fs-h1: 4.5rem; --fs-h2: 2.75rem; --fs-h3: 1.5rem; --fs-lead: 1.25rem;
  --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.8125rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
body { font-family: var(--cnvs-body-font); font-size: var(--fs-body); color: var(--c-ink); background: var(--c-ground); line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--cnvs-primary-font); font-weight: 700; text-wrap: balance; color: inherit; }
h1 { font-size: var(--fs-h1); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; max-width: 18ch; margin: 0; }
h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 600; margin: 0; }
a:focus-visible, button:focus-visible, select:focus-visible, .lf-plate:focus-visible { outline: 2px solid var(--c-steel); outline-offset: 2px; }
.dark a:focus-visible, .dark select:focus-visible { outline-color: #fff; }

#header.dark { --cnvs-header-sticky-bg: var(--c-ink); --cnvs-header-bg: var(--c-steel); }
.lf-dispatch { background: var(--c-accent); color: #fff; font-size: var(--fs-small); font-weight: 600; }
.lf-dispatch .container { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-2); padding-bottom: var(--space-2); gap: var(--space-3); }
#header.dark .lf-dispatch a.lf-dispatch-num, .lf-dispatch-num { color: #fff; font-family: var(--cnvs-primary-font); font-size: var(--fs-lead); letter-spacing: 0.03em; white-space: nowrap; }
@media (max-width: 575px) { .lf-dispatch-label { font-size: var(--fs-label); } }

.button.lf-btn, a.lf-btn { background: var(--c-accent); color: #fff; font-family: var(--cnvs-primary-font); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-body); border-radius: var(--radius-s); padding: 0 var(--space-4); min-height: 44px; line-height: 44px; display: inline-block; transition: transform 160ms var(--ease-out), background-color 160ms; }
.button.lf-btn:hover { background: #b51f1f; color: #fff; }
.button.lf-btn:active { transform: scale(0.97); }
.lf-btn-lg { min-height: 52px !important; line-height: 52px !important; font-size: var(--fs-lead) !important; padding: 0 var(--space-5) !important; }
.button.lf-btn-inv { background: #fff; color: #8f1414; }
.button.lf-btn-inv:hover { background: var(--c-ground); color: #8f1414; }

#top-bar.lf-dispatch { background: var(--c-accent); border: 0; height: auto; }
.lf-hero h1 { max-width: 32ch; }

.lf-hero { background: linear-gradient(160deg, var(--c-steel) 0%, #0B1522 70%); color: #fff; padding: var(--space-6) 0 var(--space-7); }
@media (min-width: 992px) { .lf-hero { padding-top: var(--space-6); } }
.lf-hero-action { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-5); }
.lf-lead { font-size: var(--fs-lead); max-width: 50ch; margin: 0; color: #fff; }
.lf-hero-frame { position: relative; margin: var(--space-6) 0 0; }
.lf-hero-frame img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-s); display: block; }
.lf-hero-plate { position: absolute; left: var(--space-4); bottom: calc(-1 * var(--space-4)); background: var(--c-steel); border: 1px solid rgba(255,255,255,.35); color: #fff; padding: var(--space-3) var(--space-4); font-family: var(--cnvs-primary-font); font-size: var(--fs-lead); line-height: 1.3; text-transform: uppercase; border-radius: var(--radius-s); }
.lf-hero-plate strong { color: #fff; font-size: var(--fs-h3); }

.lf-band { padding: var(--band) 0; }
.lf-band-compact { padding: var(--band-compact) 0; }
.lf-band-dark { background: var(--c-ink); color: #fff; }
.lf-band-steel { background: var(--c-steel); color: #fff; }
.lf-band-red { background: #b51f1f; color: #fff; }
.lf-h2 { font-size: var(--fs-h2); line-height: 1.1; text-transform: uppercase; max-width: 24ch; margin: 0 0 var(--space-3); }
.lf-h2-sm { font-size: var(--fs-h3); margin-bottom: var(--space-5); }
.lf-intro { font-size: var(--fs-lead); color: var(--c-muted); max-width: 60ch; margin: 0 0 var(--space-5); }
.dark .lf-intro, .lf-band-red .lf-intro { color: #fff; }

.lf-plate { position: relative; overflow: hidden; background: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--radius-s); aspect-ratio: 4 / 3; height: 100%; width: 100%; color: #fff; }
.lf-plate > img { z-index: 0; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lf-plate-top { z-index: 1; position: absolute; inset: auto 0 0 0; padding: var(--space-6) var(--space-4) var(--space-4); background: linear-gradient(to top, rgba(11,21,34,.92), rgba(11,21,34,0)); }
.lf-plate-top h3 { color: #fff; text-transform: uppercase; }
.lf-sla { margin: var(--space-1) 0 0; font-size: var(--fs-small); color: #fff; }
.lf-sla b { font-family: var(--cnvs-primary-font); font-size: var(--fs-h3); line-height: 1; margin-right: var(--space-2); }
.lf-plate-more { z-index: 2; position: absolute; inset: 0; background: rgba(30,58,95,.96); padding: var(--space-4); display: flex; flex-direction: column; justify-content: center; transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform 300ms var(--ease-out), opacity 300ms, visibility 300ms; }
.lf-plate-more p { margin: 0 0 var(--space-3); color: #fff; }
.lf-price { font-family: var(--cnvs-primary-font); font-size: var(--fs-h3); font-weight: 700; }
.lf-plate:hover .lf-plate-more, .lf-plate:focus .lf-plate-more, .lf-plate:focus-within .lf-plate-more { transform: translateY(0); opacity: 1; visibility: visible; }
.lf-plate-cta { color: #fff; }
.lf-plate-cta h3 { color: #fff; }
@media (min-width: 992px) { .is-expanded-menu #header .primary-menu { margin-left: auto; } .is-expanded-menu #header .primary-menu .menu-container { margin-left: auto; } }
@media (hover: none) {
  .lf-plate { aspect-ratio: auto; }
  .lf-plate > img { position: static; aspect-ratio: 3 / 2; height: auto; }
  .lf-plate-top { position: static; background: var(--c-ink); padding: var(--space-4); }
  .lf-plate-more { position: static; transform: none; opacity: 1; visibility: visible; }
}
.lf-plate-cta { background: var(--c-steel); display: flex; align-items: center; }
.lf-plate-cta-body { padding: var(--space-4); }
.lf-plate-cta h3 { text-transform: uppercase; margin-bottom: var(--space-3); }
.lf-plate-cta p { color: #fff; margin-bottom: var(--space-4); }
@media (max-width: 767px) { .lf-plate-cta { aspect-ratio: auto; } }

.lf-finder label { display: block; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); color: #fff; }
.lf-finder .form-select { min-height: 48px; border: 1px solid var(--c-line); border-radius: var(--radius-s); font-size: var(--fs-body); color: var(--c-ink); background-color: #fff; }
.lf-result { margin-top: var(--space-4); background: var(--c-steel); border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-s); padding: var(--space-4); }
.lf-result strong { display: block; font-family: var(--cnvs-primary-font); font-size: 2rem; text-transform: uppercase; color: #fff; }
.lf-result span { color: #fff; }
.lf-zones { list-style: none; margin: 0; padding: 0; }
.lf-zones li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid rgba(255,255,255,.3); font-family: var(--cnvs-primary-font); font-size: var(--fs-h3); text-transform: uppercase; }
.lf-zones em { font-style: normal; font-family: var(--cnvs-body-font); font-size: var(--fs-body); color: #fff; align-self: center; }

.lf-badge { background: var(--c-ground-2); border: 1px solid var(--c-line); border-radius: var(--radius-s); padding: var(--space-4); height: 100%; }
.lf-badge i { display: block; font-size: 2rem; color: var(--c-accent); margin-bottom: var(--space-3); }
.lf-badge strong { display: block; font-family: var(--cnvs-primary-font); font-size: var(--fs-h3); line-height: 1.2; margin-bottom: var(--space-2); }
.lf-badge span { font-size: var(--fs-small); color: var(--c-muted); }
@media (min-width: 992px) { .lf-badges { position: relative; } .lf-badges::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: var(--c-steel); z-index: 0; } .lf-badges > div { position: relative; z-index: 1; } .lf-badges > div:nth-child(even) { transform: translateY(var(--space-3)); } }

.lf-case { border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-s); padding: var(--space-4); height: 100%; background: var(--c-steel); }
.lf-fig { font-family: var(--cnvs-primary-font); font-size: var(--fs-h1); line-height: 1; font-weight: 700; color: #fff; margin-bottom: var(--space-3); font-variant-numeric: tabular-nums; }
.lf-case h3 { color: #fff; text-transform: uppercase; margin-bottom: var(--space-3); }
.lf-ba { margin: 0 0 var(--space-2); color: #fff; }
.lf-ba b { display: block; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 575px) { .lf-fig { font-size: var(--fs-h2); } }

.lf-names { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gutter); }
.lf-names li { border-top: 1px solid var(--c-line); padding: var(--space-3) 0; font-family: var(--cnvs-primary-font); font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }
@media (max-width: 991px) { .lf-names { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .lf-names { grid-template-columns: 1fr; } }

.lf-band-red .lf-h2 { margin-left: auto; margin-right: auto; }
.lf-band-red .lf-intro { margin-bottom: var(--space-5); }

#footer.lf-footer { --cnvs-footer-bg: var(--c-ink); }
.lf-foot-num { margin: 0 0 var(--space-5); line-height: 1; }
#footer .footer-widgets-wrap a { color: #fff; }
.lf-foot-num a, #footer .footer-widgets-wrap .lf-foot-num a { font-family: var(--cnvs-primary-font); font-weight: 700; font-size: clamp(3rem, 11vw, 9rem); color: #fff; letter-spacing: -0.01em; }
.lf-foot-line { color: #fff; margin-top: var(--space-3); max-width: 44ch; }
.lf-foot-links { list-style: none; margin: 0; padding: 0; }
.lf-foot-links li { padding: var(--space-1) 0; }
.lf-foot-seal { color: #fff; border: 1px solid rgba(255,255,255,.35); padding: var(--space-3); border-radius: var(--radius-s); }
#footer #copyrights { color: #fff; background: rgba(0,0,0,.35); }
#footer #copyrights a { color: #fff; text-decoration: underline; }

@media (max-width: 991px) { :root { --band: var(--space-6); --band-compact: var(--space-5); --fs-h1: 3.25rem; --fs-h2: 2.25rem; } }
@media (max-width: 575px) { :root { --band: var(--space-5); --band-compact: var(--space-5); --fs-h1: 2.5rem; --fs-h2: 1.875rem; } .lf-hero-plate { position: static; margin-top: var(--space-2); } }
@media (prefers-reduced-motion: reduce) { .lf-plate-more, .button.lf-btn { transition: none; } }

:where(img[width][height]){height:auto}

.content-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

.section {
  margin-top: 0;
  margin-bottom: 0;
}
#copyrights a:not(.button) { text-decoration: underline !important; text-underline-offset: 0.2em; }
#header { --cnvs-primary-menu-hover-color: #FFB3B3; }
}