:root{--ink:#0c2340;--steel:#16345c;--hazard:#f59e0b;--blue:#1d6fd1;--sand:#eef2f7;--white:#fff;--mute:#5d6b7e}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:16px/1.65 'Figtree',sans-serif;color:var(--ink);background:#fff}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--hazard);outline-offset:2px}
h1,h2,h3{font-family:'Big Shoulders Display',sans-serif;line-height:1.05;font-weight:800}
.wrap{width:min(1180px,92%);margin:0 auto}
.stripe{height:10px;background:linear-gradient(90deg,var(--hazard),var(--blue))}
/* header */
.topbar{background:var(--ink);color:#d6e0ee;font-size:14px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 0;gap:12px;flex-wrap:wrap}
.topbar b{color:var(--hazard)}
.social{display:flex;gap:6px}
.social a{width:28px;height:28px;display:grid;place-items:center;border:1px solid #2c4a6e;border-radius:50%}
.social a:hover{background:var(--hazard);color:var(--ink);border-color:var(--hazard)}
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #ddd}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav img{height:98px;width:auto}
.menu{display:flex;gap:6px;align-items:center}
.menu a{padding:10px 14px;font-weight:600;border-bottom:3px solid transparent}
.menu a:hover,.menu a.on{border-color:var(--hazard)}
.btn{display:inline-block;background:var(--hazard);color:var(--ink);font-weight:700;padding:12px 24px;border:2px solid var(--hazard);cursor:pointer;font:700 16px 'Figtree',sans-serif}
.btn:hover{background:var(--ink);color:var(--hazard);border-color:var(--ink)}
.btn.ghost{background:transparent;color:#fff;border-color:#fff}
.btn.ghost:hover{background:#fff;color:var(--ink)}
.burger{display:none;background:none;border:2px solid var(--ink);padding:8px 12px;font-weight:700;cursor:pointer}
/* hero slider */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.slide{display:none;min-height:620px;background-size:cover;background-position:center;position:relative}
.slide.on{display:block}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,35,64,.93) 35%,rgba(12,35,64,.4))}
.slide .wrap{position:relative;display:flex;align-items:center;min-height:620px}
.slide div.t{max-width:680px;padding:60px 0}
.slide h1{font-size:clamp(44px,7vw,92px);text-transform:uppercase;margin-bottom:18px}
.slide p{font-size:18px;color:#d6e0ee;margin-bottom:28px}
.slide .btn+.btn{margin-left:10px}
.dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.dots button{width:34px;height:6px;border:0;background:#6f86a3;cursor:pointer}
.dots button.on{background:var(--hazard)}
/* sections */
section{padding:84px 0}
.sec-h{font-size:clamp(34px,5vw,56px);text-transform:uppercase;margin-bottom:36px}
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.about img{width:100%;max-height:520px;object-fit:contain;background:var(--sand)}
.about p{margin-bottom:16px;max-width:62ch}
.sand{background:var(--sand)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border-bottom:5px solid var(--hazard);overflow:hidden}
.card img{width:100%;height:280px;object-fit:cover;transition:transform .4s}
.card:hover img{transform:scale(1.04)}
.card h3{font-size:26px;padding:16px 20px;text-transform:uppercase}
.card span{display:block;overflow:hidden}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal figure{background:#000;height:300px;overflow:hidden}
.gal img,.gal video{width:100%;height:100%;object-fit:cover}
/* page head */
.phead{background:var(--steel);color:#fff;padding:64px 0}
.phead h1{font-size:clamp(40px,6vw,72px);text-transform:uppercase}
.phead nav{color:#b5c5db;margin-top:8px}
.phead nav a:hover{color:var(--hazard)}
.phead nav b{color:var(--hazard)}
/* counters */
.stats{background:var(--ink);color:#fff;padding:56px 0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stats strong{display:block;font:800 64px 'Big Shoulders Display',sans-serif;color:var(--hazard)}
/* contact */
.info{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:40px}
.info div{background:var(--ink);color:#fff;padding:28px}
.info h2{font-size:30px;color:var(--hazard);margin-bottom:6px}
.cwrap{display:grid;grid-template-columns:2fr 1fr;gap:36px}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form .full{grid-column:1/-1}
input,textarea{width:100%;padding:13px 14px;border:2px solid #d4d4d4;font:16px 'Figtree',sans-serif;background:#f7f9fc}
input:focus,textarea:focus{border-color:var(--hazard);outline:0}
textarea{min-height:140px}
iframe{width:100%;height:100%;min-height:360px;border:0}
/* footer */
footer{background:var(--ink);color:#c3d0e2;padding-top:64px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:44px}
footer h2{font-size:26px;color:#fff;margin-bottom:14px;text-transform:uppercase}
footer li{list-style:none;padding:3px 0}
footer a:hover{color:var(--hazard)}
.copy{border-top:1px solid #24405f;padding:18px 0;font-size:14px}
.copy a{color:var(--hazard)}
@media(max-width:900px){
.burger{display:block}
.menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;border-bottom:3px solid var(--hazard)}
.menu.open{display:flex}
.nav .btn.sup{display:none}
.about,.cwrap{grid-template-columns:1fr}
.grid,.gal{grid-template-columns:1fr 1fr}
.fgrid{grid-template-columns:1fr 1fr}
.stats .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
.grid,.gal,.fgrid,.info,form{grid-template-columns:1fr}
section{padding:56px 0}
.slide,.slide .wrap{min-height:540px}
.card img{height:230px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* animation */
.btn{position:relative;overflow:hidden;transition:background .3s,color .3s,transform .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(12,35,64,.25)}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:rgba(255,255,255,.45);transform:skewX(-25deg)}
.btn:hover::after{left:130%;transition:left .6s}
.menu a{transition:border-color .3s,color .3s}
.menu a:hover{color:var(--blue)}
.card{box-shadow:0 2px 10px rgba(12,35,64,.08);transition:transform .35s,box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 34px rgba(12,35,64,.18);border-color:var(--blue)}
.gal figure img{transition:transform .5s}
.gal figure:hover img{transform:scale(1.08)}
.social a{transition:background .3s,transform .3s}
.social a:hover{transform:translateY(-3px)}
.slide.on{animation:fade 1s ease both}
.slide.on h1{animation:up .8s .15s cubic-bezier(.2,.7,.2,1) both}
.slide.on p{animation:up .8s .35s cubic-bezier(.2,.7,.2,1) both}
.slide.on .btn{animation:up .8s .55s cubic-bezier(.2,.7,.2,1) both}
.dots button{transition:background .3s,width .3s}
.dots button.on{width:56px}
.stripe{background-size:200% 100%;animation:slide 6s linear infinite alternate}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes slide{to{background-position:100% 0}}
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .card.rv.in:hover{transform:translateY(-8px)}
@media(prefers-reduced-motion:reduce){.slide.on,.slide.on *,.stripe{animation:none!important}.js .rv{opacity:1;transform:none}}