.td-agent, .td-agent strong {
    color: red;
    font-style: italic;
}

.td-patmat {
    color: green;
    font-weight: bold;
}

#banner {
    background-image: url("../images/favona-blur.jpg");
    /* make the background cover the whole area */
    background-size: cover;
    /* make the background fixed */
    background-attachment: fixed;
}

.face img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

p.left {
    text-align: left;
}

p.right {
    text-align: right;
}

.box.features .features-row {
    border-top: none;
}

.box.features .features-row section:nth-child(2n):before {
    background: none;
}

header.major {
    padding-bottom: 3em;
}

.image.featured .caption {
    /* Position relative to the parent */
    position: absolute;
    bottom: 10px;
    left: 10px;
    /* 
    left: 50% 
    transform: translateX(-50%);
    */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

small {
    font-size: 75%;
}

/* Make the top "Get Your Free, No-Obligation Offer" form narrower and centered
   so it visually matches the slimmer CTA form at the bottom. */
#appraisal form {
    margin: 0 auto;
    max-width: 30em; /* narrow, like the CTA form (adjust if you'd like wider/narrower) */
    width: 100%;
}

/* Ensure the inner row centers its contents when the form is constrained. */
#appraisal .row.gtr-50 {
    justify-content: center;
}

/* DETAILS PAGE: make form fields consistent and single-column */

/* Force two-column grid items to stack in this form */
#appraisal .row > .col-6 {
    width: 100% !important;
}

/* Make labels sit above controls, so selects with labels don't push layout */
#appraisal label {
    display: block;
    margin: 0 0 0.35em 0;
    color: #333;
    font-weight: 600;
    font-size: 0.95em;
}

/* Inputs, selects and textareas full width and visually consistent */
#appraisal input[type="text"],
#appraisal input[type="email"],
#appraisal input[type="tel"],
#appraisal input[type="number"],
#appraisal select,
#appraisal textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65em 0.75em;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    font-size: 0.95em;
}

/* Small screens: keep full width behavior */
@media screen and (max-width: 840px) {
    #appraisal form {
        max-width: 100%;
        padding: 0 1em;
    }
}

/* Ensure the three columns under 'Our process' are equal height when side-by-side */
@media screen and (min-width: 841px) {
    /* scoped to the Our process row only */
    #process-row > .col-4 {
        display: flex;
        flex-direction: column;
    }
    #process-row > .col-4 > .box {
        /* stretch the inner box to fill the column */
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
    #process-row > .col-4 > .box .image.featured,
    #process-row > .col-4 > .box .image.featured + h3,
    #process-row > .col-4 > .box p {
        /* keep content flow inside the stretched box */
        flex: 0 0 auto;
    }
    #process-row > .col-4 > .box .actions {
        margin-top: auto;
    }
}

/* Restore visible .box presentation only for the process block when the header + columns are wrapped in .box.
   This is intentionally scoped to avoid affecting other .box uses in the theme. */
section.box.header {
    padding-bottom: 0;
}

/* semi-transparent inner wrapper for the banner content */
.banner-inner {
    background: rgba(255,255,255,0.15); /* dark translucent background */
    border-radius: 6px;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.15);
    padding: 2.5em;
    color: #fff;
    max-width: 60em;
    margin: 0 auto;
}

/* make sure inner text scales on small screens */
@media screen and (max-width: 840px) {
    .banner-inner {
        padding: 1.5em;
        margin: 0 1em;
    }
}