/* HUMANBOTS INDUSTRIES STYLES (loads after global.css) */
/* =========================================================
   RESET / VARIABLES
========================================================= */

#hb-industries-page,
#hb-industries-page *{
  box-sizing:border-box;
}

#hb-industries-page{
  --hb-orange:#ff4d16;
  --hb-bg:#000000;
  --hb-card:#070707;
  --hb-card-2:#0a0a0a;
  --hb-white:#f6f6f4;
  --hb-text:#b3b3b3;
  --hb-muted:#6f6f6f;
  --hb-line:#242424;
  --hb-soft:#171717;

  width:100%;
  overflow:hidden;

  background:#000;
  color:var(--hb-white);

  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  font-family:var(--font-body);

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#hb-industries-page h1,
#hb-industries-page h2,
#hb-industries-page h3,
#hb-industries-page p{
  margin-top:0;
}

#hb-industries-page a{
  color:inherit;
  text-decoration:none;
}

#hb-industries-page .hb-container{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
}


/* =========================================================
   LABEL
========================================================= */

#hb-industries-page .hb-label{
  display:flex;
  align-items:center;
  gap:11px;

  color:var(--hb-orange);

  font-size:10px;
  font-weight:700;

  letter-spacing:.16em;
  text-transform:uppercase;
}

#hb-industries-page .hb-label::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--hb-orange);
}


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

#hb-industries-page .hb-hero{
  position:relative;

  padding:
    170px
    0
    90px;

  border-bottom:1px solid var(--hb-soft);

  background:
    radial-gradient(
      circle at 82% 28%,
      rgba(255,77,22,.11),
      transparent 28%
    ),
    #000;
}

#hb-industries-page .hb-hero::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255,255,255,.014) 1px,
      transparent 1px
    );

  background-size:90px 90px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.7),
      transparent 92%
    );

  pointer-events:none;
}

#hb-industries-page .hb-hero-inner{
  position:relative;
  z-index:2;
}

#hb-industries-page .hb-hero h1{
  max-width:920px;

  margin:
    20px
    0
    32px;

  color:#fff;

  font-size:
    clamp(44px,6vw,78px);

  line-height:.96;

  font-weight:650;

  letter-spacing:-.052em;
}

#hb-industries-page .hb-hero h1 span{
  color:#5e5e5e;
}

#hb-industries-page .hb-hero-bottom{
  display:grid;

  grid-template-columns:
    1.3fr
    .7fr;

  gap:70px;

  align-items:end;
}

#hb-industries-page .hb-hero-copy{
  max-width:700px;

  margin:0;

  color:var(--hb-text);

  font-size:17px;
  line-height:1.75;
}

#hb-industries-page .hb-hero-side{
  padding-left:28px;
  border-left:1px solid var(--hb-line);
}

#hb-industries-page .hb-hero-side small{
  display:block;

  margin-bottom:10px;

  color:#666;

  font-size:9px;
  font-weight:700;

  letter-spacing:.15em;
  text-transform:uppercase;
}

#hb-industries-page .hb-hero-side strong{
  color:#fff;

  font-size:16px;
  line-height:1.5;
}


/* =========================================================
   INDUSTRIES SECTION
========================================================= */

#hb-industries-page .hb-industries{
  padding:
    100px
    0
    120px;
}


/* =========================================================
   SECTION INTRO
========================================================= */

#hb-industries-page .hb-industries-intro{
  display:grid;

  grid-template-columns:
    .8fr
    1.2fr;

  gap:70px;

  align-items:end;

  margin-bottom:50px;
}

#hb-industries-page .hb-industries-heading h2{
  margin:
    15px
    0
    0;

  color:#fff;

  font-size:
    clamp(36px,4.5vw,60px);

  line-height:1;

  font-weight:640;

  letter-spacing:-.045em;
}

#hb-industries-page .hb-industries-heading h2 span{
  color:#5d5d5d;
}

#hb-industries-page .hb-industries-copy{
  max-width:600px;

  justify-self:end;

  color:#777;

  font-size:15px;
  line-height:1.75;
}


