/* =========================================================
   Veteran's Lock and Security Solutions — Design System
   Palette: gunmetal navy / brushed steel / safety red
   Type: Oswald (display, bold condensed) + Inter (body) + IBM Plex Mono (data)
   ========================================================= */

:root{
  --ink-950:#10171F;
  --ink-800:#1B2733;
  --ink-700:#233246;
  --steel-600:#4A6072;
  --steel-300:#A9B7BF;
  --paper-50:#EFF1EA;
  --paper-0:#FAFAF6;
  --brass-500:#8C97A1;
  --brass-400:#AAB4BB;
  --brass-300:#C6CDD2;
  --rust-600:#C0392E;
  --rust-700:#9C2E25;
  --rust-400:#E2604F;
  --line:#D8DACF;

  --font-display:"Oswald", "Arial Narrow", sans-serif;
  --font-body:"Inter", -apple-system, Segoe UI, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;

  --max:1180px;
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper-0);
  color:var(--ink-800);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink-950);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:700;
}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem);}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;color:var(--ink-700);}
.lede{font-size:1.15rem;color:var(--ink-700);}
ul{margin:0 0 1em;padding-left:1.25em;}
li{margin-bottom:.4em;color:var(--ink-700);}
.mono{font-family:var(--font-mono);letter-spacing:.02em;}

:focus-visible{outline:3px solid var(--brass-500);outline-offset:2px;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.section{padding:72px 0;}
.section--tight{padding:44px 0;}
.section--ink{background:var(--ink-950);color:var(--paper-50);}
.section--ink h2,.section--ink h3{color:var(--paper-50);}
.section--ink p,.section--ink li{color:var(--steel-300);}
.section--paper{background:var(--paper-50);}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.02em;
  color:var(--brass-500);
  margin-bottom:.9em;
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--brass-500);display:inline-block;}

/* ---------- signature: key-bitting divider ---------- */
.bitting{
  width:100%;height:18px;
  display:block;
  margin:0;
  color:var(--steel-600);
}
.bitting.on-dark{color:var(--steel-600);}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--ink-950);
  border-bottom:1px solid var(--ink-700);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  min-height:108px;padding-top:12px;padding-bottom:12px;gap:16px;
}
.brand{display:flex;align-items:center;gap:14px;position:relative;min-width:0;text-decoration:none;}
.brand:hover .brand-text strong{color:#fff;}
.brand-mark-wrap{flex:none;display:flex;align-items:center;}
.brand-mark{height:72px;width:72px;flex:none;}
.brand-mark--footer{height:96px;width:96px;}
.brand-text{display:flex;flex-direction:column;line-height:1.2;min-width:0;max-width:230px;text-align:left;}
.brand-text strong{
  font-family:var(--font-display);color:var(--paper-50);font-size:1.02rem;font-weight:700;white-space:normal;
}
.brand-text span{
  font-family:var(--font-mono);color:var(--brass-400);font-size:.62rem;letter-spacing:.02em;white-space:nowrap;margin-top:4px;
}

.main-nav{display:flex;align-items:center;gap:20px;flex:none;}
.main-nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:nowrap;}
.main-nav a{
  color:var(--steel-300);text-decoration:none;font-size:.87rem;font-weight:600;
  padding:8px 8px;border-bottom:2px solid transparent;white-space:nowrap;
}
.main-nav a:hover,.main-nav a.active{color:var(--paper-50);border-bottom-color:var(--brass-500);}
.has-sub{position:relative;display:flex;align-items:center;}
.has-sub > a{cursor:pointer;padding-right:2px;}
.sub-toggle{
  background:none;border:none;color:var(--steel-300);cursor:pointer;
  padding:8px 6px 8px 2px;display:inline-flex;align-items:center;
}
.sub-toggle svg{width:11px;height:11px;transition:transform .15s ease;pointer-events:none;}
.has-sub.open .sub-toggle{color:var(--paper-50);}
.has-sub.open .sub-toggle svg{transform:rotate(180deg);}
.sub-nav{
  display:none !important;flex-direction:column;gap:0;
  position:absolute;top:100%;left:0;background:var(--ink-800);
  border:1px solid var(--ink-700);min-width:230px;padding:8px;margin-top:14px;
  box-shadow:0 12px 24px rgba(0,0,0,.4);z-index:1200;
}
.has-sub.open .sub-nav{display:flex !important;}
.sub-nav a{display:block;padding:9px 10px;font-size:.86rem;border-bottom:none;white-space:nowrap;}
.sub-nav a:hover{background:var(--ink-700);color:var(--paper-50);}

