/* =========================================================
   The Protectors Company Inc. — securitysystemsterlingheights.com
   Design tokens
   ========================================================= */
:root{
  --navy-950:#0A1522;
  --navy-900:#0E1F32;
  --navy-800:#15304B;
  --navy-700:#1D3F63;
  --steel-500:#4B7BA6;
  --steel-300:#8FB3D1;
  --gold-600:#B3852C;
  --gold-500:#C99A3F;
  --alert-600:#A83A2A;
  --ink-900:#141B22;
  --paper-0:#FBFAF7;
  --paper-100:#F1EFE8;
  --line-200:#DCD8CC;
  --white:#FFFFFF;

  --font-head: "Barlow Condensed", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper-0);
  line-height:1.6;
  font-size:17px;
}
img{max-width:100%;display:block;}
a{color:var(--navy-700);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  letter-spacing:.2px;
  color:var(--navy-950);
  line-height:1.12;
  margin:0 0 .5em;
}
h1{font-size:clamp(2rem,4vw,3.1rem);}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem);margin-top:1.6em;}
h3{font-size:1.35rem;margin-top:1.3em;}
p{margin:0 0 1.05em;max-width:72ch;}
ul,ol{max-width:72ch;padding-left:1.3em;}
li{margin-bottom:.5em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.visually-hidden{position:absolute;left:-9999px;}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px;}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--navy-950);color:var(--steel-300);font-size:.85rem;}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:6px 24px;gap:12px;flex-wrap:wrap;}
.topbar a{color:var(--steel-300);}
.topbar .badge{color:var(--gold-500);font-weight:600;}

/* ---------- Header ---------- */
header.site-header{background:var(--white);border-bottom:1px solid var(--line-200);position:sticky;top:0;z-index:50;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:40px;height:40px;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:var(--navy-950);}
.brand-loc{font-size:.72rem;letter-spacing:.06em;color:var(--steel-500);text-transform:uppercase;}
nav.main-nav{display:flex;gap:22px;align-items:center;}
nav.main-nav a{color:var(--navy-800);font-weight:600;font-size:.96rem;}
nav.main-nav .dropdown{position:relative;}
nav.main-nav .dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--white);border:1px solid var(--line-200);min-width:280px;box-shadow:0 10px 24px rgba(10,21,34,.12);padding:8px;border-radius:4px;}
nav.main-nav .dropdown:hover .dropdown-menu,nav.main-nav .dropdown:focus-within .dropdown-menu{display:block;}
nav.main-nav .dropdown-menu a{display:block;padding:8px 10px;font-weight:500;border-radius:3px;}
nav.main-nav .dropdown-menu a:hover{background:var(--paper-100);text-decoration:none;}
.header-cta{display:flex;align-items:center;gap:14px;}
.phone-link{font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:var(--navy-950);white-space:nowrap;}
.btn{display:inline-block;padding:12px 22px;border-radius:3px;font-weight:700;font-family:var(--font-head);letter-spacing:.02em;font-size:1rem;border:2px solid transparent;cursor:pointer;}
.btn-primary{background:var(--alert-600);color:var(--white);}
.btn-primary:hover{background:#8f3122;text-decoration:none;}
.btn-outline{background:transparent;color:var(--navy-900);border-color:var(--navy-900);}
.btn-outline:hover{background:var(--navy-900);color:var(--white);text-decoration:none;}
.btn-gold{background:var(--gold-600);color:var(--white);}
.btn-gold:hover{background:#93691f;text-decoration:none;}
.nav-toggle{display:none;background:none;border:2px solid var(--navy-900);border-radius:3px;padding:8px 10px;font-size:1.1rem;}

@media (max-width:960px){
  nav.main-nav{display:none;}
  .nav-toggle{display:inline-block;}
  .header-cta .btn-outline{display:none;}
}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-800) 62%,var(--steel-500) 130%);color:var(--white);padding:64px 0 76px;position:relative;overflow:hidden;}
.hero .container{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
.hero-eyebrow{color:var(--gold-500);font-family:var(--font-head);font-weight:700;font-size:.95rem;letter-spacing:.04em;margin-bottom:10px;}
.hero h1{color:var(--white);}
.hero p.lede{color:#DCE7F1;font-size:1.12rem;max-width:56ch;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.hero-trust{margin-top:34px;display:flex;gap:26px;flex-wrap:wrap;color:#C9D8E6;font-size:.92rem;}
.hero-trust strong{color:var(--white);display:block;font-family:var(--font-head);font-size:1.5rem;}
.hero-badge-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:26px;backdrop-filter:blur(2px);}
.hero-badge-panel h2{color:var(--white);font-size:1.2rem;margin-top:0;}
.hero-badge-panel ul{list-style:none;padding:0;margin:0;}
.hero-badge-panel li{display:flex;gap:10px;align-items:flex-start;border-top:1px solid rgba(255,255,255,.14);padding:11px 0;margin:0;}
.hero-badge-panel li:first-of-type{border-top:none;}
.hero-badge-panel svg{flex:none;margin-top:2px;}
@media (max-width:900px){.hero .container{grid-template-columns:1fr;}}

/* ---------- Sections ---------- */
section{padding:64px 0;}
section.alt{background:var(--paper-100);}
.section-head{max-width:68ch;margin-bottom:34px;}
.eyebrow{font-family:var(--font-head);font-weight:700;color:var(--gold-600);font-size:.85rem;letter-spacing:.05em;}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:36px;}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}.grid-2{grid-template-columns:1fr;}}
@media (max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{background:var(--white);border:1px solid var(--line-200);border-radius:4px;padding:26px;height:100%;}
.card h3{margin-top:0;font-size:1.2rem;}
.card svg{margin-bottom:14px;}
.card a.card-link{font-weight:700;font-size:.92rem;}

.service-list-block{border-left:4px solid var(--gold-600);padding-left:20px;margin:26px 0;}

table.compare{width:100%;border-collapse:collapse;margin:24px 0;font-size:.95rem;}
table.compare th,table.compare td{border:1px solid var(--line-200);padding:10px 12px;text-align:left;}
table.compare th{background:var(--navy-900);color:var(--white);font-family:var(--font-head);}
table.compare tr:nth-child(even){background:var(--paper-100);}

.callout{background:var(--navy-900);color:var(--white);border-radius:6px;padding:34px;margin:36px 0;}
.callout h3{color:var(--white);}
.callout a.btn-primary{margin-top:8px;}

.stat-strip{background:var(--navy-950);color:var(--white);}
.stat-strip .grid-4{text-align:center;}
.stat-strip strong{display:block;font-family:var(--font-head);font-size:2.1rem;color:var(--gold-500);}
.stat-strip span{color:#C9D8E6;font-size:.9rem;}

.areas-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;}
.areas-list li{background:var(--white);border:1px solid var(--line-200);border-radius:20px;padding:8px 16px;font-size:.92rem;}

.breadcrumb{font-size:.85rem;color:var(--steel-500);padding:14px 0 0;}
.breadcrumb a{color:var(--steel-500);}
.breadcrumb ol{list-style:none;padding:0;display:flex;gap:6px;flex-wrap:wrap;margin:0;}
.breadcrumb li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--line-200);}

