/* HUMANBOTS LOCATIONS STYLES (loads after global.css) */

/* =========================================================
   HERO
=========================================================*/
/* =========================================================
   HUMANBOTS - LOCATIONS HERO
========================================================= */

#hbLocationsHero,
#hbLocationsHero *{
  box-sizing:border-box;
}

#hbLocationsHero{
  --orange:#ff4d16;

  position:relative;
  width:100%;
  min-height:96svh;

  display:flex;
  align-items:center;

  padding:165px 0 85px;

  background:#000;
  color:#fff;

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

  overflow:hidden;
}


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

#hbLocationsHero::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.2;

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

  background-size:78px 78px;
}


/* =========================================================
   ORANGE ATMOSPHERE
========================================================= */

#hbLocationsHero::after{
  content:"";

  position:absolute;

  right:-120px;
  top:42%;

  width:760px;
  height:760px;

  transform:translateY(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,77,22,.075),
      rgba(255,77,22,.02) 35%,
      transparent 68%
    );

  filter:blur(30px);

  pointer-events:none;
}


/* =========================================================
   INNER
========================================================= */

#hbLocationsHero .hbl-inner{
  position:relative;
  z-index:2;

  width:min(1360px,calc(100% - 52px));

  margin:auto;

  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);

  gap:80px;

  align-items:center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

#hbLocationsHero .hbl-copy{
  max-width:690px;

  opacity:0;

  transform:translateY(22px);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

#hbLocationsHero.is-visible .hbl-copy{
  opacity:1;

  transform:translateY(0);
}


/* =========================================================
   EYEBROW
========================================================= */

#hbLocationsHero .hbl-eyebrow{
  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:18px;

  color:var(--orange);

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

  letter-spacing:2px;
  text-transform:uppercase;
}

#hbLocationsHero .hbl-eyebrow::before{
  content:"";

  width:28px;
  height:1px;

  background:var(--orange);
}


/* =========================================================
   HEADING
========================================================= */

#hbLocationsHero h1{
  margin:0;

  color:#f3f3f3;

  font-size:clamp(40px,4.4vw,62px);
  line-height:.98;

  letter-spacing:-3.2px;
  font-weight:500;
}

#hbLocationsHero h1 span{
  display:block;

  margin-top:5px;

  color:#555;
}

#hbLocationsHero h1 em{
  display:block;

  margin-top:5px;

  color:var(--orange);

  font-style:normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

#hbLocationsHero .hbl-copy > p{
  max-width:600px;

  margin:25px 0 0;

  color:#7a7a7a;

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

#hbLocationsHero .hbl-copy > p strong{
  color:#b5b5b5;

  font-weight:500;
}


/* =========================================================
   ACTIONS
========================================================= */

#hbLocationsHero .hbl-actions{
  margin-top:31px;

  display:flex;
  flex-wrap:wrap;

  gap:9px;
}

#hbLocationsHero .hbl-btn{
  min-height:50px;

  padding:0 21px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:9px;

  border-radius:999px;

  text-decoration:none;

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

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

#hbLocationsHero .hbl-primary{
  background:var(--orange);

  color:#fff;
}

#hbLocationsHero .hbl-primary:hover{
  transform:translateY(-2px);

  background:#ff4d16;
}

#hbLocationsHero .hbl-secondary{
  border:1px solid rgba(255,255,255,.1);

  background:#030303;

  color:#8c8c8c;
}

#hbLocationsHero .hbl-secondary:hover{
  transform:translateY(-2px);

  border-color:rgba(255,77,22,.4);

  color:#fff;
}


/* =========================================================
   MARKET STRIP
========================================================= */

#hbLocationsHero .hbl-markets{
  margin-top:30px;

  display:flex;
  flex-wrap:wrap;

  gap:8px;
}

#hbLocationsHero .hbl-market{
  display:flex;
  align-items:center;

  gap:7px;

  padding:7px 10px;

  border:1px solid rgba(255,255,255,.065);
  border-radius:999px;

  background:#020202;

  color:#6a6a6a;

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

  letter-spacing:.65px;
  text-transform:uppercase;
}

