*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{--red:#e30613;--ink:#0a0a0a;--mute:#888;--line:#e8e8e8;--bg:#fff;--soft:#f5f5f5}
  html{scroll-behavior:smooth}
  @font-face{font-family:'Proxima Nova';src:url('/static/fonts/ProximaNova-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
  @font-face{font-family:'Proxima Nova';src:url('/static/fonts/ProximaNova-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'Proxima Nova';src:url('/static/fonts/ProximaNova-Semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:'Proxima Nova';src:url('/static/fonts/ProximaNova-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
  

  @font-face {
    font-family: "Geom Graphic";
    src: url("/static/fonts/GeomGraphic-Bold.otf");
    src: url("/static/fonts/GeomGraphic-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Geom Graphic";
    src: url("/static/fonts/GeomGraphic-Regular.otf");
    src: url("/static/fonts/GeomGraphic-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Geom Graphic";
    src: url("/static/fonts/GeomGraphic-SemiBold.otf");
    src: url("/static/fonts/GeomGraphic-SemiBold.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  /*@font-face{
      font-family: "Geom Graphic";
      src: url("/static/fonts/Geom Graphic Light.ttf");
      src: url("/static/fonts/Geom Graphic Light.ttf")format("truetype");
      font-weight:300;
      font-style:normal;
      font-display:swap;
  }
  
  @font-face{
      font-family: "Geom Graphic";
      src: url("/static/fonts/Geom Graphic Bold.ttf");
      src: url("/static/fonts/Geom Graphic Bold.ttf")format("truetype");
      font-weight:700;
      font-style:normal;
      font-display:swap;
  }*/
  @font-face {
    font-family: "Proxima Nova";
    src: url("/static/fonts/ProximaNova-Light.otf");
    src: url("/static/fonts/ProximaNova-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Proxima Nova";
    src: url("/static/fonts/ProximaNova-Regular.otf");
    src: url("/static/fonts/ProximaNova-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Proxima Nova";
    src: url("/static/fonts/ProximaNova-Semibold.otf");
    src: url("/static/fonts/ProximaNova-Semibold.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Proxima Nova";
    src: url("/static/fonts/ProximaNova-Bold.otf");
    src: url("/static/fonts/ProximaNova-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  body{font-family:"Proxima Nova", sans-serif;font-weight:300;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
  ul{list-style:none}
  .container{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}
.stripe {
    height: 5px;
    background: linear-gradient(90deg, #fdb913 0 33.33%, #006a44 33.33% 66.66%, #c1272d 66.66% 100%);
}

 .promo{background:#000;color:#fff;text-align:center;font-size:11px;letter-spacing:.25em;padding:8px 10px;text-transform:uppercase}

  /* nav */
  .nav{background:#000;color:#fff;position:sticky;top:0;z-index:50}
  .menu-social{display:none}
  .nav-inner{display:flex;align-items:center;justify-content:flex-start;gap:40px;padding:14px 20px;max-width:1240px;margin:0 auto}
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.18em;font-size:14px;text-transform:uppercase;margin-right:auto}
  .icons{margin-left:auto}
  .menu{display:flex;gap:28px;align-items:center}
  .menu a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent;transition:.2s;font-weight: 600;}
  .menu a:hover{color:var(--red);border-color:var(--red)}
  .icons{display:flex;gap:18px;font-size:16px}
  .icons svg{width:18px;height:18px;fill:#fff;transition:.2s}
  .icons a:hover svg{fill:var(--red)}
  .burger{display:none;flex-direction:column;gap:5px;padding:6px}
  .burger span{width:24px;height:2px;background:#fff;transition:.3s}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu-social {
    display: none;
}
.icons {
    display: flex;
    gap: 18px;
    font-size: 16px;
}
.icons {
    margin-left: auto;
}

  /* breadcrumb */
  .crumb{background:var(--soft);padding:14px 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
  .crumb a:hover{color:var(--red)}
  .crumb .sep{margin:0 10px;color:#bbb}
  

  .burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
}

button {
    font: inherit;
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    font-size: 14px;
    text-transform: uppercase;
    margin-right: auto;
}
  /* footer */
  footer{background:#0c0c0c;color:#aaa;padding:60px 0 24px;margin-top:0}
  .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:40px}
  footer h4{color:#fff;font-size:13px;letter-spacing:.25em;text-transform:uppercase;margin-bottom:18px}
  footer a{display:block;padding:5px 0;font-size:14px;color:#aaa;transition:.2s}
  footer a:hover{color:#fff}
  .news{display:flex;gap:6px}
  .news input{flex:1;background:#1a1a1a;border:1px solid #2a2a2a;color:#fff;padding:10px 12px;font-size:13px;outline:none}
  .news button{background:var(--red);color:#fff;padding:10px 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
  .news button:hover{background:#fff;color:var(--red)}
  .copyr{margin-top:40px;padding-top:20px;border-top:1px solid #1f1f1f;text-align:center;font-size:14px;color:#666}
  .fsoc{display:flex;gap:14px;margin-top:14px}
  .fsoc svg{width:18px;height:18px;fill:#aaa;transition:.2s}
  .fsoc a:hover svg{fill:#fff}


@media (max-width: 900px) {
    .burger {
        display: flex;
        z-index: 60;
        margin-left: auto;
    }
}

@media (max-width: 900px) {
    .menu {
        position: fixed;
        top: 52px;
        left: 0;
        height: calc(100vh - 60px);
        width: min(320px, 85vw);
        background: #000;
        flex-direction: column;
        align-items: stretch;
        padding: 18px 24px;
        gap: 0;
        transform: translateX(-100%);
        transition: transform .35s ease;
        z-index: 60;
        overflow-y: auto;
    }
}

@media (max-width: 900px) {
    .menu a {
        font-size: 14px;
        width: 100%;
        border-bottom: 1px solid #1f1f1f;
        padding: 14px 0;
    }
}
@media (max-width: 900px) {
    .menu.open {
        transform: translateX(0);
        box-shadow: 6px 0 24px rgba(0, 0, 0, .5);
    }
}

@media (max-width: 900px) {
    .menu-social {
        display: flex;
        gap: 18px;
        padding-top: 18px;
    }
}
@media (max-width: 900px) {
    .icons {
        display: none;
    }
}

@media (max-width: 900px) {
    .menu-social svg {
        width: 20px;
        height: 20px;
        fill: #fff;
    }
        .fgrid{grid-template-columns:1fr 1fr;gap:30px}

}
.crumb a {
    font-weight: 600;
}
    @media(max-width:768px) {
        .container {
            padding: 0 18px !important
        }
      }
 @media (max-width: 560px) {
    .nav-inner {
        padding: 12px 6px;
    }
        .fgrid{grid-template-columns:1fr;gap:28px}

  }



.fgrid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 40px;
}

@media (max-width: 900px) {
    .fgrid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}
  @media (max-width: 560px) {
    .fgrid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}