.faq details{border-bottom:1px solid var(--line-200);padding:16px 0;}
.faq summary{font-weight:700;font-family:var(--font-head);font-size:1.08rem;cursor:pointer;color:var(--navy-900);}
.faq summary::-webkit-details-marker{color:var(--gold-600);}
.faq p{margin-top:10px;}

.pill{display:inline-block;background:var(--paper-100);border:1px solid var(--line-200);border-radius:20px;padding:5px 14px;font-size:.82rem;font-weight:600;color:var(--navy-800);margin:0 6px 6px 0;}

blockquote.testimonial{background:var(--white);border:1px solid var(--line-200);border-left:4px solid var(--gold-600);padding:22px 24px;margin:0;font-style:italic;font-size:1.02rem;}
blockquote.testimonial footer{margin-top:12px;font-style:normal;font-weight:700;font-size:.88rem;color:var(--navy-700);}

.cta-band{background:radial-gradient(circle at 20% 20%,var(--steel-500),var(--navy-950) 70%);color:var(--white);text-align:center;padding:60px 0;}
.cta-band h2{color:var(--white);}
.cta-band p{margin:0 auto 26px;color:#DCE7F1;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy-950);color:#B9C6D3;padding:52px 0 22px;font-size:.92rem;}
footer h4{color:var(--white);font-family:var(--font-head);font-size:1.02rem;margin-bottom:14px;}
footer a{color:#B9C6D3;}
footer a:hover{color:var(--white);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;}
.footer-grid ul{list-style:none;padding:0;margin:0;}
.footer-grid li{margin-bottom:8px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr;}}

/* mobile nav drawer */
#mobile-nav{display:none;background:var(--white);border-bottom:1px solid var(--line-200);}
#mobile-nav.open{display:block;}
#mobile-nav .container{padding:10px 24px 20px;display:flex;flex-direction:column;gap:4px;}
#mobile-nav a{padding:10px 4px;border-bottom:1px solid var(--paper-100);font-weight:600;color:var(--navy-900);}
#mobile-nav .btn{margin-top:10px;text-align:center;}