:root{
  --navy:#102b52;
  --navy2:#173b6d;
  --gray:#66717d;
  --light:#f6f8fb;
  --white:#fff;
  --line:#dfe5ec;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#18212b;background:#fff}
a{text-decoration:none;color:inherit}
.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);padding:14px 6%;display:flex;align-items:center;justify-content:space-between}
.nav img{height:54px;width:auto}
.navlinks{display:flex;gap:28px;font-size:14px;font-weight:700;color:var(--navy)}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:14px 22px;border-radius:6px;font-weight:700}
.btn:hover{background:var(--navy2)}
.hero{background:linear-gradient(135deg,#f7f9fc 0%,#fff 58%);padding:76px 7% 70px}
.hero-inner{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
.eyebrow{color:var(--navy);font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:800;margin-bottom:16px}
h1{font-family:Georgia,serif;color:var(--navy);font-size:54px;line-height:1.04;margin:0 0 20px}
.hero p{font-size:19px;line-height:1.65;color:#52606d;max-width:650px}
.hero-actions{display:flex;gap:14px;align-items:center;margin-top:28px;flex-wrap:wrap}
.secondary{display:inline-block;border:1px solid var(--navy);color:var(--navy);padding:13px 21px;border-radius:6px;font-weight:700}
.hero-photo{width:100%;max-width:470px;justify-self:end;border-radius:16px;box-shadow:0 20px 50px rgba(16,43,82,.18)}
.trust{padding:22px 7%;border-bottom:1px solid var(--line);background:#fff}
.trust-inner{max-width:1050px;margin:auto;display:flex;justify-content:center;gap:42px;flex-wrap:wrap;color:#52606d;font-size:14px;font-weight:700}
.section{padding:76px 7%}
.section.light{background:var(--light)}
.wrap{max-width:1100px;margin:auto}
.section-title{text-align:center;color:var(--navy);font-family:Georgia,serif;font-size:38px;margin:0 0 12px}
.section-sub{text-align:center;color:#65727f;max-width:680px;margin:0 auto 42px;line-height:1.6}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px;box-shadow:0 8px 25px rgba(20,40,70,.05)}
.card h3{color:var(--navy);font-family:Georgia,serif;font-size:23px;margin:0 0 12px}
.card p{color:#65727f;line-height:1.6;margin:0}
.icon{width:42px;height:42px;border-radius:50%;background:#eaf0f7;color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:18px}
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:center}
.about img{width:100%;max-width:390px;border-radius:14px}
.about h2{color:var(--navy);font-family:Georgia,serif;font-size:40px;margin:0 0 18px}
.about p{color:#5d6975;line-height:1.75}
.contact{background:var(--navy);color:#fff;text-align:center}
.contact h2{color:#fff}
.contact p{color:#dce6f1;max-width:650px;margin:0 auto 28px;line-height:1.6}
.contact .btn{background:#fff;color:var(--navy)}
.contact .btn:hover{background:#edf2f7}
footer{padding:25px 7%;text-align:center;color:#7a848e;font-size:13px}
@media(max-width:800px){
  .navlinks{display:none}
  .hero-inner,.about{grid-template-columns:1fr}
  h1{font-size:42px}
  .hero-photo{justify-self:center}
  .cards{grid-template-columns:1fr}
  .section{padding:58px 6%}
}

/* Mobile and tablet refinements */
img { height: auto; }
.nav { gap: 16px; }
.nav > a:first-child { flex: 0 0 auto; }
.navlinks { flex-wrap: wrap; }
.hero-inner, .about { min-width: 0; }
.hero-photo, .about img { display: block; }
a:focus-visible { outline: 3px solid #8aa9d1; outline-offset: 3px; }
@media (max-width: 800px) {
  .nav { padding: 12px 5%; flex-wrap: wrap; }
  .nav img { height: 46px; }
  .navlinks { display: flex; order: 3; width: 100%; justify-content: center; gap: 22px; padding-top: 8px; }
  .nav > .btn { padding: 11px 15px; }
  .hero { padding: 52px 6% 54px; }
  .hero-inner { gap: 34px; }
  .hero-photo { max-width: 420px; justify-self: center; }
  .about { gap: 32px; }
  .about img { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .navlinks { gap: 18px; font-size: 13px; }
  .nav > .btn { font-size: 13px; }
  h1 { font-size: clamp(34px, 9vw, 42px); }
  .hero p { font-size: 17px; }
  .section-title { font-size: 32px; }
  .about h2 { font-size: 33px; }
  .card { padding: 24px; }
  .trust-inner { gap: 14px 22px; text-align: center; }
}