/* Cayer Security — brand: navy #003565 / #005b9e / #0179d2, green #00815f */

/* Self-hosted fonts. Files live in /assets/fonts/ — no third-party requests.
   Montserrat is a variable font (one file covers weights 600-800).
   Each face is split latin / latin-ext; browsers fetch only what the page needs. */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/lato-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/lato-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* NOTE: there is deliberately no italic @font-face. The only italic text on the
   site is the footer tagline (.foot-tag), and shipping a real italic face meant a
   25KB font download sitting in the critical path for one line below the fold.
   The browser synthesises an oblique from Lato 400 instead. If you ever add
   substantial italic body copy, re-add lato-400-italic-{latin,latin-ext}.woff2. */
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/lato-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600 800;font-display:swap;
  src:url('/assets/fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600 800;font-display:swap;
  src:url('/assets/fonts/montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --navy-900:#0b2440; --navy-800:#003565; --blue-700:#00518e; --blue-600:#005b9e;
  --blue-500:#0179d2; --blue-100:#e3f0fa; --green-600:#00815f; --green-700:#007455;
  --ink:#1c2733; --muted:#5a6b7b; --line:#dde6ee; --bg:#ffffff; --bg-soft:#f4f8fb;
  --ff-head:'Montserrat',Arial,sans-serif; --ff-body:'Lato',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* keep in-page anchor targets clear of the sticky header */
section[id],[id]{scroll-margin-top:110px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{font-family:var(--ff-body);font-size:18px;line-height:1.6;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-600)}
h1,h2,h3,h4{font-family:var(--ff-head);line-height:1.2;color:var(--navy-800)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
/* top bar */
.topbar{background:var(--navy-800);color:#cfe3f5;font-size:14px}
.topbar-in{display:flex;justify-content:space-between;align-items:center;padding:6px 24px}
.topbar-tel{color:#fff;font-weight:700;text-decoration:none}
/* header */
.site-head{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 8px rgba(11,36,64,.06)}
.head-in{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:24px}
.brand img{width:220px;height:auto}
.nav{display:flex;align-items:center;gap:26px;font-family:var(--ff-head);font-size:15px;font-weight:600}
.nav>a,.has-sub>a{color:var(--ink);text-decoration:none;padding:8px 0;display:inline-flex;align-items:center;gap:5px}
/* blue-600, not blue-500: white/blue-500 on white measures 4.49:1 against the
   4.5:1 AA minimum and fails. blue-600 is 7:1 and matches .btn-primary. */
.nav>a:hover,.has-sub>a:hover,.nav a.active{color:var(--blue-600)}
.has-sub{position:relative}
.sub{position:absolute;top:100%;left:-14px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(11,36,64,.12);padding:8px;min-width:210px;display:none}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.sub a{display:block;padding:10px 14px;border-radius:7px;color:var(--ink);text-decoration:none}
.sub a:hover{background:var(--blue-100);color:var(--blue-700)}
.menu-btn{display:none;background:none;border:0;cursor:pointer;width:42px;height:38px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.menu-btn span{display:block;width:26px;height:3px;background:var(--navy-800);border-radius:2px;transition:.25s}
/* buttons */
.btn{display:inline-block;font-family:var(--ff-head);font-weight:700;font-size:15px;text-decoration:none;padding:13px 26px;border-radius:8px;transition:.2s;text-align:center}
/* blue-600 not blue-500: white-on-blue-500 lands at exactly 4.50:1, the AA minimum, with no margin. blue-600 is 7:1 and visually near-identical. */
.btn-primary{background:var(--blue-600);color:#fff}.btn-primary:hover{background:var(--blue-700)}
.btn-green{background:var(--green-600);color:#fff}.btn-green:hover{background:var(--green-700)}
/* The `.nav>a.btn-nav` prefix is load-bearing. `.nav>a` (specificity 0,1,1) sets
   color:var(--ink) and outranks a bare `.btn-nav` (0,1,0), so the Get a Quote
   button rendered dark-on-green at 3.1:1 — and flipped to white on hover, because
   `.btn-nav:hover` (0,2,0) DOES outrank it. Matching the specificity fixes both. */
.nav>a.btn-nav,.btn-nav{background:var(--green-600);color:#fff;padding:10px 20px}
.nav>a.btn-nav:hover,.btn-nav:hover{background:var(--green-700);color:#fff}
.btn-light{background:#fff;color:var(--navy-800)}.btn-light:hover{background:var(--blue-100)}
.btn-ghost{border:2px solid rgba(255,255,255,.75);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.12)}
/* hero */
.hero{position:relative;color:#fff;overflow:hidden;background:linear-gradient(115deg,rgba(4,26,49,.93) 35%,rgba(0,53,101,.72) 65%,rgba(0,53,101,.35)),url('/assets/img/hero-camera.webp') center/cover no-repeat}
/* phones get a 900px-wide hero (33KB) instead of the 1600px desktop one (66KB).
   Breakpoint must stay in sync with the two rel=preload media queries on the home page. */
@media(max-width:720px){
  .hero{background:linear-gradient(115deg,rgba(4,26,49,.93) 35%,rgba(0,53,101,.72) 65%,rgba(0,53,101,.35)),url('/assets/img/hero-camera-mobile.webp') center/cover no-repeat}
}
.hero-in{padding:110px 24px 120px;max-width:1160px;margin:0 auto}
.hero .kicker{font-family:var(--ff-head);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#8fc5ef;margin-bottom:14px}
.hero h1{color:#fff;font-size:clamp(30px,4.4vw,52px);font-weight:800;max-width:820px;margin-bottom:18px}
.hero p{font-size:clamp(17px,2vw,21px);max-width:640px;color:#dcebf8;margin-bottom:32px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
/* sections */
section{padding:72px 0}
.section-soft{background:var(--bg-soft)}
.eyebrow{font-family:var(--ff-head);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-600);margin-bottom:10px}
h2.sec{font-size:clamp(26px,3vw,36px);margin-bottom:14px}
.sec-sub{color:var(--muted);max-width:720px;margin-bottom:40px;font-size:19px}
.center{text-align:center}.center .sec-sub{margin-left:auto;margin-right:auto}
/* pillar cards */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(11,36,64,.06);display:flex;flex-direction:column}
.pillar img{height:260px;width:100%;object-fit:cover}
.pillar-body{padding:30px 30px 34px;display:flex;flex-direction:column;flex:1}
.pillar h3{font-size:24px;margin-bottom:10px}
.pillar p{color:var(--muted);margin-bottom:16px}
.pillar ul{list-style:none;margin:0 0 24px}
.pillar li{padding:6px 0 6px 30px;position:relative;font-size:16.5px}
.pillar li::before{content:'';position:absolute;left:0;top:11px;width:18px;height:18px;background:var(--green-600);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.5 11.5 3 8l1.2-1.2 2.3 2.3 5.3-5.3L13 5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.5 11.5 3 8l1.2-1.2 2.3 2.3 5.3-5.3L13 5z'/%3E%3C/svg%3E") center/contain no-repeat}
.pillar .btn{margin-top:auto;align-self:flex-start}
/* audience strip */
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.aud-2{grid-template-columns:repeat(2,1fr)}
.aud-card{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue-500);border-radius:10px;padding:24px 26px}
.aud-card h3{font-size:18px;margin-bottom:8px}
.aud-card p{font-size:16px;color:var(--muted)}
/* why */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px}
.why-card{padding:26px 22px;background:#fff;border:1px solid var(--line);border-radius:12px;text-align:center}
.why-card .num{font-family:var(--ff-head);font-weight:800;font-size:34px;color:var(--blue-500)}
.why-card h3{font-size:16.5px;margin:8px 0 6px}
.why-card p{font-size:15px;color:var(--muted)}
/* logos */
.logo-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:center}
.logo-wall img{margin:0 auto;max-height:74px;width:auto;filter:grayscale(1);opacity:.75;transition:.2s}
.logo-wall img:hover{filter:none;opacity:1}
/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.quote{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;position:relative}
.quote::before{content:'\201C';font-family:Georgia,serif;font-size:64px;line-height:1;color:var(--blue-100);position:absolute;top:14px;right:20px}
.quote p{font-size:16.5px;margin-bottom:14px}
.quote .stars{color:#f5a623;letter-spacing:2px;margin-bottom:10px}
.quote cite{font-style:normal;font-weight:700;color:var(--navy-800)}
/* page hero */
.page-hero{background:linear-gradient(115deg,var(--navy-900),var(--blue-700));color:#fff;padding:64px 0}
.page-hero h1{color:#fff;font-size:clamp(28px,3.6vw,42px)}
.page-hero p{color:#cfe3f5;max-width:760px;margin-top:12px;font-size:19px}
/* service detail */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.split.rev{grid-template-columns:.85fr 1.15fr}
.split img{border-radius:14px;box-shadow:0 10px 34px rgba(11,36,64,.15)}
.svc-list{list-style:none;margin:18px 0 26px}
.svc-list li{padding:7px 0 7px 32px;position:relative}
.svc-list li::before{content:'';position:absolute;left:0;top:12px;width:19px;height:19px;background:var(--green-600);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.5 11.5 3 8l1.2-1.2 2.3 2.3 5.3-5.3L13 5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.5 11.5 3 8l1.2-1.2 2.3 2.3 5.3-5.3L13 5z'/%3E%3C/svg%3E") center/contain no-repeat}
.svc-list strong{color:var(--navy-800)}
.brand-strip{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:26px 30px;margin-top:40px}
.brand-strip h3{font-size:16px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.brand-strip p{color:var(--muted);font-size:16px}
.callout{background:var(--blue-100);border-left:5px solid var(--blue-500);border-radius:10px;padding:24px 28px;margin:36px 0}
.callout h3{margin-bottom:8px}
/* team */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.person{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-align:center}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover}
.person .noimg{width:100%;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue-700),var(--navy-800));color:#fff;font-family:var(--ff-head);font-size:52px;font-weight:800}
.person-body{padding:16px 14px 20px}
.person h3{font-size:17px}
.person .role{color:var(--blue-600);font-size:14.5px;font-weight:700;margin:3px 0}
.person .since{color:var(--muted);font-size:13.5px}
h2.group{font-size:24px;margin:54px 0 24px;padding-bottom:10px;border-bottom:3px solid var(--blue-100)}
h2.group:first-of-type{margin-top:0}
/* resources */
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.res-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px}
.res-card h3{margin-bottom:14px;font-size:19px}
.res-card a{display:block;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:700}
.res-card a:last-child{border-bottom:0}
.res-card a:hover{color:var(--blue-500)}
/* forms */
.form-wrap{max-width:760px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-family:var(--ff-head);font-weight:600;font-size:14.5px;margin:18px 0 6px;color:var(--navy-800)}
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;font:inherit;font-size:16px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue-500);border-color:var(--blue-500)}
fieldset{border:0;margin:18px 0 0}
legend{font-family:var(--ff-head);font-weight:600;font-size:14.5px;color:var(--navy-800);margin-bottom:8px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.checks label{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--ff-body);font-weight:400;font-size:16px}
.checks input{width:auto}
form .btn{margin-top:28px;border:0;cursor:pointer;font-size:16px}
.hp{position:absolute;left:-9999px}
/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contact-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:30px}
.contact-card h3{margin-bottom:10px}
.contact-card p{margin-bottom:12px}
.map{border:0;width:100%;height:320px;border-radius:12px;margin-top:26px}
/* cta band + footer */
.cta-band{background:linear-gradient(115deg,var(--green-700),var(--green-600));color:#fff;padding:60px 0}
.cta-in{text-align:center}
.cta-band h2{color:#fff;font-size:clamp(24px,3vw,34px);margin-bottom:8px}
.cta-band p{color:#e2f4ee;margin-bottom:26px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.site-foot{background:var(--navy-900);color:#b9c9d9;font-size:15.5px;padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.2fr 1.2fr 1fr 1fr;gap:38px;padding-bottom:40px}
.site-foot h3{color:#fff;font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.site-foot p{margin-bottom:9px}
.site-foot a{color:#8fc5ef;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-tag{font-style:italic;margin:10px 0 16px}
.foot-cancel{margin-top:16px;font-size:14.5px;background:rgba(255,255,255,.07);padding:12px 14px;border-radius:8px}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;padding-bottom:18px;font-size:14px;color:#7f93a6}
/* responsive */
@media(max-width:960px){
  .pillars,.contact-grid,.res-grid,.split,.split.rev{grid-template-columns:1fr}
  .split img{order:-1}
  .why{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .aud{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* Hamburger starts at 960px, not 720px. The desktop dropdowns open on :hover,
     which a touch device can't do — on a tablet the first tap just follows the
     parent link, leaving Physical Security unreachable from the nav. Below this
     width the submenus are always expanded instead. */
  .menu-btn{display:flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 20px;border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(11,36,64,.12)}
  .nav.open{display:flex}
  .nav>a,.has-sub>a{padding:13px 4px;border-bottom:1px solid var(--line);width:100%;justify-content:space-between}
  .sub{display:block;position:static;border:0;box-shadow:none;padding:0 0 0 16px;min-width:0}
  .btn-nav{margin-top:16px;text-align:center}
}
@media(max-width:720px){
  body{font-size:17px}
  .topbar-in{justify-content:center;text-align:center;flex-wrap:wrap;gap:2px}
  .hero-in{padding:70px 24px 80px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  form .row,.checks{grid-template-columns:1fr}
  .brand img{width:180px}
}