*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body
{margin:0;font-family:Arial,Helvetica,sans-serif;
color:#10213e;
background:white;
line-height:1.55
}a{color:inherit;text-decoration:none}.site-header{
position:sticky;
top:0;
z-index:10;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:15px max(5%,calc((100vw - 1200px)/2));
background:#0d203b;
color:#fff;
box-shadow:0 2px 12px #0002}.brand{display:flex;
align-items:center;
gap:12px;
font-weight:800;
letter-spacing:2px;
font-size:19px;
line-height:1.05}
.brand small{display:block;
color:#d9ae34;
font-size:10px;
letter-spacing:3px;
margin-top:6px}
.brand-mark{display:grid;
place-items:center;
width:50px;
height:50px;
border:2px solid #d9ae34;
color:#d9ae34;
font-size:34px}
.nav{display:flex;
align-items:center;
gap:24px;
font-size:bold}
.nav a:hover{color:#e3b93b}
.nav-cta{background:#e0b535;
padding:12px 15px;
border-radius:5px;
color:#0c1c36!important}.menu-toggle{display:none;
 background:transparent;
color:white;border:0;
font-size:30px;
cursor:pointer}.hero{position:relative;
overflow:hidden;
min-height:520px;
background:radial-gradient(circle at 70% 50%,#2c5572 0%,#0d2441 55%,#06162c 100%);
color:white}


.hero-inner{position:relative;max-width:1200px;
margin:auto;
padding:105px 5% 105px}.eyebrow{color:#e0b535;
letter-spacing:4px;
font-weight:800;
font-size:13px}
.hero h1{font-size:clamp(35px,4.6vw,65px);
line-height:1.13;
letter-spacing:-1.5px;
max-width:710px;
margin:30px 0 20px}
.hero h1 em
{font-style:normal;
color:#e0b535}
.hero-desc{font-size:clamp(16px,2vw,21px);
max-width:570px}.actions{display:flex;flex-wrap:wrap;
gap:15px;
margin-top:35px}
.btn{display:inline-block;padding:16px 23px;
border-radius:5px;font-weight:bold}.gold{background:#e0b535;color:#0b1d35}
.outline
{border:1px solid #fff;
color:#fff}
.section{padding:75px max(5%,calc((100vw - 1200px)/2))}.about{display:grid;
grid-template-columns:40% 1fr;
gap:55px;
align-items:center}
.about img{width:100%;
height:285px;
object-fit:cover;
border-radius:12px}.dark{color:#9d7d1c}.about h2,
.contact h2{font-size:clamp(30px,3.3vw,45px);
line-height:1.17;
margin:18px 0 25px}
.about p:not(.eyebrow){color:#536078;font-size:17px}

.services{background:#09254a;
color:white}

.section-heading{text-align:center;
margin-bottom:35px}

.section-heading h2{font-size:clamp(30px,3.5vw,45px);
margin:8px 0}.section-heading>p:last-child{margin:0;
color:#dce6f2}.cards{display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px}.card{background:white;
color:#0d203b;
border-radius:11px;
overflow:hidden;
box-shadow:0 5px 20px #0003}.card img{width:100%;
height:175px;object-fit:cover;
display:block}.card-body{padding:22px}.card h3{font-size:23px;
margin:0 0 12px}
.card p{color:#536078;min-height:80px}
.card a{color:#9b7717;font-weight:bold}
.contact{background:#f5f7fa;text-align:center}
.contact>p:not(.eyebrow){max-width:650px;
margin:0 auto 20px;
color:#526078}
.notice{border-left:4px solid #d9ae34;
background:white;
padding:16px;
max-width:650px;
margin:25px auto;
color:#384860;
text-align:left}footer{background:#0d203b;
color:#d5dfeb;text-align:center;
padding:25px 15px;font-size:13px}.footer-note{display:block;opacity:.7;
    margin-top:7px}@media(max-width:760px){.site-header{padding:14px 5%}.brand{font-size:16px}.brand-mark{height:46px;width:46px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#0d203b;padding:20px 6%;gap:18px;box-shadow:0 8px 14px #0003}.nav.open{display:flex}.hero{min-height:620px}.hero-photo{inset:0 0 0 28%;opacity:.5;mask-image:linear-gradient(to right,transparent,black 60%);-webkit-mask-image:linear-gradient(to right,transparent,black 60%)}.hero-inner{padding:105px 6% 90px}.hero h1{font-size:clamp(35px,8vw,50px)}.hero-desc{max-width:470px}.section{padding:65px 6%}.about{grid-template-columns:1fr;gap:25px}.about img{height:230px}.cards{grid-template-columns:1fr}.card p{min-height:0}.card img{height:210px}}@media(max-width:390px){.brand{font-size:13px;letter-spacing:1px}.brand small{font-size:8px}.hero h1{font-size:34px}.btn{width:100%;text-align:center}

 /* REGISTERED OFFICE ADDRESS */

.office-address {
margin-top: 30px;
padding: 25px;
background: #F4F6F8;
border-left: 4px solid #D4AF37;
border-radius: 6px;
color: #0B1F3A;
}

.office-address h3 {
margin-bottom: 12px;
color: #0B1F3A;
}

.office-address address {
font-style: normal;
line-height: 1.8;
}


/* ABOUT US PAGE */

.about-hero {
min-height: 370px;
display: flex;
align-items: center;
padding: 75px 6%;
color: white;
background:
linear-gradient(90deg, #07162bee, #07162b99),
url("../images/hero-guard.jpg") center 30%/cover;
}

.about-hero-content {
width: 100%;
max-width: 1200px;
margin: auto;
text-align: center;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.about-hero h1 {
font-size: clamp(36px, 5vw, 58px);
line-height: 1.15;
max-width: 800px;
margin: 15px auto 20px;
text-align: center;
}

.about-hero-content > p {
text-align: center;
}


.mission-section {
background: #09254a;
color: white;
text-align: center;
}

.mission-section h2,
.values-section h2,
.coverage-section h2 {
font-size: clamp(30px, 4vw, 42px);
margin: 12px 0 35px;
}

.mission-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
text-align: left;
}

.mission-card {
background: #17375e;
padding: 35px;
border-radius: 10px;
border-top: 4px solid #e0b535;
}

.mission-card h3 {
color: #e0b535;
font-size: 25px;
}

.values-section {
background: #f5f7fa;
text-align: center;
}

.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}

.value-card {
background: white;
padding: 28px;
border-radius: 10px;
box-shadow: 0 5px 18px #00000012;
border-bottom: 3px solid #e0b535;
}

.value-card h3 {
color: #0d203b;
}

.value-card p {
color: #536078;
}

.coverage-section {
background: #0d203b;
color: white;
text-align: center;
}

.coverage-section > p:not(.eyebrow) {
max-width: 700px;
margin: 0 auto 30px;
}

.coverage-address {
max-width: 450px;
margin: 30px auto 0;
padding: 25px;
border: 1px solid #e0b535;
border-radius: 10px;
}

.coverage-address h3 {
color: #e0b535;
}

.coverage-address address {
font-style: normal;
line-height: 1.8;
}

@media (max-width: 768px) {
.mission-grid,
.values-grid {
grid-template-columns: 1fr;
}

.about-hero {
min-height: 320px;
padding: 65px 6%;
}

.mission-card,
.value-card {
padding: 25px;
}
}

}


/* ================================
OUR SERVICES PAGE
================================ */

.services-hero {
min-height: 370px;
display: flex;
align-items: center;
justify-content: center;
padding: 75px 6%;
color: white;
background:
linear-gradient(90deg, #07162bee, #07162b99),
    center/cover;
}

.services-hero-content {
width: 100%;
max-width: 1200px;
margin: auto;
text-align: center;
}

.services-hero h1 {
font-size: clamp(36px, 5vw, 58px);
line-height: 1.15;
margin: 15px auto 20px;
}

.services-hero h1 span {
color: #e0b535;
}

.services-hero-content > p:last-child {
font-size: 20px;
}

/* INTRODUCTION */

.services-intro {
text-align: center;
background: #f5f7fa;
}

.services-intro h2 {
color: #0b1f3a;
font-size: clamp(30px, 4vw, 42px);
}

.services-intro > p:last-child {
max-width: 750px;
margin: 20px auto 0;
line-height: 1.8;
}

/* SERVICE SECTIONS */

.service-detail {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 55px;
background: #ffffff;
}

.service-alt {
background: #f1f4f8;
}

.service-detail-image img {
width: 100%;
height: 420px;
object-fit: cover;
border-radius: 12px;
display: block;
}

.service-detail-content h2 {
color: #0b1f3a;
font-size: clamp(30px, 4vw, 42px);
margin-bottom: 18px;
}

.service-detail-content h3 {
color: #0b1f3a;
margin: 25px 0 15px;
}

.service-detail-content p {
color: #4b5563;
line-height: 1.8;
}

.service-detail-content ul {
list-style: none;
padding: 0;
margin: 20px 0 30px;
}

.service-detail-content li {
margin-bottom: 13px;
padding-left: 25px;
position: relative;
color: #374151;
}

.service-detail-content li::before {
content: "✓";
color: #b99120;
font-weight: bold;
position: absolute;
left: 0;
}

/* CALL TO ACTION */

.services-cta {
background: #0b1f3a;
color: white;
text-align: center;
}

.services-cta h2 {
font-size: clamp(30px, 4vw, 42px);
margin: 15px 0;
}

.services-cta > p:not(.eyebrow) {
max-width: 650px;
margin: 0 auto 30px;
line-height: 1.8;
}

/* MOBILE RESPONSIVENESS */

@media (max-width: 768px) {
.service-detail {
grid-template-columns: 1fr;
gap: 30px;
}

.service-detail-image img {
height: 280px;
}

.services-hero {
min-height: 320px;
padding: 65px 6%;
}
}
/* COMPANY CONTACT DETAILS */

.company-contact-details {
  margin-top: 25px;
  line-height: 1.9;
}

.company-contact-details a {
  color: #b99120;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.company-contact-details a:hover {
  text-decoration: underline;
}

/* CONTACT US PAGE */

.contact-page-hero {
  min-height: 370px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 75px 6%;
  color: white;
  text-align: center;
  background:
    linear-gradient(90deg, #07162bee, #07162b99);
    
}

.contact-page-hero-content {
  max-width: 900px;
  margin: auto;
}

.contact-page-hero h1 {
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.15;
  margin: 15px 0;
}

.contact-page-hero h1 span {
  color: #e0b535;
}

.contact-page-intro,
.contact-enquiry-heading {
  text-align: center;
}

.contact-page-intro h2,
.contact-enquiry h2 {
  font-size: clamp(30px, 4vw, 42px);
  margin: 15px 0 25px;
}

.contact-page-intro > p:last-child {
  max-width: 750px;
  margin: auto;
  line-height: 1.8;
}

.contact-page-details {
  background: #f5f7fa;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.contact-page-card {
  background: white;
  padding: 35px 22px;
  text-align: center;
  border-radius: 10px;
  border-bottom: 4px solid #d4af37;
  box-shadow: 0 5px 20px #00000012;
  min-width: 0;
}

.contact-page-icon {
  color: #b99120;
  font-size: 36px;
  margin-bottom: 15px;
}

.contact-page-card h3 {
  color: #0b1f3a;
  margin-bottom: 18px;
}

.contact-page-card a {
  display: block;
  color: #0b4b86;
  text-decoration: none;
  overflow-wrap: anywhere;
  line-height: 1.8;
}

.contact-page-card a:hover {
  text-decoration: underline;
}

.contact-page-card address {
  font-style: normal;
  line-height: 1.8;
  color: #374151;
}

.contact-enquiry {
  background: #f5f7fa;
}

.contact-enquiry-heading {
  max-width: 750px;
  margin: 0 auto 35px;
}

.contact-enquiry-form {
  max-width: 900px;
  margin: auto;
  padding: 40px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 28px #00000012;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.contact-form-full {
  grid-column: 1 / -1;
}

.contact-form-field label {
  color: #0b1f3a;
  font-weight: 600;
}

.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font: inherit;
  color: #0b1f3a;
  background: white;
  box-sizing: border-box;
}

.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
  outline: 2px solid #d4af37;
  outline-offset: 2px;
}

.contact-submit {
  border: 0;
  cursor: pointer;
  font: inherit;
  align-self: flex-start;
}

.hidden-field {
  display: none;
}

@media (max-width: 768px) {
  .contact-page-grid,
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-enquiry-form {
    padding: 24px 18px;
  }

  .contact-page-hero {
    min-height: 320px;
    padding: 65px 6%;
  }
}

/* COMPANY LOGO */

.company-logo {
  display: block;
  width: auto;
  height: 65px;
  max-width: 220px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .company-logo {
    height: 48px;
    max-width: 160px;
  }
}