/* fonts.css is linked separately in the page head, ahead of this file */

/* ---------- tokens ---------- */
:root{
  --black:#000;
  --ink:#1B1D20;
  --muted:#5C6168;
  --line:#D3D6DA;
  --red:#C8102E;
  --red-deep:#9C0B22;
  --gold:#B8963E;
  --concrete:#E8EAEC;
  --stone:#F4F5F6;
  --white:#fff;
  --dark-line:#3A3D42;
  --dim:#B9BDC3;

  --fd:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --ft:'IBM Plex Sans',Arial,Helvetica,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --block:clamp(64px,9vw,112px);
  --max:1560px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* Anchor targets clear the sticky header */
[id]{scroll-margin-top:100px}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--ft);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:var(--fd);margin:0;line-height:.95;font-weight:800}
h1{font-size:clamp(52px,8.4vw,132px);letter-spacing:-.01em;text-transform:uppercase;font-weight:900}
h2{font-size:clamp(38px,5vw,68px);letter-spacing:-.005em;text-transform:uppercase}
h3{font-size:clamp(26px,2.2vw,30px);line-height:1.05;font-weight:700}
h4{font-size:20px;letter-spacing:.02em;text-transform:uppercase;font-weight:700}

p{margin:0 0 1em;max-width:34em}
p:last-child{margin-bottom:0}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--red);color:#fff;padding:14px 20px;font-weight:600}
.skip:focus{left:0}

