:root {
    --hoh-primary: #365744;
    --hoh-accent: #A88755;
    --hoh-dark: #26352D;
    --hoh-light: #F5F4EF;
}

.hoh-mortgage-wrap {
    --hoh-site-primary: var(--e-global-color-primary, var(--hoh-primary));
    --hoh-site-accent: var(--e-global-color-accent, var(--hoh-accent));
    --hoh-site-dark: var(--e-global-color-text, var(--hoh-dark));
    --hoh-site-light: var(--e-global-color-secondary, var(--hoh-light));

    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;

    /* Elementor Global Text Typography */
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
    color: var(--e-global-color-text);
}

.hoh-mortgage-wrap *,
.hoh-mortgage-wrap *::before,
.hoh-mortgage-wrap *::after {
    box-sizing: border-box;
}


/* =========================================
   MAIN GRID
========================================= */

.hoh-mortgage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================
   CARDS
========================================= */

.hoh-mortgage-card {
    border: 1px solid rgba(38, 53, 45, .12);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(38, 53, 45, .07);
}

.hoh-mortgage-form-card {
    padding: clamp(26px, 4vw, 48px);
}

.hoh-mortgage-result-card {
    padding: clamp(28px, 4vw, 48px);
    background: var(--hoh-site-primary);
    color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* =========================================
   ALL NORMAL TEXT
========================================= */

.hoh-mortgage-wrap p,
.hoh-mortgage-wrap span,
.hoh-mortgage-wrap label,
.hoh-mortgage-wrap input,
.hoh-mortgage-wrap select,
.hoh-mortgage-wrap option,
.hoh-mortgage-wrap strong,
.hoh-mortgage-wrap small {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
}


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

.hoh-mortgage-eyebrow,
.hoh-result-label {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
}

.hoh-mortgage-eyebrow {
    color: var(--hoh-site-accent);
    margin-bottom: 10px;
}

.hoh-result-label {
    color: #fff;
    opacity: .82;
}


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

.hoh-mortgage-form-card h2 {
    color: var(--hoh-site-dark);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
    margin: 0 0 14px;
}


/* =========================================
   INTRO PARAGRAPH
========================================= */

.hoh-mortgage-intro {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
    color: var(--e-global-color-text);

    margin: 0 0 28px;
}


/* =========================================
   FORM
========================================= */

.hoh-mortgage-form {
    display: grid;
    gap: 18px;
}


/* =========================================
   FORM LABELS
========================================= */

.hoh-mortgage-field label {
    display: block;

    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);

    color: var(--e-global-color-text);

    margin: 0 0 8px;
}


/* =========================================
   FORM INPUTS
========================================= */

.hoh-mortgage-field input,
.hoh-mortgage-field select {
    appearance: none;

    width: 100%;
    min-height: 54px;

    border: 1px solid #D7DDD8;
    border-radius: 9px;

    background: #fff;

    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);

    color: var(--e-global-color-text);

    padding: 14px 16px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.hoh-mortgage-field input:focus,
.hoh-mortgage-field select:focus {
    border-color: var(--e-global-color-primary);

    box-shadow: 0 0 0 3px rgba(54, 87, 68, .12);
}


/* =========================================
   INPUT PREFIX
========================================= */

.hoh-input-prefix,
.hoh-input-suffix {
    position: relative;
}

.hoh-input-prefix > span {
    position: absolute;
    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);

    color: var(--e-global-color-text);

    pointer-events: none;
}

.hoh-input-prefix input {
    padding-left: 32px;
}


/* =========================================
   INPUT SUFFIX
========================================= */

.hoh-input-suffix > span {
    position: absolute;
    right: 16px;
    top: 50%;

    transform: translateY(-50%);

    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);

    color: var(--e-global-color-text);

    pointer-events: none;
}

.hoh-input-suffix input {
    padding-right: 36px;
}


/* =========================================
   DOWN PAYMENT ROW
========================================= */

.hoh-down-row {
    display: grid;
    grid-template-columns: 1fr 125px;
    gap: 10px;
}


/* =========================================
   BUTTON
   Elementor Global Accent Typography
========================================= */

.hoh-mortgage-button,
.hoh-mortgage-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;

    border: 0;

    border-radius: 10px 10px 10px 10px;

    padding: 15px 25px 15px 25px;

    background-color: var(--e-global-color-accent);

    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);

    line-height: 1.2;

    color: #fff;
    fill: var(--e-global-color-2d94434);

    cursor: pointer;

    text-align: center;
    text-decoration: none;

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


/* =========================================
   BUTTON HOVER
========================================= */

.hoh-mortgage-button:hover,
.hoh-mortgage-cta:hover {
    background-color: var(--e-global-color-b4eaf9c);

    color: var(--e-global-color-2d94434);

    font-size: var(--e-global-typography-accent-font-size);

    transform: translateY(-1px);
}


/* =========================================
   ERROR
========================================= */

.hoh-mortgage-error {
    min-height: 0;

    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);

    color: var(--e-global-color-text);
}


/* =========================================
   RESULT PAYMENT
========================================= */

.hoh-result-payment {
    color: #fff;

    font-size: clamp(42px, 6vw, 66px);
    font-weight: 800;

    letter-spacing: -.03em;
    line-height: 1;

    margin: 16px 0 8px;
}


/* =========================================
   RESULT SUBTEXT
========================================= */

.hoh-result-subtext {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);

    color: #fff;

    opacity: .76;

    margin: 0 0 32px;
}


/* =========================================
   RESULT DETAILS
========================================= */

.hoh-result-details {
    border-top: 1px solid rgba(255, 255, 255, .2);
    border-bottom: 1px solid rgba(255, 255, 255, .2);

    margin-bottom: 24px;
}

.hoh-result-details > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 13px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.hoh-result-details > div:last-child {
    border-bottom: 0;
}


/* =========================================
   RESULT DETAIL TEXT
   Elementor Global Text Typography
========================================= */

.hoh-result-details span,
.hoh-result-details strong {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
}


/* Result labels */

.hoh-result-details span {
    color: #fff;
    opacity: .72;
}


/* Result values */

.hoh-result-details strong {
    color: #fff;
}


/* =========================================
   DISCLAIMER
   Elementor Global Text Typography
========================================= */

.hoh-mortgage-disclaimer {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);

    color: #fff;
    opacity: .72;

    margin: 0;
}


/* =========================================
   CTA
========================================= */

.hoh-mortgage-cta-wrap {
    display: flex;
    justify-content: flex-start;

    margin: 30px 0;
}

.hoh-mortgage-cta {
    background-color: var(--e-global-color-accent);
}


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

@media (max-width: 800px) {

    .hoh-mortgage-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hoh-mortgage-result-card {
        min-height: auto;
    }
}


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

@media (max-width: 520px) {

    .hoh-mortgage-form-card,
    .hoh-mortgage-result-card {
        padding: 24px 20px;
        border-radius: 14px;
    }

    .hoh-down-row {
        grid-template-columns: 1fr;
    }

    .hoh-mortgage-button {
        width: 100%;
    }

    .hoh-result-payment {
        font-size: 44px;
    }
}