/* =========================================================
   GRID
========================================================= */

#hb-industries-page .hb-industry-grid{
  display:grid;

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

  gap:14px;
}


/* =========================================================
   CARD BASE
========================================================= */

#hb-industries-page .hb-industry-card{
  position:relative;

  min-height:250px;

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

  overflow:hidden;

  padding:28px;

  border:1px solid var(--hb-line);
  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      #0a0a0a,
      #050505
    );

  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    background .35s ease;
}

#hb-industries-page .hb-industry-card::before{
  content:"";

  position:absolute;

  top:-120px;
  right:-120px;

  width:250px;
  height:250px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,77,22,.16),
      rgba(255,77,22,.025) 40%,
      transparent 72%
    );

  opacity:0;

  transition:
    opacity .35s ease;
}

#hb-industries-page .hb-industry-card::after{
  content:"";

  position:absolute;

  left:28px;
  right:28px;
  bottom:0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--hb-orange),
      transparent
    );

  transform:scaleX(0);

  transform-origin:center;

  transition:
    transform .4s cubic-bezier(.16,1,.3,1);
}

#hb-industries-page .hb-industry-card:hover{
  transform:translateY(-5px);

  border-color:#383838;

  background:#0b0b0b;
}

#hb-industries-page .hb-industry-card:hover::before{
  opacity:1;
}

#hb-industries-page .hb-industry-card:hover::after{
  transform:scaleX(1);
}


/* =========================================================
   ASYMMETRIC LAYOUT
========================================================= */

#hb-industries-page .hb-industry-card:nth-child(1){
  grid-column:span 7;
}

#hb-industries-page .hb-industry-card:nth-child(2){
  grid-column:span 5;
}

#hb-industries-page .hb-industry-card:nth-child(3){
  grid-column:span 5;
}

#hb-industries-page .hb-industry-card:nth-child(4){
  grid-column:span 7;
}

#hb-industries-page .hb-industry-card:nth-child(5){
  grid-column:span 7;
}

#hb-industries-page .hb-industry-card:nth-child(6){
  grid-column:span 5;
}

#hb-industries-page .hb-industry-card:nth-child(7){
  grid-column:span 5;
}

#hb-industries-page .hb-industry-card:nth-child(8){
  grid-column:span 7;
}


/* =========================================================
   CARD TOP
========================================================= */

#hb-industries-page .hb-industry-top{
  position:relative;
  z-index:2;

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

  gap:15px;
}

#hb-industries-page .hb-industry-number{
  color:var(--hb-orange);

  font-family:var(--font-mono);

  font-size:10px;
  font-weight:700;
}

#hb-industries-page .hb-industry-arrow{
  display:flex;

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

  width:30px;
  height:30px;

  border:1px solid #242424;
  border-radius:50%;

  color:#555;

  font-size:13px;

  transition:
    color .3s ease,
    border-color .3s ease,
    background .3s ease,
    transform .3s ease;
}

#hb-industries-page .hb-industry-card:hover
.hb-industry-arrow{
  color:#fff;

  border-color:var(--hb-orange);
  background:var(--hb-orange);

  transform:
    translate(2px,-2px);
}


/* =========================================================
   CARD CONTENT
========================================================= */

#hb-industries-page .hb-industry-content{
  position:relative;
  z-index:2;
}

#hb-industries-page .hb-industry-content h3{
  max-width:420px;

  margin:
    0
    0
    12px;

  color:#fff;

  font-size:
    clamp(23px,2.3vw,31px);

  font-weight:580;

  line-height:1.05;

  letter-spacing:-.035em;
}

#hb-industries-page .hb-industry-content p{
  max-width:420px;

  margin:0;

  color:#757575;

  font-size:13px;
  line-height:1.65;
}


/* =========================================================
   KEYWORDS / TAGS
========================================================= */

#hb-industries-page .hb-industry-tags{
  position:relative;
  z-index:2;

  display:flex;
  flex-wrap:wrap;

  gap:7px;

  margin-top:26px;
}

