.contact-page {
    background: #f7f9f8;
    color: #153047
}
.contact-page .wrap {
    width: min(1200px, calc(100% - 64px));
    margin-inline: auto
}
.contact-page .contact-banner {
    padding: 70px 0 76px;
    background: linear-gradient(90deg, rgba(14, 35, 48, .94), rgba(20, 57, 47, .69)), url('../assets/photos/managed-editorial.webp') center/cover;
    color: white
}
.contact-banner nav {
    display: flex;
    gap: 9px;
    color: #d8e5e1;
    font-size: 13px;
    margin-bottom: 22px
}
.contact-banner nav a {
    color: inherit
}
.contact-page .contact-banner h1 {
    color: #fff;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.15;
    letter-spacing: -.035em;
    margin: 0 0 20px
}
.contact-banner p {
    max-width: 680px;
    color: #e0eae6;
    line-height: 1.8;
    font-size: 17px;
    margin: 0 0 28px
}
.contact-banner .button {
    background: #22634f;
    border: 1px solid #579b7f;
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    gap: 24px
}
.contact-page .contact-body {
    padding: 12px 0 80px
}
.contact-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 52px;
    row-gap: 0;
    align-items: start
}
.contact-columns>* {
    min-width: 0
}
.contact-intro-block {
    grid-column: 1;
    grid-row: 1
}
.contact-columns>.office-column {
    grid-column: 1;
    grid-row: 2
}
.contact-columns>.contact-form-panel {
    grid-column: 2;
    grid-row: 2
}
.contact-eyebrow {
    letter-spacing: .15em;
    color: #24664f;
    font-size: 11px;
    font-weight: 600
}
.contact-intro-block>h2 {
    font-size: 34px;
    letter-spacing: -.025em;
    margin: 10px 0 16px
}
.contact-intro {
    font-size: 15px;
    line-height: 1.8;
    color: #5c6d70;
    margin-bottom: 28px
}
.office-card {
    display: flex;
    gap: 18px;
    background: #fff;
    border: 1px solid #dce5df;
    border-radius: 9px;
    padding: 23px;
    margin-bottom: 16px
}
.office-marker {
    flex: 0 0 32px;
    color: #d76b19;
    font-weight: 600;
    font-size: 14px;
    padding-top: 3px
}
.contact-page .office-card h3 {
    font-size: 17px;
    margin: 0 0 10px;
    color: #153047
}
.office-card address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.85;
    color: #556a68
}
.office-card dl {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 6px 10px;
    font-size: 13px;
    margin: 15px 0 0
}
.office-card dt {
    font-weight: 600
}
.office-card dd {
    margin: 0;
    overflow-wrap: anywhere
}
.office-card a,
.contact-service-links a {
    color: #22634f
}
.contact-page .branch-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 24px 0 14px;
    color: #526c60
}
.contact-service-links {
    margin-top: 28px;
    display: flex;
    gap: 10px 22px;
    flex-wrap: wrap
}
.contact-service-links h3 {
    width: 100%;
    font-size: 18px;
    margin: 0 0 3px
}
.contact-service-links a {
    font-size: 13px
}
.contact-form-panel {
    background: #fff;
    border: 1px solid #dce5df;
    border-radius: 10px;
    overflow: hidden;
    scroll-margin-top: 120px
}
.contact-form-heading {
    padding: 15px 30px;
    background: #153047;
    color: #fff
}
.contact-form-heading small {
    font-size: 10px;
    letter-spacing: .15em;
    color: #e5be55
}
.contact-page .contact-form-heading h2 {
    color: white;
    font-size: 24px;
    margin: 8px 0
}
.contact-form-heading p {
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
    color: #d9e3e3
}
.contact-page .enquiry-form {
    padding: 30px;
    background: #fff;
    border: 0;
    margin: 0;
    display: grid;
    gap: 20px
}
.contact-page .enquiry-form>h2 {
    display: none
}
.contact-page .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}
.contact-page .enquiry-form label {
    font-size: 13px;
    font-weight: 500;
    color: #153047;
    display: grid;
    gap: 8px;
    min-width: 0
}
.contact-page .enquiry-form input:not([type=checkbox]),
.contact-page .enquiry-form select,
.contact-page .enquiry-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 12px 13px;
    background: #f7f9f8;
    border: 1px solid #dce5df;
    border-radius: 6px;
    color: #153047;
    font: inherit;
    font-size: 14px
}
.contact-page .enquiry-form textarea {
    min-height: 145px;
    resize: vertical
}
.contact-page .enquiry-form .consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    line-height: 1.7;
    font-size: 12px
}
.contact-page .consent input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 3px;
    accent-color: #22634f
}
.contact-page .enquiry-form button[type=submit] {
    border: 0;
    background: #22634f;
    color: white;
    padding: 14px 22px;
    border-radius: 6px;
    font: 600 14px Poppins, sans-serif;
    cursor: pointer;
    width: 100%
}
.contact-page .enquiry-form button:disabled {
    opacity: .65;
    cursor: wait
}
.contact-page .form-status {
    font-size: 13px;
    margin: 0;
    line-height: 1.6
}
.contact-page .form-status[data-error=true] {
    color: #af2b28
}
.contact-page .enquiry-form .bot-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden
}
.contact-page input:focus-visible,
.contact-page select:focus-visible,
.contact-page textarea:focus-visible {
    outline: 2px solid #22634f;
    outline-offset: 2px
}
@media(max-width:900px) {
    .contact-columns {
        gap: 28px
    }
    .contact-page .wrap {
        width: calc(100% - 40px)
    }
    .contact-page .enquiry-form,
    .contact-form-heading {
        padding: 24px
    }
    .contact-page .form-row {
        grid-template-columns: 1fr
    }
}
@media(max-width:700px) {
    .contact-columns {
        grid-template-columns: 1fr;
        gap: 34px
    }
    .contact-page .contact-banner {
        padding: 45px 0 50px
    }
    .contact-banner p {
        font-size: 15px
    }
    .contact-page .contact-body {
        padding: 40px 0 50px
    }
    .office-card {
        padding: 20px;
        gap: 12px
    }
    .contact-page .wrap {
        width: calc(100% - 32px)
    }
    .contact-intro-block>h2 {
        font-size: 29px
    }
}
.contact-form-heading {
    padding: 12px 22px
}
.contact-form-heading small {
    display: none
}
.contact-page .contact-form-heading h2 {
    font-size: 21px;
    margin: 0 0 6px
}
.contact-form-heading p {
    font-size: 12px;
    line-height: 1.5
}
.contact-page .enquiry-form {
    padding: 18px;
    gap: 13px
}
.contact-page .enquiry-form label {
    font-size: 12px;
    gap: 6px
}
.contact-page .enquiry-form input:not([type=checkbox]),
.contact-page .enquiry-form select,
.contact-page .enquiry-form textarea {
    padding: 9px 11px;
    font-size: 13px;
    min-height: 38px
}
.contact-page .enquiry-form textarea {
    height: 80px;
    min-height: 80px
}
.contact-page .enquiry-form .consent {
    font-size: 11px;
    line-height: 1.6
}
.contact-page .enquiry-form button[type=submit] {
    padding: 11px 18px;
    font-size: 13px;
    min-height: 42px
}
.contact-page .form-status:empty {
    display: none
}
.contact-service-links a {
    display: inline-flex;
    padding: 8px 12px;
    border: 1px solid #dce5df;
    border-radius: 24px
}
@media(max-width:900px) {
    .contact-columns {
        grid-template-columns: 1fr;
        gap: 32px
    }
    .contact-page .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}
