/* contact.css — Contact Sales page styles */

/* ── Layout ──────────────────────────────────────────────────── */

.contact-main {
    padding: 64px 0 96px;
    min-height: calc(calc(100 * var(--hb-vh, 1vh)) - 220px);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* ── Left intro panel ─────────────────────────────────────────── */

.contact-intro__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hb-blue-deep, #4f7fff);
    margin: 0 0 12px;
}

.contact-intro__heading {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--hb-ink, #1a2536);
    margin: 0 0 16px;
}

.contact-intro__body {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--hb-muted, #4a5568);
    margin: 0 0 32px;
    max-width: 420px;
}

/* Reason list */
.contact-reasons {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-reasons li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.contact-reasons__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--hb-blue-deep, #4f7fff) 12%, transparent);
    color: var(--hb-blue-deep, #4f7fff);
    border-radius: 6px;
    font-size: 10px;
    margin-top: 2px;
}

.contact-reasons li strong {
    display: block;
    font-size: 0.92rem;
    color: var(--hb-ink, #1a2536);
    margin-bottom: 3px;
}

.contact-reasons li p {
    font-size: 0.86rem;
    color: var(--hb-muted, #4a5568);
    margin: 0;
    line-height: 1.5;
}

.contact-intro__direct {
    font-size: 0.88rem;
    color: var(--hb-muted, #4a5568);
    line-height: 1.6;
    margin: 0;
}

.contact-intro__direct a {
    color: var(--hb-blue-deep, #4f7fff);
    font-weight: 600;
    text-decoration: none;
}

.contact-intro__direct a:hover {
    text-decoration: underline;
}

/* ── Form panel ───────────────────────────────────────────────── */

.contact-form-wrap {
    background: var(--hb-paper, #ffffff);
    border: 1px solid var(--hb-line, #e2e8f0);
    border-radius: 16px;
    padding: 36px 32px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-form__row {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-form__row--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-form__field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hb-ink, #1a2536);
}

.contact-form__field label span[aria-hidden] {
    color: var(--hb-danger, #e53e3e);
    margin-left: 2px;
}

.contact-form__optional {
    font-weight: 400;
    color: var(--hb-muted, #4a5568);
    font-size: 0.78rem;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--hb-line, #d1dbe8);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--hb-ink, #1a2536);
    background: var(--hb-paper, #f8fafc);
    transition: border-color var(--hb-fast) var(--hb-ease);
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.contact-form__field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.contact-form__field textarea {
    resize: vertical;
    min-height: 96px;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    outline: none;
    border-color: var(--hb-blue-deep, #4f7fff);
    outline: 3px solid var(--hb-blue-wash);
    outline-offset: 0;
    background: #fff;
}

.contact-form__submit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.contact-form__btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 0.95rem;
}

.contact-form__privacy {
    font-size: 0.76rem;
    color: var(--hb-muted, #4a5568);
    text-align: center;
    margin: 0;
}

/* ── Error block ──────────────────────────────────────────────── */

.contact-errors {
    padding: 14px 16px;
    border: 1px solid #feb2b2;
    background: #fff5f5;
    border-radius: 10px;
    color: #c53030;
    font-size: 0.88rem;
    margin-bottom: 4px;
}

.contact-errors strong {
    display: block;
    margin-bottom: 8px;
}

.contact-errors ul {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Success state ────────────────────────────────────────────── */

.contact-success {
    text-align: center;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.contact-success__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f0fdf4;
    color: #22c55e;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #bbf7d0;
}

.contact-success h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--hb-ink, #1a2536);
}

.contact-success p {
    margin: 0;
    color: var(--hb-muted, #4a5568);
    font-size: 0.94rem;
    line-height: 1.6;
    max-width: 360px;
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 860px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-intro__heading {
        font-size: 1.9rem;
    }

    .contact-intro__body {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .contact-main {
        padding: 40px 0 72px;
    }

    .contact-form-wrap {
        padding: 24px 18px;
    }

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

/* =============================================================================
   CONTACT — clearance, controls, and what happens next
   -----------------------------------------------------------------------------
   Somebody here has a question they could not answer from the site. The page
   has to do two things: make the form quick to fill, and say what happens after
   they press send, which is the part people actually hesitate over.
   ============================================================================= */

/* The nav is fixed and sits 94px down at its lowest. The old 64px of padding
   put the eyebrow underneath it. */
.contact-main {
    padding-top: calc(var(--hb-nav-h) + clamp(34px, calc(4 * var(--hb-vw, 1vw)), 56px));
    padding-bottom: clamp(48px, calc(6 * var(--hb-vw, 1vw)), 88px);
}

/* ── Left column ──────────────────────────────────────────────────────────── */
.contact-intro { min-width: 0; }

.contact-reasons__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: var(--hb-blue-wash);
    border: 1px solid var(--hb-blue-mist);
    color: var(--hb-blue-deep);
}
.contact-reasons__icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── What happens next ────────────────────────────────────────────────────── */
.contact-next {
    margin-top: clamp(24px, calc(3 * var(--hb-vw, 1vw)), 34px);
    padding: clamp(18px, calc(2 * var(--hb-vw, 1vw)), 22px);
    border-radius: var(--hb-r-lg);
    background: var(--hb-mist);
    border: 1px solid var(--hb-line);
}
.contact-next__title {
    display: block;
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hb-faint);
    margin-bottom: var(--hb-s3);
}
.contact-next__steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact-next__steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--hb-t-xs);
    line-height: 1.55;
    color: var(--hb-ink-soft);
}
.contact-next__steps li > span {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    flex: none;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--hb-blue-deep);
    color: #fff;
    font-size: 10px;
    font-weight: 660;
    font-variant-numeric: tabular-nums;
}

.contact-intro__direct {
    margin-top: clamp(20px, calc(2.4 * var(--hb-vw, 1vw)), 28px);
    font-size: var(--hb-t-xs);
    color: var(--hb-muted);
}
.contact-intro__direct a {
    color: var(--hb-blue-deep);
    font-weight: 560;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Selects ──────────────────────────────────────────────────────────────────
   The open list is drawn by the operating system and cannot be styled, so the
   work goes into the closed control: a real chevron, a clear focus ring, and a
   hover state that makes it obvious the field opens.
   -------------------------------------------------------------------------- */
.contact-form__field select {
    width: 100%;
    padding: 12px 40px 12px 13px;
    border-radius: var(--hb-r-md);
    border: 1px solid var(--hb-line);
    background-color: var(--hb-paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333405c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px;
    color: var(--hb-ink);
    font-size: var(--hb-t-sm);
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
        border-color var(--hb-fast) var(--hb-ease),
        background-color var(--hb-fast) var(--hb-ease);
}
.contact-form__field select:hover { border-color: #c0cfe4; background-color: var(--hb-mist); }
.contact-form__field select:focus {
    outline: none;
    border-color: var(--hb-blue);
    box-shadow: none;
    background-color: var(--hb-paper);
}
.contact-form__field select:focus-visible {
    outline: 2px solid var(--hb-blue);
    outline-offset: -2px;
}
/* Until something is picked, the placeholder should not read as an answer. It
   is still text somebody has to read, so it takes the muted tone rather than
   the faint one, which measured 3.2:1. */
.contact-form__field select:has(option[value=""]:checked) { color: var(--hb-muted); }
.contact-form__field select option { color: var(--hb-ink); }

/* ── Text inputs, matched to the selects ──────────────────────────────────── */
.contact-form__field input,
.contact-form__field textarea {
    width: 100%;
    padding: 12px 13px;
    border-radius: var(--hb-r-md);
    border: 1px solid var(--hb-line);
    background: var(--hb-paper);
    color: var(--hb-ink);
    font-size: var(--hb-t-sm);
    font-family: inherit;
    line-height: 1.5;
    transition: border-color var(--hb-fast) var(--hb-ease);
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color: var(--hb-faint); }
.contact-form__field input:hover,
.contact-form__field textarea:hover { border-color: #c0cfe4; }
.contact-form__field input:focus,
.contact-form__field textarea:focus { outline: none; border-color: var(--hb-blue); }
.contact-form__field textarea { min-height: 110px; resize: vertical; }

/* ── Submit ───────────────────────────────────────────────────────────────────
   The old markup used the button classes from the retired marketing
   stylesheet, so this rendered as plain text on no background. It now uses the
   design system button and fills its column, since it is the only action here.
   -------------------------------------------------------------------------- */
.contact-form__submit {
    display: grid;
    gap: 10px;
    margin-top: var(--hb-s5);
    padding-top: var(--hb-s5);
    border-top: 1px solid var(--hb-line-soft);
}
.contact-form__btn { width: 100%; }
.contact-form__privacy {
    font-size: 11px;
    line-height: 1.5;
    color: var(--hb-faint);
    text-align: center;
}

/* ── Success ──────────────────────────────────────────────────────────────── */
.contact-success__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 auto var(--hb-s4);
    border-radius: 50%;
    background: var(--hb-success-wash);
    border: 1px solid #b9e2cf;
    color: var(--hb-success);
    font-size: 20px;
    font-weight: 700;
}

@media (max-width: 620px) {
    .contact-form__row--2 { grid-template-columns: 1fr; }
}

/* --hb-faint measures 3:1 on the mist panel and 3.2:1 under the button, both
   under AA. These carry real information, so they take the muted tone. */
.contact-next__title { color: var(--hb-muted); }
.contact-form__privacy { color: var(--hb-muted); }

/* =============================================================================
   CONTACT — the custom listbox
   -----------------------------------------------------------------------------
   A native select's option list belongs to the operating system, so this is the
   only way the choices can carry the brand. The native control is still the
   form field underneath; it is hidden, not replaced.
   ============================================================================= */

.hb-select { position: relative; }

/* Present for the form, absent from sight and from the tab order. Not
   `display: none`, because a hidden control still has to be submitted and, if
   it ever fails validation, focusable enough for the browser to report it. */
.hb-select__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
}

.hb-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 13px;
    border-radius: var(--hb-r-md);
    border: 1px solid var(--hb-line);
    background: var(--hb-paper);
    color: var(--hb-ink);
    font-size: var(--hb-t-sm);
    font-family: inherit;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--hb-fast) var(--hb-ease),
        background-color var(--hb-fast) var(--hb-ease);
}
.hb-select__trigger:hover { border-color: #c0cfe4; background: var(--hb-mist); }
.hb-select__trigger:focus-visible { outline: 2px solid var(--hb-blue); outline-offset: -2px; }
.hb-select.is-open .hb-select__trigger {
    border-color: var(--hb-blue);
    background: var(--hb-paper);
}
.hb-select.is-placeholder .hb-select__value { color: var(--hb-muted); }

.hb-select__chevron {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: var(--hb-muted);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--hb-mid) var(--hb-ease);
}
.hb-select.is-open .hb-select__chevron { transform: rotate(180deg); stroke: var(--hb-blue-deep); }

/* ── The list ─────────────────────────────────────────────────────────────── */
.hb-select__list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 5px;
    list-style: none;
    border-radius: var(--hb-r-md);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    animation: hb-select-in 150ms var(--hb-ease-out) both;
}
@keyframes hb-select-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.hb-select__list[hidden] { display: none; }

.hb-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--hb-r-sm);
    font-size: var(--hb-t-sm);
    line-height: 1.4;
    color: var(--hb-ink);
    cursor: pointer;
}
/* The keyboard cursor and the pointer share one highlight, so there is never a
   question of which row Enter will take. */
.hb-select__option.is-active { background: var(--hb-mist); }
.hb-select__option[aria-selected="true"] {
    background: var(--hb-blue-wash);
    color: var(--hb-blue-dark);
    font-weight: 580;
}
.hb-select__option[aria-selected="true"].is-active { background: #dceeff; }
.hb-select__option[aria-disabled="true"] { color: var(--hb-muted); cursor: default; }

.hb-select__tick {
    width: 15px;
    height: 15px;
    flex: none;
    opacity: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hb-select__option[aria-selected="true"] .hb-select__tick { opacity: 1; }
.hb-select__option[aria-disabled="true"] .hb-select__tick { display: none; }

@media (prefers-reduced-motion: reduce) {
    .hb-select__list { animation: none; }
    .hb-select__chevron { transition: none; }
}

/* ── Two exits for people who should not be filling this in ───────────────── */
.contact-elsewhere {
    margin-top: clamp(20px, calc(2.4 * var(--hb-vw, 1vw)), 28px);
    padding-top: clamp(18px, calc(2 * var(--hb-vw, 1vw)), 22px);
    border-top: 1px solid var(--hb-line);
    display: grid;
    gap: 10px;
}
.contact-elsewhere p {
    font-size: var(--hb-t-xs);
    line-height: 1.6;
    color: var(--hb-muted);
}
.contact-elsewhere strong { color: var(--hb-ink); font-weight: 620; }
.contact-elsewhere a {
    color: var(--hb-blue-deep);
    font-weight: 560;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =============================================================================
   CONTACT — density pass
   -----------------------------------------------------------------------------
   Same treatment as the purchase page. This is a working screen, not a landing
   page: somebody arrives with a question already formed and wants the form in
   front of them, not an essay above it.
   ============================================================================= */

.contact-main {
    padding-top: calc(var(--hb-nav-h) + clamp(22px, calc(2.6 * var(--hb-vw, 1vw)), 34px));
    padding-bottom: clamp(36px, calc(4 * var(--hb-vw, 1vw)), 56px);
    min-height: 0;
}
.contact-layout { gap: clamp(28px, calc(3.4 * var(--hb-vw, 1vw)), 48px); grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }

/* ── Left column ──────────────────────────────────────────────────────────── */
.contact-intro__eyebrow { font-size: 10px; margin-bottom: 8px; }
.contact-intro__heading {
    font-size: clamp(1.5rem, 1.2rem + calc(1.1 * var(--hb-vw, 1vw)), 1.95rem);
    font-weight: 620;
    letter-spacing: -.026em;
    line-height: 1.14;
    margin-bottom: 10px;
}
.contact-intro__body {
    font-size: var(--hb-t-sm);
    line-height: 1.6;
    margin-bottom: clamp(20px, calc(2.4 * var(--hb-vw, 1vw)), 26px);
    max-width: 46ch;
}

.contact-reasons { gap: 14px; margin-bottom: 0; }
.contact-reasons li { gap: 11px; }
.contact-reasons__icon { width: 26px; height: 26px; border-radius: 8px; }
.contact-reasons__icon svg { width: 13px; height: 13px; }
.contact-reasons li strong { font-size: var(--hb-t-xs); font-weight: 620; margin-bottom: 2px; }
.contact-reasons li p { font-size: 11.5px; line-height: 1.5; }

.contact-next { margin-top: clamp(18px, calc(2.2 * var(--hb-vw, 1vw)), 24px); padding: 14px 16px; border-radius: var(--hb-r-md); }
.contact-next__title { font-size: 10px; margin-bottom: 9px; }
.contact-next__steps { gap: 7px; }
.contact-next__steps li { font-size: 11.5px; line-height: 1.5; gap: 8px; }
.contact-next__steps li > span { width: 17px; height: 17px; font-size: 9.5px; }

/* ── Already a customer ───────────────────────────────────────────────────── */
.contact-elsewhere { margin-top: 16px; padding-top: 14px; gap: 8px; }
.contact-elsewhere p { font-size: 11.5px; line-height: 1.55; }

/* ── Form panel ───────────────────────────────────────────────────────────── */
.contact-form-wrap { padding: clamp(20px, calc(2.2 * var(--hb-vw, 1vw)), 26px); border-radius: var(--hb-r-xl); }
.contact-form { gap: 13px; }
.contact-form__row { gap: 13px; }
.contact-form__row--2 { gap: 12px; }
.contact-form__field { gap: 5px; }
.contact-form__field label { font-size: 11.5px; }
.contact-form__optional { font-size: 10.5px; }

.contact-form__field input,
.contact-form__field textarea,
.hb-select__trigger {
    padding: 9px 11px;
    font-size: 12.5px;
    border-radius: var(--hb-r-sm);
}
.contact-form__field textarea { min-height: 84px; }
.hb-select__list { border-radius: var(--hb-r-sm); padding: 4px; }
.hb-select__option { padding: 7px 9px; font-size: 12.5px; }

.contact-form__submit { margin-top: 4px; padding-top: 14px; gap: 8px; }
.contact-form__btn { padding: 11px 20px; font-size: var(--hb-t-xs); }
.contact-form__privacy { font-size: 10.5px; }

@media (max-width: 860px) {
    .contact-layout { grid-template-columns: 1fr; }
}