/*
Theme Name: Fahlstrom Modern Industrial
Version: 2.1
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;700;800&display=swap');

/* RESET */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding:0;

  background:#111111;
  color:#f5f5f5;

  font-family:'Inter',sans-serif;
  line-height:1.6;

  overflow-x:hidden;

  scroll-padding-top:120px;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

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

ul{
  padding-left:20px;
}

.container{
  width:92%;
  max-width:1280px;
  margin:auto;
}

/* HEADER */

header{
  position:sticky;
  top:0;
  z-index:1000;

  background:rgba(15,15,15,.86);

  backdrop-filter:blur(14px);

  border-bottom:1px solid #303030;
}

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

  padding:18px 0;
}

.logo img{
  height:60px;
  width:auto;
}

nav{
  display:flex;
  gap:28px;
}

nav a{
  color:#c7c7c7;

  text-transform:uppercase;

  font-size:.8rem;

  font-weight:600;

  letter-spacing:.08em;

  transition:.2s ease;
}

nav a:hover{
  color:#793d19;
}


//* HERO */

.hero{
  position:relative;

  overflow:hidden;

  padding:145px 0 90px;

  background:
    linear-gradient(
      rgba(0,0,0,.78),
      rgba(0,0,0,.82)
    ),

    url('/wp-content/themes/YOURTHEME/assets/hero-industrial.jpg');

  background-size:cover;

  background-position:center center;

  background-repeat:no-repeat;
}

.hero .container{
  position:relative;

  z-index:2;
}

/* HERO TAG */

.hero-tag{
  color:#8a4720;

  text-transform:uppercase;

  letter-spacing:.34em;

  font-size:.68rem;

  font-weight:700;
	margin-top:20px;
  margin-bottom:36px;
}

/* HERO TYPOGRAPHY */

.hero-title{
  display:flex;

  flex-direction:column;

  gap:26px;

  margin:0 0 34px;

  line-height:.92;

  letter-spacing:-0.06em;

  width:100%;
}

.hero-main{
  font-size:4rem;

  font-weight:900;

  color:#e2e2e2;

  width:100%;
}

.hero-main-alt{
  color:rgba(226,226,226,.72);
}

/* LEAD */

.lead{
  color:#b0b0b0;

  font-size:1.08rem;

  line-height:1.9;

  width:100%;

  max-width:none;

  margin-top:24px;
}

@media(min-width:1200px){

  .lead{
    white-space:nowrap;
  }

}


/* MOBILE */

@media(max-width:980px){

  .hero{
    padding:90px 0 70px;

    background-position:center right;
  }

  .hero-title{
    gap:16px;
  }

  .hero-main{
    font-size:3rem;

    line-height:.96;
  }

  .lead{
    font-size:1rem;

    line-height:1.8;
  }

}

/* BUTTON */

.btn{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:240px;

  height:58px;

  background:#793d19;

  color:#ffffff;

  padding:0 30px;

  border-radius:18px;

  font-weight:700;

  font-size:1rem;

  margin-top:42px;

  transition:.2s ease;
}

.btn:hover{
  opacity:.92;

  transform:translateY(-2px);
}

/* HERO CTA */

.hero-btn{
  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

   height:30px;

  margin-top:34px;

  background:#793d19;

  color:#ffffff;

  border-radius:22px;

  padding:22px 28px;
	margin-top:30px;
	margin-bottom:30px;

  font-size:1.00rem;

  font-weight:800;

  letter-spacing:.05em;

  transition:.2s ease;
}

.hero-btn:hover{
  opacity:.94;

  transform:translateY(-2px);
}

/* MOBILE */

@media(max-width:980px){

  .hero{
    padding:90px 0 60px;
  }

  .hero-main{
    font-size:3.2rem;
  }

  .hero-title{
    gap:18px;
  }

  .lead{
    font-size:1rem;

    line-height:1.8;
  }

  .hero-bg{
    opacity:.22;

    background-position:center;
  }

}

/* LEAD */

.lead{
  color:#9ca3af;

  font-size:1.08rem;

  line-height:1.95;

  max-width:760px;

  font-weight:400;
}
/* BUTTONS */

.btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  background:#793d19;

  color:#ffffff;

  padding:16px 30px;

  border-radius:18px;

  font-weight:800;

  margin-top:28px;

  transition:.2s ease;
}

.btn:hover{
  opacity:.92;

  transform:translateY(-2px);
}

/* HERO DEMO */

.hero-demo-wrap{
  display:inline-flex;

  flex-direction:column;

  align-items:flex-start;

  gap:14px;

  background:#1f1f1f;

  border:1px solid #303030;

  border-radius:28px;

  padding:26px 28px;

  width:auto;

  max-width:max-content;
}

.hero-demo-title{
  color:#793d19;

  text-transform:uppercase;

  letter-spacing:.18em;

  font-size:.82rem;

  font-weight:700;
}

.hero-live-demo{
  display:inline-flex;

  align-items:center;

  gap:22px;

  background:#242424;

  border:1px solid #404040;

  border-radius:18px;

  padding:18px 22px;

  width:auto;

  max-width:max-content;

  color:#ffffff;
}

.hero-live-demo *{
  color:#ffffff !important;

  background:transparent !important;
}

.hero-live-demo table,
.hero-live-demo td,
.hero-live-demo tr{
  background:transparent !important;

  border:none !important;
}

