/* ==========================================================================
   Contact page
   --------------------------------------------------------------------------
   Additive stylesheet, everything namespaced under .sd-contact so none of the
   legacy .contact-us / .offices float rules in style.css apply and nothing
   here leaks onto the ~30 other pages that share the breadcrumb header.
   Palette matches the 2026 header, footer and homepage revision.
   ========================================================================== */

.sd-contact {
    --sd-blue: #124A9A;
    --sd-navy: #1A365D;
    --sd-orange: #E86A38;
    --sd-tint: #F4F7FC;
    --sd-line: #E3E9F3;
    --sd-muted: #5D6E88;

    display: block;
    width: 100%;
    background: #fff;
}

.sd-contact a {
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   1. Quick contact strip
   -------------------------------------------------------------------------- */

.sd-quick {
    padding: 50px 0 10px;
}

.sd-quick__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.sd-quick__card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--sd-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(16, 38, 73, .05);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.sd-quick__card:hover {
    border-color: rgba(232, 106, 56, .45);
    box-shadow: 0 12px 28px rgba(16, 38, 73, .10);
    transform: translateY(-3px);
}

.sd-quick__icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(18, 74, 154, .08);
    color: var(--sd-blue);
    font-size: 19px;
}

.sd-quick__card:hover .sd-quick__icon {
    background: var(--sd-orange);
    color: #fff;
}

.sd-quick__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sd-muted);
}

.sd-quick__value {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--sd-navy);
}

.sd-quick__value a {
    color: var(--sd-navy);
    transition: color .2s ease;
}

.sd-quick__value a:hover {
    color: var(--sd-orange);
}

.sd-quick__sep {
    color: #B7C3D6;
    padding: 0 2px;
}

/* --------------------------------------------------------------------------
   2. Form + head office
   -------------------------------------------------------------------------- */

.sd-main {
    padding: 40px 0 60px;
}

.sd-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.sd-main__side {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sd-panel {
    padding: 32px;
    border: 1px solid var(--sd-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(16, 38, 73, .07);
}

.sd-panel__title {
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--sd-navy);
}

.sd-panel__lead {
    margin: 0 0 26px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--sd-muted);
}

.sd-panel__title::after {
    content: "";
    display: block;
    width: 70px;
    height: 3px;
    margin-top: 12px;
    background: var(--sd-orange);
}

/* ---- form ---- */

.sd-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.sd-field {
    margin-bottom: 18px;
}

.sd-field--full {
    grid-column: 1 / -1;
}

.sd-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sd-navy);
}

.sd-field label span {
    color: var(--sd-orange);
}

.sd-field input,
.sd-field select,
.sd-field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--sd-line);
    border-radius: 8px;
    background: var(--sd-tint);
    font-size: 15.5px;
    font-family: inherit;
    color: var(--sd-navy);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.sd-field input::placeholder,
.sd-field textarea::placeholder {
    color: #9AA8BE;
}

.sd-field input:focus,
.sd-field select:focus,
.sd-field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--sd-blue);
    box-shadow: 0 0 0 3px rgba(18, 74, 154, .12);
}

.sd-field textarea {
    min-height: 132px;
    resize: vertical;
    line-height: 1.6;
}

/* ---- country code picker ----
   intl-tel-input v17 wraps the input in .iti and injects the flag button, so
   these bring the widget back in line with the other fields. */

.sd-field .iti {
    display: block;
    width: 100%;
}

.sd-field .iti__flag-container {
    border-right: 1px solid var(--sd-line);
}

.sd-field .iti--separate-dial-code .iti__selected-flag {
    border-radius: 8px 0 0 8px;
    background: rgba(18, 74, 154, .05);
    padding: 0 8px 0 12px;
}

.sd-field .iti--separate-dial-code .iti__selected-dial-code {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--sd-navy);
}

.sd-field .iti__arrow {
    border-top-color: var(--sd-muted);
}

