/* ==========================================================================
   Contact redesign — "Get in touch" page + Ninja Form #3 restyle
   Scoped under .thermal-contact so the live /contact form (#2) is untouched.
   ========================================================================== */
.thermal-contact {
    color: #fff;
}

/* ---- Header ---- */
.thermal-contact__title {
    margin: 0 0 64px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    color: #fff;
}

.thermal-contact__herorow {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

.thermal-contact__info {
    flex: 0 0 386px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.thermal-contact__info-top {
    display: flex;
    gap: 64px;
}

.thermal-contact__label {
    margin: 0 0 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
}

.thermal-contact__text {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    color: #b8b8b8;
}

#content .thermal-contact__text a {
    color: #b8b8b8 !important;
    text-decoration: underline;
    font-weight: 300;
}

#content .thermal-contact__text a::after {
    display: none;
}

.thermal-contact__media {
    flex: 1 1 420px;
    min-width: 280px;
}

.thermal-contact__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1080;
    object-fit: cover;
    border-radius: 2px;
}

/* ---- Form heading ---- */
.thermal-contact__formwrap {
    margin-top: 80px;
}

.thermal-contact__formtitle {
    margin: 0 0 36px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #fff;
}

/* ---- Ninja Forms reset within the page ---- */
.thermal-contact .nf-form-cont {
    counter-reset: nf;
}

.thermal-contact .nf-form-content {
    max-width: none;
    padding: 0;
}

.thermal-contact .nf-field-container {
    margin-bottom: 0;
    counter-increment: nf;
}

.thermal-contact .nf-field-container .nf-field {
    position: relative;
}

.thermal-contact .nf-before-field, .thermal-contact .nf-after-field .nf-input-limit {
    display: none;
}

.thermal-contact .nf-error-wrap.nf-error {
    display: none;
}

/* repositioned per-field below */
.thermal-contact .nf-field-label {
    margin: 0;
}

.thermal-contact .nf-element {
    font-family: 'Poppins', sans-serif;
}