#hbLocationsHero .hbl-market::before{
  content:"";

  width:4px;
  height:4px;

  border-radius:50%;

  background:var(--orange);
}


/* =========================================================
   RIGHT - GLOBAL VISUAL
========================================================= */

#hbLocationsHero .hbl-world{
  position:relative;

  width:100%;
  aspect-ratio:1 / .82;

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

  opacity:0;

  transform:
    translateY(30px)
    scale(.97);

  filter:blur(6px);

  transition:
    opacity 1.2s ease .12s,
    transform 1.2s cubic-bezier(.2,.8,.2,1) .12s,
    filter 1.2s ease .12s;
}

#hbLocationsHero.is-visible .hbl-world{
  opacity:1;

  transform:
    translateY(0)
    scale(1);

  filter:blur(0);
}


/* =========================================================
   GLOBE
========================================================= */

#hbLocationsHero .hbl-globe{
  position:relative;

  width:min(460px,78%);
  aspect-ratio:1;

  border:1px solid rgba(255,255,255,.075);
  border-radius:50%;

  background:
    radial-gradient(
      circle at 43% 38%,
      rgba(255,77,22,.07),
      transparent 38%
    ),
    #020202;

  box-shadow:
    0 0 100px rgba(255,77,22,.025),
    inset 0 0 80px rgba(255,255,255,.012);

  overflow:hidden;
}


/* =========================================================
   LATITUDE
========================================================= */

#hbLocationsHero .hbl-lat{
  position:absolute;

  left:8%;

  width:84%;

  border:1px solid rgba(255,255,255,.055);
  border-radius:50%;
}

#hbLocationsHero .hbl-lat-1{
  top:20%;

  height:20%;
}

#hbLocationsHero .hbl-lat-2{
  top:40%;

  height:20%;
}

#hbLocationsHero .hbl-lat-3{
  top:60%;

  height:20%;
}


/* =========================================================
   LONGITUDE
========================================================= */

#hbLocationsHero .hbl-long{
  position:absolute;

  top:5%;
  left:50%;

  width:42%;
  height:90%;

  transform:translateX(-50%);

  border:1px solid rgba(255,255,255,.055);
  border-radius:50%;
}

#hbLocationsHero .hbl-long-2{
  width:76%;
}


/* =========================================================
   AXIS
========================================================= */

#hbLocationsHero .hbl-axis-v{
  position:absolute;

  top:0;
  bottom:0;
  left:50%;

  width:1px;

  background:
    linear-gradient(
      transparent,
      rgba(255,255,255,.05),
      transparent
    );
}

#hbLocationsHero .hbl-axis-h{
  position:absolute;

  left:0;
  right:0;
  top:50%;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.05),
      transparent
    );
}


/* =========================================================
   LOCATION POINTS
========================================================= */

#hbLocationsHero .hbl-point{
  position:absolute;
  z-index:5;

  display:flex;
  align-items:center;

  gap:7px;
}

#hbLocationsHero .hbl-point-dot{
  position:relative;

  width:7px;
  height:7px;

  flex:0 0 auto;

  border-radius:50%;

  background:var(--orange);

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

#hbLocationsHero .hbl-point-dot::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:7px;
  height:7px;

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

  border:1px solid rgba(255,77,22,.55);
  border-radius:50%;

  animation:
    hblPulse 2.3s ease-out infinite;
}

@keyframes hblPulse{

  0%{
    width:7px;
    height:7px;

    opacity:.8;
  }

  70%{
    width:30px;
    height:30px;

    opacity:0;
  }

  100%{
    width:30px;
    height:30px;

    opacity:0;
  }

}

#hbLocationsHero .hbl-point span{
  color:#aaa;

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

  letter-spacing:.8px;
  text-transform:uppercase;

  white-space:nowrap;
}


