/*==================================================
ROOT
==================================================*/
:root{
  --background:#101010;
  --background-soft:#151515;
  --background-card:#1b1b1b;
  --gold:#c6a66b;
  --gold-light:#dfc58c;
  --white:#ffffff;
  --grey:#969696;
  --text:#d4d4d4;
  --border:rgba(255,255,255,.09);
  --sidebar-width:86px;
  --container:1340px;
  --transition:.35s ease;
}
/*==================================================
RESET
==================================================*/
.d8_2 *,
.d8_2 *::before,
.d8_2 *::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html.d8_2{
  scroll-behavior:smooth;
}
.d8_2 body{
  background:var(--background);
  color:var(--white);
  font-family:"Montserrat",sans-serif;
  overflow-x:hidden;
}
.d8_2 img{
  width:100%;
  display:block;
}
.d8_2 a{
  color:inherit;
  text-decoration:none;
}
.d8_2 ul{
  list-style:none;
}
.d8_2 button,
.d8_2 input,
.d8_2 textarea{
  font-family:inherit;
}
/*==================================================
GLOBAL
==================================================*/
.d8_2 .container{
  width:min(92%,var(--container));
  margin:auto;
}
.d8_2 .section{
  position:relative;
  padding:120px 0;
}
.d8_2 .section-title{
  font-size:clamp(3rem,5vw,5rem);
  font-weight:800;
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.d8_2 .section-title span{
  color:var(--gold);
}
.d8_2 .section-label{
  display:block;
  color:var(--gold);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.3em;
  margin-bottom:20px;
}
.d8_2 .section-description{
  color:var(--text);
  max-width:600px;
  line-height:1.8;
}
.d8_2 .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:17px 45px;
  background:var(--gold);
  color:#fff;
  border-radius:50px;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.75rem;
  font-weight:600;
  transition:var(--transition);
}
.d8_2 .btn:hover{
  background:var(--gold-light);
  transform:translateY(-3px);
}
/*==================================================
VERTICAL SIDEBAR
==================================================*/
.d8_2 .sidebar{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:var(--sidebar-width);
  background:#0d0d0d;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
}
.d8_2 .sidebar-logo{
  margin-top:35px;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.25em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
.d8_2 .sidebar-navigation{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:50px;
}
.d8_2 .sidebar-navigation a{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-transform:uppercase;
  font-size:.7rem;
  letter-spacing:.2em;
  color:#777;
  transition:var(--transition);
}
.d8_2 .sidebar-navigation a:hover,
.d8_2 .sidebar-navigation a.active{
  color:var(--gold);
}
.d8_2 .sidebar-bottom{
  margin-bottom:35px;
  color:#777;
  font-size:1.5rem;
}
/*==================================================
MOBILE HEADER
==================================================*/
.d8_2 .mobile-header{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:75px;
  background:#101010;
  border-bottom:1px solid var(--border);
  z-index:1001;
  padding:0 25px;
  align-items:center;
  justify-content:space-between;
}
.d8_2 .mobile-logo{
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.2em;
}
.d8_2 .menu-button{
  width:35px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.d8_2 .menu-button span{
  height:2px;
  width:100%;
  background:#fff;
}
/*==================================================
MOBILE NAVIGATION
==================================================*/
.d8_2 .mobile-navigation{
  position:fixed;
  inset:0;
  background:#101010;
  z-index:1000;
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  visibility:hidden;
  transition:var(--transition);
}
.d8_2 .mobile-navigation.active{
  opacity:1;
  visibility:visible;
}
.d8_2 .mobile-navigation ul{
  display:flex;
  flex-direction:column;
  gap:35px;
  text-align:center;
}
.d8_2 .mobile-navigation a{
  font-size:1.5rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.15em;
}
/*==================================================
HERO
==================================================*/
.d8_2 .hero{
  min-height:100vh;
  margin-left:var(--sidebar-width);
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.d8_2 .hero-background{
  position:absolute;
  inset:0;
  background-image:url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2200&q=85");
  background-size:cover;
  background-position:center;
}
.d8_2 .hero-overlay{
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    90deg,
    rgba(10,10,10,.94),
    rgba(10,10,10,.65) 45%,
    rgba(10,10,10,.25)
    );
  }
  /*==================================================
  HERO CONTENT
  ==================================================*/
  .d8_2 .hero-content{
    position:relative;
    z-index:2;
    width:min(650px,90%);
    margin-left:8%;
  }
  .d8_2 .hero-title{
    font-size:clamp(4rem,8vw,7.5rem);
    line-height:.9;
    font-weight:800;
    text-transform:uppercase;
    margin-bottom:30px;
    letter-spacing:.02em;
  }
  .d8_2 .hero-text{
    color:var(--text);
    max-width:520px;
    line-height:1.8;
    margin-bottom:40px;
  }
  /*==================================================
  HERO CONTROLS
  ==================================================*/
  .d8_2 .hero-controls{
    position:absolute;
    right:50px;
    bottom:180px;
    display:flex;
    flex-direction:column;
    gap:15px;
    z-index:3;
  }
  .d8_2 .hero-control{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    color:white;
    transition:var(--transition);
  }
  .d8_2 .hero-control:hover{
    background:var(--gold);
    border-color:var(--gold);
  }
  /*==================================================
  HERO DETAILS BAR
  ==================================================*/
  .d8_2 .hero-details{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:#111;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--border);
    z-index:3;
  }
  .d8_2 .hero-detail{
    padding:28px 35px;
    display:flex;
    align-items:center;
    gap:18px;
    border-right:1px solid var(--border);
  }
  .d8_2 .hero-detail:last-child{
    border-right:none;
  }
  .d8_2 .hero-detail-icon{
    color:var(--gold);
    font-size:1.2rem;
  }
  .d8_2 .hero-detail-title{
    color:#777;
    font-size:.65rem;
    text-transform:uppercase;
    letter-spacing:.2em;
  }
  .d8_2 .hero-detail-text{
    color:#ddd;
    margin-top:5px;
  }
  /*==================================================
  BACKGROUND SECTION TITLE
  ==================================================*/
  .d8_2 .background-title{
    position:absolute;
    top:50px;
    left:0;
    width:100%;
    text-align:center;
    font-size:clamp(5rem,14vw,12rem);
    font-weight:800;
    letter-spacing:.15em;
    color:rgba(255,255,255,.025);
    pointer-events:none;
  }
  /*==================================================
  ABOUT
  ==================================================*/
  .d8_2 .about-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
  }
  .d8_2 .about-image{
    position:relative;
  }
  .d8_2 .about-image img{
    height:650px;
    object-fit:cover;
  }
  .d8_2 .about-experience{
    position:absolute;
    left:-35px;
    bottom:35px;
    width:190px;
    height:190px;
    background:var(--gold);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .d8_2 .about-experience strong{
    font-size:3.5rem;
    line-height:1;
  }
  .d8_2 .about-experience span{
    margin-top:12px;
    text-align:center;
    text-transform:uppercase;
    font-size:.7rem;
    letter-spacing:.15em;
  }
  .d8_2 .about-content h3{
    font-size:2.5rem;
    line-height:1.2;
    margin:25px 0;
  }
  .d8_2 .about-content p{
    color:var(--text);
    margin-bottom:20px;
    line-height:1.8;
  }
  .d8_2 .about-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:40px;
  }
  .d8_2 .about-feature{
    display:flex;
    align-items:center;
    gap:12px;
    color:#ddd;
  }
  .d8_2 .about-feature span{
    color:var(--gold);
  }
  /*==================================================
  STATISTICS
  ==================================================*/
  .d8_2 .statistics{
    background:var(--background-soft);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .d8_2 .statistics-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
  }
  .d8_2 .stat-box{
    text-align:center;
    padding:55px 25px;
    border-right:1px solid var(--border);
  }
  .d8_2 .stat-box:last-child{
    border-right:none;
  }
  .d8_2 .stat-number{
    font-size:3.5rem;
    color:var(--gold);
    font-weight:800;
  }
  .d8_2 .stat-label{
    color:#888;
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:.7rem;
  }
  /*==================================================
  PROJECTS
  ==================================================*/
  .d8_2 .projects-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:25px;
  }
  .d8_2 .project-card{
    position:relative;
    height:420px;
    overflow:hidden;
  }
  .d8_2 .project-card.large{
    height:540px;
  }
  .d8_2 .project-card:nth-child(1){
    grid-column:span 7;
  }
  .d8_2 .project-card:nth-child(2){
    grid-column:span 5;
  }
  .d8_2 .project-card:nth-child(3){
    grid-column:span 5;
  }
  .d8_2 .project-card:nth-child(4){
    grid-column:span 7;
  }
  .d8_2 .project-card img{
    height:100%;
    object-fit:cover;
    transition:.6s ease;
  }
  .d8_2 .project-overlay{
    position:absolute;
    inset:0;
    padding:35px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:linear-gradient(
      transparent,
      rgba(0,0,0,.85)
      );
    }
    .d8_2 .project-overlay small{
      color:var(--gold);
      text-transform:uppercase;
      letter-spacing:.2em;
    }
    .d8_2 .project-overlay h3{
      font-size:2rem;
      margin:12px 0;
    }
    .d8_2 .project-overlay a{
      font-size:.75rem;
      text-transform:uppercase;
      letter-spacing:.15em;
    }
    .d8_2 .project-card:hover img{
      transform:scale(1.08);
    }
    /*==================================================
    CONTACT
    ==================================================*/
    .d8_2 .contact-layout{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:70px;
    }
    .d8_2 .contact-details h3{
      font-size:2.5rem;
      margin-bottom:25px;
    }
    .d8_2 .contact-details p{
      color:var(--text);
      margin-bottom:35px;
    }
    .d8_2 .contact-item{
      padding:20px 0;
      border-bottom:1px solid var(--border);
    }
    .d8_2 .contact-item strong{
      display:block;
      color:var(--gold);
      font-size:.7rem;
      text-transform:uppercase;
      letter-spacing:.2em;
      margin-bottom:8px;
    }
    .d8_2 .contact-form{
      background:#171717;
      padding:45px;
    }
    .d8_2 .contact-form input,
    .d8_2 .contact-form textarea{
      width:100%;
      background:#101010;
      border:1px solid var(--border);
      padding:18px;
      color:white;
      margin-bottom:20px;
    }
    .d8_2 .contact-form textarea{
      height:170px;
      resize:none;
    }
    /*==================================================
    FOOTER
    ==================================================*/
    .d8_2 footer{
      margin-left:var(--sidebar-width);
      background:#090909;
      padding:35px 0;
      border-top:1px solid var(--border);
    }
    .d8_2 .footer-row{
      display:flex;
      justify-content:space-between;
      color:#777;
      font-size:.8rem;
    }
    /*==================================================
    RESPONSIVE
    ==================================================*/
    @media(max-width:1000px){
      .d8_2 .sidebar{
        display:none;
      }
      .d8_2 .mobile-header{
        display:flex;
      }
      .d8_2 .hero{
        margin-left:0;
        padding-top:75px;
      }
      .d8_2 .about-layout,
      .d8_2 .contact-layout{
        grid-template-columns:1fr;
      }
      .d8_2 .statistics-grid{
        grid-template-columns:repeat(2,1fr);
      }
      .d8_2 .projects-grid{
        grid-template-columns:1fr;
      }
      .d8_2 .project-card,
      .d8_2 .project-card.large,
      .d8_2 .project-card:nth-child(n){
        grid-column:auto;
      }
      .d8_2 .hero-controls{
        display:none;
      }
      .d8_2 footer{
        margin-left:0;
      }
    }
    @media(max-width:600px){
      .d8_2 .hero-title{
        font-size:3.5rem;
      }
      .d8_2 .hero-details{
        grid-template-columns:1fr;
      }
      .d8_2 .hero-detail{
        border-right:none;
        border-bottom:1px solid var(--border);
      }
      .d8_2 .about-features{
        grid-template-columns:1fr;
      }
      .d8_2 .statistics-grid{
        grid-template-columns:1fr;
      }
      .d8_2 .contact-form{
        padding:25px;
      }
      .d8_2 .footer-row{
        flex-direction:column;
        gap:15px;
      }
    }