.sd-field .iti__arrow--up {
    border-bottom-color: var(--sd-muted);
}

/* The dropdown has to clear the fields below it. */
.sd-field .iti__country-list {
    z-index: 5;
    max-height: 240px;
    border: 1px solid var(--sd-line);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(16, 38, 73, .16);
    font-size: 14.5px;
}

.sd-field .iti__country.iti__highlight {
    background: rgba(18, 74, 154, .08);
}

.sd-field .iti__dial-code {
    color: var(--sd-muted);
}

.sd-field__hint {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--sd-muted);
    min-height: 1em;
}

.sd-field__hint.is-error {
    color: #C0392B;
    font-weight: 600;
}

.sd-form__captcha {
    margin: 4px 0 22px;
}

/* reCAPTCHA renders a fixed 304px iframe, so let it scroll rather than break
   the panel on narrow screens. */
.sd-form__captcha .g-recaptcha {
    max-width: 100%;
    overflow-x: auto;
}

.sd-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    border: 0;
    border-radius: 50px;
    background: var(--sd-orange);
    color: #fff;
    font-size: 16.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
}

.sd-submit:hover {
    background: #d65b2d;
    box-shadow: 0 10px 24px rgba(232, 106, 56, .32);
    transform: translateY(-2px);
}

.sd-submit i {
    font-size: 14px;
}

.sd-form__note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sd-muted);
}

/* ---- alerts ---- */

.sd-alert {
    display: flex;
    gap: 12px;
    padding: 15px 18px;
    margin-bottom: 22px;
    border-radius: 10px;
    border-left: 4px solid;
    font-size: 14.5px;
    line-height: 1.6;
}

.sd-alert i {
    font-size: 17px;
    margin-top: 2px;
}

.sd-alert--ok {
    background: #EDF8F1;
    border-color: #2E9E5B;
    color: #1D6B3D;
}

.sd-alert--bad {
    background: #FDF0EE;
    border-color: #D0553C;
    color: #9C3722;
}

.sd-alert strong {
    font-weight: 800;
}

.sd-alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.sd-alert li {
    list-style: disc;
}

/* ---- head office card ---- */

.sd-office-lead {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--sd-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(16, 38, 73, .07);
}

.sd-office-lead__head {
    padding: 24px 28px;
    background: var(--sd-navy);
}

.sd-office-lead__eyebrow {
    display: block;
    margin-bottom: 4px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sd-orange);
}

.sd-office-lead__title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

.sd-office-lead__body {
    padding: 24px 28px 26px;
}

.sd-detail {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--sd-line);
}

.sd-detail:last-of-type {
    border-bottom: 0;
}

.sd-detail__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(18, 74, 154, .08);
    color: var(--sd-blue);
    font-size: 15px;
}

.sd-detail__label {
    display: block;
    margin-bottom: 3px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sd-muted);
}

.sd-detail__value {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sd-navy);
    font-weight: 500;
}

.sd-detail__value a {
    color: var(--sd-navy);
    font-weight: 600;
    transition: color .2s ease;
}

.sd-detail__value a:hover {
    color: var(--sd-orange);
}

.sd-directions {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    padding: 12px 24px;
    border: 1px solid var(--sd-blue);
    border-radius: 50px;
    color: var(--sd-blue);
    font-size: 15px;
    font-weight: 700;
    transition: background .25s ease, color .25s ease;
}

.sd-directions:hover {
    background: var(--sd-blue);
    color: #fff;
}

/* ---- map card, stacked under the head office card ---- */

