: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}
html,body{min-height:100%}
body{
  font-family:var(--sans);color:var(--cream);
  background-color:var(--blue);
  background-image:url(../images/sailor.svg);
  background-repeat:no-repeat;
  background-position:center 46%;
  background-size:auto 74vh;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

.page{min-height:100vh;display:flex;flex-direction:column}
.top{text-align:center;padding:34px 20px 10px}
.top h1{font-size:clamp(2.2rem,7vw,4rem);font-weight:800;letter-spacing:.01em;text-shadow:0 4px 22px rgba(0,0,0,.28)}
.top p{opacity:.92;margin-top:6px;font-size:1.1rem;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.spacer{flex:1 1 auto;min-height:38vh}

/* three boxes */
.boxes{padding:6px 0 20px}
.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:30px 24px;text-align:center;
  box-shadow:0 16px 40px rgba(20,35,61,.28);transition:transform .2s;text-decoration:none;display:block}
.box:hover{transform:translateY(-6px)}
.box .ic{font-size:2.8rem;line-height:1}
.box b{display:block;font-size:1.45rem;font-weight:800;margin-top:10px}
.box span{display:block;color:#5c6470;font-size:.92rem;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:18px 24px 26px;opacity:.8;font-size:.85rem;text-shadow:0 2px 8px rgba(0,0,0,.25)}

/* keep the sailor from crowding the boxes on small screens */
@media(max-width:720px){
  body{background-size:auto 42vh;background-position:center 30%}
  .spacer{min-height:20vh}
}