*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:#10233f;
  background:#eaf5ff;
}
.topbar{
  background:#061a33;
  color:#fff;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:10px 5%;
  font-size:13px;
}
.topbar a{color:#fff;text-decoration:none}
.nav{
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 5%;
  box-shadow:0 3px 16px rgba(4,28,58,.18);
}
.brand img{width:180px;height:65px;object-fit:contain}
.links{display:flex;gap:22px;align-items:center}
.links a{color:#09203e;text-decoration:none;font-weight:700;font-size:14px}
.links a:hover{color:#087bc1}
.menu{display:none;border:0;background:none;font-size:25px}

.hero{
  min-height:650px;
  display:flex;
  align-items:center;
  padding:80px 7%;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 35%,rgba(44,181,244,.55),transparent 28%),
    linear-gradient(115deg,#03142f 0%,#064f91 48%,#087bc1 100%);
}
.hero:after{
  content:"";
  position:absolute;
  inset:auto -10% -150px -10%;
  height:300px;
  background:linear-gradient(180deg,rgba(24,161,226,.35),rgba(0,40,91,.9));
  border-radius:50% 50% 0 0;
}
.hero-content{position:relative;z-index:2;color:#fff;max-width:760px}
.eyebrow{font-size:13px;letter-spacing:2px;font-weight:800}
.eyebrow.dark{color:#075e9f}
.hero h1{font-size:64px;margin:15px 0 5px;line-height:1}
.hero h1 span{color:#ffd11a}
.hero h2{font-size:23px;margin:12px 0}
.hero p:not(.eyebrow){font-size:19px;line-height:1.6;max-width:650px}
.buttons{display:flex;gap:12px;margin-top:28px}
.btn{
  display:inline-block;
  background:#087bc1;
  color:#fff;
  border:0;
  border-radius:8px;
  padding:13px 22px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{background:#075f99}
.btn.outline{background:transparent;border:2px solid #fff}

.section{padding:75px 7%;text-align:center;background:#fff}
.section:nth-of-type(2){background:linear-gradient(135deg,#ffffff 0%,#e5f4ff 100%)}
.section h2{font-size:38px;margin:8px 0 20px;color:#08264a}
.lead{max-width:850px;margin:auto;font-size:18px;line-height:1.7;color:#405a75}
.light{
  background:
    linear-gradient(135deg,#dff1ff 0%,#f5fbff 50%,#d5edff 100%);
}
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:35px;
}
.cards article{
  background:#fff;
  border:1px solid #b8d9ee;
  border-top:5px solid #087bc1;
  border-radius:16px;
  padding:25px;
  min-height:185px;
  box-shadow:0 8px 22px rgba(5,58,103,.13);
}
.cards article:nth-child(2n){border-top-color:#f2b800}
.cards article:nth-child(3n){border-top-color:#df2525}
.cards b{font-size:30px;color:#075e9f}
.cards h3{margin:12px 0 7px;color:#09294d}
.cards p{color:#526b83;line-height:1.5}

#vacancies{
  background:
    linear-gradient(135deg,#052b55 0%,#075f9d 52%,#03244a 100%);
  color:#fff;
}
#vacancies h2{color:#fff}
#vacancies .eyebrow.dark{color:#ffd21a}
.vacancy-single{
  width:min(100%,760px);
  margin:28px auto 0;
  display:flex;
  justify-content:center;
}
.vacancy-single img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  border-radius:14px;
  border:4px solid #fff;
  box-shadow:0 16px 40px rgba(0,0,0,.32);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  text-align:left;
  max-width:1150px;
  margin:auto;
}
.form{
  background:#fff;
  border-radius:18px;
  padding:30px;
  box-shadow:0 12px 35px rgba(9,44,71,.16);
  border:1px solid #b8d9ee;
  border-top:5px solid #087bc1;
}
.form:nth-child(2){border-top-color:#f2b800}
.form h2{font-size:30px;color:#08264a}
.form input,.form select,.form textarea{
  width:100%;
  padding:13px 14px;
  margin:7px 0;
  border:1px solid #b9cfdf;
  border-radius:8px;
  font:inherit;
  background:#fbfdff;
}
.form textarea{min-height:120px;resize:vertical}
.form label{display:block;font-size:13px;font-weight:700;margin-top:5px}
.form label input{font-weight:400}

.contact{
  background:
    linear-gradient(120deg,#03142f 0%,#063d72 55%,#075e9f 100%);
  color:#fff;
  padding:65px 7%;
  display:flex;
  justify-content:space-between;
  gap:50px;
}
.contact h2{font-size:38px;max-width:650px}
.contact-details{display:flex;flex-direction:column;gap:12px;min-width:300px}
.contact-details a{color:#ffd21a;text-decoration:none;font-weight:700}

.director-footer{
  background:#061a33;
  color:#fff;
  padding:20px;
  text-align:center;
  border-top:4px solid #f4b400;
}
.director-footer-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:1rem;
}
.director-label{
  background:#f4b400;
  color:#071d3a;
  padding:5px 11px;
  border-radius:999px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.director-footer strong{font-size:1.12rem}
.director-role{opacity:.95;font-weight:600}

footer{
  background:#020d1e;
  color:#c6d6e5;
  padding:25px 7%;
  display:flex;
  gap:25px;
  justify-content:space-between;
  flex-wrap:wrap;
  font-size:13px;
}
footer strong{color:#ffd21a}
footer a{color:#8bd7ff}

@media(max-width:900px){
  .links{display:none}
  .menu{display:block}
  .cards{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .contact{flex-direction:column}
  .hero h1{font-size:45px}
  .topbar{flex-direction:column;gap:5px}
  .brand img{width:150px;height:55px}
}
@media(max-width:550px){
  .cards{grid-template-columns:1fr}
  .section{padding:55px 5%}
  .hero{padding:60px 5%;min-height:560px}
  .hero h1{font-size:39px}
  .hero h2{font-size:18px}
}


.hero{
  position:relative;
  overflow:hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(3,20,47,.88) 0%,rgba(3,44,84,.66) 48%,rgba(3,20,47,.28) 100%),
    linear-gradient(180deg,rgba(0,31,68,.18),rgba(0,31,68,.45));
  pointer-events:none;
}
.hero::after{
  z-index:1;
}
.hero-content{
  position:relative;
  z-index:2;
}