:root{
  --blue:#2c7aab; --blue-dk:#235f86; --navy:#16233d;
  --cream:#f4f1e9; --red:#b23a2e; --ink:#16233d;
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--blue);color:var(--cream);min-height:100vh;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* hero — sailor on blue */
.hero{min-height:64vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:52px 0 26px}
.hero img{height:min(52vh,460px);width:auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.28))}
.hero h1{font-size:clamp(1.9rem,5vw,3rem);letter-spacing:.02em;margin-top:22px;font-weight:800}
.hero p{opacity:.9;margin-top:8px;font-size:1.05rem}

/* three boxes */
.boxes{padding:10px 0 70px}
.boxes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:720px){.boxes__grid{grid-template-columns:1fr;max-width:360px;margin:0 auto}}
.box{background:var(--cream);color:var(--ink);border-radius:20px;padding:38px 26px;text-align:center;
  box-shadow:0 16px 40px rgba(20,35,61,.22);transition:transform .2s;text-decoration:none;display:block}
.box:hover{transform:translateY(-6px)}
.box .ic{font-size:3rem;line-height:1}
.box b{display:block;font-size:1.5rem;font-weight:800;margin-top:12px;letter-spacing:.01em}
.box span{display:block;color:#5c6470;font-size:.95rem;margin-top:6px}
.box:nth-child(1) b{color:var(--blue-dk)}
.box:nth-child(2) b{color:var(--red)}
.box:nth-child(3) b{color:var(--navy)}

footer{text-align:center;padding:24px;opacity:.75;font-size:.85rem}