/* SECTIONS */

.section{
  padding:90px 0;
}

.section-alt{
  background:#171717;

  border-top:1px solid #242424;

  border-bottom:1px solid #242424;
}

.section-tag{
  color:#793d19;

  text-transform:uppercase;

  letter-spacing:.28em;

  font-size:.85rem;

  font-weight:800;

  margin-bottom:18px;
}

.section h2{
  font-size:3.6rem;

  line-height:1.08;

  margin:0 0 28px;
}

/* SERVICES */

.services-overview{
  padding-top:10px;
}

.services-grid{
  display:grid;

  grid-template-columns:repeat(5,1fr);

  gap:22px;

  align-items:stretch;
}

.service-mini-card{
  display:block;

  background:#1c1c1c;

  border:1px solid #303030;

  border-radius:24px;

  padding:22px;

  transition:.2s ease;
}

.service-mini-card:hover{
  border-color:#793d19;

  transform:translateY(-2px);
}

.mini-title{
  color:#793d19;

  text-transform:uppercase;

  letter-spacing:.14em;

  font-size:.78rem;

  font-weight:800;

  margin-bottom:14px;
}

.service-mini-card p{
  color:#b6b6b6;

  font-size:.95rem;

  line-height:1.7;

  margin:0;
}

/* GRID */

.grid-2{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:42px;

  align-items:center;
}

/* CARDS */

.card,
.service-card{
  background:#1c1c1c;

  color:#b6b6b6;

  border:1px solid #303030;

  border-radius:32px;

  padding:32px;
}

.service-card h3{
  color:#793d19;

  text-transform:uppercase;

  letter-spacing:.18em;

  font-size:.82rem;

  font-weight:800;

  margin-bottom:22px;
}

/* DASHBOARD */

.metric{
  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:30px;

  background:#242424;

  border-radius:24px;

  padding:24px;

  margin-top:18px;
}

.metric-title{
  color:#793d19;

  text-transform:uppercase;

  font-size:.78rem;

  font-weight:700;

  letter-spacing:.18em;
}

.metric-sub{
  color:#9ca3af;

  margin-top:4px;
}

.metric-values{
  display:flex;

  gap:40px;

  background:#242424 !important;

  color:#ffffff !important;

  border-radius:18px;

  padding:16px;
}

.metric-values *{
  color:#ffffff !important;

  background:transparent !important;

  border-color:#444444 !important;
}

.metric-label{
  color:#9ca3af;

  text-transform:uppercase;

  font-size:.75rem;

  margin-bottom:6px;
}

.metric-number{
  font-size:2.5rem;

  font-weight:900;
}

/* CONTACT */

.contact-header{
  max-width:720px;

  margin-bottom:34px;
}

.contact-grid{
  display:grid;

  grid-template-columns:260px 1fr;

  gap:42px;

  align-items:start;
}

.contact-button-wrap{
  display:flex;

  align-items:flex-start;
}

/* CONTACT FORM 7 */

.wpcf7{
  margin-top:10px;
}

.wpcf7 p{
  margin-bottom:16px;
}

.wpcf7 label{
  display:block;

  font-size:.92rem;

  font-weight:600;

  color:#b6b6b6;

  margin-bottom:6px;
}

.wpcf7 input,
.wpcf7 textarea{
  width:100%;

  background:#242424;

  border:1px solid #303030;

  color:#d6d6d6;

  border-radius:14px;

  padding:12px 14px;

  margin-top:6px;

  font-size:.96rem;

  line-height:1.4;
}

.wpcf7 textarea{
  min-height:120px;

  resize:vertical;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus{
  outline:none;

  border-color:#793d19;
}

.wpcf7-submit{
  background:#793d19 !important;

  border:none !important;

  color:#ffffff !important;

  font-weight:700;

  padding:14px 24px !important;

  border-radius:14px;

  cursor:pointer;

  transition:.2s ease;
}

.wpcf7-submit:hover{
  opacity:.92;
}

.wpcf7-spinner{
  display:none;
}

/* MAP */

.map-wrap{
  overflow:hidden;

  border-radius:32px;

  border:1px solid #303030;
}

iframe{
  width:100%;

  height:450px;

  border:0;

  display:block;
}

/* FOOTER */

footer{
  padding:60px 0;

  background:#000000;

  border-top:1px solid #242424;
}

footer p{
  color:#888888;

  margin-top:14px;
}

/* WORDPRESS */

.wp-block-image img{
  border-radius:20px;
}

.wp-block-group{
  margin-bottom:30px;
}

.wp-block-heading{
  margin-top:0;
}

/* MOBILE */

@media(max-width:1200px){

  .services-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:980px){

  .navbar{
    flex-direction:column;

    align-items:flex-start;

    gap:18px;
  }

  nav{
    display:flex;

    flex-wrap:wrap;

    gap:14px;

    width:100%;
  }

  .hero-grid,
  .grid-2,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .hero{
    padding:90px 0 60px;
  }

  .section{
    padding:70px 0;
  }

  .hero-main{
    font-size:2.8rem;
  }

  .hero-accent{
    font-size:1.5rem;
  }

  .hero-sub{
    font-size:1.35rem;
  }

  .section h2{
    font-size:2.4rem;
  }

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

  .metric{
    flex-direction:column;

    align-items:flex-start;
  }

  .metric-values{
    width:100%;

    justify-content:space-between;
  }

}