:root{
  --black:#090909;
  --charcoal:#121212;
  --line:#2c2c2c;
  --off:#f2f1ed;
  --white:#fff;
  --muted:#9b9b9b;
  --max:1440px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--black);
  background:var(--off);
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}


/* ========================================
   HEADER
======================================== */

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;

  height:82px;
  padding:0 max(28px,4vw);

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:rgba(9,9,9,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:white;

  overflow:hidden;
}


/* SIERRA LOGO */

.brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  width:150px;
  height:82px;

  flex:0 0 150px;

  padding:0;
  margin:0;

  overflow:hidden;
}

.brand img{
  display:block;

  width:140px;
  height:auto;

  max-width:140px;
  max-height:28px;

  object-fit:contain;
  object-position:left center;

  margin:0;
  padding:0;
}

.brand-word{
  display:none;
}


/* NAVIGATION */

.nav{
  display:flex;
  gap:34px;
  font-size:11px;
  letter-spacing:.16em;
}

.nav a{
  opacity:.72;
  transition:.2s;
}

.nav a:hover{
  opacity:1;
}

.menu-toggle{
  display:none;
  background:none;
  border:0;
  width:34px;
  height:28px;
  padding:5px;
}

.menu-toggle span{
  display:block;
  height:1px;
  background:#fff;
  margin:6px 0;
}


/* ========================================
   HERO
======================================== */

.hero{
  background:var(--black);
  color:white;
  min-height:100vh;
  padding-top:82px;
}

.hero-grid{
  max-width:var(--max);
  margin:auto;

  display:grid;
  grid-template-columns:1.05fr .95fr;

  min-height:calc(100vh - 250px);
}

.hero-copy{
  padding:9vw 5vw 6vw 4vw;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.eyebrow{
  font-size:10px;
  letter-spacing:.22em;
  color:#aaa;
  margin:0 0 28px;
}

h1{
  margin:0;
  font-weight:600;
  font-size:clamp(50px,7vw,116px);
  line-height:.88;
  letter-spacing:-.065em;
  max-width:900px;
}

.lead{
  margin:40px 0 28px;
  max-width:540px;

  font-size:17px;
  line-height:1.7;
  color:#bdbdbd;
}

.text-link{
  font-size:11px;
  letter-spacing:.18em;

  border-bottom:1px solid #555;
  padding-bottom:9px;

  width:max-content;
}

.text-link span{
  margin-left:18px;
}


/* HERO ART */

.hero-art{
  position:relative;
  overflow:hidden;

  background:linear-gradient(145deg,#191919,#050505);
}

.hero-art:after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.28),
      transparent 38%,
      rgba(255,255,255,.025)
    );
}

.steel{
  position:absolute;
  right:-10%;

  height:11%;

  border:1px solid #4c4c4c;

  background:
    linear-gradient(
      180deg,
      #414141 0%,
      #171717 22%,
      #343434 43%,
      #0c0c0c 62%,
      #2b2b2b 100%
    );

  transform:skewY(-12deg) rotate(-13deg);

  box-shadow:0 22px 50px rgba(0,0,0,.5);
}

.steel:after{
  content:"";

  position:absolute;
  inset:16% 0;

  border-top:1px solid #666;
  border-bottom:1px solid #222;
}

.steel-1{
  top:17%;
  width:96%;
  right:-20%;
}

.steel-2{
  top:31%;
  width:84%;
  right:-7%;
}

.steel-3{
  top:46%;
  width:105%;
  right:-28%;
}

.steel-4{
  top:61%;
  width:77%;
  right:3%;
}

.steel-5{
  top:75%;
  width:98%;
  right:-18%;
}

.hero-mark{
  position:absolute;
  bottom:-5%;
  right:4%;

  font-size:28vw;
  line-height:.7;

  font-weight:700;

  color:rgba(255,255,255,.025);

  letter-spacing:-.1em;
}


/* ========================================
   FEATURE STRIP
======================================== */

.feature-strip{
  max-width:var(--max);
  margin:auto;

  border-top:1px solid var(--line);

  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.feature-strip>div{
  min-height:168px;

  padding:30px 28px;

  border-right:1px solid var(--line);

  position:relative;
}

.feature-strip>div:last-child{
  border-right:0;
}

.feature-no{
  font-size:9px;
  color:#676767;

  position:absolute;
  right:22px;
  top:20px;
}

.feature-strip strong{
  font-size:14px;
  line-height:1.25;
  letter-spacing:.12em;
}

.feature-strip small{
  display:block;

  color:#707070;

  margin-top:20px;

  font-size:10px;
  letter-spacing:.08em;
}


/* ========================================
   GENERAL SECTION
======================================== */

.section{
  padding:110px max(28px,4vw);
  scroll-margin-top:80px;
}

.section>*{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

.section-label{
  font-size:10px;
  letter-spacing:.18em;
  color:#777;

  margin-bottom:70px;
}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw;
}

h2{
  margin:0;

  font-size:clamp(44px,5.6vw,90px);
  line-height:.94;

  letter-spacing:-.055em;

  font-weight:500;
}

.body-copy{
  max-width:560px;
  padding-top:12px;
}

.body-copy p{
  font-size:17px;
  line-height:1.8;

  margin:0 0 24px;

  color:#555;
}


/* ========================================
   BUSINESS
======================================== */

.dark{
  background:#101010;
  color:#fff;
}

.dark .section-label{
  color:#666;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  gap:50px;

  margin-bottom:70px;
}

.section-head p{
  max-width:420px;

  color:#929292;

  line-height:1.7;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  border-top:1px solid #303030;
}

.cards article{
  padding:34px 38px 56px 0;

  border-right:1px solid #303030;

  margin-right:38px;
}

.cards article:last-child{
  border:0;
  margin-right:0;
}

.cards span{
  font-size:10px;
  color:#666;
}

.cards h3{
  font-size:16px;
  letter-spacing:.12em;

  margin:44px 0 24px;
}

.cards p{
  font-size:14px;
  line-height:1.8;

  color:#898989;

  max-width:370px;
}


/* ========================================
   PRODUCTS
======================================== */

.product-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:9vw;
}

