body{margin:0;font-family:Arial,sans-serif;color:#222;line-height:1.6}
main,footer{max-width:960px;margin:auto;padding:16px 24px}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.logo{max-width:180px;height:auto;display:block}
.top{background:#032d70;padding:16px max(24px,calc((100% - 912px)/2))}
nav a{margin-right:16px;text-decoration:none;color:#fff;font-weight:bold}
nav a:last-child{margin-right:0}
nav a.on,nav a:hover{color:#ff7a6b}
h1{font-size:2em;margin-bottom:.3em}
.hero{text-align:center;padding:40px 0}
.tag{font-size:1.2em;color:#555}
.btn{display:inline-block;background:#c0392b;color:#fff;padding:12px 24px;text-decoration:none;border-radius:4px;border:0;font-size:1em;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.grid div{background:#fff;border:1px solid #ddd;padding:16px;border-radius:6px;text-align:center}
.icon{display:block;margin:0 auto 8px;width:64px;height:64px}
.work{columns:2 280px;padding-left:20px}
.work li{margin-bottom:8px}
form label{display:block;margin-bottom:14px;font-weight:bold}
form input,form textarea{display:block;width:100%;box-sizing:border-box;padding:10px;margin-top:4px;font:inherit;border:1px solid #bbb;border-radius:4px}
footer{text-align:center;border-top:1px solid #ddd;color:#555}
a{color:#c0392b}
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:center;margin:20px 0}
.logos img{width:100%;height:auto;display:block}
.person{display:flex;align-items:center;gap:16px}
.person img{border-radius:50%;object-fit:cover}
.hp{position:absolute;left:-9999px}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.videos figure{margin:0}
.embed{position:relative;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
figcaption{margin-top:6px;font-weight:bold}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin:20px 0}
.thumb{text-decoration:none;color:inherit;display:block}
.thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#000;display:block}
.thumb span{display:block;margin-top:6px;font-weight:bold}
.thumb:hover span{color:#c0392b}
.card{display:block;color:inherit;text-decoration:none}
.grid div:hover{border-color:#032d70;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.card h3{color:#032d70}
.hero{position:relative;overflow:hidden;color:#fff;padding:0;background:#032d70 url(images/hero-poster.jpg) center/cover}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,10,30,.5)}
.hero-in{position:relative;z-index:1;max-width:960px;margin:auto;padding:90px 24px;text-align:center}
.hero h1{margin:0 0 8px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero .tag{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6)}
@media (max-width:700px){.hero .bg{display:none}.hero-in{padding:60px 24px}}
@media (prefers-reduced-motion:reduce){.hero .bg{display:none}}
nav{display:flex;flex-wrap:wrap;gap:6px 16px}
nav a{margin-right:0}
.logo{max-width:100%;height:auto}
@media (max-width:600px){
 .top{padding:12px 16px}
 .top .logo{width:230px}
 nav{gap:4px 14px;font-size:.95em}
 .hero h1{font-size:1.7em;line-height:1.25}
 .hero-in{padding:48px 20px}
 body{overflow-x:hidden}
}