/* Numbered rows: text/email/textarea/list fields get 01..0n + an underline */
.thermal-contact .nf-field-container:not(.checkbox-container):not(.submit-container) > .nf-field {
    padding: 18px 0 18px 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.thermal-contact .nf-field-container:not(.checkbox-container):not(.submit-container) > .nf-field::before {
    content: counter(nf, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #5c5c5c;
}

.thermal-contact .nf-field-label label,
.thermal-contact .nf-field-label .nf-label-span {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #d6d6d6;
    cursor: default;
}

/* Required indicator → red dot at the right edge of the row */
.thermal-contact .ninja-forms-req-symbol {
    font-size: 0;
    position: absolute;
    right: 0;
    top: 24px;
}

.thermal-contact .ninja-forms-req-symbol::after {
    content: "*";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff4242;
}

/* Text + email + textarea inputs: transparent, no box (row underline is the line) */
.thermal-contact input.nf-element[type="text"],
.thermal-contact input.nf-element[type="email"],
.thermal-contact .nf-field-element textarea.nf-element {
    width: 100%;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
    box-shadow: none;
    -webkit-appearance: none;
}

.thermal-contact .nf-field-element textarea.nf-element {
    min-height: 28px;
    resize: vertical;
}

.thermal-contact input.nf-element:focus, .thermal-contact textarea.nf-element:focus {
    outline: none;
}

/* ---- Option groups (Engagement goal, Service) = button grid ---- */
.thermal-contact .list-wrap .nf-field-label {
    position: relative;
    cursor: pointer;
    padding-right: 28px;
}

.thermal-contact .list-wrap .nf-field-label::after { /* chevron */
    content: "";
    position: absolute;
    right: 2px;
    top: 6px;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid #8a8a8a;
    border-bottom: 1.5px solid #8a8a8a;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.thermal-contact .list-wrap.is-collapsed .nf-field-label::after {
    transform: rotate(-135deg);
}

.thermal-contact .list-wrap .nf-field-element {
    margin-top: 18px;
    overflow: hidden;
}

.thermal-contact .list-wrap.is-collapsed .nf-field-element {
    display: none;
}

.thermal-contact .list-wrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.thermal-contact .list-checkbox-wrap li, .thermal-contact .list-radio-wrap li {
    margin: 0;
}

.thermal-contact .list-checkbox-wrap li label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #b8b8b8;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.thermal-contact .list-checkbox-wrap li input { /* small square indicator */
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin: 0;
    border: 1px solid #6e6e6e;
    border-radius: 1px;
    background: transparent;
}

.thermal-contact .list-checkbox-wrap li input:checked {
    background: #33ffcc;
    border-color: #33ffcc;
}

.thermal-contact .list-checkbox-wrap li:has(input:checked) label {
    color: #fff;
    border-color: #fff;
}

.thermal-contact .list-checkbox-wrap input[type="checkbox"] {
    width: 0;
    height: 0;
}

/* ---- Budget = inline radio row ---- */
.thermal-contact .list-radio-wrap ul {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.thermal-contact .list-radio-wrap li label {
    display: inline-flex;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #8a8a8a;
    cursor: pointer;
}

.thermal-contact .list-radio-wrap li input {
    display: none;
}

.thermal-contact .list-radio-wrap li:has(input:checked) label {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* "N selected" counter (injected by JS) */
.thermal-contact .thermal-nf-count {
    margin-left: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: #8a8a8a;
}

/* ---- Checkboxes (privacy, newsletter) ---- */
.thermal-contact .checkbox-container > .nf-field {
    padding: 0;
}

.thermal-contact .checkbox-container .field-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.thermal-contact .checkbox-container .nf-field-element {
    order: -1;
}

.thermal-contact .checkbox-container input.nf-element {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    border: 1px solid #8a8a8a;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
}

.thermal-contact .checkbox-container input.nf-element:checked {
    background: #33ffcc;
    border-color: #33ffcc;
}

.thermal-contact .checkbox-container .nf-field-label label {
    font-size: 15px;
    color: #cfcfcf;
    cursor: pointer;
}

#content .thermal-contact .checkbox-container a {
    color: #cfcfcf !important;
    text-decoration: underline;
    font-weight: 400;
}

#content .thermal-contact .checkbox-container a::after {
    display: none;
}

/* ---- SEND ---- */
.thermal-contact .submit-container {
    margin-top: 8px;
}

.thermal-contact .submit-container input.nf-element {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    color: #fff;
    letter-spacing: 0.5px;
}

.thermal-contact .submit-container input.nf-element:hover {
    color: #33ffcc;
}

/* ---- Validation error: red pill ABOVE the field + red invalid text ---- */
.thermal-contact .nf-field-container.nf-error-show .nf-error-wrap.nf-error {
    display: block;
    position: absolute;
    left: 44px;
    top: -2px;
    z-index: 2;
    background: #c0392b;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 2px;
}

.thermal-contact .nf-field-container .nf-error-wrap.nf-error .nf-error-msg {
    color: #fff;
    margin: 0;
}

.thermal-contact .nf-error input.nf-element {
    color: #e87b7b;
}

.thermal-contact .nf-error .nf-field-label label {
    color: #e87b7b;
}

/* ---- Success modal ---- */
.thermal-form-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 8, 8, 0.82);
}

.thermal-form-modal.is-open {
    display: flex;
}

.thermal-form-modal__box {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 28px 32px 32px;
}

.thermal-form-modal__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 16px;
}

.thermal-form-modal__brand {
    display: block;
    width: auto;
    height: 28px;   /* white Thermal logo (mark + wordmark), 635×172 */
    margin-bottom: 0 !important;
}

.thermal-form-modal__close {
    background: none;
    border: 0;
    color: #cfcfcf;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}

.thermal-form-modal__eyebrow {
    margin: 24px 0 6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 1.4px;
    color: #33ffcc;
    text-transform: none;
}

.thermal-form-modal__title {
    margin: 0 0 14px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #fff;
}

.thermal-form-modal__text {
    margin: 0 0 24px;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    color: #cfcfcf;
}

.thermal-form-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.thermal-form-modal__sig {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #8a8a8a;
}

#content .thermal-form-modal__home, .thermal-form-modal__home {
    color: #fff !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .thermal-contact .list-wrap ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .thermal-contact .list-radio-wrap ul {
        gap: 24px;
    }
}