/* =========================================================
   POINT POSITIONS
========================================================= */

#hbLocationsHero .hbl-p1{
  left:20%;
  top:32%;
}

#hbLocationsHero .hbl-p2{
  right:17%;
  top:35%;
}

#hbLocationsHero .hbl-p3{
  left:52%;
  top:52%;
}

#hbLocationsHero .hbl-p4{
  right:19%;
  bottom:27%;
}


/* =========================================================
   OUTER ORBITS
========================================================= */

#hbLocationsHero .hbl-orbit{
  position:absolute;

  left:50%;
  top:50%;

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

  border:1px solid rgba(255,255,255,.04);
  border-radius:50%;

  pointer-events:none;
}

#hbLocationsHero .hbl-orbit-1{
  width:82%;
  aspect-ratio:1;
}

#hbLocationsHero .hbl-orbit-2{
  width:98%;
  aspect-ratio:1;

  border-style:dashed;

  opacity:.7;
}


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

#hbLocationsHero .hbl-global-label{
  position:absolute;

  right:3%;
  bottom:12%;

  padding:12px 15px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;

  background:rgba(4,4,4,.88);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#hbLocationsHero .hbl-global-label small{
  display:block;

  margin-bottom:5px;

  color:#5a5a5a;

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

  letter-spacing:1px;
  text-transform:uppercase;
}

#hbLocationsHero .hbl-global-label strong{
  color:#d5d5d5;

  font-size:12px;
  font-weight:500;
}

#hbLocationsHero .hbl-global-label strong span{
  color:var(--orange);
}


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

@media(max-width:950px){

  #hbLocationsHero{
    min-height:auto;

    padding:150px 0 80px;
  }

  #hbLocationsHero .hbl-inner{
    grid-template-columns:1fr;

    gap:55px;
  }

  #hbLocationsHero .hbl-copy{
    max-width:760px;
  }

  #hbLocationsHero .hbl-world{
    max-width:720px;

    margin:auto;
  }

}


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

@media(max-width:650px){

  #hbLocationsHero{
    padding:130px 0 60px;
  }

  #hbLocationsHero .hbl-inner{
    width:calc(100% - 28px);

    gap:35px;
  }


  /* EYEBROW */

  #hbLocationsHero .hbl-eyebrow{
    margin-bottom:14px;

    font-size:9px;

    letter-spacing:1.5px;
  }


  /* HEADING */

  #hbLocationsHero h1{
    font-size:29px;
    line-height:1.04;

    letter-spacing:-1.5px;
  }


  /* DESCRIPTION */

  #hbLocationsHero .hbl-copy > p{
    margin-top:18px;

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


  /* BUTTONS */

  #hbLocationsHero .hbl-actions{
    margin-top:24px;

    display:grid;
    grid-template-columns:1fr;

    gap:7px;
  }

  #hbLocationsHero .hbl-btn{
    width:100%;
    min-height:48px;

    font-size:11px;
  }


  /* MARKET LABELS */

  #hbLocationsHero .hbl-markets{
    margin-top:22px;
  }

  #hbLocationsHero .hbl-market{
    padding:6px 9px;

    font-size:8px;
  }


  /* WORLD */

  #hbLocationsHero .hbl-world{
    aspect-ratio:1;

    width:100%;
  }

  #hbLocationsHero .hbl-globe{
    width:78%;
  }

  #hbLocationsHero .hbl-point span{
    font-size:7.5px;
  }

  #hbLocationsHero .hbl-global-label{
    right:0;
    bottom:5%;

    padding:9px 11px;
  }

  #hbLocationsHero .hbl-global-label strong{
    font-size:10px;
  }

}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media(max-width:390px){

  #hbLocationsHero h1{
    font-size:27px;

    letter-spacing:-1.3px;
  }

}


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

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

  #hbLocationsHero .hbl-copy,
  #hbLocationsHero .hbl-world{
    opacity:1 !important;

    transform:none !important;

    filter:none !important;

    transition:none !important;
  }

  #hbLocationsHero .hbl-point-dot::after{
    animation:none;
  }

}