.sd-map-card {
    overflow: hidden;
    border: 1px solid var(--sd-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(16, 38, 73, .07);
    line-height: 0;
}

.sd-map-card iframe {
    display: block;
    width: 100%;
    height: 300px;
    border: 0;
}

/* --------------------------------------------------------------------------
   3. Marketing offices
   -------------------------------------------------------------------------- */

.sd-offices {
    padding: 60px 0;
    background: var(--sd-tint);
}

.sd-offices__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.sd-office {
    display: flex;
    flex-direction: column;
    padding: 26px;
    overflow: hidden;
    border: 1px solid var(--sd-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(16, 38, 73, .05);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.sd-office:hover {
    border-color: rgba(232, 106, 56, .4);
    box-shadow: 0 14px 30px rgba(16, 38, 73, .10);
    transform: translateY(-3px);
}

.sd-office__city {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sd-line);
    font-size: 19px;
    font-weight: 800;
    color: var(--sd-blue);
}

.sd-office__city i {
    font-size: 15px;
    color: var(--sd-orange);
}

.sd-office__list {
    margin: 0 0 auto;
    padding: 0;
    list-style: none;
}

.sd-office__list li {
    display: flex;
    gap: 11px;
    padding: 7px 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--sd-navy);
}

.sd-office__list li i {
    flex: 0 0 16px;
    margin-top: 5px;
    font-size: 13px;
    color: var(--sd-orange);
}

.sd-office__list li a {
    color: var(--sd-navy);
    font-weight: 600;
    transition: color .2s ease;
    word-break: break-word;
}

.sd-office__list li a:hover {
    color: var(--sd-orange);
}

.sd-office__address {
    color: var(--sd-muted) !important;
}

/* Bleeds to the card edges and anchors to the bottom, so a branch that has a
   map and one that does not still line up across a row. */
.sd-office__map {
    margin: 20px -26px -26px;
    border-top: 1px solid var(--sd-line);
    line-height: 0;
}

.sd-office__map iframe {
    display: block;
    width: 100%;
    height: 200px;
    border: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .sd-main__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 22px;
    }

    .sd-panel {
        padding: 26px;
    }
}

@media (max-width: 991.98px) {
    .sd-main__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sd-quick__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sd-offices__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sd-heading h2 {
        font-size: 29px;
    }

}

@media (max-width: 767.98px) {
    .sd-quick {
        padding: 34px 0 6px;
    }

    .sd-main {
        padding: 28px 0 44px;
    }

    .sd-offices {
        padding: 44px 0;
    }

    .sd-quick__grid,
    .sd-offices__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sd-office__map {
        margin: 18px -26px -26px;
    }

    .sd-office__map iframe {
        height: 180px;
    }

    .sd-form__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .sd-panel {
        padding: 22px 18px;
    }

    .sd-panel__title {
        font-size: 23px;
    }

    .sd-office-lead__head,
    .sd-office-lead__body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .sd-map-card iframe {
        height: 240px;
    }

    .sd-heading h2 {
        font-size: 25px;
    }


    .sd-submit {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sd-quick__card,
    .sd-office,
    .sd-submit,
    .sd-directions {
        transition: none !important;
    }

    .sd-quick__card:hover,
    .sd-office:hover,
    .sd-submit:hover {
        transform: none;
    }
}

/* Secondary email under the primary one in the quick contact strip. Both are
   addresses a customer may write to, so they are set the same size rather than
   the second reading as a footnote to the first. */
.sd-quick__alt {
    display: block;
    margin-top: 2px;
    font-size: 17px;
    color: var(--sd-navy);
}

/* The form column of .sd-main__grid. The contact page left this child
   unnamed, so the two form pages that copied the grid had a class with no
   rules; min-width:0 is what stops a long select or a wide table from
   blowing the grid column out. */
.sd-main__form {
    min-width: 0;
}

/* The contact page had no dropdowns, so select was never styled here. The
   quote form has eleven, and they were rendering as raw native controls next
   to styled inputs. The arrow is drawn rather than left to the browser, so it
   looks the same across them. */
.sd-field select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7C93' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

/* A multi-select is a list, not a dropdown, so it keeps no arrow. */
.sd-field select[multiple] {
    background-image: none;
    padding-right: 10px;
}