/* Theme */
:root{--navy:#0A1F44;--teal:#00C6D7;--accent:#FF6B35;--bg:#F5F7FA;--ink:#0A1F44;--ink-soft:#374865;--shadow:0 8px 20px rgba(0,0,0,.08)}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:'Open Sans',Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
h1,h2,h3{font-family:'Montserrat',Arial,sans-serif;color:var(--ink)}
a{text-decoration:none;color:inherit;transition:all .18s ease}
header{background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:14px 32px;gap:16px;position:sticky;top:0;z-index:10;box-shadow:0 2px 14px rgba(0,0,0,.18)}
header .logo{display:flex;align-items:center;gap:12px;font-weight:700}
header .logo img{height:60px;width:auto;display:block}
header .logo .brand-name{letter-spacing:.06em;font-size:1.15em;font-weight:800;text-transform:uppercase;color:#fff}
nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
nav a{color:#fff;opacity:.95}
nav a:hover,nav a.active{border-bottom:2px solid var(--teal);padding-bottom:4px;opacity:1}
nav .btn{background:var(--accent);padding:8px 14px;border-radius:8px;font-weight:700}
nav .btn:hover{filter:brightness(.95);transform:translateY(-1px)}
/* Push the careers and contact links to the far right. When a list
   item has the class `right`, it receives margin‑left:auto; this
   causes itself and any subsequent siblings to align to the end of
   the flex container. */
nav li.right{margin-left:auto}

/* Make all inline images responsive by default. Icons and other
   images will shrink proportionally within their containers. */
img{max-width:100%;height:auto;}
nav a:focus-visible,.cta-btn:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/*
  Hero sections: apply a slightly darker overlay for improved contrast
  on busy background photos. The overlay uses a 90% opacity instead of
  the previous 88% to ensure headlines remain readable across
  different devices and lighting conditions. All hero variants share
  these definitions to maintain consistency.
*/
.hero,.about-hero,.services-hero,.contact-hero{color:#fff;text-align:center;padding:96px 20px}
.hero{background:linear-gradient(rgba(10,31,68,.9),rgba(10,31,68,.9)),url('images/hero-home.jpg') center/cover no-repeat}
.about-hero{background:linear-gradient(rgba(10,31,68,.9),rgba(10,31,68,.9)),url('images/hero-about.jpg') center/cover no-repeat}
.services-hero{background:linear-gradient(rgba(10,31,68,.9),rgba(10,31,68,.9)),url('images/hero-services.jpg') center/cover no-repeat}
.contact-hero{background:linear-gradient(rgba(10,31,68,.9),rgba(10,31,68,.9)),url('images/hero-contact.jpg') center/cover no-repeat}
.hero h1,.about-hero h1,.services-hero h1,.contact-hero h1{color:#fff;font-weight:800;letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.hero p,.about-hero p,.services-hero p,.contact-hero p{color:#fff;opacity:.98;text-shadow:0 2px 6px rgba(0,0,0,.55)}
.cta-btn{display:inline-block;background:var(--teal);color:#fff;padding:12px 18px;border-radius:8px;font-weight:800;box-shadow:var(--shadow)}
.cta-btn:hover{background:var(--accent)}
.section{padding:56px 20px}.container{max-width:1100px;margin:0 auto}
.content{max-width:900px;margin:40px auto;padding:0 20px;line-height:1.7;color:var(--ink-soft)}
.cards{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:24px}
.card{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:22px;flex:1 1 280px;max-width:340px}
.card h3{color:var(--teal);margin-top:8px}.card img{width:64px;height:64px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.metric{background:#fff;padding:18px;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.06);text-align:center}
.metric .big{font-size:28px;font-weight:800;color:var(--navy)}
.values{list-style:none;padding:0}.values li{margin:8px 0}
.contact-form{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.contact-form input,.contact-form textarea{padding:12px;border:1px solid #d9dee7;border-radius:8px;background:#fff}
footer{background:var(--navy);color:#fff;text-align:center;padding:22px;margin-top:40px}
footer a{color:var(--teal)}
@media (max-width:960px){nav ul{gap:14px}}
@media (max-width:720px){header{flex-wrap:wrap;gap:8px}nav ul{flex-wrap:wrap}header .logo .brand-name{font-size:1.05em}}
/* On narrow screens, shrink the logo image to keep the header
   compact. */
@media (max-width:720px){header .logo img{height:50px;}}