@media (max-width: 600px) {
    .thermal-contact__info-top {
        gap: 32px;
    }

    .thermal-contact .list-wrap ul {
        grid-template-columns: 1fr;
    }

    /* Radio options (Select budget) stack one per row too */
    .thermal-contact .list-radio-wrap ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .thermal-contact .submit-container input.nf-element {
        font-size: 32px;
    }

    /* Mobile: drop the 44px left gutter so the field/input spans full width.
       Keep the "01" number inline by indenting only the label, not the input. */
    .thermal-contact .nf-field-container:not(.checkbox-container):not(.submit-container) > .nf-field {
        padding-left: 0;
    }

    .thermal-contact .nf-field-container:not(.checkbox-container):not(.submit-container) > .nf-field .nf-field-label {
        padding-left: 30px;
    }
}

/* Contact redesign — fixes */
body.page-id-10159 .entry-title {
    display: none !important;
}

.thermal-contact .nf-form-fields-required {
    display: none;
}

.thermal-contact .list-wrap .nf-field-label {
    display: block;
    width: 100%;
}

.thermal-contact__media {
    max-width: 600px;
    margin-left: auto;
}

/* Contact redesign — checkbox + label styling (comp-accurate) */
.thermal-contact .checkbox-container > .nf-field {
    padding: 0;
}

.thermal-contact .checkbox-container {
    margin-bottom: 20px;
    padding: 18px 0 18px 44px;
}

.thermal-contact .checkbox-container .field-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
}

.thermal-contact .checkbox-container .nf-field-element {
    order: -1;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

.thermal-contact .checkbox-container .nf-field-label {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
}

.thermal-contact .checkbox-container input.nf-element {
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 2px;
    border: 1px solid #d3d3d3;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
}

.thermal-contact .checkbox-container input.nf-element:checked {
    background-color: #d3d3d3;
    background-clip: content-box;
}

.thermal-contact .checkbox-container .nf-field-label label {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #d3d3d3;
    cursor: pointer;
}

.thermal-contact .checkbox-container .ninja-forms-req-symbol {
    display: none;
}

.thermal-contact .thermal-nf-subtext {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.4;
    color: #8a8a8a;
    margin-top: 2px;
}

/* Force checkbox box dimensions (NF/theme set an input height that squashes it) */
.thermal-contact .checkbox-container input.nf-element {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px;
    flex: 0 0 16px;
    align-self: center;
}

/* Collapse NF's tall checkbox label so text aligns with the box */
.thermal-contact .checkbox-container .nf-field-label {
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

.thermal-contact .checkbox-container .nf-field-label label {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.35;
    margin: 0;
    padding: 0;
    display: block;
}

/* Checkbox row: explicit grid placement so box (col1) + label (col2) can never stack */
.thermal-contact .checkbox-container .field-wrap {
    display: grid !important;
    grid-template-columns: 16px 1fr;
    align-items: center;
    column-gap: 16px;
}

.thermal-contact .checkbox-container .nf-field-element {
    grid-area: 1 / 1;
    margin: 0;
}

.thermal-contact .checkbox-container .nf-field-label {
    grid-area: 1 / 2;
}

/* Progressive accordion sections (01–07): chevron on the row, collapse hides body */
.thermal-contact .list-wrap .nf-field-label::after {
    content: none !important;
}

/* drop old list-only chevron */
.thermal-contact .thermal-acc > .nf-field {
    position: relative;
}

.thermal-contact .thermal-acc .nf-field-label {
    cursor: pointer;
}

.thermal-contact .thermal-acc > .nf-field::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25px;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid #8a8a8a;
    border-bottom: 1.5px solid #8a8a8a;
    transform: rotate(-135deg); /* up = expanded */
    transition: transform 0.2s ease;
    pointer-events: none;
}

.thermal-contact .thermal-acc.is-collapsed > .nf-field::after {
    transform: rotate(45deg);
}

/* down = collapsed */
.thermal-contact .thermal-acc.is-collapsed .nf-field-element {
    display: none !important;
}

/* collapse the error message with the section too (it lives in a sibling .nf-after-field) */
.thermal-contact .thermal-acc.is-collapsed .nf-after-field {
    display: none !important;
}

/* required dot sits just left of the chevron on accordion rows */
.thermal-contact .thermal-acc .ninja-forms-req-symbol {
    right: 26px;
}


/* ==========================================================================
   Contact redesign - Figma comp-accurate: checkbox icon/border + error states
   (appended override block - wins via cascade order; CHECK = data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M7.54187 3.41687C7.63872 3.32467 7.7676 3.2737 7.90131 3.27471C8.03503 3.27572 8.16312 3.32864 8.25856 3.4223C8.354 3.51595 8.40932 3.64302 8.41286 3.77669C8.41639 3.91037 8.36786 4.04018 8.2775 4.13875L5.53438 7.56938C5.48721 7.62018 5.43028 7.66095 5.36699 7.68925C5.3037 7.71755 5.23536 7.7328 5.16605 7.73408C5.09673 7.73537 5.02787 7.72266 4.96358 7.69672C4.89929 7.67078 4.84089 7.63215 4.79187 7.58312L2.97275 5.764C2.92209 5.71679 2.88146 5.65987 2.85328 5.59662C2.82509 5.53337 2.80994 5.46509 2.80872 5.39586C2.8075 5.32663 2.82023 5.25786 2.84617 5.19365C2.8721 5.12945 2.9107 5.07112 2.95966 5.02216C3.00862 4.9732 3.06695 4.9346 3.13115 4.90867C3.19536 4.88273 3.26413 4.87 3.33336 4.87122C3.40259 4.87244 3.47087 4.88759 3.53412 4.91578C3.59737 4.94396 3.65429 4.98459 3.7015 5.03525L5.14113 6.47419L7.52881 3.432L7.54187 3.41687Z' fill='%230D0D0D'/%3E%3C/svg%3E)
   ========================================================================== */

/* --- Checkbox chip (Engagement goal, Select service):
       border wraps BOTH the checkbox box AND the label (Figma service_item) --- */
.thermal-contact .list-checkbox-wrap li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    border: 1px solid #5c5c5c;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.thermal-contact .list-checkbox-wrap li label {
    flex: 1 1 auto;
    display: block;
    margin: 0 !important;
    padding: 7px;
    border: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #d3d3d3;
    cursor: pointer;
    transition: color .2s ease;
}

