/* =========================================================
   HUMANBOTS — CONTACT PAGE ONLY
   Loads after global.css and service.css. Labels, titles,
   buttons, hero base and inline CTAs come from service.css;
   this file holds:
   1. Hero layout + direct contact list
   2. The enquiry form (fields, service chips, errors, success)
   3. "What happens next" steps
   4. Other ways to reach us + shortcut cards
========================================================= */


/* =========================================================
   1. HERO
========================================================= */

.hbk-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:60px;
  align-items:start;
}
.hbk-intro{position:sticky;top:130px}
.hbk-intro .svc-h1{font-size:clamp(36px, 4vw, 56px)}

.hbk-direct{margin:36px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.hbk-direct li{border-bottom:1px solid var(--line)}
.hbk-direct a,
.hbk-direct div{
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:14px;
  align-items:center;
  padding:16px 0;
  color:inherit;
}
.hbk-direct .svc-icon{width:44px;height:44px;border-radius:12px}
.hbk-direct .svc-icon svg{width:18px;height:18px}
.hbk-direct small{display:block;color:#666;font-size:10px;text-transform:uppercase}
.hbk-direct strong{display:block;margin-top:3px;color:#eee;font-size:16px;font-weight:500}
.hbk-direct b{color:#555;font-weight:400;transition:color .25s ease, transform .25s ease}
.hbk-direct a:hover b{color:var(--orange);transform:translateX(3px)}
.hbk-direct a:hover strong{color:#fff}


/* =========================================================
   2. FORM
========================================================= */

.hbk-form{
  position:relative;
  padding:34px;
  border:1px solid var(--line);
  border-radius:18px;
  background:radial-gradient(circle at top right, rgba(255,77,22,.07), transparent 40%), var(--card);
}
.hbk-form > .svc-mono{color:var(--orange);text-transform:uppercase}
.hbk-form h2{
  margin:10px 0 6px;
  color:#fff;
  font-size:26px;
  font-weight:600;
  letter-spacing:-.04em;
}
.hbk-form > p{color:var(--dim);font-size:14px}

.hbk-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:26px;
}
.hbk-full{grid-column:1 / -1}

.hbk-field label,
.hbk-field legend{
  display:block;
  margin-bottom:8px;
  padding:0;
  color:#bbb;
  font-size:13px;
  font-weight:500;
}
.hbk-field label span,
.hbk-field legend span{color:#666;font-weight:400}

.hbk-field input,
.hbk-field select,
.hbk-field textarea{
  width:100%;
  min-height:50px;
  padding:13px 15px;
  border:1px solid #2a2a2a;
  border-radius:12px;
  background:#0a0a0a;
  color:#f2f2f2;
  font:inherit;
  font-size:15px;
  transition:border-color .2s ease, background .2s ease;
}
.hbk-field textarea{min-height:130px;resize:vertical;line-height:1.55}
.hbk-field select{
  appearance:none;
  padding-right:40px;
  background:
    linear-gradient(45deg, transparent 50%, #777 50%) right 20px top 22px / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, #777 50%) right 15px top 22px / 6px 6px no-repeat,
    #0a0a0a;
}
.hbk-field input::placeholder,
.hbk-field textarea::placeholder{color:#555}
.hbk-field input:hover,
.hbk-field select:hover,
.hbk-field textarea:hover{border-color:#3a3a3a}
.hbk-field input:focus,
.hbk-field select:focus,
.hbk-field textarea:focus{outline:none;border-color:var(--orange);background:#0d0d0d}

/* service chips: real checkboxes, styled as pills */
.hbk-field fieldset{margin:0;padding:0;border:0;min-width:0}
.hbk-chips{display:flex;flex-wrap:wrap;gap:8px}
.hbk-chips label{
  position:relative;
  margin:0;
  cursor:pointer;
}
.hbk-chips input{position:absolute;opacity:0;pointer-events:none}
.hbk-chips span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 14px;
  border:1px solid #2a2a2a;
  border-radius:999px;
  color:#999;
  font-size:13px;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.hbk-chips span::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#333;
  transition:background .2s ease;
}
.hbk-chips label:hover span{border-color:#444;color:#ddd}
.hbk-chips input:checked + span{border-color:rgba(255,77,22,.6);background:rgba(255,77,22,.08);color:#fff}
.hbk-chips input:checked + span::before{background:var(--orange)}
.hbk-chips input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px}

/* errors */
.hbk-error{display:none;margin-top:7px;color:#ff7a50;font-size:12px}
.hbk-field.is-invalid .hbk-error{display:block}
.hbk-field.is-invalid input,
.hbk-field.is-invalid textarea{border-color:#ff4d16}

/* spam trap, hidden from people */
.hbk-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.hbk-submit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--soft-line);
}
.hbk-submit p{max-width:320px;color:#666;font-size:12px;line-height:1.5}
.hbk-submit p a{color:#999;text-decoration:underline}
.hbk-submit .svc-btn[disabled]{opacity:.6;cursor:wait}
.hbk-status{margin-top:14px;color:#ff7a50;font-size:13px}
.hbk-status:empty{display:none}

/* success panel replaces the fields */
.hbk-done{display:none;padding:30px 0 10px;text-align:center}
.hbk-form.is-sent .hbk-done{display:block}
.hbk-form.is-sent .hbk-fields,
.hbk-form.is-sent .hbk-submit,
.hbk-form.is-sent > p,
.hbk-form.is-sent > h2,
.hbk-form.is-sent > .svc-mono{display:none}
.hbk-done b{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  font-size:24px;
  box-shadow:0 0 45px rgba(255,77,22,.2);
}
.hbk-done h2{color:#fff;font-size:28px;font-weight:600;letter-spacing:-.04em}
.hbk-done p{max-width:420px;margin:12px auto 0;color:var(--dim);font-size:15px;line-height:1.6}
.hbk-done a{color:#fff;text-decoration:underline}


/* =========================================================
   3. WHAT HAPPENS NEXT
========================================================= */

.hbk-next{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:hbk-step;
}
/* the line joining the three steps draws in when the section appears */
.hbk-next::before{
  content:"";
  position:absolute;
  z-index:0;
  top:96px;
  left:8%;
  right:8%;
  height:1px;
  background:linear-gradient(90deg,rgba(255,77,22,0),rgba(255,77,22,.7) 15%,rgba(255,77,22,.7) 85%,rgba(255,77,22,0));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1) .2s;
}
.hbk-next:has(li.is-in)::before{transform:scaleX(1)}
.hbk-next li{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  padding:22px 26px 28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,77,22,.06),rgba(255,255,255,0) 40%),var(--card);
  transition:border-color .3s ease, transform .3s ease;
}
.hbk-next li:hover{border-color:rgba(255,77,22,.4);transform:translateY(-3px)}
.hbk-next li:nth-child(2){transition-delay:.12s}
.hbk-next li:nth-child(3){transition-delay:.24s}
.hbk-next .svc-mono{color:var(--orange)}
.hbk-next h3{
  margin:14px 0 10px;
  color:#fff;
  font-size:22px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.04em;
}
.hbk-next p{color:var(--dim);font-size:14px;line-height:1.65}

.hbk-art{
  height:150px;
  margin:0 -8px 16px;
  border-radius:14px;
  background:radial-gradient(ellipse at 50% 60%,rgba(255,77,22,.12),transparent 65%),#080808;
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.hbk-svg{display:block;width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* 01: a message being typed, then sent */
.hbk-s-card{fill:#141414;stroke:#3a3a3a;stroke-width:1.5}
.hbk-s-tail{fill:#141414;stroke:#3a3a3a;stroke-width:1.5}
.hbk-s-dot{fill:#ff4d16;animation:hbk-type 1.4s ease-in-out infinite}
.hbk-s-dot2{animation-delay:.18s}.hbk-s-dot3{animation-delay:.36s}
.hbk-s-send circle{fill:#ff4d16}
.hbk-s-send path{fill:#fff}
.hbk-s-send{transform-box:fill-box;transform-origin:center;animation:hbk-send 2.8s ease-in-out infinite}
.hbk-s-trail{stroke:#ff4d16;stroke-width:1.5;stroke-dasharray:3 5;opacity:.7;animation:hbk-dash 1.2s linear infinite}
@keyframes hbk-type{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-6px);opacity:1}}
@keyframes hbk-send{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4px,-6px) scale(1.06)}}
@keyframes hbk-dash{to{stroke-dashoffset:-16}}

/* 02: leads drop into a funnel; the magnifier finds where they get stuck */
.hbk-s-funnel{fill:#141414;stroke:#3a3a3a;stroke-width:1.5}
.hbk-s-drop{fill:#ff4d16;--dx:0px;animation:hbk-drop 2.4s ease-in infinite}
.hbk-s-drop1{--dx:24px}.hbk-s-drop2{animation-delay:.8s}.hbk-s-drop3{--dx:-24px;animation-delay:1.6s}
.hbk-s-lens circle{fill:rgba(255,77,22,.08);stroke:#fff;stroke-width:2.5}
.hbk-s-lens path{stroke:#fff;stroke-width:4}
.hbk-s-lens{animation:hbk-scan 5s ease-in-out infinite}
@keyframes hbk-drop{0%{transform:translate(0,-14px);opacity:0}15%{opacity:1}60%{transform:translate(var(--dx),34px);opacity:1}100%{transform:translate(var(--dx),66px);opacity:0}}
@keyframes hbk-scan{0%,100%{transform:translate(90px,56px)}45%{transform:translate(118px,82px)}60%{transform:translate(110px,92px)}}

/* 03: a path draws itself to the flag */
.hbk-s-road{stroke:#2a2a2a;stroke-width:6}
.hbk-s-path{stroke:#ff4d16;stroke-width:3;stroke-dasharray:240;stroke-dashoffset:240;animation:hbk-draw 3.6s cubic-bezier(.6,.1,.3,1) infinite}
.hbk-s-start{fill:#fff}
.hbk-s-flag path:first-child{stroke:#fff;stroke-width:2.5}
.hbk-s-flag path:last-child{fill:#ff4d16}
.hbk-s-flag{transform-box:fill-box;transform-origin:bottom left;animation:hbk-flag 3.6s ease-in-out infinite}
@keyframes hbk-draw{0%{stroke-dashoffset:240}60%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes hbk-flag{0%,50%{transform:scale(.85);opacity:.5}62%{transform:scale(1.08);opacity:1}75%,100%{transform:scale(1);opacity:1}}


@media (prefers-reduced-motion:reduce){
  .hbk-svg *{animation:none!important}
  .hbk-s-path{stroke-dashoffset:0}
  .hbk-next::before{transition:none;transform:scaleX(1)}
}




/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1000px){
  .hbk-grid{grid-template-columns:1fr;gap:40px}
  .hbk-intro{position:static}
  .hbk-next{grid-template-columns:1fr}
  .hbk-next::before{display:none}
}

@media (max-width:650px){
  .hbk-form{padding:22px 18px}
  .hbk-fields{grid-template-columns:1fr}
  .hbk-submit{flex-direction:column;align-items:stretch}
  .hbk-submit .svc-btn{width:100%}
}

/* =========================================================
   5. BOOK A CALL: CALENDAR CARD
   booking.js adds .has-calendar once BOOKING_URL is set,
   then .is-loaded when the calendar has finished loading.
========================================================= */

.hbk-cal{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
}
.hbk-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid var(--soft-line);
}
.hbk-cal-head .svc-mono{color:var(--orange);text-transform:uppercase}
.hbk-cal-open{display:none;color:#999;font-size:13px}
.hbk-cal-open:hover{color:#fff}
.has-calendar .hbk-cal-open{display:inline}

.hbk-cal-frame{display:none;position:relative;height:700px}
.has-calendar .hbk-cal-frame{display:block}
.hbk-cal-frame iframe{position:relative;z-index:1;width:100%;height:100%;border:0;opacity:0;transition:opacity .4s ease}
.is-loaded .hbk-cal-frame iframe{opacity:1}
.hbk-cal-frame::before{
  content:"Loading available times…";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#666;
  font-size:14px;
}

/* shown until a booking link is set */
.hbk-cal-fallback{padding:30px 26px}
.has-calendar .hbk-cal-fallback{display:none}
.hbk-cal-fallback h2{color:#fff;font-size:24px;font-weight:600;letter-spacing:-.04em}
.hbk-cal-fallback > p{margin:10px 0 0;color:var(--dim);font-size:15px;line-height:1.6}
.hbk-cal-fallback .hbk-direct{margin-top:22px}


/* =========================================================
   6. THANK-YOU HERO
========================================================= */

.hbk-thanks{max-width:820px;margin:0 auto}
.hbk-thanks-mark{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  margin:0 auto 30px;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  font-size:30px;
  box-shadow:0 0 0 12px rgba(255,77,22,.08), 0 0 70px rgba(255,77,22,.25);
}
.hbk-book{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:center;
  margin-top:50px;
  padding:30px;
  border:1px solid rgba(255,77,22,.35);
  border-radius:18px;
  background:radial-gradient(circle at 85% 20%, rgba(255,77,22,.12), transparent 45%), var(--card);
  text-align:left;
}
.hbk-book .svc-mono{color:var(--orange);text-transform:uppercase}
.hbk-book h2{margin:10px 0 8px;color:#fff;font-size:26px;font-weight:600;letter-spacing:-.04em}
.hbk-book p{color:var(--dim);font-size:15px;line-height:1.6}



@media(max-width:650px){.hbk-cal-frame{height:760px}.hbk-book{grid-template-columns:1fr;padding:24px}.hbk-book .svc-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.hbk-cal-frame iframe{transition:none}}
/* Keep direct contact available beside a blocked/slow third-party calendar. */
#hbk-calendar.has-calendar .hbk-cal-fallback{display:block}
#hbk-calendar .hbk-cal-fallback .svc-btn{margin-top:18px}

#hbk-calendar.is-configured .hbk-cal-open{display:inline}
#hbk-calendar [hidden]{display:none!important}