.header-cta{
  display:flex;align-items:center;gap:12px;flex:none;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:.92rem;
  padding:12px 22px;border-radius:var(--radius);text-decoration:none;
  border:1px solid transparent;cursor:pointer;
}
.btn-brass{background:var(--rust-600);color:#fff;}
.btn-brass:hover{background:var(--rust-700);}
.btn-outline{border-color:var(--brass-500);color:var(--paper-50);background:transparent;}
.btn-outline:hover{background:rgba(140,151,161,.14);}
.btn-phone{gap:9px;white-space:nowrap;font-weight:700;min-height:48px;}
.icon-sm{width:16px;height:16px;flex:none;}
.btn-rust{background:var(--rust-600);color:#fff;}
.btn-rust:hover{background:var(--rust-700);}
.btn-ghost{color:var(--ink-800);border-color:var(--line);}

.hamburger{
  display:none;background:none;border:1px solid var(--steel-600);
  color:var(--paper-50);padding:0;font-size:1.45rem;line-height:1;
  min-width:50px;min-height:50px;border-radius:var(--radius);cursor:pointer;
}
.hamburger:hover{background:rgba(140,151,161,.14);border-color:var(--brass-400);}
.hamburger:active{background:rgba(140,151,161,.22);}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg,var(--ink-950) 0%, var(--ink-800) 100%);
  color:var(--paper-50);padding:76px 0 0;
}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-bottom:56px;}
.hero h1{color:#fff;}
.hero p.lede{color:var(--steel-300);max-width:46ch;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.hero-art{
  border:1px solid var(--ink-700);background:var(--ink-800);
  padding:28px;position:relative;
}
.hero-art svg{width:100%;height:auto;}
.photo-placeholder{
  min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;border:2px dashed var(--steel-600);background:transparent;text-align:center;
}
.photo-placeholder .icon{color:var(--steel-300);}
.photo-placeholder p{color:var(--steel-300);font-size:.88rem;}

.hero-photo{padding:0;overflow:hidden;border-color:var(--steel-600);}
.hero-photo img{width:100%;height:auto;display:block;}

.tagline-quote{
  font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.28;color:var(--paper-50);
  border-left:4px solid var(--rust-600);padding-left:18px;margin-bottom:.7em;
}

.partner-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px;margin-top:26px;
}
.partner-card{
  background:#fff;border:1px solid var(--line);padding:14px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease, transform .15s ease;
}
.partner-card:hover{border-color:var(--rust-600);transform:translateY(-2px);}
.partner-card img{width:100%;height:auto;display:block;}

/* page header for interior pages */
.page-hero{background:var(--ink-950);color:var(--paper-50);padding:52px 0 40px;}
.page-hero .eyebrow{color:var(--brass-400);}
.page-hero h1{color:#fff;margin-bottom:.35em;}
.page-hero p{color:var(--steel-300);max-width:64ch;margin-bottom:0;}
.breadcrumb{font-family:var(--font-mono);font-size:.72rem;color:var(--steel-300);letter-spacing:.02em;margin-bottom:14px;}
.breadcrumb a{color:var(--steel-300);text-decoration:none;}
.breadcrumb a:hover{color:var(--brass-400);}

/* ---------- plate cards (signature chamfer) ---------- */
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.plate{
  background:var(--paper-0);
  border:1px solid var(--line);
  padding:26px 24px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
  position:relative;
}
.plate::after{
  content:"";position:absolute;top:0;right:0;width:18px;height:18px;
  background:var(--brass-500);clip-path:polygon(100% 0,0 0,100% 100%);
}
.plate h3{margin-bottom:.4em;}
.plate .icon{color:var(--brass-500);margin-bottom:14px;}
.plate a.card-link{
  display:inline-block;margin-top:10px;font-weight:700;font-size:.88rem;color:var(--ink-950);text-decoration:none;
  border-bottom:2px solid var(--brass-500);
}

.plate--dark{background:var(--ink-800);border-color:var(--ink-700);}
.plate--dark h3,.plate--dark p{color:var(--paper-50);}
.plate--dark::after{background:var(--brass-400);}

/* ---------- service list rows ---------- */
.checklist{list-style:none;padding:0;margin:0;}
.checklist li{
  padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--line);
  color:var(--ink-700);
}
.checklist li:last-child{border-bottom:none;}
.checklist li::before{
  content:"";position:absolute;left:0;top:16px;width:12px;height:2px;background:var(--brass-500);
}

/* ---------- brand strip ---------- */
.brand-strip{display:flex;flex-wrap:wrap;gap:28px 40px;align-items:center;justify-content:center;}
.brand-strip span{font-family:var(--font-mono);font-size:.82rem;color:var(--steel-600);letter-spacing:.04em;}

/* ---------- stats ---------- */
.stat{text-align:center;}
.stat-stack{
  display:flex;flex-direction:column;gap:34px;
  align-items:center;justify-content:center;
  padding-left:12%;
}
.stat-stack .stat strong{font-size:3rem;line-height:1;}
.stat strong{display:block;font-family:var(--font-display);font-size:2.4rem;color:var(--rust-400);}
.stat span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;color:var(--steel-300);}

