/* ============================================================
   CONTACT PAGE — REVISION 7
   Odor-Free Restoration
   File to upload as: /assets/css/contact.css
   Scope: /contact-us/
   ============================================================ */

/* ============================================================
   CONTACT PAGE RESET
   Quick page-specific cleanup for GeneratePress/Gutenberg.
   contact.css is only enqueued on /contact-us/.
   ============================================================ */

body,
.site,
.site-content,
#primary.content-area,
.content-area,
.site-main,
.inside-article,
.entry-content,
article {
    background: #ffffff !important;
}

#primary.content-area,
.content-area,
.site-main,
.inside-article,
.entry-content,
article {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

.inside-article {
    padding: 0 !important;
}

.entry-content,
.entry-content:not(:first-child),
.entry-summary:not(:first-child),
.page-content:not(:first-child) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.entry-content > * {
    box-sizing: border-box !important;
}

/* Neutralize the recurring Gutenberg inner-container padding only on this page. */
.site-main .wp-block-group__inner-container {
    box-sizing: border-box !important;
}

/* ============================================================
   CONTACT HEADER
   ============================================================ */

header.entry-header,
.entry-header {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: clamp(48px, 4vw, 70px) max(24px, calc((100vw - var(--ofr-max, 1400px)) / 2 + 24px)) clamp(34px, 3vw, 50px) !important;
    color: #ffffff !important;
    background:
        radial-gradient(circle at 72% 30%, rgba(0,155,220,.18), transparent 34%),
        linear-gradient(135deg, var(--ofr-blue-deep, #02142f) 0%, var(--ofr-blue-mid, #062550) 56%, #020915 100%) !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.entry-title,
h1.entry-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-family: var(--ofr-font-head, 'Oswald', Arial, sans-serif) !important;
    font-size: clamp(42px, 4vw, 68px) !important;
    font-weight: 600 !important;
    line-height: .95 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
}

.entry-title::after,
h1.entry-title::after {
    content: "";
    display: block;
    width: 76px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 999px;
    background: var(--ofr-green, #67c247);
}

/* ============================================================
   CONTACT CONTENT WRAPPER
   ============================================================ */

.entry-content {
    width: min(100%, var(--ofr-max, 1400px)) !important;
    max-width: var(--ofr-max, 1400px) !important;
    margin: 0 auto !important;
    padding: clamp(44px, 4vw, 68px) 34px clamp(54px, 4.6vw, 78px) !important;
    color: var(--ofr-blue-deep, #02142f) !important;
}

.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > p,
.entry-content > .wp-block-heading,
.entry-content > .wp-block-group,
.entry-content > .gform_wrapper {
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.entry-content > p {
    color: rgba(2,20,47,.82) !important;
    font-family: var(--ofr-font-body, 'Roboto', Arial, sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

.entry-content > p:first-of-type {
    margin-top: 0 !important;
}

/* Hide Gravity Forms demo title if it renders above the fields. */
.gform_heading,
.gform_title,
.gform_description {
    display: none !important;
}

/* ============================================================
   GRAVITY FORM CARD
   Current form on live page appears to be form ID 3.
   ============================================================ */

#gform_wrapper_3,
.gform_wrapper {
    position: relative;
    margin-top: 0 !important;
    margin-bottom: clamp(34px, 3vw, 48px) !important;
    padding: clamp(24px, 2.8vw, 38px) !important;
    border: 1px solid rgba(2,20,47,.10) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(103,194,71,.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 18px 44px rgba(2,20,47,.12) !important;
    box-sizing: border-box !important;
}

#gform_3,
.gform_wrapper form {
    margin: 0 !important;
}

#gform_fields_3,
.gform_fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 18px !important;
}

.gfield,
.gform-field-label,
.ginput_container {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.gfield_label,
.gform-field-label,
.gfield label {
    display: block !important;
    margin: 0 0 7px !important;
    color: var(--ofr-blue-deep, #02142f) !important;
    font-family: var(--ofr-font-head, 'Oswald', Arial, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
}

.gfield input[type="text"],
.gfield input[type="email"],
.gfield input[type="tel"],
.gfield input[type="url"],
.gfield input[type="number"],
.gfield textarea,
.gfield select,
.ginput_container input,
.ginput_container textarea,
.ginput_container select {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(2,20,47,.18) !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    color: var(--ofr-blue-deep, #02142f) !important;
    font-family: var(--ofr-font-body, 'Roboto', Arial, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.035) !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

.gfield textarea,
.ginput_container textarea {
    min-height: 140px !important;
    resize: vertical !important;
}

.gfield input:focus,
.gfield textarea:focus,
.gfield select:focus,
.ginput_container input:focus,
.ginput_container textarea:focus,
.ginput_container select:focus {
    outline: none !important;
    border-color: var(--ofr-green, #67c247) !important;
    box-shadow: 0 0 0 3px rgba(103,194,71,.16), inset 0 1px 2px rgba(0,0,0,.035) !important;
}

/* Make likely long fields full width without depending on exact block order too heavily. */
.gfield:has(textarea),
.gfield--type-textarea,
.gfield--width-full,
#field_3_6 {
    grid-column: 1 / -1 !important;
}

.gform_footer,
.gform_page_footer {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
}

.gform_button,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    padding: 0 26px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: linear-gradient(135deg, var(--ofr-green-light, #7BD35F), var(--ofr-green, #67c247)) !important;
    color: var(--ofr-blue-deep, #02142f) !important;
    font-family: var(--ofr-font-head, 'Oswald', Arial, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 10px 22px rgba(2,20,47,.20) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

.gform_button:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 14px 26px rgba(2,20,47,.25) !important;
}



/* ============================================================
   FLUENT FORMS OVERRIDES
   Live contact page uses Fluent Forms, not Gravity Forms.
   These rules intentionally target Fluent's generated classes.
   ============================================================ */

.fluentform,
.fluentform * {
    box-sizing: border-box !important;
}

.fluentform,
.fluentform form,
.fluentform .ff-el-group,
.fluentform .ff-t-container,
.fluentform .ff-t-cell {
    font-family: var(--ofr-font-body, 'Roboto', Arial, sans-serif) !important;
}

.fluentform {
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin: 0 auto clamp(34px, 3vw, 48px) !important;
    padding: clamp(24px, 2.8vw, 38px) !important;
    border: 1px solid rgba(2,20,47,.10) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(103,194,71,.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 18px 44px rgba(2,20,47,.12) !important;
}

.fluentform .ff-el-group {
    margin-bottom: 18px !important;
}

.fluentform .ff-el-input--label,
.fluentform .ff-el-input--label label,
.fluentform label {
    display: block !important;
    margin: 0 0 7px !important;
    color: var(--ofr-blue-deep, #02142f) !important;
    font-family: var(--ofr-font-head, 'Oswald', Arial, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
}

.fluentform .ff-el-input--label .required,
.fluentform .ff-el-input--label .asterisk-right,
.fluentform .ff-el-input--label .ff-el-is-required,
.fluentform .ff-el-input--label span {
    font-family: var(--ofr-font-head, 'Oswald', Arial, sans-serif) !important;
}

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform textarea,
.fluentform select,
.fluentform .ff-el-form-control {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(2,20,47,.18) !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    color: var(--ofr-blue-deep, #02142f) !important;
    font-family: var(--ofr-font-body, 'Roboto', Arial, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.035) !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

.fluentform textarea,
.fluentform textarea.ff-el-form-control {
    min-height: 140px !important;
    resize: vertical !important;
}

.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus,
.fluentform .ff-el-form-control:focus {
    outline: none !important;
    border-color: var(--ofr-green, #67c247) !important;
    box-shadow: 0 0 0 3px rgba(103,194,71,.16), inset 0 1px 2px rgba(0,0,0,.035) !important;
}

.fluentform .ff_submit_btn_wrapper,
.fluentform .ff_submit_btn_wrapper_custom,
.fluentform .ff-el-group.ff_submit_btn_wrapper,
.fluentform .ff-el-group.ff-text-left.ff_submit_btn_wrapper {
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 22px !important;
    margin-bottom: 0 !important;
}

.fluentform .ff-btn-submit,
.fluentform button[type="submit"].ff-btn-submit,
.fluentform .ff-btn.ff-btn-submit,
.fluentform .ff-btn.ff-btn-md.ff_btn_style {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: linear-gradient(135deg, var(--ofr-orange-light, #FFB300), var(--ofr-orange, #FF8F00) 58%, #ff7300) !important;
    color: var(--ofr-blue-deep, #02142f) !important;
    font-family: var(--ofr-font-head, 'Oswald', Arial, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 10px 22px rgba(2,20,47,.20) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"].ff-btn-submit:hover,
.fluentform .ff-btn.ff-btn-submit:hover,
.fluentform .ff-btn.ff-btn-md.ff_btn_style:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.05) !important;
    box-shadow: 0 14px 26px rgba(2,20,47,.25) !important;
}

.fluentform .ff-btn-submit:focus,
.fluentform button[type="submit"].ff-btn-submit:focus {
    outline: 3px solid rgba(255,143,0,.28) !important;
    outline-offset: 2px !important;
}

/* Admin-only WP Armour box should not visually dominate the design. */
.wpa-test-msg,
.wpae-test-msg,
.wp-armour-message,
.wp-armour {
    max-width: 980px !important;
    margin: 18px auto !important;
    border-radius: 6px !important;
    font-family: var(--ofr-font-body, 'Roboto', Arial, sans-serif) !important;
}

@media (max-width: 760px) {
    .fluentform {
        padding: 22px !important;
        border-radius: 7px !important;
    }

    .fluentform .ff_submit_btn_wrapper,
    .fluentform .ff_submit_btn_wrapper_custom,
    .fluentform .ff-el-group.ff_submit_btn_wrapper,
    .fluentform .ff-el-group.ff-text-left.ff_submit_btn_wrapper {
        justify-content: center !important;
    }

    .fluentform .ff-btn-submit,
    .fluentform button[type="submit"].ff-btn-submit,
    .fluentform .ff-btn.ff-btn-submit,
    .fluentform .ff-btn.ff-btn-md.ff_btn_style {
        width: 100% !important;
        min-height: 52px !important;
    }
}

@media (max-width: 420px) {
    .fluentform {
        padding: 18px !important;
    }
}

/* ============================================================
   DIRECT CONTACT COPY
   Quick styling for the existing direct-contact content under the form.
   ============================================================ */

.entry-content > p:not(:first-of-type) {
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.entry-content > p:has(a[href^="mailto:"]),
.entry-content > p:has(a[href^="tel:"]) {
    padding: 18px 20px !important;
    border-left: 4px solid var(--ofr-green, #67c247) !important;
    background: #f8fafc !important;
}

.entry-content a {
    color: var(--ofr-blue-mid, #062550) !important;
    font-weight: 700 !important;
    text-decoration-color: rgba(103,194,71,.55) !important;
    text-underline-offset: 3px !important;
}

.entry-content a:hover {
    color: var(--ofr-green, #67c247) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 760px) {
    header.entry-header,
    .entry-header {
        padding: 42px 22px 32px !important;
    }

    .entry-content {
        padding: 34px 22px 48px !important;
    }

    #gform_wrapper_3,
    .gform_wrapper {
        padding: 22px !important;
        border-radius: 7px !important;
    }

    #gform_fields_3,
    .gform_fields {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .gfield,
    .gfield:has(textarea),
    .gfield--type-textarea,
    .gfield--width-full,
    #field_3_6 {
        grid-column: 1 / -1 !important;
    }

    .gform_footer,
    .gform_page_footer {
        justify-content: center !important;
    }

    .gform_button,
    .gform_wrapper input[type="submit"],
    .gform_wrapper button[type="submit"] {
        width: 100% !important;
        min-height: 52px !important;
    }
}

@media (max-width: 420px) {
    header.entry-header,
    .entry-header {
        padding-inline: 18px !important;
    }

    .entry-content {
        padding-inline: 18px !important;
    }

    #gform_wrapper_3,
    .gform_wrapper {
        padding: 18px !important;
    }
}

/* ============================================================
   CONTACT PAGE — REVISION 4
   Lead-in copy + polished direct-contact cards
   ============================================================ */

/* Keep the page-specific content comfortably wide. */
.entry-content {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    padding-top: clamp(38px, 3.3vw, 54px) !important;
    padding-bottom: clamp(46px, 4vw, 64px) !important;
}

/* Intro copy */
.ofr-cont-leadin,
.ofr-cont-leadin2 {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.ofr-cont-leadin {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    color: rgba(2,20,47,.86) !important;
    font-family: var(--ofr-font-body, 'Roboto', Arial, sans-serif) !important;
    font-size: clamp(16px, 1.05vw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

.ofr-cont-leadin2 {
    margin-top: 0 !important;
    margin-bottom: clamp(26px, 2.6vw, 38px) !important;
    color: var(--ofr-blue-deep, #02142f) !important;
    font-family: var(--ofr-font-body, 'Roboto', Arial, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

.ofr-cont-leadin2 strong {
    font-weight: 700 !important;
}

.ofr-contact-phone-copy {
    color: var(--ofr-green, #67c247) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.ofr-contact-phone-copy:hover {
    color: var(--ofr-blue-mid, #062550) !important;
}

/* Tighten the Fluent Form position below the intro. */
.entry-content > .wp-block-shortcode,
.entry-content > .fluentform,
.entry-content > div[id^="fluentform_"] {
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.fluentform {
    margin-bottom: clamp(42px, 3.8vw, 58px) !important;
}

/* Direct contact heading block */
.entry-content > h3,
.entry-content > h3.wp-block-heading {
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin: 0 auto 7px !important;
    padding: 0 !important;
    color: var(--ofr-green, #67c247) !important;
    font-family: var(--ofr-font-head, 'Oswald', Arial, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.entry-content > h4,
.entry-content > h4.wp-block-heading {
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin: 0 auto clamp(20px, 2vw, 28px) !important;
    padding: 0 !important;
    color: var(--ofr-blue-deep, #02142f) !important;
    font-family: var(--ofr-font-head, 'Oswald', Arial, sans-serif) !important;
    font-size: clamp(25px, 2vw, 34px) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

/* Direct contact row */
.ofr-cont-contblock,
.ofr-cont-contblock.is-layout-flex,
.ofr-cont-contblock.wp-block-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(18px, 2vw, 28px) !important;
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.site-main .ofr-cont-contblock .wp-block-group__inner-container,
.site-main .ofr-cont-contcard .wp-block-group__inner-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Individual person cards */
.ofr-cont-contcard {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: clamp(24px, 2.4vw, 32px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(2,20,47,.11) !important;
    border-top: 4px solid var(--ofr-green, #67c247) !important;
    border-radius: 10px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(103,194,71,.09), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 14px 34px rgba(2,20,47,.10) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}

.ofr-cont-contcard h5,
.ofr-cont-contcard h5.wp-block-heading {
    margin: 0 0 18px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(2,20,47,.10) !important;
    color: var(--ofr-blue-deep, #02142f) !important;
    font-family: var(--ofr-font-head, 'Oswald', Arial, sans-serif) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .015em !important;
    text-transform: uppercase !important;
}

.ofr-cont-contcard p {
    position: relative !important;
    margin: 0 0 12px !important;
    padding: 0 0 0 30px !important;
    color: rgba(2,20,47,.84) !important;
    font-family: var(--ofr-font-body, 'Roboto', Arial, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.42 !important;
}

.ofr-cont-contcard p:last-child {
    margin-bottom: 0 !important;
}

/* Small visual markers without requiring extra Gutenberg blocks. */
.ofr-cont-emailcrd::before,
.ofr-cont-phonecrd1::before,
.ofr-cont-phonecrd2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ofr-cont-emailcrd::before {
    background-image: url("/wp-content/themes/generatepress-child/assets/svg/odorfree-email.svg");
}

.ofr-cont-phonecrd1::before,
.ofr-cont-phonecrd2::before {
    background-image: url("/wp-content/themes/generatepress-child/assets/svg/odorfree-phone2.svg");
}

.ofr-cont-contcard a {
    color: var(--ofr-blue-mid, #062550) !important;
    font-weight: 700 !important;
    text-decoration-color: rgba(103,194,71,.48) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    overflow-wrap: anywhere !important;
}

.ofr-cont-contcard a:hover {
    color: var(--ofr-green, #67c247) !important;
}

@media (hover: hover) and (pointer: fine) {
    .ofr-cont-contcard:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(2,20,47,.14) !important;
    }
}

/* Remove the broad legacy direct-contact treatment now that named classes exist. */
.entry-content > p:has(a[href^="mailto:"]),
.entry-content > p:has(a[href^="tel:"]) {
    padding: 0 !important;
    border-left: 0 !important;
    background: transparent !important;
}

/* Responsive contact cards */
@media (max-width: 760px) {
    .entry-content {
        padding-top: 30px !important;
        padding-bottom: 46px !important;
    }

    .ofr-cont-leadin,
    .ofr-cont-leadin2 {
        text-align: left !important;
    }

    .ofr-cont-leadin {
        font-size: 16px !important;
    }

    .ofr-cont-contblock,
    .ofr-cont-contblock.is-layout-flex,
    .ofr-cont-contblock.wp-block-group {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: min(100%, 520px) !important;
    }

    .ofr-cont-contcard {
        padding: 24px !important;
    }
}

@media (max-width: 420px) {
    .ofr-cont-contcard {
        padding: 21px !important;
        border-radius: 8px !important;
    }

    .ofr-cont-contcard h5,
    .ofr-cont-contcard h5.wp-block-heading {
        font-size: 22px !important;
    }

    .ofr-cont-contcard p {
        padding-left: 27px !important;
        font-size: 14px !important;
    }
}

/* ============================================================
   CONTACT PAGE — REVISION 5
   Intro phone mockup integration
   ============================================================ */

/* Intro row: copy and phone mockup */
.ofr-cont-header-top,
.ofr-cont-header-top.is-layout-flex,
.ofr-cont-header-top.wp-block-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr) !important;
    align-items: center !important;
    gap: clamp(34px, 4vw, 72px) !important;
    width: min(100%, 1080px) !important;
    max-width: 1080px !important;
    margin: 0 auto clamp(30px, 3vw, 44px) !important;
    padding: 0 !important;
}

/* Remove GeneratePress/Gutenberg nested padding only inside this intro row. */
.site-main .ofr-cont-header-top .wp-block-group__inner-container,
.site-main .ofr-cont-left-top .wp-block-group__inner-container,
.site-main .ofr-cont-right-top .wp-block-group__inner-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ofr-cont-left-top,
.ofr-cont-right-top {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ofr-cont-left-top {
    align-self: center !important;
}

.ofr-cont-left-top .ofr-cont-leadin,
.ofr-cont-left-top .ofr-cont-leadin2 {
    width: 100% !important;
    max-width: 720px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

.ofr-cont-left-top .ofr-cont-leadin {
    margin-bottom: 16px !important;
    font-size: clamp(16px, 1.05vw, 18px) !important;
    line-height: 1.58 !important;
}

.ofr-cont-left-top .ofr-cont-leadin2 {
    margin-bottom: 0 !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
}

/* Phone artwork */
.ofr-cont-right-top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
}

.ofr-cont-right-top .wp-block-image,
.ofr-cont-right-top figure {
    width: min(100%, 310px) !important;
    max-width: 310px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.ofr-cont-right-top .wp-block-image img,
.ofr-cont-right-top figure img,
.ofr-cont-right-top img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 20px 28px rgba(2,20,47,.20)) !important;
    transform: rotate(2deg) !important;
    transform-origin: center !important;
}

/* A restrained visual anchor behind the phone, without another block. */
.ofr-cont-right-top {
    position: relative !important;
    isolation: isolate !important;
}

.ofr-cont-right-top::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(26vw, 310px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(103,194,71,.13) 0%, rgba(0,155,220,.08) 44%, transparent 72%);
    pointer-events: none;
}

/* Keep the form slightly closer to the completed intro composition. */
.ofr-cont-header-top + .wp-block-shortcode,
.ofr-cont-header-top + .fluentform,
.ofr-cont-header-top + div[id^="fluentform_"] {
    margin-top: 0 !important;
}

/* Tablet */
@media (max-width: 900px) {
    .ofr-cont-header-top,
    .ofr-cont-header-top.is-layout-flex,
    .ofr-cont-header-top.wp-block-group {
        grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr) !important;
        gap: 28px !important;
        width: min(100%, 820px) !important;
    }

    .ofr-cont-right-top .wp-block-image,
    .ofr-cont-right-top figure {
        width: min(100%, 250px) !important;
        max-width: 250px !important;
    }
}

/* Mobile: stack naturally and keep the image supportive, not dominant. */
@media (max-width: 700px) {
    .ofr-cont-header-top,
    .ofr-cont-header-top.is-layout-flex,
    .ofr-cont-header-top.wp-block-group {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        width: min(100%, 560px) !important;
        margin-bottom: 30px !important;
    }

    .ofr-cont-left-top {
        order: 1 !important;
    }

    .ofr-cont-right-top {
        order: 2 !important;
        min-height: 0 !important;
    }

    .ofr-cont-right-top .wp-block-image,
    .ofr-cont-right-top figure {
        width: min(62vw, 230px) !important;
        max-width: 230px !important;
    }

    .ofr-cont-right-top::before {
        width: min(72vw, 270px);
    }

    .ofr-cont-left-top .ofr-cont-leadin,
    .ofr-cont-left-top .ofr-cont-leadin2 {
        max-width: none !important;
    }
}

@media (max-width: 420px) {
    .ofr-cont-header-top,
    .ofr-cont-header-top.is-layout-flex,
    .ofr-cont-header-top.wp-block-group {
        gap: 18px !important;
        margin-bottom: 26px !important;
    }

    .ofr-cont-right-top .wp-block-image,
    .ofr-cont-right-top figure {
        width: min(66vw, 200px) !important;
    }

    .ofr-cont-right-top .wp-block-image img,
    .ofr-cont-right-top figure img,
    .ofr-cont-right-top img {
        transform: rotate(1deg) !important;
    }
}

/* ============================================================
   CONTACT PAGE — REVISION 6
   Smaller phone accent + profile treatment for contact cards
   ============================================================ */

/* Phone mockup becomes a restrained accent instead of a feature. */
.ofr-cont-header-top,
.ofr-cont-header-top.is-layout-flex,
.ofr-cont-header-top.wp-block-group {
    grid-template-columns: minmax(0, 1fr) 150px !important;
    gap: clamp(24px, 3vw, 46px) !important;
    width: min(100%, 980px) !important;
}

.ofr-cont-right-top {
    align-self: center !important;
    min-height: 0 !important;
}

.ofr-cont-right-top .wp-block-image,
.ofr-cont-right-top figure {
    width: 118px !important;
    max-width: 118px !important;
}

.ofr-cont-right-top .wp-block-image img,
.ofr-cont-right-top figure img,
.ofr-cont-right-top img {
    filter: drop-shadow(0 12px 18px rgba(2,20,47,.18)) !important;
    transform: rotate(3deg) !important;
}

.ofr-cont-right-top::before {
    width: 150px !important;
}

/* Contact-card profile badge. */
.ofr-cont-contcard {
    padding-top: 30px !important;
}

.ofr-cont-contcard h5,
.ofr-cont-contcard h5.wp-block-heading {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 46px !important;
    margin-bottom: 18px !important;
    padding: 0 0 14px !important;
}

.ofr-cont-contcard h5::before,
.ofr-cont-contcard h5.wp-block-heading::before {
    content: "";
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(103,194,71,.58);
    border-radius: 50%;
    background-color: rgba(103,194,71,.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='22' r='12' fill='%2367c247'/%3E%3Cpath d='M12 56c1.8-12.2 9.2-19 20-19s18.2 6.8 20 19' fill='%2367c247'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    box-shadow: 0 6px 14px rgba(2,20,47,.10);
}

/* Slightly tighten card copy under the new heading treatment. */
.ofr-cont-contcard p {
    margin-bottom: 10px !important;
}

/* Tablet */
@media (max-width: 900px) {
    .ofr-cont-header-top,
    .ofr-cont-header-top.is-layout-flex,
    .ofr-cont-header-top.wp-block-group {
        grid-template-columns: minmax(0, 1fr) 125px !important;
        gap: 22px !important;
    }

    .ofr-cont-right-top .wp-block-image,
    .ofr-cont-right-top figure {
        width: 98px !important;
        max-width: 98px !important;
    }

    .ofr-cont-right-top::before {
        width: 128px !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .ofr-cont-header-top,
    .ofr-cont-header-top.is-layout-flex,
    .ofr-cont-header-top.wp-block-group {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .ofr-cont-right-top {
        justify-content: flex-start !important;
    }

    .ofr-cont-right-top .wp-block-image,
    .ofr-cont-right-top figure {
        width: 82px !important;
        max-width: 82px !important;
        margin: 0 !important;
    }

    .ofr-cont-right-top::before {
        width: 110px !important;
        left: -14px;
    }
}

@media (max-width: 420px) {
    .ofr-cont-right-top .wp-block-image,
    .ofr-cont-right-top figure {
        width: 72px !important;
        max-width: 72px !important;
    }

    .ofr-cont-contcard h5::before,
    .ofr-cont-contcard h5.wp-block-heading::before {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        background-size: 27px 27px;
    }
}

/* ============================================================
   CONTACT PAGE — REVISION 7
   Intro spacing cleanup + mobile phone removal
   ============================================================ */

/* Give the copy more room and reduce the visual gap to the phone. */
.ofr-cont-header-top,
.ofr-cont-header-top.is-layout-flex,
.ofr-cont-header-top.wp-block-group {
    grid-template-columns: minmax(0, 1fr) 105px !important;
    gap: 14px !important;
    width: min(100%, 980px) !important;
    margin-bottom: 30px !important;
}

.ofr-cont-left-top .ofr-cont-leadin {
    max-width: 760px !important;
    margin-bottom: 12px !important;
    font-size: clamp(16px, 1vw, 17px) !important;
    line-height: 1.5 !important;
}

.ofr-cont-left-top .ofr-cont-leadin2 {
    max-width: 760px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: rgba(2,20,47,.80) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

/* Remove the heavy bold treatment from the assistance copy. */
.ofr-cont-left-top .ofr-cont-leadin2 strong {
    font-weight: 500 !important;
}

.ofr-cont-left-top .ofr-cont-leadin2 a {
    font-weight: 600 !important;
}

/* Smaller accent phone, tucked closer to the copy. */
.ofr-cont-right-top {
    justify-content: flex-start !important;
}

.ofr-cont-right-top .wp-block-image,
.ofr-cont-right-top figure {
    width: 86px !important;
    max-width: 86px !important;
    margin-left: 0 !important;
}

.ofr-cont-right-top::before {
    width: 112px !important;
    left: -10px !important;
}

/* Tighten the handoff into the form. */
.ofr-cont-header-top + .wp-block-shortcode,
.ofr-cont-header-top + .fluentform,
.ofr-cont-header-top + div[id^="fluentform_"] {
    margin-top: 0 !important;
}

/* Mobile: remove the phone entirely and keep the copy compact. */
@media (max-width: 700px) {
    .ofr-cont-header-top,
    .ofr-cont-header-top.is-layout-flex,
    .ofr-cont-header-top.wp-block-group {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-bottom: 24px !important;
    }

    .ofr-cont-right-top {
        display: none !important;
    }

    .ofr-cont-left-top .ofr-cont-leadin {
        margin-bottom: 10px !important;
        font-size: 16px !important;
        line-height: 1.48 !important;
    }

    .ofr-cont-left-top .ofr-cont-leadin2 {
        font-size: 14px !important;
        line-height: 1.42 !important;
    }
}

@media (max-width: 420px) {
    .ofr-cont-header-top,
    .ofr-cont-header-top.is-layout-flex,
    .ofr-cont-header-top.wp-block-group {
        margin-bottom: 20px !important;
    }

    .ofr-cont-left-top .ofr-cont-leadin {
        font-size: 15.5px !important;
    }

    .ofr-cont-left-top .ofr-cont-leadin2 {
        font-size: 13.5px !important;
    }
}