/* Patriot Lock And Key. Built from the business card: card blue, flag red, white paper.
   Slab serif headlines like a stenciled van door, Public Sans (the US Web Design System face)
   for reading, Courier Prime for anything that is a record: license, price, receipt. */
:root{
  --blue:#0466A0; --blue-ink:#03507E; --blue-deep:#023A5C; --sky:#E6F1F8;
  --red:#D3141A; --red-ink:#A60F14; --white:#FFFFFF; --page:#FFFFFF;
  --ink:#1B2430; --muted:#566273; --line:#D9E1E8; --parch:#FBF8F1; --parch-line:#E4DCCB;
  --f-display:"Bitter",Rockwell,"Roboto Slab",Georgia,serif;
  --f-body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --f-rec:"Courier Prime","Courier New",Courier,monospace;
  --r:3px; --wrap:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:17px/1.65 var(--f-body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.12;margin:0;text-wrap:balance;color:var(--blue-deep)}
h1{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.5px}
h2{font-size:clamp(1.7rem,3.3vw,2.45rem);letter-spacing:-.3px}
h3{font-size:1.25rem;font-weight:700}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 .78rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.eyebrow::before{content:"";width:12px;height:12px;background:currentColor;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.lead{font-size:1.14rem;max-width:60ch;color:var(--muted)}
.prose{max-width:66ch;display:grid;gap:14px}

/* ribbon + header */
.ribbon{background:var(--blue);color:#fff;font:600 .82rem/1 var(--f-body)}
.ribbon .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:space-between;padding-block:9px}
.ribbon span{display:inline-flex;gap:6px;align-items:center}
.ribbon .rec{font-family:var(--f-rec);font-weight:700;letter-spacing:.04em}
.ribbon a{color:#fff;text-decoration:none}
.top{background:var(--white);position:sticky;top:env(safe-area-inset-top,0px);z-index:20;box-shadow:0 1px 0 var(--line),0 6px 18px -14px rgba(2,58,92,.5)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:72px;flex-wrap:wrap;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:40px;height:45px}
.brand b{display:block;font:800 1.55rem/1 var(--f-display);color:var(--blue-deep);letter-spacing:-.2px}
.brand i{display:block;font:700 .66rem/1.2 var(--f-body);font-style:normal;color:var(--red);letter-spacing:.24em;text-transform:uppercase;margin-top:3px}
.spacer{flex:1}
.mainnav{display:flex;gap:2px;flex-wrap:wrap}
.mainnav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.93rem;padding:10px 10px;border-bottom:3px solid transparent}
.mainnav a:hover{color:var(--blue)}
.mainnav a[aria-current]{border-bottom-color:var(--red);color:var(--blue-deep)}
.lang{display:flex;border:2px solid var(--blue);border-radius:999px;overflow:hidden}
.lang a{color:var(--blue);text-decoration:none;font:700 .8rem/1 var(--f-body);padding:8px 12px}
.lang a[aria-current]{background:var(--blue);color:#fff}
.callbtn{background:var(--red);color:#fff;text-decoration:none;font:700 1.02rem/1 var(--f-body);padding:13px 18px;border-radius:999px;white-space:nowrap}
.callbtn:hover{background:var(--red-ink)}
.navbtn{display:none;background:none;border:2px solid var(--line);color:var(--blue-deep);border-radius:999px;padding:8px 12px;font:700 .9rem var(--f-body);gap:6px;align-items:center}
.navbtn svg{width:16px;height:16px}
.stripe{height:9px;background:linear-gradient(var(--red) 0 3px,#fff 3px 6px,var(--red) 6px 9px)}
@media (max-width:1239px){
  .navbtn{display:inline-flex}
  .mainnav{display:none;order:9;width:100%;flex-direction:column;padding-block:6px}
  .mainnav.open{display:flex}
  .mainnav a{border-bottom:1px solid var(--line)}
}
@media (max-width:640px){.ribbon .hide-s{display:none}.brand i{letter-spacing:.14em}.callbtn{padding:11px 14px;font-size:.95rem}.brand b{font-size:1.3rem}}

/* hero: white sheet, photo in a red offset frame */
.hero{background:var(--page);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:38%;background:var(--sky);z-index:0}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding-block:52px 60px}
.hero h1{margin-top:14px}
.hero .lead{margin-top:18px}
.hero figure{margin:0 14px 14px 0;position:relative}
.hero figure::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:3px solid var(--red);border-radius:var(--r)}
.hero figure img{position:relative;aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--r)}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;padding:13px 20px;border-radius:999px;border:2px solid transparent}
.btn.red{background:var(--red);color:#fff}
.btn.red:hover{background:var(--red-ink)}
.btn.ghost{border-color:var(--blue);color:var(--blue)}
.btn.line{border-color:var(--blue);color:var(--blue)}
.navy .btn.ghost{border-color:#fff;color:#fff}
@media (max-width:860px){.hero::after{display:none}.hero .wrap{grid-template-columns:1fr;padding-block:36px 44px}}

/* dog tag: the license, verifiable */
.dogtag{display:inline-grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;margin-top:24px;
  background:linear-gradient(160deg,#F7F8F9,#CDD4DB);color:var(--blue-deep);border-radius:16px;
  padding:10px 16px 10px 14px;text-decoration:none;border:1px solid #AEB8C4;font-family:var(--f-rec);max-width:100%}
.dogtag .hole{grid-row:span 2;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #8D99A6}
.dogtag b{font-size:1.05rem;letter-spacing:.06em}
.dogtag span{font-size:.75rem;color:#3C4A59}
.dogtag:hover{border-color:var(--red)}

/* facts: deep blue band with white stars */
.facts{background:var(--blue-deep);color:#fff}
.facts ul{list-style:none;margin:0 auto;padding-block:15px;display:flex;flex-wrap:wrap;gap:10px 30px;font-weight:600;font-size:.95rem}
.facts li{display:flex;gap:8px;align-items:center}
.facts li::before{content:"";width:11px;height:11px;background:#fff;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* sections */
section.band{padding-block:64px}
section.band.white{background:var(--parch)}
section.band.navy{background:var(--blue);color:#fff}
section.band.navy h2,section.band.navy h3{color:#fff}
section.band.navy .lead{color:#DCEBF5}
section.band.navy .eyebrow{color:#fff}
.head{display:grid;gap:10px;margin-bottom:30px;justify-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:c}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;align-items:start}
@media (max-width:860px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2{grid-template-columns:1fr}}
@media (max-width:560px){.grid3{grid-template-columns:1fr}}
.case{counter-increment:c;display:grid;gap:8px;align-content:start;padding:20px 20px 18px 62px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);position:relative}
.case::before{content:counter(c,decimal-leading-zero);position:absolute;left:18px;top:20px;font:800 1.3rem/1 var(--f-display);color:var(--red)}
.case:hover{border-color:var(--blue);box-shadow:0 8px 22px -16px rgba(2,58,92,.6)}
.case p{color:var(--muted);font-size:.97rem}
.case .go{font-weight:700;color:var(--blue);font-size:.92rem}
.case .go::after{content:" \2192"}
.photo{margin:0;border-radius:var(--r);overflow:hidden;background:var(--line);border-bottom:5px solid var(--red)}
.photo img{width:100%;object-fit:cover}
.hw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hw div{border:2px solid rgba(255,255,255,.4);border-radius:var(--r);padding:14px 16px}
.hw b{display:block;font:700 1.1rem/1.2 var(--f-display);color:#fff}
.hw span{font-size:.92rem;color:#DCEBF5}
@media (max-width:560px){.hw{grid-template-columns:1fr}}

/* price: printed like the receipt it promises */
.price{background:var(--white);border:1px solid var(--parch-line);padding:30px 26px 26px;display:grid;gap:12px;max-width:760px;
  box-shadow:0 14px 30px -24px rgba(27,36,48,.6);
  -webkit-mask:radial-gradient(circle 7px at 50% 0,transparent 98%,#000) 0 0/22px 100% repeat-x;
          mask:radial-gradient(circle 7px at 50% 0,transparent 98%,#000) 0 0/22px 100% repeat-x}
.price .eyebrow{font-family:var(--f-rec);letter-spacing:.1em}
.price h2{font-size:1.8rem}
.price p:last-child{font-family:var(--f-rec);font-size:.98rem;border-top:2px dashed var(--parch-line);padding-top:12px}

.areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.areas h3{font-size:1.1rem;color:var(--blue-deep);border-bottom:3px solid var(--red);padding-bottom:6px;margin-bottom:8px}
.areas ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.areas a{text-decoration:none;font-weight:600}
.areas a:hover{text-decoration:underline}
@media (max-width:860px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* did you know: a field note */
.know{background:var(--sky);border-top:5px solid var(--blue);padding:22px;display:grid;gap:8px;max-width:760px;border-radius:0 0 var(--r) var(--r)}
.know .eyebrow{color:var(--blue)}
.know small{color:var(--muted)}

details{border-bottom:1px solid var(--line);padding-block:15px}
details summary{cursor:pointer;font-weight:700;color:var(--blue-deep);list-style:none;display:flex;justify-content:space-between;gap:12px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font:700 1rem/1 var(--f-body)}
details[open] summary::after{content:"\2212";background:var(--blue)}
details p{margin-top:10px;color:var(--muted);max-width:68ch}
.faq{max-width:820px}
.person{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.person .badge{width:74px;height:74px;border-radius:50%;background:var(--white);border:3px solid var(--red);color:var(--blue-deep);display:grid;place-items:center;font:800 1.5rem var(--f-display)}

/* form */
.hp{position:absolute;left:-9999px}
.formmsg{font-weight:600;color:var(--blue-deep)}

/* footer */
footer{background:var(--blue-deep);color:#C9DCEA;padding-block:46px 30px;font-size:.93rem;box-shadow:inset 0 9px 0 -6px var(--red)}
footer a{color:#fff}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
footer h4{font:700 1.05rem var(--f-display);color:#fff;margin:0 0 10px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
footer .legal{border-top:1px solid rgba(255,255,255,.15);margin-top:28px;padding-top:18px;font-size:.82rem}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
.callbar{display:none}
@media (max-width:640px){
  .callbar{display:grid;grid-template-columns:1.4fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--white);box-shadow:0 -1px 0 var(--line);
    padding:8px max(10px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));gap:8px}
  .callbar a{text-align:center;padding:12px 6px;white-space:nowrap;font-size:.95rem;border-radius:999px;font-weight:700;text-decoration:none;color:var(--blue);border:2px solid var(--blue)}
  .callbar a.red{background:var(--red);border-color:var(--red);color:#fff}
  body{padding-bottom:72px}
}

/* inner pages */
.crumbbar{background:var(--sky);font-size:.85rem}
.crumbbar .wrap{padding-block:10px}
.crumbbar ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;color:var(--muted)}
.crumbbar li+li::before{content:"\203A";margin-right:6px;color:var(--red)}
.hero.inner .wrap{padding-block:40px 52px}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:16px;counter-reset:s}
.steps li{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);width:46px;height:46px;border-radius:50%;border:3px solid var(--red);color:var(--blue-deep);display:grid;place-items:center;font:800 1.25rem var(--f-display)}
.steps b{display:block;color:var(--blue-deep)}
.steps span{color:var(--muted);font-size:.97rem}
.who{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.who li{background:var(--white);border:2px solid var(--blue);border-radius:999px;padding:5px 14px;font-weight:600;font-size:.9rem;color:var(--blue-deep)}
.stack{display:grid;gap:28px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.wrap:not(.grid2) > .price{margin-inline:auto}
@media (max-width:640px){.top .callbtn{display:none}}
@media (max-width:640px){.top .wrap{gap:8px}.lang a{padding:7px 9px}.navbtn{padding:7px 10px}.brand img{width:34px;height:38px}}
.areas.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.areas.two ul{display:block;columns:2;column-gap:20px}
.areas.two li{margin-bottom:4px;break-inside:avoid}
@media (max-width:560px){.areas.two{grid-template-columns:1fr}}
.cards2{gap:18px;counter-reset:c}
.more{margin-top:20px;color:var(--muted);font-size:.95rem}
.more a{font-weight:600}
.areas.three{grid-template-columns:1fr 1fr 1.4fr}
.areas.three ul{display:block;columns:2;column-gap:20px}
.areas.three li{margin-bottom:4px;break-inside:avoid}
@media (max-width:860px){.areas.three{grid-template-columns:1fr}}
.areas.three > div:nth-child(2) ul{columns:1}
.areas.three{grid-template-columns:1.1fr .7fr 1.4fr}
@media (max-width:860px){.areas.three{grid-template-columns:1fr}}

/* lead form: white card, filled fields so every box reads as a box */
form.req{display:grid;gap:12px;background:var(--white);border:1px solid var(--line);border-top:6px solid var(--red);border-radius:6px;padding:22px 22px 18px;position:relative;z-index:1;box-shadow:0 22px 44px -26px rgba(2,58,92,.6);scroll-margin-top:110px;min-width:0}
form.req .fhead{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px dashed var(--line)}
form.req .fhead img{width:34px;height:38px}
form.req h3{font-size:1.45rem;color:var(--blue-deep)}
form.req .sub{font-size:.88rem;color:var(--muted);line-height:1.4;margin-top:3px}
form.req .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form.req .row2 > *{min-width:0}
form.req label{display:grid;gap:5px;font-weight:700;font-size:.86rem;color:var(--blue-deep);letter-spacing:.01em}
form.req label em{font-style:normal;color:var(--red)}
form.req label small{font-weight:400;color:var(--muted)}
form.req input,form.req textarea,form.req select{font:400 1rem/1.35 var(--f-body);padding:11px 12px;border:1.5px solid #B7C4D1;border-radius:5px;background:#F3F7FA;color:var(--ink);width:100%;min-width:0;transition:border-color .15s,background .15s,box-shadow .15s}
form.req select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230466A0' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:12px 8px}
form.req ::placeholder{color:#8593A3;opacity:1}
form.req input:hover,form.req textarea:hover,form.req select:hover{border-color:#8FA2B5}
form.req input:focus,form.req textarea:focus,form.req select:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(4,102,160,.18)}
form.req textarea{min-height:84px;resize:vertical}
form.req .upload{position:relative}
form.req .upload input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
form.req .upload label{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1.5px dashed #9FB2C4;background:var(--sky);border-radius:6px;padding:11px 12px;cursor:pointer;font-weight:400}
form.req .upload label:hover{border-color:var(--blue)}
form.req .upload input:focus-visible + label{outline:3px solid var(--red);outline-offset:2px}
form.req .upload svg{width:26px;height:26px;color:var(--blue)}
form.req .upload b{color:var(--blue-deep)}
form.req .pnote{display:block;font-size:.8rem;color:var(--muted);line-height:1.35;margin-top:2px;overflow-wrap:anywhere}
form.req .pbtn{font:700 .8rem/1 var(--f-body);color:var(--blue);border:2px solid var(--blue);border-radius:999px;padding:8px 12px;white-space:nowrap;background:#fff}
form.req button{font:700 1.05rem var(--f-body);background:var(--red);color:#fff;border:0;border-radius:999px;padding:15px;cursor:pointer;margin-top:2px;box-shadow:0 8px 18px -10px rgba(211,20,26,.8)}
form.req button:hover{background:var(--red-ink)}
form.req .fine{font-size:.78rem;color:var(--muted);text-align:center;line-height:1.4}
form.req .note{font-size:.88rem;text-align:center;color:var(--ink);font-weight:600}
form.req .note a{color:var(--red);text-decoration:none;white-space:nowrap}
@media (max-width:460px){form.req .row2{grid-template-columns:1fr}form.req{padding:18px 16px 16px}form.req .upload label{grid-template-columns:auto 1fr}form.req .pbtn{display:none}}

/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--blue-deep);color:#fff;padding:10px 16px;border-radius:0 0 6px 6px;font-weight:700;text-decoration:none}
.skip:focus{top:0}
html{scroll-behavior:smooth}