/* ---- Launch fixes layered on top of the original build ---- */

/* 1. Industry cards were all showing the same squeezed 4-up strip.
      The sprite is 4 photos side by side; pan to the right quarter. */
.industries article { overflow: hidden; }
.industries article img.sector {
  width: 400%;
  max-width: none;
  height: 150px;
  object-fit: cover;
  display: block;
}
img.sector.p0 { margin-left: 0; object-position: center; }
img.sector.p1 { margin-left: -100%; object-position: center; }
img.sector.p2 { margin-left: -200%; object-position: center; }
img.sector.p3 { margin-left: -300%; object-position: center; }

/* 2. Service rail was clipping its own labels ("PROGRAMMIN", "COMPLIANC") */
aside { width: 182px; padding: 24px 10px !important; }
aside button { grid-template-columns: 18px 1fr 12px; font-size: 12px; letter-spacing: .2px; }
aside button:hover, aside button.active { padding-left: 5px !important; padding-right: 5px !important; }
.hero-copy { margin-left: 182px; }
.service-pop { left: 196px; }

/* 3. Tap-to-call in the header */
.fa-callbtn {
  font: 700 17px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .6px;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
}
.fa-callbtn:hover { color: var(--red); }
header nav { margin-left: auto; }
header .fa-callbtn { margin-left: 0; }

/* 4. Real contact details */
.fa-reach {
  margin-top: 10px;
  font-size: 13px;
  color: #cddcf0;
}
.fa-reach a, .fa-footmail a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fa-footmail { display: inline-block; }

/* 4. Keep the mobile layout intact (these override the rules above) */
@media (max-width: 800px) {
  .hero-copy { margin-left: 0; }
  .fa-reach { margin-top: 14px; }

  /* headings were being cut off mid-word on narrow screens */
  .industries h3 { font-size: 15px; letter-spacing: 0; overflow-wrap: normal; }
  .about ul { flex-wrap: wrap; gap: 18px 26px; }
  .about li { max-width: 140px; }

  /* phone becomes the primary action on a phone */
  header { gap: 10px !important; }
  .fa-callbtn { margin-left: auto !important; font-size: 16px; }
  .nav-cta { margin-left: 10px !important; padding: 13px 15px !important; }
}

@media (max-width: 400px) {
  header img { width: 88px !important; }
  .fa-callbtn { font-size: 15px; }
  .nav-cta { padding: 12px 11px !important; font-size: 11px !important; }
}

/* 5. Real enquiry form (name / phone / email / message + captcha) */
.fa-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact { align-items: flex-start; }
.contact .fa-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 380px;
  max-width: 100%;
}
.fa-field { display: flex; flex-direction: column; gap: 5px; }
.fa-field > span {
  font: 700 11px "Barlow Condensed", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #cddcf0;
}
.contact .fa-form input,
.contact .fa-form textarea {
  width: 100%;
  border: 0;
  padding: 12px 13px;
  font: 14px "DM Sans", sans-serif;
  color: var(--ink);
  background: #fff;
  border-radius: 2px;
}
.contact .fa-form textarea { resize: vertical; min-height: 78px; font-family: "DM Sans", sans-serif; }
.contact .fa-form input:focus,
.contact .fa-form textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.contact .fa-form button {
  background: var(--red);
  color: #fff;
  padding: 15px 22px;
  margin-top: 2px;
  align-self: flex-start;
}
.contact .fa-form .g-recaptcha { margin-top: 2px; }
.contact .fa-form > div[data-netlify-recaptcha] { margin-top: 2px; }

@media (max-width: 800px) {
  .contact .fa-form { width: 100%; margin-top: 22px; }
  /* keep the captcha widget inside the viewport on small phones */
  .contact .fa-form .g-recaptcha { transform: scale(.87); transform-origin: 0 0; height: 66px; }
}

/* "OPERATION." was wider than the screen on small phones */
@media (max-width: 430px) {
  .hero h1 { font-size: 44px; }
}