/* ---------- timeline (about) ---------- */
.timeline{border-left:2px solid var(--brass-500);margin-left:8px;}
.timeline li{list-style:none;position:relative;padding:0 0 34px 30px;margin:0;}
.timeline li::before{
  content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;background:var(--brass-500);border:2px solid var(--paper-0);
}
.timeline .yr{font-family:var(--font-mono);color:var(--rust-600);font-weight:700;display:block;margin-bottom:4px;}

/* ---------- FAQ ---------- */
.faq-cat-nav{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 34px;}
.faq-cat-nav a{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.02em;
  padding:8px 14px;border:1px solid var(--line);text-decoration:none;color:var(--ink-800);
}
.faq-cat-nav a:hover{border-color:var(--brass-500);color:var(--brass-500);}
details.faq{border-bottom:1px solid var(--line);padding:16px 0;}
details.faq summary{
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;cursor:pointer;color:var(--ink-950);
  list-style:none;display:flex;justify-content:space-between;gap:16px;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";color:var(--brass-500);font-size:1.3rem;flex:none;}
details.faq[open] summary::after{content:"–";}
details.faq p{margin-top:12px;}

/* ---------- location pages ---------- */
.locations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.loc-pill{
  border:1px solid var(--line);padding:16px;text-align:center;text-decoration:none;color:var(--ink-800);
  font-weight:700;font-size:.92rem;
}
.loc-pill:hover{border-color:var(--brass-500);color:var(--brass-500);}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--ink-950);color:#fff;padding:52px 0;text-align:center;
}
.cta-band h2{color:#fff;}
.cta-band .btn-brass{margin-top:10px;}

/* ---------- footer ---------- */
footer.site-footer{background:var(--ink-950);color:var(--steel-300);padding:56px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px;}
.footer-grid h4{color:var(--paper-50);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;margin-bottom:14px;}
.footer-grid ul{list-style:none;padding:0;margin:0;}
.footer-grid li{margin-bottom:8px;}
.footer-grid a{color:var(--steel-300);text-decoration:none;font-size:.9rem;}
.footer-grid a:hover{color:var(--brass-400);}
.footer-contact li{color:var(--paper-50);font-size:.94rem;}
.footer-contact a{color:var(--paper-50);font-size:.94rem;}
.footer-contact a:hover{color:var(--rust-400);}
.footer-contact .footer-phone{font-weight:700;font-size:1.06rem;color:var(--rust-400);}
.footer-contact .footer-hours{color:var(--steel-300);font-size:.85rem;}
.footer-brand p{color:var(--steel-300);font-size:.9rem;max-width:38ch;}
.footer-legal{
  border-top:1px solid var(--ink-700);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.8rem;color:var(--steel-600);
}
.footer-legal .mono{color:var(--steel-600);}

/* ---------- forms ---------- */
.form-field{margin-bottom:18px;}
.form-field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:6px;color:var(--ink-800);}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--paper-0);
  font-family:var(--font-body);font-size:.95rem;border-radius:var(--radius);
}
.form-field textarea{min-height:130px;resize:vertical;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

/* ---------- utility ---------- */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;}
.center{text-align:center;}
.small{font-size:.85rem;color:var(--steel-600);}
.mb-0{margin-bottom:0;}
.tag-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0;}
.tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;border:1px solid var(--line);padding:6px 12px;color:var(--steel-600);}

/* Nav collapses to a hamburger for phone/tablet, and for any desktop window
   too narrow to comfortably fit the full nav + phone + CTA on one line. */
@media (max-width:1500px){
  .brand-text span{display:none;}
}
@media (max-width:1300px){
  .main-nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--ink-950);border-bottom:1px solid var(--ink-700);
    max-height:calc(100vh - 108px);overflow-y:auto;
    padding:8px 24px 18px;
  }
  .hamburger{display:inline-flex;align-items:center;justify-content:center;}
  body.nav-open .main-nav{display:block;}
  body.nav-open .main-nav ul{flex-direction:column;gap:0;}
  body.nav-open .main-nav li{width:100%;}
  body.nav-open .has-sub{flex-wrap:wrap;}
  body.nav-open .main-nav a{display:block;padding:16px 4px;border-bottom:1px solid var(--ink-700);flex:1;font-size:1rem;}
  /* On the mobile drawer, submenus are always expanded inline (no separate
     tap needed), so the desktop toggle chevron is hidden here. */
  body.nav-open .sub-toggle{display:none;}
  body.nav-open .sub-nav{
    display:flex;position:static;background:none;border:none;box-shadow:none;
    margin:0 0 4px 14px;padding:0;width:100%;
  }
  body.nav-open .sub-nav a{padding:14px 4px;font-size:.92rem;border-bottom:1px solid var(--ink-700);}
}
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .locations-grid{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}
  .stat-stack{padding-left:0;gap:26px;}
  .header-cta .btn-rust{display:none;}
  .btn-phone .phone-num{display:none;}
  .btn-phone{padding:12px 14px;}
  .section{padding:52px 0;}
  .footer-grid{grid-template-columns:1fr;}
  .locations-grid{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}