/* =========================================================
   OUR LOCATIONS (#locations) + GENERAL INQUIRIES (#contact)
   Rebuilt from the live /locations/ content in the hero's style.
   Buttons reuse .hbl-btn styles via the .hbl-locs scope below.
========================================================= */

.hbl-locs,
.hbl-locs *{
  box-sizing:border-box;
}

.hbl-locs{
  --orange:#ff4d16;

  position:relative;
  width:100%;

  padding:110px 0 120px;

  background:#000;
  color:#fff;

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

  scroll-margin-top:20px;
}

.hbl-locs-inner{
  width:min(1360px,calc(100% - 52px));
  margin:auto;
}

/* header */

.hbl-locs-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);
  gap:60px;
  align-items:end;

  margin-bottom:50px;
}

.hbl-locs-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:16px;

  color:var(--orange);

  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}

.hbl-locs-eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--orange);
}

.hbl-locs h2{
  margin:0;

  color:#f3f3f3;

  font-size:clamp(34px,3.6vw,52px);
  line-height:1;
  letter-spacing:-2.4px;
  font-weight:500;
}

.hbl-locs h2 span{ color:#555; }

.hbl-locs-head > p{
  margin:0;

  color:#7a7a7a;

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

.hbl-locs-head > p strong{
  display:block;
  margin-top:8px;

  color:#d5d5d5;
  font-weight:500;
}

/* office cards */

.hbl-offices{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.hbl-office{
  position:relative;

  display:flex;
  flex-direction:column;

  min-height:330px;
  padding:26px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;

  background:
    radial-gradient(circle at 85% 0%, rgba(255,77,22,.06), transparent 40%),
    linear-gradient(145deg,#0b0b0b,#030303);

  opacity:0;
  transform:translateY(24px);

  transition:
    opacity .7s ease,
    transform .8s cubic-bezier(.16,1,.3,1),
    border-color .3s ease;
}

.hbl-office.is-visible{
  opacity:1;
  transform:none;
}

.hbl-office:hover{ border-color:rgba(255,77,22,.3); }

.hbl-office-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.hbl-office-num{
  color:var(--orange);
  font-size:10px;
  font-weight:700;
}

.hbl-office-country{
  display:inline-flex;
  align-items:center;
  gap:7px;

  padding:6px 10px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;

  color:#9a9a9a;

  font-size:9px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.hbl-office-country::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 8px rgba(255,77,22,.7);
}

.hbl-office h3{
  margin:56px 0 10px;

  color:#efefef;

  font-size:24px;
  line-height:1.05;
  letter-spacing:-1px;
  font-weight:500;
}

.hbl-office > p{
  margin:0;

  color:#6f6f6f;

  font-size:12.5px;
  line-height:1.6;
}

.hbl-office-meta{
  margin:auto 0 0;
  padding-top:22px;
}

.hbl-office-row{
  display:flex;
  justify-content:space-between;
  gap:12px;

  padding:10px 0;

  border-top:1px solid rgba(255,255,255,.07);

  font-size:12px;
}

.hbl-office-row dt{ color:#555; }

.hbl-office-row dd{
  margin:0;
  color:#cfcfcf;
  text-align:right;
}

.hbl-office-row a{ transition:color .2s ease; }
.hbl-office-row a:hover{ color:var(--orange); }

/* general inquiries */

.hbl-contact{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:40px;
  align-items:center;

  margin-top:14px;
  padding:44px 46px;

  border:1px solid rgba(255,77,22,.2);
  border-radius:24px;

  background:
    radial-gradient(circle at 90% 50%, rgba(255,77,22,.12), transparent 45%),
    #050505;

  scroll-margin-top:130px;
}

.hbl-contact h2{ font-size:clamp(28px,2.8vw,40px); letter-spacing:-1.6px; }

.hbl-contact-copy p{
  margin:14px 0 0;
  color:#7a7a7a;
  font-size:14px;
}

.hbl-contact-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:18px;
}

.hbl-contact-mail{
  color:#efefef;
  font-size:18px;
  font-weight:500;
  text-align:right;
  transition:color .2s ease;
}

.hbl-contact-mail small{
  display:block;
  margin-bottom:4px;

  color:#555;

  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.hbl-contact-mail:hover{ color:var(--orange); }

.hbl-contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

/* buttons (same look as the hero buttons) */

.hbl-locs .hbl-btn{
  min-height:50px;
  padding:0 21px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  border-radius:999px;

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

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

.hbl-locs .hbl-primary{ background:var(--orange); color:#fff; }
.hbl-locs .hbl-primary:hover{ transform:translateY(-2px); background:#ff4d16; }

.hbl-locs .hbl-secondary{
  border:1px solid rgba(255,255,255,.1);
  background:#030303;
  color:#8c8c8c;
}

.hbl-locs .hbl-secondary:hover{
  transform:translateY(-2px);
  border-color:rgba(255,77,22,.4);
  color:#fff;
}

@media(max-width:1100px){
  .hbl-offices{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:950px){
  .hbl-locs-head{ grid-template-columns:1fr; gap:22px; }

  .hbl-contact{ grid-template-columns:1fr; }

  .hbl-contact-side{ align-items:flex-start; }

  .hbl-contact-mail{ text-align:left; }
}

@media(max-width:650px){
  .hbl-locs{ padding:80px 0 90px; }

  .hbl-locs-inner{ width:calc(100% - 28px); }

  .hbl-locs h2{ font-size:32px; letter-spacing:-1.5px; }

  .hbl-offices{ grid-template-columns:1fr; gap:10px; }

  .hbl-office{ min-height:0; padding:22px; border-radius:18px; }

  .hbl-office h3{ margin-top:36px; font-size:22px; }

  .hbl-contact{ padding:32px 20px; border-radius:20px; gap:26px; }

  .hbl-contact h2{ font-size:28px; }

  .hbl-contact-actions{ display:grid; grid-template-columns:1fr; width:100%; }

  .hbl-locs .hbl-btn{ width:100%; min-height:48px; }
}

@media(prefers-reduced-motion:reduce){
  .hbl-office{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =========================================================
   SERVICES BY MARKET (generated between the hb:locations-directory
   markers by public/admin/lib/location-render.js; empty until a
   location page is published from Admin → Location SEO)
========================================================= */
.hb-loc-markets{padding:0 0 120px;background:#000;color:#fff;font-family:var(--font-body)}
.hb-loc-markets-inner{width:min(1360px,calc(100% - 52px));margin:auto;padding-top:80px;border-top:1px solid rgba(255,255,255,.08)}
.hb-loc-markets-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:#ff4d16;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.hb-loc-markets-eyebrow::before{content:"";width:28px;height:1px;background:#ff4d16}
.hb-loc-markets h2{margin:0 0 36px;color:#f3f3f3;font-size:clamp(30px,3.2vw,46px);font-weight:500;letter-spacing:-2px;line-height:1.05}
.hb-loc-markets-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.hb-loc-markets-list a{display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(145deg,#0b0b0b,#030303);color:#fff;text-decoration:none;transition:border-color .3s ease,transform .3s ease}
.hb-loc-markets-list a:hover{border-color:rgba(255,77,22,.4);transform:translateY(-2px)}
.hb-loc-markets-list strong{font-size:19px;font-weight:600;letter-spacing:-.5px}
.hb-loc-markets-list span{color:#858585;font-size:13px}
@media(max-width:650px){.hb-loc-markets{padding-bottom:90px}.hb-loc-markets-inner{width:calc(100% - 28px);padding-top:60px}}
@media(prefers-reduced-motion:reduce){.hb-loc-markets-list a{transition:none}.hb-loc-markets-list a:hover{transform:none}}