.thermal-contact .list-checkbox-wrap li label::before {
    width: 7px;
    height: 7px;
    font-size: 13px;
    left: -19px;
    top: 7px;
}

.thermal-contact .list-checkbox-wrap li label::after {
    width: 15px;
    height: 15px;
    left: -20px;
    top: 50%;
    transform:translateY(-50%);
}

.thermal-contact .list-checkbox-wrap li input {
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    margin: 0 !important;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: #282828;
    opacity: 1 !important; /* NF dark skin hides the real input (opacity:0); show it */
    cursor: pointer;
}

/* Disable NinjaForms' dark pseudo-skin on list items (label::before = check,
   label::after = bordered box) so the real input above is what renders — making
   Engagement goal / Select service identical to the privacy/newsletter boxes. */
.thermal-contact .list-checkbox-wrap li label::before,
.thermal-contact .list-checkbox-wrap li label::after {
    content: none !important;
}

.thermal-contact .list-checkbox-wrap li input:checked {
    border-color: #ffffff;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M7.54187 3.41687C7.63872 3.32467 7.7676 3.2737 7.90131 3.27471C8.03503 3.27572 8.16312 3.32864 8.25856 3.4223C8.354 3.51595 8.40932 3.64302 8.41286 3.77669C8.41639 3.91037 8.36786 4.04018 8.2775 4.13875L5.53438 7.56938C5.48721 7.62018 5.43028 7.66095 5.36699 7.68925C5.3037 7.71755 5.23536 7.7328 5.16605 7.73408C5.09673 7.73537 5.02787 7.72266 4.96358 7.69672C4.89929 7.67078 4.84089 7.63215 4.79187 7.58312L2.97275 5.764C2.92209 5.71679 2.88146 5.65987 2.85328 5.59662C2.82509 5.53337 2.80994 5.46509 2.80872 5.39586C2.8075 5.32663 2.82023 5.25786 2.84617 5.19365C2.8721 5.12945 2.9107 5.07112 2.95966 5.02216C3.00862 4.9732 3.06695 4.9346 3.13115 4.90867C3.19536 4.88273 3.26413 4.87 3.33336 4.87122C3.40259 4.87244 3.47087 4.88759 3.53412 4.91578C3.59737 4.94396 3.65429 4.98459 3.7015 5.03525L5.14113 6.47419L7.52881 3.432L7.54187 3.41687Z' fill='%230D0D0D'/%3E%3C/svg%3E") center / contain no-repeat;
}