.muted{
  max-width:420px;

  color:#7d7d7d;

  line-height:1.7;

  margin-top:28px;
}


/* Product list container */

.product-list{
  border-top:1px solid #c9c8c3;
}


/* Large category heading */

.product-list .product-heading{
  display:grid;
  grid-template-columns:60px 1fr auto;

  align-items:center;

  min-height:72px;

  padding:0;

  border-bottom:1px solid #c9c8c3;
}

.product-list .product-heading span{
  font-size:10px;
  color:#8b8b8b;
}

.product-list .product-heading strong{
  font-size:20px;
  font-weight:700;

  letter-spacing:.04em;
}

.product-list .product-heading em{
  font-style:normal;
  font-size:22px;
}


/* Smaller material/product details */

.product-list .product-detail{
  display:block;

  min-height:0;
  height:auto;

  padding:7px 0 7px 60px;

  border:0;
}

.product-list .product-detail strong{
  display:block;

  font-size:14px;
  font-weight:400;

  letter-spacing:0;

  line-height:1.35;

  margin:0;
  padding:0;
}


/* gap before Commodity Product */

.product-list .second-heading{
  margin-top:24px;

  border-top:1px solid #c9c8c3;
}


/* ========================================
   QUALITY
======================================== */

.metal{
  min-height:650px;

  color:white;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.8),
      rgba(0,0,0,.22)
    ),
    repeating-linear-gradient(
      105deg,
      #151515 0 28px,
      #262626 28px 56px,
      #0d0d0d 56px 84px
    );

  position:relative;

  overflow:hidden;
}

.metal:after{
  content:"";

  position:absolute;
  inset:-20%;

  opacity:.45;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 73px,
      rgba(255,255,255,.06) 74px,
      transparent 75px
    );

  transform:rotate(-8deg);
}

.metal>*{
  position:relative;
  z-index:2;
}

.metal .section-label{
  position:absolute;

  top:110px;
  left:max(28px,4vw);
  right:max(28px,4vw);

  color:#7c7c7c;
}

.solution-copy{
  margin:0!important;
  max-width:800px!important;
}

.solution-copy h2{
  font-size:clamp(54px,7vw,105px);
}

.solution-copy>p:last-child{
  font-size:17px;
  line-height:1.7;

  color:#b2b2b2;

  max-width:630px;

  margin-top:30px;
}


/* ========================================
   CONTACT
======================================== */

.contact{
  background:#e7e5df;
  padding-bottom:80px;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:10vw;

  align-items:end;
}

.contact-info{
  display:flex;
  flex-direction:column;

  align-items:flex-start;

  gap:12px;

  padding-bottom:6px;
}

.contact-info a{
  font-size:20px;

  border-bottom:1px solid #aaa;

  padding-bottom:4px;
}

.caption{
  font-size:10px;
  letter-spacing:.18em;

  color:#777;
}

.small{
  font-size:12px;

  color:#777;

  margin-top:18px;
}


/* ========================================
   FOOTER
======================================== */

footer{
  background:#0b0b0b;

  color:#777;

  padding:28px max(28px,4vw);

  display:flex;
  justify-content:space-between;

  font-size:9px;
  letter-spacing:.14em;
}


/* ========================================
   MOBILE
======================================== */

@media(max-width:850px){

  .site-header{
    height:70px;
  }

  .brand{
    height:70px;
    width:132px;
    flex-basis:132px;
  }

  .brand img{
    width:125px;
    max-width:125px;
    max-height:25px;
  }

  .nav{
    position:absolute;

    top:70px;
    left:0;
    right:0;

    background:#0a0a0a;

    display:none;

    flex-direction:column;

    padding:32px 28px 38px;

    border-top:1px solid #292929;
  }

  .nav.open{
    display:flex;
  }

  .menu-toggle{
    display:block;
  }

  .hero{
    padding-top:70px;
  }

  .hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .hero-copy{
    min-height:68vh;
    padding:90px 28px 60px;
  }

  .hero-art{
    min-height:48vh;
  }

  .feature-strip{
    grid-template-columns:1fr 1fr;
  }

  .feature-strip>div:nth-child(2){
    border-right:0;
  }

  .feature-strip>div:nth-child(-n+2){
    border-bottom:1px solid var(--line);
  }

  .two-col,
  .section-head,
  .product-layout,
  .contact-grid{
    display:grid;
    grid-template-columns:1fr;

    gap:48px;
  }

  .section-head{
    align-items:start;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .cards article{
    border-right:0;
    border-bottom:1px solid #303030;

    margin:0;

    padding-right:0;
  }

  .cards article:last-child{
    border-bottom:0;
  }

  .section{
    padding-top:82px;
    padding-bottom:82px;
  }

  .section-label{
    margin-bottom:50px;
  }


  /* Products Mobile */

  .product-list .product-heading{
    grid-template-columns:42px 1fr auto;

    min-height:64px;
  }

  .product-list .product-heading strong{
    font-size:17px;
  }

  .product-list .product-heading em{
    font-size:18px;
  }

  .product-list .product-detail{
    padding:7px 0 7px 42px;
  }

  .product-list .product-detail strong{
    font-size:13px;
  }


  .metal .section-label{
    top:82px;
  }

  footer{
    gap:30px;
    flex-direction:column;
  }
}