#hb-industries-page .hb-industry-tag{
  padding:
    7px
    10px;

  border:1px solid #222;
  border-radius:100px;

  color:#686868;

  background:#050505;

  font-size:9px;
  font-weight:600;

  letter-spacing:.03em;

  transition:
    color .3s ease,
    border-color .3s ease;
}

#hb-industries-page .hb-industry-card:hover
.hb-industry-tag{
  color:#aaa;

  border-color:#2f2f2f;
}


/* =========================================================
   LARGE FEATURE CARD DETAIL
========================================================= */

#hb-industries-page .hb-industry-card:nth-child(1),
#hb-industries-page .hb-industry-card:nth-child(4),
#hb-industries-page .hb-industry-card:nth-child(5),
#hb-industries-page .hb-industry-card:nth-child(8){
  min-height:280px;
}


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

#hb-industries-page .hb-industries-footer{
  display:grid;

  grid-template-columns:
    1.2fr
    .8fr;

  gap:60px;

  align-items:end;

  margin-top:75px;

  padding-top:60px;

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

#hb-industries-page .hb-industries-footer h2{
  max-width:760px;

  margin:
    14px
    0
    0;

  color:#fff;

  font-size:
    clamp(30px,4vw,52px);

  line-height:1.05;

  font-weight:620;

  letter-spacing:-.045em;
}

#hb-industries-page .hb-industries-footer h2 span{
  color:#5f5f5f;
}

#hb-industries-page .hb-industries-footer-copy{
  max-width:420px;

  justify-self:end;

  color:#777;

  font-size:14px;
  line-height:1.75;
}


/* =========================================================
   REVEAL
========================================================= */

#hb-industries-page
[data-hb-reveal]{
  opacity:0;

  transform:translateY(24px);

  transition:
    opacity .75s cubic-bezier(.16,1,.3,1),
    transform .75s cubic-bezier(.16,1,.3,1);
}

#hb-industries-page
[data-hb-reveal].is-visible{
  opacity:1;
  transform:none;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px){

  #hb-industries-page .hb-hero-bottom{
    grid-template-columns:1fr;
    gap:30px;
  }

  #hb-industries-page .hb-industries-intro{
    grid-template-columns:1fr;
    gap:28px;
  }

  #hb-industries-page .hb-industries-copy{
    justify-self:start;
  }

  #hb-industries-page .hb-industry-card{
    grid-column:span 6 !important;
  }

  #hb-industries-page .hb-industries-footer{
    grid-template-columns:1fr;
    gap:25px;
  }

  #hb-industries-page .hb-industries-footer-copy{
    justify-self:start;
  }

}


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

@media(max-width:700px){

  #hb-industries-page .hb-container{
    width:min(100% - 30px,1180px);
  }

  #hb-industries-page .hb-hero{
    padding:
      135px
      0
      65px;
  }

  #hb-industries-page .hb-hero h1{
    font-size:
      clamp(39px,12vw,54px);

    letter-spacing:-2.5px;
  }

  #hb-industries-page .hb-hero-copy{
    font-size:15px;
  }

  #hb-industries-page .hb-industries{
    padding:
      75px
      0
      80px;
  }

  #hb-industries-page .hb-industry-grid{
    display:block;
  }

  #hb-industries-page .hb-industry-card{
    min-height:240px !important;

    margin-bottom:12px;

    padding:24px;
  }

  #hb-industries-page .hb-industry-card:last-child{
    margin-bottom:0;
  }

  #hb-industries-page .hb-industry-content h3{
    font-size:24px;
  }

  #hb-industries-page .hb-industries-footer{
    margin-top:55px;
    padding-top:45px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  #hb-industries-page *,
  #hb-industries-page *::before,
  #hb-industries-page *::after{
    animation:none !important;
    transition:none !important;
  }

  #hb-industries-page
  [data-hb-reveal]{
    opacity:1 !important;
    transform:none !important;
  }

}