/* Nationwide Security Companies hub: shared styles (all 13 pages; map.html adds its map-only rules inline).
   Palette and type follow secureone.com: navy #013267, amber #faab31, Roboto. */
:root{--navy:#013267;--navy2:#0a4a8f;--deep:#001f40;--ink:#1b2a3d;--muted:#5a6470;--line:#e3e6ea;--soft:#f7f8fa;--tan:#c8b08a;--tand:#6b5634;--amber:#faab31;--lic:#30537b;--radius:6px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:16px;color:var(--ink);background:#fff;line-height:1.65}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
a{color:var(--navy)}a:hover{color:var(--navy2)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* Top bar */
.topbar{background:var(--deep);font-size:14px}
.topbar .wrap{display:flex;justify-content:flex-end;align-items:center;gap:24px;min-height:34px}
.topbar a{color:var(--tan);text-decoration:none;font-weight:500}.topbar a:hover{color:#fff}

/* Header: brand left, nav, then the Request a Quote button */
.hdr{background:#fff;border-bottom:4px solid var(--tan)}
.hdr .wrap{display:flex;align-items:center;gap:12px 22px;min-height:76px;padding-top:10px;padding-bottom:10px}
.brand{font-weight:900;color:var(--navy);font-size:21px;line-height:1.2;letter-spacing:.2px;flex:0 0 auto}
.brand small{display:block;font-weight:500;font-size:11.5px;color:var(--tand);letter-spacing:1px;text-transform:uppercase;margin-top:3px}
.hdr nav{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 13px;margin-left:auto;flex-wrap:nowrap}
.hdr nav a{color:var(--navy);font-weight:700;text-transform:uppercase;font-size:12.5px;letter-spacing:.1px;text-decoration:none;padding:6px 0;border-bottom:3px solid transparent;line-height:1.2;white-space:nowrap}
.hdr nav a:hover{border-bottom-color:var(--tan)}
.hdr nav a.on{border-bottom-color:var(--amber)}
.cta-hdr{flex:0 0 auto;display:inline-block;background:var(--navy);color:#fff!important;font-weight:700;font-size:14.5px;letter-spacing:.2px;text-decoration:none;padding:11px 20px;border-radius:var(--radius);box-shadow:0 2px 6px rgba(1,50,103,.28);white-space:nowrap;transition:background .15s ease,box-shadow .15s ease}
.cta-hdr:hover{background:var(--navy2);box-shadow:0 4px 10px rgba(1,50,103,.35)}
.cta-hdr[aria-current]{box-shadow:inset 0 -3px 0 var(--amber),0 2px 6px rgba(1,50,103,.28)}

/* Hero */
.hero{background:linear-gradient(180deg,var(--deep),var(--navy));color:#fff;padding:38px 0 34px}
.hero h1{margin:0 0 8px;font-size:2.1rem;line-height:1.2;font-weight:700;color:#fff}
.hero p{margin:0;color:#dfe6ef;max-width:820px;font-size:1.05rem}
.crumb{font-size:13px;color:#cfd8e3;margin-bottom:10px}.crumb a{color:var(--tan)}

/* Buttons */
.btns{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;background:var(--amber);color:#1f2a36;font-weight:700;font-size:15px;line-height:1.2;padding:11px 22px;border:2px solid var(--amber);border-radius:var(--radius);text-decoration:none;cursor:pointer;transition:filter .15s ease,background .15s ease}
.btn:hover{filter:brightness(1.06);color:#1f2a36}
.btn.o{background:transparent;color:#fff;border-color:var(--tan)}.btn.o:hover{background:rgba(255,255,255,.08);color:#fff}
.cta-hero{display:inline-block;margin-top:22px;background:var(--navy);color:#fff;font-weight:700;font-size:20px;line-height:1.2;letter-spacing:.3px;padding:17px 44px;border:2px solid #fff;border-radius:8px;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.cta-hero:hover{background:var(--navy2);color:#fff;transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.4)}

/* Main content */
main{padding:34px 0 48px}
main p,main ul,main ol{max-width:900px}
main h2{color:var(--navy);font-size:1.4rem;line-height:1.3;font-weight:700;margin:1.6em 0 .5em}
main .wrap>h2:first-child,main .wrap>p:first-child{margin-top:0}
main a{color:var(--navy);font-weight:500}
.cols{columns:2;column-gap:48px;max-width:none}.cols p{margin:.25em 0;break-inside:avoid}.lic b{color:var(--lic)}
.need{background:#fff4dc;color:#7a4b00;padding:0 4px;border-radius:3px}
.related{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--radius);padding:14px 18px;margin-top:32px;font-size:14px}

/* Quote form */
form{background:var(--soft);border:1px solid var(--line);border-top:4px solid var(--tan);border-radius:10px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;max-width:780px;position:relative}
form>div,form>p{min-width:0}
form .full{grid-column:1/-1}
form .formnote{margin:0;font-size:13px;color:var(--muted)}
form label{font-size:14px;font-weight:700;color:var(--navy);display:block;line-height:1.35}
form input,form select,form textarea{display:block;width:100%;min-height:42px;padding:9px 11px;border:1px solid #c9cdd2;border-radius:var(--radius);font:inherit;font-size:15px;color:var(--ink);margin-top:5px;background:#fff}
form textarea{min-height:120px;resize:vertical}
form input:focus,form select:focus,form textarea:focus{border-color:var(--navy);outline:2px solid rgba(1,50,103,.25);outline-offset:0}
form input:disabled{background:#eef0f3;color:#8a929b}
form .req{color:#b3261e;font-weight:700}
form label.chk{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink);margin-top:8px;cursor:pointer}
form label.chk input{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:0 0 auto;accent-color:var(--navy)}
form .actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
form button{background:var(--navy);color:#fff;border:2px solid var(--navy);padding:12px 28px;border-radius:var(--radius);font:inherit;font-weight:700;font-size:16px;line-height:1.2;cursor:pointer;box-shadow:0 2px 6px rgba(1,50,103,.25)}
form button:hover{background:var(--navy2);border-color:var(--navy2)}form button:disabled{opacity:.7;cursor:wait}
form .callalt{font-size:14px;color:var(--muted)}
#formmsg{display:none;background:#e9f6ec;border:1px solid #9fd3ab;border-left:4px solid #2e7d4f;color:#1d4d31;padding:12px 14px;border-radius:var(--radius);font-weight:500}
#formmsg.err{background:#fdecea;border-color:#f1a9a0;border-left-color:#b3261e;color:#7a1c14}
form .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Footer */
footer{background:var(--deep);color:#cfd8e3;font-size:13px;padding:20px 0;text-align:center}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px}
footer a{color:var(--tan)}footer a:hover{color:#fff}

/* Tablet and mobile */
@media(max-width:1180px){
  .hdr .wrap{flex-wrap:wrap}
  .hdr nav{order:3;flex:1 0 100%;flex-wrap:wrap;justify-content:flex-start;gap:2px 16px;border-top:1px solid var(--line);padding-top:6px}
  .cta-hdr{margin-left:auto}
}
@media(max-width:800px){form{grid-template-columns:1fr;padding:18px}.cols{columns:1}}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .topbar .wrap{justify-content:space-between;gap:12px}
  .brand{font-size:18px}.brand small{font-size:10px;letter-spacing:.6px}
  .hdr .wrap{gap:10px 12px}
  .cta-hdr{order:2;flex:1 0 100%;margin-left:0;text-align:center;font-size:15px;padding:11px 14px}
  .hdr nav{gap:0 11px}.hdr nav a{font-size:11.5px;letter-spacing:0}
  .hero{padding:28px 0 26px}.hero h1{font-size:1.6rem}.hero p{font-size:1rem}
  .btns .btn{flex:1 1 auto;text-align:center}
  .cta-hero{display:block;text-align:center;font-size:19px;padding:16px 20px}
  main{padding:26px 0 36px}main h2{font-size:1.25rem}
}