/* ---------- buttons and links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:14px 26px;
  font-family:var(--ft);font-size:17px;font-weight:600;line-height:1;
  border:2px solid transparent;border-radius:2px;
  cursor:pointer;background:none;
}

/* A call to action and its WhatsApp alternative sit on one line */
.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:28px}
.actions:first-child{margin-top:0}
.actions .btn{margin:0}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-deep)}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn--ghost{border-color:#fff;color:#fff}
.btn--ghost:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:var(--red);color:#fff}

.link{
  font-weight:600;color:var(--red);
  border-bottom:2px solid currentColor;padding-bottom:1px;
  white-space:nowrap;
}
.link:hover{color:var(--red-deep)}

.lead{font-size:clamp(18px,1.6vw,20px);color:var(--muted);max-width:32em}

/* ---------- header ---------- */
.masthead{background:var(--black);color:#fff;position:sticky;top:0;z-index:20}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}

/* The emblem sits at the far left; the name is set in type on the right.
   Cropped tight to the artwork and sharpened, because the supplied file wastes
   40% of its frame on black margin. A vector would still be better. */
.brand-mark{flex:none;display:block;line-height:0}
.brand-mark img{width:64px;height:64px;border-radius:50%}

.masthead__right{display:flex;align-items:center;gap:44px;flex:none}
.brand{display:flex;align-items:center;gap:14px;flex:none}
/* The header wordmark is set in type, not the logo image: at 60px the artwork's
   own "OPFOR SECURITY" turns to mush. Restore the mark here once the client
   supplies the vector logo. */
.brand__name{font-family:var(--fd);font-weight:800;font-size:30px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.brand__name b{color:var(--red);font-weight:inherit}

/* Sits beside the emblem on the left, rather than floating in the middle */
.nav{display:flex;align-items:center;gap:30px;margin-right:auto;margin-left:clamp(24px,3vw,44px)}
.nav__link{font-size:16px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.nav__link:hover{border-bottom-color:var(--dim)}
.nav__link[aria-current="page"]{border-bottom-color:var(--red)}

/* The one nav item that is an action rather than a destination */
.nav__cta{
  background:var(--red);color:#fff;
  padding:11px 18px;border-radius:2px;
  font-size:15px;font-weight:600;line-height:1;white-space:nowrap;
}
.nav__cta:hover{background:var(--red-deep)}

/* Steps down clearly from the 30px wordmark beside it: at 26px the two sat
   at the same weight in the same typeface and competed. */
.phone{font-family:var(--fd);font-weight:700;font-size:22px;letter-spacing:.02em;line-height:1;white-space:nowrap}
.phone small{display:block;font-family:var(--ft);font-weight:400;font-size:12px;letter-spacing:0;color:var(--red);margin-bottom:2px}

.burger{
  display:none;width:48px;height:48px;border:0;background:none;padding:12px;cursor:pointer;
}
.burger span{display:block;height:2px;background:#fff;margin:5px 0;transition:transform .18s ease,opacity .18s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--black);color:#fff;overflow:hidden;isolation:isolate}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:-2}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.18) 100%);
}
.hero__in{padding-top:clamp(96px,12vw,150px);padding-bottom:clamp(56px,7vw,80px);min-height:min(78vh,720px);display:flex;flex-direction:column;justify-content:flex-end}
.hero h1{max-width:11em}
.hero__sub{margin:26px 0 34px;font-size:clamp(17px,1.6vw,20px);max-width:30em;color:#E6E8EB}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap}
.hero__loc{position:absolute;right:var(--gutter);bottom:clamp(56px,7vw,80px);text-align:right;font-size:15px;color:#C9CDD2;line-height:1.5}
.hero__loc b{display:block;color:#fff;font-weight:600}

/* ---------- credentials rail ---------- */
.rail{border-bottom:1px solid var(--line)}
.rail__in{display:flex;align-items:center;gap:40px;min-height:96px;padding-block:20px;font-size:15px;color:var(--muted)}
.rail__lbl{max-width:16em;line-height:1.35;margin:0}
.rail__logos{display:flex;align-items:center;gap:36px;margin-left:auto;flex-wrap:wrap}
.rail__logos img{height:52px;width:auto}
.rail__logos a{display:inline-flex;border-radius:2px}
.rail__logos a:hover img{opacity:.75}
.rail__mark{font-family:var(--fd);font-weight:700;font-size:22px;line-height:1;text-transform:uppercase;color:var(--ink)}
.rail__mark small{display:block;font-family:var(--ft);font-weight:400;font-size:12px;text-transform:none;color:var(--muted);margin-top:4px}

/* ---------- generic section ---------- */
.band{padding-block:var(--block)}
.band--dark{background:var(--black);color:#fff}
.band--stone{background:var(--stone)}
.band--red{background:var(--red);color:#fff}
.band--dark h2,.band--red h2{color:#fff}

.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,4.5vw,64px)}
.split--wide{grid-template-columns:7fr 5fr}

/* ---------- services list ---------- */
.svc{border-top:1px solid var(--line);padding-block:32px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc h3{margin-bottom:10px}
.svc p{color:var(--muted);margin:0}
.svc .link{margin-top:6px}

/* ---------- definition rows ---------- */
.defs{margin:0;border-top:1px solid var(--dark-line)}
.defs > div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding-block:22px;border-bottom:1px solid var(--dark-line)}
.defs dt{font-family:var(--fd);font-weight:700;font-size:24px;line-height:1;color:var(--gold)}
.defs dd{margin:0;font-size:16px;color:#D5D8DC}

.band--stone .defs{border-top-color:var(--line)}
.band--stone .defs > div{border-bottom-color:var(--line)}
.band--stone .defs dt{color:var(--red)}
.band--stone .defs dd{color:var(--muted)}

.def-intro{font-size:clamp(19px,1.8vw,22px);color:#D5D8DC;margin:26px 0 0;max-width:24em}
.def-intro b{color:#fff;font-weight:600}
.band--dark h2 em{font-style:normal;color:var(--gold)}
/* Matches the header wordmark, where OPFOR is red and the rest white */
.band--dark h2 b{color:var(--red);font-weight:inherit}

/* ---------- contact ---------- */
.contact__phone{font-family:var(--fd);font-weight:800;font-size:clamp(42px,4.6vw,56px);line-height:1;margin:30px 0 6px;display:inline-block}
.contact__meta{font-size:17px;line-height:1.7;color:#FFE1E5}
.contact__meta b{color:#fff;font-weight:600}

/* ---------- forms ---------- */
.card{background:#fff;color:var(--ink);padding:clamp(24px,3vw,36px);border-radius:2px}
.card h3{margin-bottom:8px}
.card > p{color:var(--muted);font-size:15px}

.form{display:grid;gap:16px;margin-top:20px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  border:1.5px solid var(--line);border-radius:2px;background:#fff;
  padding:12px 14px;min-height:48px;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);outline:3px solid var(--gold);outline-offset:1px}
.field input::placeholder,.field textarea::placeholder{color:#8A9098}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red);border-width:2px}
.field .err{display:none;font-size:13px;font-weight:500;color:var(--red);margin-top:6px}
.field input[aria-invalid="true"] ~ .err,.field textarea[aria-invalid="true"] ~ .err,
.field select[aria-invalid="true"] ~ .err,.filefield:has(input[aria-invalid="true"]) ~ .err{display:block}
.field select[aria-invalid="true"]{border-color:var(--red);border-width:2px}
.hint{font-size:13px;color:var(--muted);margin:0}

.filefield{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.filefield input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;pointer-events:none}
.filefield__btn{
  display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;
  border:2px solid var(--ink);border-radius:2px;background:#fff;
  font-size:16px;font-weight:600;cursor:pointer;
}
.filefield__btn:hover{background:var(--red);color:#fff;border-color:var(--red)}
.filefield input[type="file"]:focus-visible + .filefield__btn{outline:3px solid var(--gold);outline-offset:3px}
.filefield__name{font-size:15px;color:var(--muted);word-break:break-all}
.field input[type="file"][aria-invalid="true"] + .filefield__btn{border-color:var(--red);color:var(--red)}

.form__note{font-size:13px;color:var(--muted);margin:0}
.form__status{font-size:15px;font-weight:500;padding:14px 16px;border-radius:2px;margin:0}
.form__status[data-state="ok"]{background:#EAF3EC;color:#1C5B2E;border-left:3px solid #1C5B2E}
.form__status[data-state="error"]{background:#FBEAEC;color:var(--red-deep);border-left:3px solid var(--red)}
.form__status[hidden]{display:none}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- inner page header ---------- */
.pagehead{background:var(--stone);border-bottom:1px solid var(--line);padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(40px,5vw,64px)}
.crumbs{font-size:14px;color:var(--muted);margin:0 0 22px}
.crumbs a:hover{color:var(--ink);border-bottom:1px solid var(--line)}
.pagehead .lead{margin-top:22px}

/* ---------- service detail rows ---------- */
.detail{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,4.5vw,64px);padding-block:clamp(44px,6vw,72px);border-bottom:1px solid var(--line);align-items:center}
.detail:nth-child(even){grid-template-columns:7fr 5fr}
.detail:nth-child(even) .detail__pic{order:2}
.detail:last-of-type{border-bottom:0}
.detail__pic{position:relative;aspect-ratio:4/3;background:var(--black);overflow:hidden}
.detail__pic img{width:100%;height:100%;object-fit:cover;opacity:.85}
/* Scrim keeps the caption legible whatever the photo does underneath it */
.detail__pic::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:40%;
  background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));
  pointer-events:none;
}
.detail__pic figcaption{
  position:absolute;left:16px;bottom:14px;z-index:1;
  font-family:var(--fd);font-weight:800;font-size:22px;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;
}
.detail h2{font-size:clamp(34px,3.6vw,52px)}
.detail p{color:var(--muted);font-size:18px;margin-top:18px}

.ticks{margin:18px 0 26px;padding:0;list-style:none;display:grid;gap:8px;font-size:16px}
.ticks li{position:relative;padding-left:18px}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--red)}
.band--dark .ticks li::before{background:var(--gold)}

/* ---------- partners ---------- */
.partner{display:grid;grid-template-columns:150px 1fr;gap:clamp(24px,3vw,44px);padding-block:36px;border-bottom:1px solid var(--line);align-items:start}
.partner:first-of-type{border-top:1px solid var(--line)}
/* The logos arrive with their own backgrounds baked in, some black and some
   white, so each sits in a square of its own with a hairline to define it. */
.partner__logo{width:150px;height:150px;object-fit:contain;border:1px solid var(--line);background:#fff}
.partner__name{font-family:var(--fd);font-weight:700;font-size:26px;line-height:1.05;text-transform:uppercase;margin:0 0 10px}
.partner p{margin:0;color:var(--muted)}

/* ---------- footer ---------- */
.foot{background:var(--black);color:var(--dim);padding-top:64px;padding-bottom:40px;font-size:15px}
.foot__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:40px;border-bottom:1px solid #2A2D31}
.foot__mark{width:84px;height:84px;border-radius:50%;background:url(../img/logo.jpg) 47% 50%/150% no-repeat;margin-bottom:16px}
.foot h4{color:#fff;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a:hover{color:#fff}
.foot__bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:24px;font-size:13px;color:#7D828A}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .foot__cols{grid-template-columns:1fr 1fr;gap:32px}
}

@media (max-width:860px){
  .split,.split--wide,.detail,.detail:nth-child(even){grid-template-columns:1fr}
  .detail:nth-child(even) .detail__pic{order:0}
  .partner{grid-template-columns:1fr;gap:10px}
}

/* The header runs out of room before the page content does, so it collapses earlier.
   It now carries the emblem, five links, the Residential Patrols button, the
   phone and the wordmark, which is why that point sits as high as 1280px. */
@media (max-width:1280px){
  .masthead__in{min-height:68px;flex-wrap:wrap}
  .brand__name{font-size:21px}
  .brand-mark img{width:44px;height:44px}

  /* Without JavaScript the links wrap onto their own row and stay usable */
  .nav{order:3;width:100%;gap:20px;padding-bottom:12px;margin:0}

  /* With JavaScript the same links become a panel the burger opens */
  .js .nav{
    position:absolute;left:0;right:0;top:100%;order:0;width:auto;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--black);border-top:1px solid #2A2D31;
    padding:8px var(--gutter) 24px;
  }
  .js .nav[hidden]{display:none}
  .js .nav__link{font-size:20px;padding:14px 0;border-bottom:1px solid #2A2D31}
  .js .nav__link:hover{border-bottom-color:#2A2D31}
  .js .nav__link[aria-current="page"]{color:#fff;border-bottom-color:var(--red)}
  /* Full width in the panel, so the label centres like the page buttons do */
  .js .nav__cta{display:block;text-align:center;margin-top:16px;padding:15px 18px;font-size:16px}
  .phone{font-size:22px;margin-left:auto}
  .phone small{display:none}
  .js .burger{display:block}
  /* With the nav lifted out of the flow, keep phone and wordmark to the right
     instead of letting space-between park them in the middle */
  .masthead__right{margin-left:auto;gap:clamp(16px,3vw,44px)}

  [id]{scroll-margin-top:84px}
}

@media (max-width:760px){
  .phone{font-size:20px}

  .hero__in{min-height:0;padding-top:72px}
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.88) 100%)}
  .hero__loc{display:none}
  .hero__cta .btn{width:100%}

  .rail__in{flex-direction:column;align-items:flex-start;gap:18px}
  .rail__logos{margin-left:0;gap:22px}
  .rail__logos img{height:42px}

  .svc{grid-template-columns:1fr}
  .defs > div{grid-template-columns:110px 1fr;gap:14px}
  .form__row{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr}
}

/* On the narrowest phones the emblem, the wordmark, the number and the menu
   cannot all fit. The emblem gives way: at 44px it is the least legible of the
   four, and the wordmark still says whose site this is. */
@media (max-width:430px){
  .brand-mark{display:none}
  .masthead__right{margin-left:0}
}

/* Below this the number, the name and the menu start to wrap onto two rows */
@media (max-width:365px){
  .phone{font-size:17px}
  .brand__name{font-size:18px}
  .masthead__right{gap:14px}
  .burger{width:42px;padding:12px 9px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- cookie and data consent ---------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--black);color:#fff;border-top:3px solid var(--red);
}
.consent[hidden]{display:none}
.consent__in{display:flex;align-items:center;gap:clamp(24px,4vw,56px);padding-block:22px}
.consent h4{color:#fff;margin:0 0 6px}
.consent p{margin:0;font-size:15px;line-height:1.5;color:#D5D8DC;max-width:70ch}
.consent__actions{display:flex;gap:14px;margin-left:auto;flex:none}
.consent .btn{min-height:44px;padding:12px 24px;font-size:16px}

@media (max-width:760px){
  .consent__in{flex-direction:column;align-items:stretch;gap:18px;padding-block:20px}
  .consent__actions{margin-left:0}
  .consent__actions .btn{flex:1}
}