.thermal-contact .list-checkbox-wrap li:has(input:checked) {
    border-color: #ffffff;
}

.thermal-contact .list-checkbox-wrap li:has(input:checked) label {
    color: #ffffff;
}

#thermal-acc-panel-3 li,
#thermal-acc-panel-4 li {
    display: flex;
    align-items: center;        /* vertically center checkbox against (possibly 2-line) label */
    padding-left: 5px !important; /* 5px gap from the pill's left edge (NF resets li padding) */
}

#thermal-acc-panel-5 {
    padding-top: 5px;
    padding-left: 5px;
    margin-top: -5px;
    margin-left: -5px;
}

/* --- Single checkboxes (privacy, newsletter): borderless box + dark check icon when checked.
   NinjaForms' dark skin (display-opinions-dark.css) hides the real <input> via opacity:0 and
   paints its own bordered box on the label's ::before/::after; we re-show the input and kill
   that skin below so this is the box that actually renders. --- */
.thermal-contact .checkbox-container .nf-field-element input {
    opacity: 1 !important;
}

.thermal-contact .checkbox-container .nf-field-label label::before,
.thermal-contact .checkbox-container .nf-field-label label::after {
    content: none !important;
}

.thermal-contact .checkbox-container input.nf-element {
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: #282828;
    cursor: pointer;
}

