/* Stud Chopper - static rebuild of the original WordPress (Salient) site */
:root{
  --red:#e22726;
  --black:#000;
  --header:#111;
  --topbar:#333;
  --text:#000;
  --wrap:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font-family:Montserrat,Arial,sans-serif;font-size:19px;line-height:32px;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--red)}
h2{color:var(--red);font-size:44px;line-height:54px;font-weight:700;margin:0 0 24px;text-transform:uppercase}
.home h2{font-size:33px;line-height:40px}
h3{font-size:28px;line-height:36px;font-weight:700;margin:0 0 16px;text-transform:uppercase}
h4{font-size:22px;line-height:30px;font-weight:600;margin:0 0 28px}
p{margin:0 0 28px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:#fff;color:#000;padding:8px 12px;z-index:200}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;transition:transform .3s ease}
.topbar{background:var(--topbar);height:42px}
.topbar .inner,.mainbar .inner{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:100%}
.topbar .inner{justify-content:flex-end}
.social{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.social a{display:flex;align-items:center;color:#fff;opacity:.85}
.social a:hover{opacity:1}
.social svg{width:16px;height:16px;fill:currentColor}
.mainbar{background:var(--header);height:204px}
.logo img{height:100px;width:auto}
.nav{list-style:none;margin:0;padding:0;display:flex;gap:44px}
.nav>li{position:relative}
.nav a{color:#fff;text-decoration:none;font-size:21px;font-weight:700;line-height:204px;display:block}
.nav>li>a:hover,.nav>li.current>a{color:var(--red)}
.nav .sub{display:none;position:absolute;left:-20px;top:150px;min-width:240px;background:var(--header);list-style:none;margin:0;padding:10px 0;border-top:3px solid var(--red)}
.nav li:hover>.sub,.nav li:focus-within>.sub{display:block}
.nav .sub a{line-height:22px;padding:10px 20px;font-size:16px;font-weight:600}
.nav .sub a:hover{color:var(--red)}
.menu-toggle{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px}
.menu-toggle svg{width:30px;height:30px;fill:currentColor}

/* home: header hidden over the hero, slides down once scrolled */
.home .site-header{position:fixed;left:0;right:0;transform:translateY(-100%)}
.home.scrolled .site-header{transform:none}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto}
.full img{width:100%}
.section{padding:56px 0 28px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.col{min-width:0}
.home .two-col .col:first-child{padding-top:75px}
.home .models-band{margin-top:56px}

/* fancy list: red caret bullets */
.fancy-ul{list-style:none;margin:0 0 28px;padding:0}
.fancy-ul li{position:relative;padding-left:26px}
.fancy-ul li::before{content:"";position:absolute;left:2px;top:11px;border-left:8px solid var(--red);border-top:6px solid transparent;border-bottom:6px solid transparent}
.fancy-ul.bold li{font-weight:700}

/* pattern background behind the home Products section */
.pattern{background:url(/wp-content/uploads/home-pattern-4.png) 0 0/cover no-repeat}

/* products page: image swap on hover */
.models-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:75px 0 40px}
.swap{position:relative;display:block}
.swap img{width:100%}
.swap .roll{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.swap:hover .roll,.swap:focus .roll{opacity:1}

/* product detail pages */
.product-page{background:url(/wp-content/uploads/bg-product-3.png) top center no-repeat}
.product-title{padding:28px 0}
.product-title img{width:600px;max-width:100%}
.product-body{padding:16px 0 0}
.product-body .col img{margin-bottom:28px}
.chart{max-width:414px;margin:0 0 30px}

/* call / spec sheet block */
.cta{text-align:center;padding:40px 0 20px}
.cta .spec-btn{display:inline-block}
.cta .spec-btn img{width:255px;margin:0 auto}

/* slider */
.slider{position:relative;overflow:hidden;height:613px;margin:56px 0 0;background:#111}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease}
.slide.on{opacity:1}
.slider button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);border:0;color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:24px;line-height:48px;z-index:2}
.slider button:hover{background:var(--red)}
.slider .prev{left:20px}.slider .next{right:20px}
.slider .dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:2}
.slider .dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.slider .dots span.on{background:#fff}

.usa{text-align:center;padding:28px 0}
.usa img{width:200px;margin:0 auto}

/* ---------- footer ---------- */
.site-footer{position:relative;background:var(--red);color:#fff;text-align:center;padding:58px 20px;margin-top:70px}
.site-footer .li-badge{position:absolute;left:50%;top:-35px;transform:translateX(-50%)}
.site-footer .li-badge img{width:70px;height:70px}
.site-footer h6{margin:0;font-size:19px;line-height:32px;font-weight:500;color:#fff}
.site-footer h6 a{color:#fff;text-decoration:none;font-size:15px}
.site-footer h6 a:hover{text-decoration:underline}

/* ---------- contact ---------- */
.form p{margin:0 0 18px}
.form label{display:block;font-weight:400}
.form input,.form textarea{width:100%;font:14px/1.4 Montserrat,Arial,sans-serif;color:#555;background:rgba(0,0,0,.04);border:2px solid transparent;border-radius:0;padding:12px 14px;height:48px}
.form textarea{height:264px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--red)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button{background:var(--red);color:#fff;border:0;font:600 18px Montserrat,Arial,sans-serif;padding:0 20px;height:52px;cursor:pointer}
.form button:hover{background:#c41f1e}
.form-msg{padding:14px 16px;margin:0 0 20px;font-size:16px;line-height:24px}
.form-msg.ok{background:#eaf7ee;border-left:4px solid #2e9d4f}
.form-msg.err{background:#fdeceb;border-left:4px solid var(--red)}

/* ---------- responsive ---------- */
@media (max-width:999px){
  .wrap{padding-left:20px;padding-right:20px}
  .mainbar{height:96px}
  .logo img{height:64px}
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--header);flex-direction:column;gap:0;padding:10px 0}
  .nav.open{display:flex}
  .nav a{line-height:24px;padding:12px 20px}
  .nav .sub{display:block;position:static;border:0;padding:0 0 0 16px;background:transparent}
  .two-col,.models-grid{grid-template-columns:1fr;gap:30px}
  .home .two-col .col:first-child{padding-top:0}
  .slider{height:340px}
  h2{font-size:32px;line-height:40px}
  .home h2{font-size:28px;line-height:36px}
}
