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

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

#hb-services-page{
  --hb-orange:#ff4d16;
  --hb-black:#000;
  --hb-card:#050505;
  --hb-white:#f7f7f5;
  --hb-text:#b7b7b7;
  --hb-muted:#747474;
  --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-services-page h1,
#hb-services-page h2,
#hb-services-page h3,
#hb-services-page p{
  margin-top:0;
}

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

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


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

#hb-services-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-services-page .hb-label::before{
  content:"";

  width:26px;
  height:1px;

  background:var(--hb-orange);
}


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

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

  padding:
    170px
    0
    85px;

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

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

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

  position:absolute;
  inset:0;

  pointer-events:none;

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

  background-size:90px 90px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.65),
      transparent 90%
    );
}

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

  max-width:1000px;
}

#hb-services-page .hb-hero h1{
  max-width:900px;

  margin:
    20px
    0
    30px;

  color:#fff;

  font-size:
    clamp(42px,6.2vw,78px);

  line-height:.98;

  font-weight:650;

  letter-spacing:-.052em;
}

#hb-services-page .hb-hero h1 span{
  color:#5c5c5c;
}

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

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

  gap:65px;

  align-items:end;

  margin-top:10px;
}

#hb-services-page .hb-hero-copy{
  max-width:650px;

  margin:0;

  color:var(--hb-text);

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

#hb-services-page .hb-model{
  padding-left:28px;

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

#hb-services-page .hb-model small{
  display:block;

  margin-bottom:9px;

  color:#666;

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

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

#hb-services-page .hb-model strong{
  color:#fff;

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


/* =========================================================
   SERVICES INTRO
========================================================= */

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

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

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

  gap:70px;

  margin-bottom:60px;
}

#hb-services-page .hb-services-heading h2{
  max-width:550px;

  margin:
    14px
    0
    0;

  color:#fff;

  font-size:
    clamp(34px,4.4vw,58px);

  line-height:1;

  font-weight:650;

  letter-spacing:-.045em;
}

#hb-services-page .hb-services-heading h2 span{
  color:#5c5c5c;
}

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

  align-self:end;

  color:var(--hb-muted);

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


/* =========================================================
   SERVICE LIST
========================================================= */

#hb-services-page .hb-service-list{
  border-top:1px solid var(--hb-line);
}

#hb-services-page .hb-service-row{
  position:relative;

  display:grid;

  grid-template-columns:
    90px
    300px
    1fr;

  gap:30px;

  padding:
    42px
    0;

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

  transition:
    background .35s ease;
}

#hb-services-page .hb-service-row::before{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:500px;
  height:250px;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,77,22,.06),
      transparent 70%
    );

  opacity:0;

  pointer-events:none;

  transition:
    opacity .4s ease;
}

#hb-services-page .hb-service-row:hover::before{
  opacity:1;
}


/* =========================================================
   NUMBER
========================================================= */

#hb-services-page .hb-service-number{
  position:relative;
  z-index:2;

  color:var(--hb-orange);

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

  font-size:11px;

  padding-top:5px;
}


/* =========================================================
   SERVICE TITLE
========================================================= */

#hb-services-page .hb-service-main{
  position:relative;
  z-index:2;
}

#hb-services-page .hb-service-main h3{
  margin:
    0
    0
    13px;

  color:#fff;

  font-size:
    clamp(24px,2.8vw,34px);

  line-height:1.05;

  font-weight:580;

  letter-spacing:-.04em;
}

#hb-services-page .hb-service-main p{
  max-width:280px;

  margin:0;

  color:#777;

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


/* category links (title + "Explore" link) */

#hb-services-page .hb-service-main h3 a{
  transition:color .25s ease;
}

#hb-services-page .hb-service-main h3 a:hover{
  color:var(--hb-orange);
}

#hb-services-page .hb-service-link{
  display:inline-flex;
  align-items:center;
  gap:7px;

  margin-top:18px;

  color:#9a9a9a;

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

  transition:color .25s ease, gap .25s ease;
}

#hb-services-page .hb-service-link span{
  color:var(--hb-orange);
}

#hb-services-page .hb-service-link:hover{
  color:#fff;
  gap:10px;
}


/* =========================================================
   SUB SERVICES
========================================================= */

#hb-services-page .hb-subservices{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  column-gap:35px;
  row-gap:0;
}

#hb-services-page .hb-subservice{
  position:relative;

  padding:
    12px
    0
    12px
    17px;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);

  color:#bbb;

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

#hb-services-page .hb-subservice::before{
  content:"";

  position:absolute;

  left:0;
  top:19px;

  width:4px;
  height:4px;

  border-radius:50%;

  background:var(--hb-orange);
}


/* a sub-service that has its own page */
#hb-services-page a.hb-subservice{
  display:block;
  color:#fff;
  transition:color .25s ease;
}
#hb-services-page a.hb-subservice::after{
  content:" \2197";
  color:var(--hb-orange);
}
#hb-services-page a.hb-subservice:hover{
  color:var(--hb-orange);
}

/* =========================================================
   BOTTOM CTA
========================================================= */

#hb-services-page .hb-services-cta{
  display:grid;

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

  gap:50px;

  align-items:end;

  margin-top:85px;

  padding:
    50px;

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

  background:
    radial-gradient(
      circle at top right,
      rgba(255,77,22,.08),
      transparent 35%
    ),
    #050505;
}

#hb-services-page .hb-services-cta h2{
  max-width:700px;

  margin:
    15px
    0
    0;

  color:#fff;

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

  line-height:1.05;

  font-weight:620;

  letter-spacing:-.045em;
}

#hb-services-page .hb-cta-right{
  justify-self:end;
}

#hb-services-page .hb-cta-button{
  display:inline-flex;

  align-items:center;
  gap:13px;

  padding:
    15px
    22px;

  border-radius:100px;

  background:var(--hb-orange);

  color:#fff;

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

  letter-spacing:.08em;

  text-transform:uppercase;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

#hb-services-page .hb-cta-button:hover{
  transform:translateY(-2px);

  box-shadow:
    0 12px 35px
    rgba(255,77,22,.22);
}

#hb-services-page .hb-cta-button span{
  font-size:15px;
}


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

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

  transform:
    translateY(25px);

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

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

#hb-services-page
[data-hb-reveal].is-visible{
  opacity:1;

  transform:none;
}


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

@media(max-width:950px){

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

  #hb-services-page .hb-model{
    max-width:400px;
  }

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

  #hb-services-page .hb-service-row{
    grid-template-columns:
      60px
      240px
      1fr;

    gap:25px;
  }

  #hb-services-page .hb-subservices{
    grid-template-columns:1fr;
  }

}


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

@media(max-width:700px){

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

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

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

    letter-spacing:-2.5px;
  }

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

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

  #hb-services-page .hb-services-intro{
    margin-bottom:40px;
  }

  #hb-services-page .hb-service-row{
    grid-template-columns:1fr;

    gap:12px;

    padding:
      34px
      0;
  }

  #hb-services-page .hb-service-number{
    padding:0;
  }

  #hb-services-page .hb-service-main p{
    max-width:100%;
  }

  #hb-services-page .hb-service-link{
    margin:14px 0 12px;
  }

  #hb-services-page .hb-subservice{
    font-size:12.5px;
  }

  #hb-services-page .hb-services-cta{
    grid-template-columns:1fr;

    gap:30px;

    margin-top:60px;

    padding:30px;
  }

  #hb-services-page .hb-cta-right{
    justify-self:start;
  }

}


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

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

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

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

}