.thermal-contact .checkbox-container input.nf-element:checked {
    border-color: #ffffff;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M7.54187 3.41687C7.63872 3.32467 7.7676 3.2737 7.90131 3.27471C8.03503 3.27572 8.16312 3.32864 8.25856 3.4223C8.354 3.51595 8.40932 3.64302 8.41286 3.77669C8.41639 3.91037 8.36786 4.04018 8.2775 4.13875L5.53438 7.56938C5.48721 7.62018 5.43028 7.66095 5.36699 7.68925C5.3037 7.71755 5.23536 7.7328 5.16605 7.73408C5.09673 7.73537 5.02787 7.72266 4.96358 7.69672C4.89929 7.67078 4.84089 7.63215 4.79187 7.58312L2.97275 5.764C2.92209 5.71679 2.88146 5.65987 2.85328 5.59662C2.82509 5.53337 2.80994 5.46509 2.80872 5.39586C2.8075 5.32663 2.82023 5.25786 2.84617 5.19365C2.8721 5.12945 2.9107 5.07112 2.95966 5.02216C3.00862 4.9732 3.06695 4.9346 3.13115 4.90867C3.19536 4.88273 3.26413 4.87 3.33336 4.87122C3.40259 4.87244 3.47087 4.88759 3.53412 4.91578C3.59737 4.94396 3.65429 4.98459 3.7015 5.03525L5.14113 6.47419L7.52881 3.432L7.54187 3.41687Z' fill='%230D0D0D'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Validation error: tinted box + red left border, placed BELOW the label + field --- */
.thermal-contact .nf-error-wrap.nf-error {
    display: none;
}

.thermal-contact .nf-error-wrap.nf-error:has(.nf-error-msg) {
    display: inline-block;
    width: fit-content;
    margin: 12px 0 0;
    position: static;
    z-index: auto;
    background: rgba(251, 44, 54, 0.1);
    border: 0;
    border-left: 2px solid #fb2c36;
    border-radius: 0;
    padding: 4px 14px;
}

.thermal-contact .nf-error-wrap.nf-error .nf-error-msg {
    margin: 0;
    color: #ffa2a2;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
}

.thermal-contact .nf-field-container:has(.nf-error-msg) input.nf-element,
.thermal-contact .nf-field-container:has(.nf-error-msg) textarea.nf-element {
    color: #d77979;
}

.thermal-contact .nf-field-container:has(.nf-error-msg) .nf-field-label label {
    color: #d77979;
}

/* hide NF's default red error box / green pass check on the field element */
.thermal-contact .nf-error.field-wrap .nf-field-element::after,
.thermal-contact .nf-error.field-wrap .nf-field-element::before,
.thermal-contact .nf-pass.field-wrap .nf-field-element::after,
.thermal-contact .nf-pass.field-wrap .nf-field-element::before {
    content: none !important;
    display: none !important;
    background: none !important;
}


/* --- White border on text/email/textarea inputs --- */
.thermal-contact input.nf-element[type="text"],
.thermal-contact input.nf-element[type="email"],
.thermal-contact .nf-field-element textarea.nf-element {
    border: 1px solid #ffffff;
    border-radius: 2px;
    padding: 12px 14px;
    margin-top: 12px;
    background: transparent;
}

/* keep the white border on focus/hover (NF otherwise swaps in a grey box) */
.thermal-contact input.nf-element[type="text"]:focus,
.thermal-contact input.nf-element[type="email"]:focus,
.thermal-contact .nf-field-element textarea.nf-element:focus,
.thermal-contact input.nf-element[type="text"]:hover,
.thermal-contact input.nf-element[type="email"]:hover,
.thermal-contact .nf-field-element textarea.nf-element:hover {
    border-color: #ffffff;
    background: transparent;
}

/* keep the white border through NF's validation states (pass=green / fail=red box) */
.thermal-contact .field-wrap.nf-pass input.nf-element[type="text"],
.thermal-contact .field-wrap.nf-pass input.nf-element[type="email"],
.thermal-contact .field-wrap.nf-pass textarea.nf-element,
.thermal-contact .field-wrap.nf-error input.nf-element[type="text"],
.thermal-contact .field-wrap.nf-error input.nf-element[type="email"],
.thermal-contact .field-wrap.nf-error textarea.nf-element {
    border-color: #ffffff !important;
    background: transparent;
}


/* ==========================================================================
   Contact redesign - Accessibility (keyboard focus, SR-reachable radios)
   ========================================================================== */

/* Budget radios: visually hidden but keyboard/screen-reader accessible
   (replaces the old display:none, which removed them from the a11y tree). */
.thermal-contact .list-radio-wrap li input {
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Visible keyboard focus indicators (brand teal) - the design strips outlines
   (global `outline:none !important` resets), so restore them for keyboard users
   via :focus-visible, with !important to beat those resets. */
.thermal-contact input.nf-element[type="text"]:focus-visible,
.thermal-contact input.nf-element[type="email"]:focus-visible,
.thermal-contact .nf-field-element textarea.nf-element:focus-visible {
    outline: 2px solid #33ffcc !important;
    outline-offset: 2px;
}

.thermal-contact .checkbox-container input.nf-element:focus-visible {
    outline: 2px solid #33ffcc !important;
    outline-offset: 3px;
}

.thermal-contact .list-checkbox-wrap li:has(input:focus-visible) {
    outline: 2px solid #33ffcc !important;
    outline-offset: 2px;
}

.thermal-contact .list-radio-wrap li:has(input:focus-visible) label {
    outline: 2px solid #33ffcc !important;
    outline-offset: 4px;
}

.thermal-contact .thermal-acc .nf-field-label:focus-visible {
    outline: 2px solid #33ffcc !important;
    outline-offset: 4px;
}

.thermal-contact .submit-container input.nf-element:focus-visible {
    outline: 2px solid #33ffcc !important;
    outline-offset: 6px;
}

.thermal-form-modal__close:focus-visible,
.thermal-form-modal__home:focus-visible {
    outline: 2px solid #33ffcc !important;
    outline-offset: 3px;
}

/* Accordion header is an interactive button; the whole header row
   (01 / label … chevron) is the click target, except the field panel. */
.thermal-contact .thermal-acc .nf-field-label[role="button"] {
    cursor: pointer;
}

.thermal-contact .thermal-acc > .nf-field {
    cursor: pointer;
}

.thermal-contact .thermal-acc > .nf-field .nf-field-element {
    cursor: auto;
}

/* Respect reduced-motion: drop the chevron/border transitions */
@media (prefers-reduced-motion: reduce) {
    .thermal-contact * {
        transition: none !important;
    }
}

/* Form-level error summary: NF's #e80000 fails contrast on the dark bg;
   use the accessible error pink (matches the per-field messages). */
.thermal-contact .nf-error-field-errors,
.thermal-contact .nf-form-errors .nf-error-msg,
.thermal-contact .nf-form-errors {
    color: #ffa2a2;
}