/* /business-inquiry-it-services-v2 - the Elementor Canvas quote page (no header/footer).
   Values are live's computed styles (Elementor post-47537 + its custom CSS), measured
   2026-09-28 at 1440 and 375. Everything is scoped to .binq2: the shared
   zazz-hsform.php partial emits unscoped .zmit-hsform rules with !important, so the
   form resets below need the extra .binq2 specificity AND !important. */

body.binq2-body { margin: 0; background: #fff; color: #000; }

.binq2 {
    position: relative;
    display: flex; flex-direction: column; gap: 20px;
    padding: 50px 400px 40px;           /* 40 = live's 20px padding + the empty 20px-gap widget */
    font-family: "Poppins", sans-serif; font-size: 16px; line-height: 1.65;
    color: #000; box-sizing: border-box;
}
.binq2 * { font-family: "Poppins", sans-serif; }

.binq2-title {
    margin: 0; text-align: center; color: #141414;
    font-size: clamp(1.5rem, 1.3684rem + 0.7018vw, 1.8rem); font-weight: 600; line-height: 1.4;
}
.binq2-sub { margin: -15px 0 -17px; padding-bottom: 28px; text-align: center; font-size: 16px; line-height: 26.4px; }
.binq2-note { margin: 0; text-align: center; font-size: 16px; line-height: 26.4px; color: #000; }
.binq2-biz { margin: 0; text-align: center; font-size: 16px; line-height: 1.5; color: #868686; }
.binq2-biz a { color: #0161FF; text-decoration: none; }

.binq2-back {
    position: absolute; top: 44px; right: 30px; width: 40px; height: 40px;
    padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(45deg);
}
.binq2-back svg { display: block; width: 100%; height: 100%; }

@media (max-width: 1366px) { .binq2 { padding: 50px 200px 40px; } }
@media (max-width: 1200px) { .binq2 { padding-left: 100px; padding-right: 100px; } }
@media (max-width: 1024px) { .binq2-back { width: 30px; height: 30px; top: 50px; right: 30px; } }
@media (max-width: 880px)  { .binq2 { padding-left: 50px; padding-right: 50px; } }
@media (max-width: 767px) {
    .binq2 { padding: 40px 20px; font-size: 14.592px; }
    .binq2-title { font-size: 22.6px; line-height: 31.64px; }   /* live root font shrinks on mobile */
    .binq2-sub { display: none; }                     /* live: elementor-hidden-mobile */
    .binq2-note { line-height: 24.08px; }
    .binq2-back { top: 29px; right: 10px; }
}
@media (min-width: 2400px) { .binq2-form { padding: 50px 150px; } }

/* ---- HubSpot form: live's look, undoing the shared partial's card styling ---- */
.binq2 .zmit-hsform .hsfc-Step__Content { padding: 0 !important; background: #fff; }
.binq2 .zmit-hsform label,
.binq2 .zmit-hsform .hsfc-Label,
.binq2 .zmit-hsform label span,
.binq2 .zmit-hsform .hsfc-Label span {
    color: rgb(33, 45, 58) !important; font-size: 16px !important; font-weight: 500 !important;
    line-height: 20px !important; margin-bottom: 5px !important;
}
.binq2 .zmit-hsform .hsfc-Step__Content label { font-family: "Poppins", sans-serif !important; }
.binq2 .zmit-hsform .hsfc-FieldLabel__RequiredIndicator { color: rgb(229, 21, 32) !important; }

/* inner inputs only - never the .hsfc-DropdownInput / .hsfc-PhoneInput wrappers */
.binq2 .zmit-hsform input,
.binq2 .zmit-hsform textarea,
.binq2 .zmit-hsform select,
.binq2 .zmit-hsform .hsfc-TextInput,
.binq2 .zmit-hsform .hsfc-TextareaInput,
.binq2 .zmit-hsform .hsfc-PhoneInput .hsfc-TextInput,
.binq2 .zmit-hsform .hsfc-DropdownInput .hsfc-TextInput {
    font-size: 16px !important; font-weight: 400; line-height: 24px !important;
    color: rgb(33, 45, 58) !important; background: #fff !important;
    border: 0 !important; border-bottom: 1px solid #C2C2C2 !important; border-radius: 0 !important;
    padding: 15px 0 !important; box-shadow: none !important;
}
.binq2 .zmit-hsform input:focus,
.binq2 .zmit-hsform textarea:focus,
.binq2 .zmit-hsform .hsfc-TextInput:focus,
.binq2 .zmit-hsform .hsfc-TextareaInput:focus {
    background: #fff !important; border-color: #C2C2C2 !important; box-shadow: rgb(149, 148, 148) 0 0 3px 0 !important;
}
.binq2 .zmit-hsform input::placeholder { color: transparent !important; }
.binq2 .zmit-hsform textarea::placeholder { color: #000 !important; }
.binq2 .zmit-hsform .hsfc-TextareaInput { min-height: 0 !important; }
.binq2 .zmit-hsform input.hsfc-TextInput { height: 40px !important; }   /* live: 40px boxes, padding overflows inward */

.binq2 .zmit-hsform .hsfc-PhoneInput { gap: 0; }
.binq2 .zmit-hsform .hsfc-PhoneInput .hsfc-PhoneInput__FlagAndCaret {
    background: #fff !important; border: 0 !important; border-bottom: 1px solid #C2C2C2 !important;
    border-radius: 0 !important; padding: 0 10px !important; color: #000 !important;
}
.binq2 .zmit-hsform .hsfc-PhoneInput .hsfc-TextInput { padding: 15px 0 !important; }
.binq2 .zmit-hsform .hsfc-DropdownInput .hsfc-TextInput { padding: 10px 25px 10px 20px !important; }

.binq2 .zmit-hsform .hsfc-DropdownInput__Caret { right: -3px; padding: 0 10px; }   /* live geometry */
.binq2 .zmit-hsform .hsfc-DropdownInput__Caret > span,
.binq2 .zmit-hsform .hsfc-PhoneInput__FlagAndCaret__Caret { border-top-color: rgb(33, 45, 58) !important; }

.binq2 .zmit-hsform .hsfc-Row { margin-bottom: 20px; }

.binq2 .zmit-hsform .hsfc-Button {
    width: 100% !important; padding: 18px !important; border-radius: 3px !important;
    background-color: #0161FF !important; color: #fff !important;
    font-size: 16px !important; line-height: 16px !important;
    font-weight: 600 !important;   /* live declares 700 but its 700 face IS Poppins-SemiBold */
}

.binq2 .zmit-hsform .hsfc-Button:hover { background-color: rgb(1, 107, 255) !important; }
.binq2 .zmit-hsform .hsfc-ErrorAlert { font-size: 16px !important; line-height: 26.4px; color: rgb(229, 21, 32) !important; }

@media (max-width: 767px) {
    .binq2 .zmit-hsform .hsfc-Row { margin-bottom: 10px; gap: 15px; }
    .binq2 .zmit-hsform .hsfc-NavigationRow { margin-top: 0; }
}

/* phones (owner 2026-10-06): the whole form, Submit included, must fit the first
   screen (Submit sat at ~740px at 375x667). Compact fields, names side by side. */
@media (max-width: 767px) {
    .binq2 { padding-top: 16px; gap: 14px; }
    .binq2-title { padding: 0 34px; }   /* clear the back icon */
    .binq2-back { top: 16px; }
    .binq2 .zmit-hsform label,
    .binq2 .zmit-hsform .hsfc-Label,
    .binq2 .zmit-hsform label span,
    .binq2 .zmit-hsform .hsfc-Label span { font-size: 14px !important; line-height: 18px !important; }
    .binq2 .zmit-hsform label { margin-bottom: 2px !important; }
    .binq2 .zmit-hsform input.hsfc-TextInput { height: 36px !important; }
    .binq2 .zmit-hsform .hsfc-TextInput,
    .binq2 .zmit-hsform .hsfc-PhoneInput .hsfc-TextInput { padding: 6px 0 !important; }
    .binq2 .zmit-hsform .hsfc-DropdownInput .hsfc-TextInput { padding: 6px 25px 6px 0 !important; }
    .binq2 .zmit-hsform .hsfc-TextareaInput { height: 54px !important; padding: 3px 0 !important; }
    .binq2 .zmit-hsform .hsfc-Row { gap: 10px; }
    .binq2 .zmit-hsform .hsfc-Row:has(> .hsfc-TextField + .hsfc-TextField:last-child) {
        flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important;
    }
    .binq2 .zmit-hsform .hsfc-Row:has(> .hsfc-TextField + .hsfc-TextField:last-child) > * { flex: 1 1 0 !important; min-width: 0; }
    .binq2 .zmit-hsform .hsfc-Button { padding: 13px !important; }
}