@media(max-width:500px) {
    .contact-page .form-row {
        grid-template-columns: 1fr
    }
    .contact-page .enquiry-form input:not([type=checkbox]),
    .contact-page .enquiry-form select,
    .contact-page .enquiry-form textarea {
        font-size: 16px;
        min-height: 44px
    }
    .contact-page .enquiry-form,
    .contact-form-heading {
        padding: 20px
    }
}
@media(max-width:900px) {
    .contact-intro-block,
    .contact-columns>.office-column,
    .contact-columns>.contact-form-panel {
        grid-column: 1;
        grid-row: auto
    }
}
@media(max-width:900px) {
    .contact-columns {
        row-gap: 0
    }
    .contact-columns>.contact-form-panel {
        margin-top: 32px
    }
}

/* Replace the enquiry form with a personalized confirmation after success. */
.enquiry-thank-you{box-sizing:border-box;padding:clamp(24px,4vw,44px);background:#f2faf6;color:#153c31;border:1px solid #bfddce;border-top:4px solid #33D3AB;border-radius:8px;overflow-wrap:anywhere}
.enquiry-thank-you-logo{display:block;width:245px;max-width:85%;height:auto;margin-bottom:32px}
.enquiry-thank-you h2{font-size:clamp(23px,2.5vw,30px);line-height:1.35;font-weight:600;margin:0 0 22px;color:#153c31}
.enquiry-thank-you p{font-size:15px;line-height:1.8;margin:0 0 18px;color:#305b4e}
.enquiry-thank-you-home{display:inline-flex;align-items:center;gap:18px;padding:11px 18px;background:#153c31;color:#fff;border:1px solid #153c31;border-radius:5px;text-decoration:none;margin:0 0 26px;font-weight:500}
.enquiry-thank-you-home:hover{background:#22634f;color:#fff}
.enquiry-thank-you-home:focus-visible{outline:3px solid #c46500;outline-offset:4px}
.enquiry-thank-you .enquiry-thank-you-signoff{margin:0}
.enquiry-thank-you-signoff strong{color:#153c31}

/* Service links span the office and form columns; wrap without scrolling. */
.contact-page .contact-columns>.contact-service-links{grid-column:1 / -1;grid-row:3;display:block;min-width:0;width:100%;max-width:100%;margin-top:24px}
.contact-page .contact-service-links h3{margin-bottom:12px}
.contact-service-links-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;max-width:100%;overflow:visible;padding:4px 0 0}
.contact-page .contact-service-links-row>a{flex:0 1 auto;max-width:100%;white-space:normal;overflow-wrap:break-word;margin:0}
@media(max-width:900px){.contact-page .contact-columns>.contact-service-links{grid-row:auto;margin-top:0}}