:root{--navy:#022f4b;--blue:#005e86;--btn:#015477;--grey:#54595f;--foot:#549daf;--text:#333}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--text);background:#fff}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 10px}

/* top bar */
.topbar{background:var(--navy);color:#fff}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px}
.topbar h3{margin:10px;font-size:18px;font-weight:600;line-height:1.2}
.topbar a:hover{text-decoration:underline}

/* hero */
.hero{text-align:center;padding:10px 0 40px}
.hero .title{margin:0 0 5px;color:var(--blue);font-size:85px;font-weight:600;line-height:1.2}
.hero .subtitle{margin:0;color:var(--grey);font-size:34px;font-weight:600;line-height:1.4}
.contact{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:0 48px;margin:1% 0 0;padding:0;font-size:22px;color:var(--grey)}
.contact li{display:flex;align-items:center;gap:8px}
.contact svg{width:14px;height:14px;fill:#000}
.btn{display:inline-block;margin-top:3%;padding:16px 32px;background:var(--btn);color:#fff;font-size:16px;font-weight:500;text-transform:uppercase;border-radius:3px}
.btn:hover{background:var(--navy)}
.video{max-width:560px;margin:32px auto 0;aspect-ratio:16/9}
.video iframe{width:100%;height:100%;border:0;display:block}

/* downloads accordion */
.docs{max-width:900px;margin:30px auto 60px;padding:0 15px}
.docs h2{color:var(--blue);font-size:34px;font-weight:600;text-align:center;margin:0 0 24px}
.docs details{border:1px solid #d4d4d4;margin-bottom:-1px}
.docs summary{cursor:pointer;list-style:none;padding:15px 20px;font-weight:600;text-transform:uppercase;color:var(--blue);display:flex;justify-content:space-between;gap:12px}
.docs summary::-webkit-details-marker{display:none}
.docs summary::after{content:"+";font-weight:400;font-size:22px;line-height:1}
.docs details[open] summary{background:#f5f5f5}
.docs details[open] summary::after{content:"\2212"}
.docs .panel{padding:10px 20px 20px;border-top:1px solid #d4d4d4}
.docs .panel p{margin:12px 0;text-transform:uppercase}
.docs .panel a{color:var(--grey)}
.docs .panel a:hover{color:var(--blue);text-decoration:underline}

/* 404 */
.notfound{text-align:center;padding:60px 15px}
.notfound img{max-width:100%;height:auto}
.notfound h2{color:var(--blue);font-size:34px;margin:20px 0 10px}

/* footer */
.footer{background:var(--navy);color:var(--foot);font-size:14px;line-height:1.5;text-transform:uppercase;padding:40px 0 30px}
.footer a:hover{text-decoration:underline}
.footer .cols{display:flex;justify-content:center}
.footer .col{width:50%;max-width:550px;padding:0 12px}
.footer .col p{margin:0 0 21px}
.footer .left{text-align:right;border-right:1px solid var(--foot)}
.social{display:flex;justify-content:center;gap:9px;margin:30px 0 24px}
.social a{width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.social svg{width:16px;height:16px;fill:#fff}
.social .fb{background:#3b5998}.social .yt{background:#cd201f}.social .in{background:#0077b5}
.copy{text-align:center;font-size:12px;margin:0}

@media(max-width:1024px){.hero .title{font-size:64px}.hero .subtitle{font-size:28px}}
@media(max-width:767px){
  .hero .title{font-size:42px}.hero .subtitle{font-size:20px}
  .contact{font-size:18px;gap:8px 24px}
  .topbar h3{font-size:14px}
  .footer .cols{flex-direction:column}
  .footer .col{width:100%;max-width:none;text-align:center}
  .footer .left{border-right:0;border-bottom:1px solid var(--foot);margin-bottom:20px}
}