@font-face{font-family:"Roboto Slab";font-weight:400;font-display:swap;src:url(roboto-slab-400.woff2) format("woff2")}
@font-face{font-family:"Roboto Slab";font-weight:700;font-display:swap;src:url(roboto-slab-700.woff2) format("woff2")}

:root{--o:#f27620;--t:#525252;--h:#242424}
*{box-sizing:border-box}
body{margin:0;background:#eee;color:var(--t);font:14px "Roboto Slab",Georgia,serif}
a{color:var(--o);text-decoration:none}
body{background:#2a2828}
.site{min-height:100vh;display:flex;flex-direction:column;background:#fff}
main{background:#fff}
.col{max-width:960px;margin:0 auto}

header{height:160px;padding:30px 60px}
.logo{display:block;width:41.6667%;height:100px;background:url(logo.svg) no-repeat 0 0/contain}

.hero{padding:200px 60px}
.hero .col{padding:8px 0}
h1{margin:0;padding:2px 0;font-size:60px;line-height:66px;color:#000}
h1 span{color:var(--o)}
.hero p{margin:40px 0 0;padding:2px 0;font-size:24px;line-height:36px}

footer{flex:1;padding:70px 80px;background:#2a2828;color:#f7f7f7}
footer .col{padding:10px 6px 0 0}
.fb{margin:3px 0 8px;padding:2px 0 4px;line-height:21px}
.fb h3{margin:0;font-size:16px;line-height:24px}
.fb p{margin:0}
footer a{color:inherit}

.legal{padding:108px 40px 100px}
.legal h1{font-size:24px;line-height:31.5px;color:var(--h)}
.legal h2{margin:30px 0 8px;padding:2px 0;font-size:18px;line-height:27px;color:var(--h)}
.legal p,.legal li{font-size:15px;line-height:19.5px}
.legal p{margin:0 0 19.5px}
.legal ul{margin:0 0 19.5px 30px;padding:0}

::selection{background:var(--o);color:#fff}
footer a{background:linear-gradient(var(--o),var(--o)) 0 100%/0 1px no-repeat;transition:background-size .3s}
footer a:hover,footer a:focus-visible{background-size:100% 1px}

.l{background:none}
.l svg{display:block;width:100%;height:100%}
.l path,.l rect{fill:#d9d9d9;animation:up .6s both}
.l :nth-child(2){animation-delay:0.09s}.l :nth-child(3){animation-delay:0.18s}.l :nth-child(4){animation-delay:0.27s}.l :nth-child(5){animation-delay:0.36s}.l :nth-child(6){animation-delay:0.45s}.l :nth-child(7){animation-delay:0.54s}.l :nth-child(8){animation-delay:0.63s}
.hero h1,.hero p,.legal .col{animation:up .7s both}
.hero h1{animation-delay:.7s}
.hero p{animation-delay:.9s}
.legal .col{animation-delay:.2s}
footer{animation:f 1s .9s both}
@keyframes up{from{opacity:0;transform:translateY(14px)}}
@keyframes f{from{opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:767px){
  header{height:auto;padding:24px}
  .logo{width:min(270px,72%);height:auto;aspect-ratio:4/1}
  .hero{padding:90px 24px}
  h1{font-size:48px;line-height:52.8px}
  .hero p{margin-top:32px;font-size:19px;line-height:28.5px}
  footer{flex:1;padding:50px 24px}
  .legal{padding:60px 24px}
}