/*
Theme Name: Unicon Child Theme
Theme URI: http://themeforest.net/user/minti
Description: Unicon Child Theme for your Customizations.
Author: minti
Author URI: http://mintithemes.com
Template: unicon
Version: 1.1
*/

/* =============================================================================
   VIRTUMATCH — CSS FOUNDATION
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CSS Custom Properties
   ----------------------------------------------------------------------------- */
:root {
    --vm-blue:         #041531;
    --vm-blue-dark:    #020c1f;
    --vm-blue-light:   #eaeef5;
    --vm-gold:         #c69d65;
    --vm-gold-dark:    #b08a4f;
    --vm-gold-light:   #f0e6d6;
    --vm-black:        #000000;
    --vm-white:        #ffffff;
    --vm-bg-light:     #f7f9fc;
    --vm-text:         #2d2d2d;
    --vm-text-light:   #666666;
    --vm-border:       #e0e0e0;
    --vm-radius:       4px;
    --vm-shadow:       0 2px 12px rgba(4, 21, 49, 0.10);
    --vm-transition:   all 0.25s ease;
    --vm-font-heading: 'Montserrat', sans-serif;
    --vm-font-body:    'Open Sans', sans-serif;
}

/* -----------------------------------------------------------------------------
   2. Global Base Styles
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--vm-font-body);
    color: var(--vm-text);
    font-size: 16px;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--vm-font-heading);
    color: var(--vm-text);
    font-weight: 700;
    line-height: 1.25;
}

a {
    color: var(--vm-blue);
    text-decoration: none;
    transition: var(--vm-transition);
}

a:hover {
    color: var(--vm-blue-dark);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------------
   3. Header Styles
   ----------------------------------------------------------------------------- */
.vm-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 80px;
    width: 100%;
}

.vm-header.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Logo */
.vm-logo {
    display: flex;
    align-items: center;
}

.vm-logo img {
    max-height: 55px;
    width: auto;
}

.vm-logo-text {
    font-family: var(--vm-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--vm-blue);
}

/* Header CTA buttons */
.vm-header-cta {
    display: flex;
    gap: 12px;
    margin-left: 24px;
}

/* -----------------------------------------------------------------------------
   4. Navigation Styles
   ----------------------------------------------------------------------------- */
.vm-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 32px;
}

.vm-nav ul li a {
    font-family: var(--vm-font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--vm-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: var(--vm-transition);
}

.vm-nav ul li a:hover {
    color: var(--vm-blue);
    border-bottom-color: var(--vm-blue);
    text-decoration: none;
}

.vm-nav ul li.current-menu-item > a {
    color: var(--vm-blue);
    border-bottom-color: var(--vm-blue);
}

/* Dropdowns */
.vm-nav ul li.menu-item-has-children {
    position: relative;
}

.vm-nav ul li.menu-item-has-children > ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    box-shadow: var(--vm-shadow);
    min-width: 220px;
    padding: 8px 0;
    border-top: 3px solid var(--vm-blue);
    display: none;
    opacity: 0;
    z-index: 1000;
}

.vm-nav ul li.menu-item-has-children:hover > ul.sub-menu {
    display: block;
    opacity: 1;
}

.vm-nav ul.sub-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    border-bottom: none;
    color: var(--vm-text);
    white-space: nowrap;
}

.vm-nav ul.sub-menu li a:hover {
    background: var(--vm-blue-light);
    color: var(--vm-blue);
}

/* Header CTA nav buttons */
.vm-nav-cta {
    background: var(--vm-blue) !important;
    color: #ffffff !important;
    padding: 10px 22px !important;
    border-radius: var(--vm-radius) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-bottom: none !important;
    transition: var(--vm-transition) !important;
}

.vm-nav-cta:hover {
    background: var(--vm-blue-dark) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Mobile hamburger */
.vm-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px;
}

.vm-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--vm-text);
    transition: var(--vm-transition);
}

/* -----------------------------------------------------------------------------
   5. Footer Styles
   ----------------------------------------------------------------------------- */
.vm-footer {
    background: #1a2535;
    color: #ffffff;
}

.vm-footer-top {
    padding: 64px 40px;
}

.vm-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.vm-footer-logo-img {
    max-height: 50px;
    margin-bottom: 16px;
}

.vm-footer-logo-text {
    display: block;
    font-family: var(--vm-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
}

.vm-footer-tagline {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.vm-footer-social {
    display: flex;
    gap: 12px;
}

.vm-social-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    transition: var(--vm-transition);
}

.vm-social-link:hover {
    background: var(--vm-blue);
    color: #ffffff;
    text-decoration: none;
}

.vm-footer h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--vm-blue);
}

.vm-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vm-footer ul li {
    margin-bottom: 10px;
}

.vm-footer ul li a {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    transition: var(--vm-transition);
}

.vm-footer ul li a:hover {
    color: #ffffff;
    text-decoration: none;
    padding-left: 4px;
}

.vm-footer-bottom {
    background: #111c2b;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vm-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.vm-footer-bottom p {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    margin: 0;
}

.vm-footer-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 24px;
}

.vm-footer-nav li a {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    transition: var(--vm-transition);
}

.vm-footer-nav li a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* -----------------------------------------------------------------------------
   6. Section Utility Classes
   ----------------------------------------------------------------------------- */
.vm-section {
    padding: 80px 40px;
}

.vm-section-sm {
    padding: 48px 40px;
}

.vm-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.vm-section-white {
    background: #ffffff;
}

.vm-section-light {
    background: var(--vm-bg-light);
}

.vm-section-blue {
    background: var(--vm-blue);
    color: #ffffff;
}

.vm-section-dark {
    background: #1a2535;
    color: #ffffff;
}

.vm-section-blue *,
.vm-section-dark * {
    color: #ffffff;
}

/* -----------------------------------------------------------------------------
   7. Typography Utility Classes
   ----------------------------------------------------------------------------- */
.vm-section-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--vm-blue);
    margin-bottom: 12px;
    display: block;
}

.vm-section-label.light {
    color: rgba(255,255,255,0.75);
}

.vm-section-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.vm-section-subtitle {
    font-size: 18px;
    color: var(--vm-text-light);
    line-height: 1.7;
    max-width: 640px;
}

.vm-text-center {
    text-align: center;
}

.vm-text-center .vm-section-subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* -----------------------------------------------------------------------------
   8. Button Utility Classes
   ----------------------------------------------------------------------------- */
.vm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--vm-font-heading);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: var(--vm-radius);
    cursor: pointer;
    transition: var(--vm-transition);
    text-decoration: none;
    border: 2px solid transparent;
}

.vm-btn-primary {
    background: var(--vm-blue);
    color: #ffffff;
    border-color: var(--vm-blue);
}

.vm-btn-primary:hover {
    background: var(--vm-blue-dark);
    border-color: var(--vm-blue-dark);
    color: #ffffff;
    text-decoration: none;
}

.vm-btn-outline {
    background: transparent;
    color: var(--vm-blue);
    border-color: var(--vm-blue);
}

.vm-btn-outline:hover {
    background: var(--vm-blue);
    color: #ffffff;
    text-decoration: none;
}

.vm-btn-white {
    background: #ffffff;
    color: var(--vm-blue);
    border-color: #ffffff;
}

.vm-btn-white:hover {
    background: transparent;
    color: #ffffff;
    text-decoration: none;
}

.vm-btn-lg {
    padding: 18px 36px;
    font-size: 16px;
}

.vm-btn-sm {
    padding: 10px 20px;
    font-size: 13px;
}

/* -----------------------------------------------------------------------------
   9. WPBakery Helper / Component Classes
   ----------------------------------------------------------------------------- */
.vm-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(4, 21, 49, 0.06);
    transition: var(--vm-transition);
}

.vm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(4, 21, 49, 0.15);
}

.vm-icon-box {
    text-align: center;
    padding: 32px 24px;
}

.vm-icon-box .vm-icon {
    width: 72px;
    height: 72px;
    background: var(--vm-blue-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--vm-blue);
    font-size: 28px;
}

.vm-number-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
}

.vm-step-number {
    min-width: 48px;
    height: 48px;
    background: var(--vm-blue);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.vm-divider {
    width: 60px;
    height: 4px;
    background: var(--vm-blue);
    margin: 20px 0;
}

.vm-divider.centered {
    margin: 20px auto;
}

.vm-highlight-box {
    background: var(--vm-blue-light);
    border-left: 4px solid var(--vm-blue);
    padding: 24px;
    border-radius: 0 var(--vm-radius) var(--vm-radius) 0;
}

/* -----------------------------------------------------------------------------
   10. Contact Form Styles
   ----------------------------------------------------------------------------- */
.vm-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.vm-form-group {
    margin-bottom: 24px;
}

.vm-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--vm-text);
    font-size: 14px;
}

.vm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--vm-border);
    border-radius: var(--vm-radius);
    font-family: var(--vm-font-body);
    font-size: 15px;
    color: var(--vm-text);
    background: #ffffff;
    transition: var(--vm-transition);
}

.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7-form-control.wpcf7-select:focus {
    border-color: var(--vm-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(4, 21, 49, 0.1);
}

.vm-radio-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border: 2px solid var(--vm-border);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: var(--vm-transition);
}

.vm-radio-card:has(input:checked) {
    border-color: var(--vm-blue);
    background: var(--vm-blue-light);
}

.vm-form-type-selector {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}

.vm-form-submit {
    text-align: center;
    margin-top: 32px;
}

.wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
    margin-bottom: 8px;
}

/* -----------------------------------------------------------------------------
   11. Responsive Breakpoints
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .vm-section {
        padding: 64px 24px;
    }

    .vm-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .vm-section {
        padding: 48px 20px;
    }

    .vm-footer-grid {
        grid-template-columns: 1fr;
    }

    .vm-footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .vm-footer-bottom-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .vm-header {
        padding: 0 20px;
    }

    .vm-header-cta {
        display: none;
    }

    /* Mobile hamburger */
    .vm-hamburger {
        display: flex;
    }

    /* Mobile nav */
    .vm-nav {
        display: none;
    }

    .vm-nav.is-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #ffffff;
        padding: 32px;
        overflow-y: auto;
        z-index: 9998;
    }

    .vm-nav.is-open ul {
        flex-direction: column;
        gap: 0;
    }

    .vm-nav.is-open ul li a {
        padding: 14px 0;
        font-size: 16px;
        border-bottom: 1px solid var(--vm-border);
        border-right: none;
    }

    .vm-nav.is-open ul.sub-menu {
        position: static;
        box-shadow: none;
        border-top: none;
        display: block;
        opacity: 1;
        padding-left: 16px;
    }

    .vm-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .vm-section-title {
        font-size: 26px;
    }
}
/* Hide CF7's default radio label since we use our own span inside .vm-radio-card */
.vm-radio-card .wpcf7-list-item-label {
    display: none;
}

.vm-radio-card .wpcf7-list-item {
    margin: 0;
}

/* === Stage 2 additions === */

/* Style Contact Form 7 submit button to match brand */
.wpcf7-form input[type="submit"],
input.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vm-font-heading);
    font-weight: 600;
    font-size: 16px;
    padding: 18px 36px;
    border-radius: var(--vm-radius);
    cursor: pointer;
    transition: var(--vm-transition);
    text-decoration: none;
    border: 2px solid var(--vm-blue);
    background: var(--vm-blue);
    color: white;
    text-transform: none;
    letter-spacing: 0.5px;
}

.wpcf7-form input[type="submit"]:hover,
input.wpcf7-submit:hover {
    background: var(--vm-blue-dark);
    border-color: var(--vm-blue-dark);
    color: white;
}

/* === Home page specific styles === */

.vm-stat-block {
    text-align: center;
    padding: 24px;
}

.vm-stat-number {
    font-family: var(--vm-font-heading);
    font-size: 56px;
    font-weight: 700;
    color: var(--vm-blue);
    line-height: 1;
    margin-bottom: 8px;
    display: block;
}

.vm-stat-label {
    font-size: 15px;
    color: var(--vm-text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vm-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vm-feature-list li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.6;
}

.vm-feature-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    background: var(--vm-blue-light);
    color: var(--vm-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.vm-section-blue .vm-feature-list li::before,
.vm-section-dark .vm-feature-list li::before {
    background: rgba(255,255,255,0.15);
    color: white;
}

.vm-cta-box {
    background: linear-gradient(135deg, var(--vm-blue) 0%, var(--vm-blue-dark) 100%);
    color: white;
    padding: 64px 48px;
    border-radius: 12px;
    text-align: center;
}

.vm-cta-box h2 {
    color: white;
    margin-bottom: 16px;
}

.vm-cta-box p {
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.vm-cta-box .vm-btn-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.vm-image-placeholder {
    background: var(--vm-blue-light);
    border-radius: 8px;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vm-blue);
    font-size: 48px;
}

@media (max-width: 768px) {
    .vm-cta-box {
        padding: 48px 24px;
    }
    .vm-stat-number {
        font-size: 42px;
    }
}
/* === Override Unicon's dark page background === */
body.page #main-content,
body.home #main-content,
body.page .vm-main,
body.home .vm-main {
    background: #ffffff;
}

/* Ensure section background classes have priority over Unicon */
.vc_row.vm-section-white,
.vc_row.vm-section.vm-section-white {
    background-color: #ffffff !important;
}

.vc_row.vm-section-light,
.vc_row.vm-section.vm-section-light {
    background-color: var(--vm-bg-light) !important;
}

.vc_row.vm-section-blue,
.vc_row.vm-section.vm-section-blue {
    background-color: var(--vm-blue) !important;
    color: #ffffff;
}

.vc_row.vm-section-blue h1,
.vc_row.vm-section-blue h2,
.vc_row.vm-section-blue h3,
.vc_row.vm-section-blue h4,
.vc_row.vm-section-blue p {
    color: #ffffff;
}

.vc_row.vm-section-dark,
.vc_row.vm-section.vm-section-dark {
    background-color: #1a2535 !important;
    color: #ffffff;
}

/* Make sure section text contrast is correct on white sections */
.vc_row.vm-section-white,
.vc_row.vm-section-light {
    color: var(--vm-text);
}

.vc_row.vm-section-white h1,
.vc_row.vm-section-white h2,
.vc_row.vm-section-white h3,
.vc_row.vm-section-white h4,
.vc_row.vm-section-light h1,
.vc_row.vm-section-light h2,
.vc_row.vm-section-light h3,
.vc_row.vm-section-light h4 {
    color: var(--vm-text);
}
/* Force subtitles to center themselves when in a centered column */
.vm-section-subtitle {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    text-align: center;
}

/* Also ensure paragraphs inside vm-text-center columns center properly */
.vm-text-center .wpb_text_column,
.vm-text-center .wpb_wrapper {
    text-align: center;
}
/* === Service card blue accent styling === */
.vm-card.vm-icon-box {
    background: #ffffff;
    position: relative;
    overflow: visible;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vm-card.vm-icon-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(4, 21, 49, 0.04) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
    z-index: 0;
}

.vm-card.vm-icon-box > * {
    position: relative;
    z-index: 1;
}

.vm-card.vm-icon-box h4 {
    color: var(--vm-blue);
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 8px;
}

.vm-card.vm-icon-box .vm-icon {
    transition: var(--vm-transition);
}

.vm-card.vm-icon-box:hover {
    background: linear-gradient(180deg, var(--vm-blue-light) 0%, #ffffff 60%);
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(4, 21, 49, 0.15);
}

.vm-card.vm-icon-box:hover .vm-icon {
    background: var(--vm-blue);
    color: white;
}

/* === Stage 3: Inner page header styles === */

.vm-page-header {
    background: linear-gradient(135deg, var(--vm-blue) 0%, var(--vm-blue-dark) 100%);
    color: white;
    padding: 80px 40px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.vm-page-header::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

.vm-page-header .vm-section-label {
    color: rgba(255,255,255,0.85);
    margin-bottom: 16px;
}

.vm-page-header h1 {
    color: white;
    font-size: clamp(32px, 5vw, 48px);
    margin-bottom: 16px;
}

.vm-page-header .vm-page-header-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 19px;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Two-path comparison cards (for How It Works overview) */
.vm-path-card {
    background: white;
    border-radius: 12px;
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(4, 21, 49, 0.06);
    transition: var(--vm-transition);
    height: 100%;
}

.vm-path-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(4, 21, 49, 0.15);
}

.vm-path-card-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--vm-blue-light);
    color: var(--vm-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 36px;
}

.vm-path-card h3 {
    color: var(--vm-blue);
    margin-bottom: 16px;
    font-size: 24px;
}

.vm-path-card p {
    color: var(--vm-text-light);
    margin-bottom: 32px;
    line-height: 1.7;
}

/* Value card variant */
.vm-value-card {
    background: white;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    height: 100%;
    transition: var(--vm-transition);
}

.vm-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(4, 21, 49, 0.15);
}

.vm-value-card .vm-icon {
    width: 64px;
    height: 64px;
    background: var(--vm-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
}

.vm-value-card h4 {
    color: var(--vm-blue);
    margin-bottom: 12px;
}

/* Image placeholder for sections that will get real photos later */
.vm-image-block {
    background: linear-gradient(135deg, var(--vm-blue-light) 0%, #d8e4f3 100%);
    border-radius: 12px;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vm-blue);
    font-size: 64px;
    width: 100%;
}
/* === Fix page header gradient background === */
.vc_row.vm-page-header,
body .vc_row.vm-page-header {
    background: linear-gradient(135deg, var(--vm-blue) 0%, var(--vm-blue-dark) 100%) !important;
    color: #ffffff;
}

.vc_row.vm-page-header h1,
.vc_row.vm-page-header .vm-page-header-subtitle,
.vc_row.vm-page-header .vm-section-label {
    color: #ffffff !important;
}

.vc_row.vm-page-header .vm-section-label {
    color: rgba(255,255,255,0.85) !important;
}

.vc_row.vm-page-header .vm-page-header-subtitle {
    color: rgba(255,255,255,0.9) !important;
}
/* === Page header banner refinements === */

/* Force white text on the blue banner (Unicon was overriding) */
.vc_row.vm-page-header .wpb_text_column h1,
.vc_row.vm-page-header .wpb_text_column h1 * ,
.vc_row.vm-page-header .wpb_text_column p,
.vc_row.vm-page-header .wpb_text_column p *,
.vc_row.vm-page-header .wpb_text_column span,
.vc_row.vm-page-header .wpb_text_column span * {
    color: #ffffff !important;
}

.vc_row.vm-page-header .vm-section-label {
    color: rgba(255,255,255,0.85) !important;
}

.vc_row.vm-page-header .vm-page-header-subtitle {
    color: rgba(255,255,255,0.92) !important;
}

/* Center the header content */
.vc_row.vm-page-header,
.vc_row.vm-page-header .wpb_text_column,
.vc_row.vm-page-header .wpb_wrapper {
    text-align: center !important;
}

.vc_row.vm-page-header {
    overflow: hidden;
}

/* === Stage 4: Conversion page styles === */

/* Pain point card */
.vm-pain-card {
    background: white;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    height: 100%;
    transition: var(--vm-transition);
}

.vm-pain-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(4, 21, 49, 0.15);
}

.vm-pain-card .vm-pain-icon {
    width: 64px;
    height: 64px;
    background: #fff5f5;
    color: #c53030;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
}

.vm-pain-card h4 {
    color: var(--vm-text);
    margin-bottom: 12px;
    font-size: 18px;
}

.vm-pain-card p {
    color: var(--vm-text-light);
    font-size: 14px;
    line-height: 1.7;
}

/* Process step card with number */
.vm-process-step {
    background: white;
    border-radius: 12px;
    padding: 32px 28px;
    height: 100%;
    position: relative;
}

.vm-process-step-number {
    position: absolute;
    top: -20px;
    left: 28px;
    width: 40px;
    height: 40px;
    background: var(--vm-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    font-family: var(--vm-font-heading);
}

.vm-process-step h4 {
    color: var(--vm-blue);
    margin-top: 8px;
    margin-bottom: 12px;
    font-size: 20px;
}

.vm-process-step p {
    color: var(--vm-text-light);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Option card (Discovery Call vs Intake Form) */
.vm-option-card {
    background: white;
    border-radius: 12px;
    padding: 40px 32px;
    text-align: center;
    height: 100%;
    transition: var(--vm-transition);
    position: relative;
}

.vm-option-card.featured {
    background: linear-gradient(180deg, var(--vm-blue-light) 0%, #ffffff 70%);
}

.vm-option-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(4, 21, 49, 0.15);
}

.vm-option-card .vm-option-icon {
    width: 80px;
    height: 80px;
    background: var(--vm-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 30px;
}

.vm-option-card h3 {
    color: var(--vm-blue);
    margin-bottom: 16px;
}

.vm-option-card p {
    color: var(--vm-text-light);
    margin-bottom: 24px;
    line-height: 1.7;
}

.vm-option-card .vm-option-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    text-align: left;
    display: inline-block;
}

.vm-option-card .vm-option-features li {
    padding: 6px 0 6px 28px;
    position: relative;
    font-size: 14px;
    color: var(--vm-text);
}

.vm-option-card .vm-option-features li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--vm-blue);
    font-size: 14px;
}

/* Highlight benefit card (for VA page) */
.vm-benefit-card {
    background: white;
    border-radius: 12px;
    padding: 28px 24px;
    height: 100%;
    box-shadow: 0 4px 16px rgba(4, 21, 49, 0.06);
    transition: var(--vm-transition);
}

.vm-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(4, 21, 49, 0.12);
}

.vm-benefit-card .vm-benefit-icon {
    width: 56px;
    height: 56px;
    background: var(--vm-blue-light);
    color: var(--vm-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 22px;
}

.vm-benefit-card h4 {
    color: var(--vm-blue);
    margin-bottom: 10px;
    font-size: 18px;
}

.vm-benefit-card p {
    color: var(--vm-text-light);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 0;
}

/* Requirements list */
.vm-requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vm-requirements-list li {
    padding: 14px 0 14px 44px;
    position: relative;
    border-bottom: 1px solid var(--vm-border);
    line-height: 1.6;
}

.vm-requirements-list li:last-child {
    border-bottom: none;
}

.vm-requirements-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 14px;
    color: var(--vm-blue);
    font-size: 22px;
}

.vm-requirements-list li strong {
    color: var(--vm-text);
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.vm-requirements-list li span {
    color: var(--vm-text-light);
    font-size: 14px;
}
/* === Stage 4 spacing & badge fixes === */

/* Fix cut-off number badges by moving them inside the card */
.vm-process-step {
    overflow: visible !important;
    padding-top: 56px !important;
    margin-top: 0 !important;
    position: relative;
}

.vm-process-step-number {
    top: 20px !important;
    left: 28px !important;
}

/* Ensure WPBakery doesn't clip absolute-positioned elements */
.wpb_text_column.vm-process-step,
.vm-process-step .wpb_wrapper {
    overflow: visible !important;
}

/* Add consistent breathing room between sections */
.vc_row.vm-section,
.vc_row.vm-section-sm {
    margin-top: 0;
    margin-bottom: 0;
}

.vc_row.vm-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.vc_row.vm-section-sm {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

/* Cards in a row should have equal heights */
.vc_row.vm-section-sm > .vc_column_container,
.vc_row.vm-section > .vc_column_container {
    display: flex;
    flex-direction: column;
}

.vc_row.vm-section-sm > .vc_column_container > .vc_column-inner,
.vc_row.vm-section > .vc_column_container > .vc_column-inner {
    height: 100%;
    flex: 1;
}
/* === Card containment fixes === */

/* Path cards (Business vs VA) - prevent hover transform from overflowing */
.vm-path-card {
    overflow: visible;
    height: 100%;
}

.vc_column_container:has(.vm-path-card) {
    overflow: visible;
}

/* Ensure cards stay within their column containers */
.wpb_text_column.vm-path-card,
.wpb_text_column.vm-card,
.wpb_text_column.vm-value-card,
.wpb_text_column.vm-pain-card,
.wpb_text_column.vm-benefit-card,
.wpb_text_column.vm-option-card {
    margin: 0;
    box-sizing: border-box;
}

/* Mission/Vision cards on About Us - keep icon inside card */
.vm-card .vm-icon {
    position: relative;
    z-index: 1;
}

/* Give path cards breathing room so the hover lift doesn't clip */
.vm-path-card {
    margin-top: 12px;
}

.vc_row.vm-section-sm > .vc_column_container,
.vc_row.vm-section-sm > .vc_column_container > .vc_column-inner,
.vc_row.vm-section-sm > .vc_column_container > .vc_column-inner > .wpb_wrapper {
    overflow: visible !important;
}

/* === Stage 5: Services page styles === */

.vm-service-detail-card {
    background: white;
    border-radius: 12px;
    padding: 40px 32px;
    height: 100%;
    transition: var(--vm-transition);
    margin-top: 12px;
}

.vm-service-detail-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(4, 21, 49, 0.15);
}

.vm-service-detail-card .vm-service-icon {
    width: 64px;
    height: 64px;
    background: var(--vm-blue-light);
    color: var(--vm-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 26px;
}

.vm-service-detail-card h3 {
    color: var(--vm-blue);
    margin-bottom: 12px;
    font-size: 22px;
}

.vm-service-detail-card .vm-service-description {
    color: var(--vm-text-light);
    margin-bottom: 20px;
    line-height: 1.7;
}

.vm-service-detail-card .vm-service-tasks {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--vm-border);
    padding-top: 16px;
}

.vm-service-detail-card .vm-service-tasks li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 14px;
    color: var(--vm-text);
}

.vm-service-detail-card .vm-service-tasks li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--vm-blue);
    font-size: 12px;
}

/* Polish: ensure all cards have room to breathe with hover transforms */
.vm-value-card,
.vm-benefit-card,
.vm-pain-card,
.vm-option-card,
.vm-card,
.vm-service-detail-card {
    margin-top: 8px;
}

/* Polish: header CTA button responsive fix */
@media (max-width: 1100px) and (min-width: 769px) {
    .vm-header .vm-header-cta {
        gap: 8px;
    }
    .vm-header .vm-header-cta .vm-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

@media (max-width: 900px) and (min-width: 769px) {
    .vm-header .vm-header-cta {
        display: none;
    }
}

/* =============================================================================
   STAGE 6A: Path card alignment + hover restore
   ============================================================================= */

/* Complete the flex chain so both path cards stretch to equal heights.
   Existing rules already handle .vc_column_container and .vc_column-inner;
   these rules extend the chain down to the card content. */
.vc_row.vm-section-sm > .vc_column_container > .vc_column-inner > .wpb_wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wpb_text_column.vm-path-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 12px 0; /* breathing room so the hover lift never touches edges */
}

.vm-path-card > .wpb_wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Anchor the CTA button to the bottom of the card so both cards' buttons
   align horizontally regardless of paragraph length. */
.vm-path-card .vm-btn {
    margin-top: auto;
    align-self: center;
}

/* Restore hover lift on path cards specifically. The earlier global
   transform:none !important rule uses selector .vm-path-card:hover (one class);
   these selectors use .wpb_text_column.vm-path-card:hover (two classes), so
   they win on specificity even at equal importance. */
.wpb_text_column.vm-path-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    will-change: transform;
}

.wpb_text_column.vm-path-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(4, 21, 49, 0.15) !important;
}

/* Belt and braces: ensure no ancestor in this specific row clips the lift. */
.vc_row.vm-section-sm,
.vc_row.vm-section-sm > .vc_column_container,
.vc_row.vm-section-sm > .vc_column_container > .vc_column-inner,
.vc_row.vm-section-sm > .vc_column_container > .vc_column-inner > .wpb_wrapper {
    overflow: visible !important;
}

/* =============================================================================
   STAGE 6A.1: Force the path-card row to flex so columns equalise heights
   ============================================================================= */

/* Use :has() to scope this only to rows containing path cards, so we do not
   affect other vm-section-sm rows elsewhere on the site. */
.vc_row.vm-section-sm:has(.vm-path-card) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
}

.vc_row.vm-section-sm:has(.vm-path-card) > .vc_column_container {
    display: flex !important;
    flex-direction: column;
}

/* On mobile the columns drop to full width and stack vertically. */
@media (max-width: 768px) {
    .vc_row.vm-section-sm:has(.vm-path-card) {
        flex-direction: column;
    }
}

/* =============================================================================
   STAGE 6C: Blog styles
   ============================================================================= */

/* Archive grid */
.vm-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 56px;
}

@media (max-width: 1024px) {
    .vm-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 640px) {
    .vm-blog-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Blog card */
.vm-blog-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(4, 21, 49, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vm-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(4, 21, 49, 0.15);
}

.vm-blog-card-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--vm-blue-light);
}

.vm-blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.vm-blog-card:hover .vm-blog-card-image img {
    transform: scale(1.04);
}

.vm-blog-card-body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vm-blog-card-category {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--vm-font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--vm-blue);
    background: var(--vm-blue-light);
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 14px;
}

.vm-blog-card-title {
    font-size: 20px;
    line-height: 1.35;
    margin: 0 0 12px;
    font-weight: 700;
}

.vm-blog-card-title a {
    color: var(--vm-text);
    text-decoration: none;
}

.vm-blog-card-title a:hover {
    color: var(--vm-blue);
    text-decoration: none;
}

.vm-blog-card-excerpt {
    color: var(--vm-text-light);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px;
    flex: 1;
}

.vm-blog-card-meta {
    font-size: 13px;
    color: var(--vm-text-light);
}

.vm-blog-card-meta i {
    margin-right: 6px;
    color: var(--vm-blue);
}

/* Empty state */
.vm-blog-empty {
    text-align: center;
    padding: 64px 24px;
    max-width: 560px;
    margin: 0 auto;
}

.vm-blog-empty-icon {
    width: 88px;
    height: 88px;
    background: var(--vm-blue-light);
    color: var(--vm-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
}

.vm-blog-empty h2 {
    color: var(--vm-blue);
    margin-bottom: 12px;
}

.vm-blog-empty p {
    color: var(--vm-text-light);
    margin-bottom: 28px;
}

/* Pagination */
.vm-pagination {
    text-align: center;
    margin-top: 24px;
}

.vm-pagination .nav-links {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.vm-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--vm-border);
    border-radius: var(--vm-radius);
    color: var(--vm-text);
    font-family: var(--vm-font-heading);
    font-weight: 600;
    font-size: 14px;
    background: #ffffff;
    text-decoration: none;
    transition: var(--vm-transition);
}

.vm-pagination .page-numbers:hover {
    background: var(--vm-blue-light);
    color: var(--vm-blue);
    border-color: var(--vm-blue);
    text-decoration: none;
}

.vm-pagination .page-numbers.current {
    background: var(--vm-blue);
    color: #ffffff;
    border-color: var(--vm-blue);
}

.vm-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* Single post */
.vm-single-header {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    border-radius: 0 !important;
}

.vm-single-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.vm-single-meta i {
    margin-right: 4px;
}

.vm-meta-dot {
    opacity: 0.6;
}

.vm-single-featured {
    background: var(--vm-bg-light);
    padding: 0 40px;
}

.vm-single-featured-image {
    width: 100%;
    height: auto;
    display: block;
    margin: -56px auto 0;
    border-radius: 12px;
    box-shadow: 0 20px 44px rgba(4, 21, 49, 0.18);
    max-height: 540px;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.vm-single-narrow {
    max-width: 760px;
}

.vm-single-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--vm-text);
}

.vm-single-content > * {
    margin-bottom: 1.2em;
}

.vm-single-content h2 {
    font-size: 28px;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}

.vm-single-content h3 {
    font-size: 22px;
    margin-top: 1.6em;
    margin-bottom: 0.5em;
}

.vm-single-content p,
.vm-single-content li {
    font-size: 17px;
    line-height: 1.75;
}

.vm-single-content blockquote {
    border-left: 4px solid var(--vm-blue);
    background: var(--vm-blue-light);
    padding: 20px 24px;
    margin: 28px 0;
    border-radius: 0 var(--vm-radius) var(--vm-radius) 0;
    font-style: italic;
    color: var(--vm-text);
}

.vm-single-content img,
.vm-single-content figure {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 28px 0;
}

.vm-single-content a {
    color: var(--vm-blue);
    text-decoration: underline;
}

.vm-single-tags {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--vm-border);
    font-size: 14px;
}

.vm-tags-label {
    font-weight: 700;
    margin-right: 8px;
    color: var(--vm-text);
}

.vm-single-tags a {
    display: inline-block;
    background: var(--vm-blue-light);
    color: var(--vm-blue);
    padding: 4px 12px;
    border-radius: 4px;
    margin-right: 6px;
    font-size: 13px;
    text-decoration: none;
}

.vm-single-tags a:hover {
    background: var(--vm-blue);
    color: #ffffff;
}

/* Inline CTA */
.vm-cta-inline {
    background: #ffffff;
    border: 1px solid var(--vm-blue-light);
    border-left: 4px solid var(--vm-blue);
    padding: 32px 36px;
    border-radius: 8px;
    text-align: center;
}

.vm-cta-inline h3 {
    color: var(--vm-blue);
    margin-bottom: 12px;
}

.vm-cta-inline p {
    color: var(--vm-text-light);
    margin-bottom: 24px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.vm-cta-inline .vm-btn-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .vm-single-featured {
        padding: 0 20px;
    }
    .vm-single-featured-image {
        margin-top: -32px;
        border-radius: 8px;
    }
    .vm-single-content,
    .vm-single-content p,
    .vm-single-content li {
        font-size: 16px;
    }
    .vm-cta-inline {
        padding: 24px 20px;
    }
}

/* =============================================================================
   Stage 6C-aux v3: Slider breakout (targets row by Smart Slider presence)
   The previous attempts targeted .vm-hero-row but that class is not on the
   row in the DOM. This version uses :has() to find the row containing the
   slider, and explicitly frees the #page-wrap.container 1200px constraint.
   ============================================================================= */

/* Prevent a horizontal scrollbar from appearing on the page while we let
   the slider escape its container. */
html {
    overflow-x: clip !important;
}

body.home {
    overflow-x: clip !important;
}

/* Allow horizontal overflow through the wrappers (including the 1200px
   #page-wrap.container) so the negative-margin breakout actually escapes. */
body.home #main-content,
body.home .vm-main,
body.home #page-wrap,
body.home #page-wrap.container,
body.home #content,
body.home .wpb-content-wrapper {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* Find any WPBakery row on the home page that contains a Smart Slider and
   push it to true viewport width via negative margins. */
body.home .wpb_row:has(.smartslider3),
body.home .wpb_row:has([class*="n2-section-smartslider"]),
body.home .wpb_row:has([class*="n2-ss-slider"]) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Strip all padding and margin from the column chain inside that row. */
body.home .wpb_row:has(.smartslider3) .vc_column_container,
body.home .wpb_row:has(.smartslider3) .vc_column-inner,
body.home .wpb_row:has(.smartslider3) .wpb_column,
body.home .wpb_row:has(.smartslider3) .wpb_text_column,
body.home .wpb_row:has(.smartslider3) .wpb_wrapper,
body.home .wpb_row:has([class*="n2-ss-slider"]) .vc_column_container,
body.home .wpb_row:has([class*="n2-ss-slider"]) .vc_column-inner,
body.home .wpb_row:has([class*="n2-ss-slider"]) .wpb_column,
body.home .wpb_row:has([class*="n2-ss-slider"]) .wpb_text_column,
body.home .wpb_row:has([class*="n2-ss-slider"]) .wpb_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* Smart Slider's own container nodes inside the hero row. */
body.home .smartslider3,
body.home [class*="n2-section-smartslider"],
body.home [class*="n2-ss-slider"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =============================================================================
   STAGE 6D: Accessibility focus states
   Visible keyboard focus indicators for buttons, links, form fields, and
   interactive cards. Required for WCAG 2.1 AA compliance.
   ============================================================================= */

/* Universal focus reset: remove default browser outline only when we provide
   our own visible focus style. Never remove focus without a replacement. */

/* Buttons */
.vm-btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.wpcf7-form input[type="submit"]:focus-visible {
    outline: 3px solid var(--vm-blue);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(4, 21, 49, 0.15);
}

/* Links in body content */
a:focus-visible {
    outline: 2px solid var(--vm-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Navigation links: use underline rather than outline since the nav already
   has its own hover treatment. */
.vm-nav ul li a:focus-visible,
.vm-footer-nav li a:focus-visible {
    outline: 2px solid var(--vm-blue);
    outline-offset: 4px;
    text-decoration: none;
}

/* Form inputs already have a focus style via existing :focus rules. Add
   :focus-visible parity so keyboard users see it too. */
.wpcf7-form-control.wpcf7-text:focus-visible,
.wpcf7-form-control.wpcf7-email:focus-visible,
.wpcf7-form-control.wpcf7-tel:focus-visible,
.wpcf7-form-control.wpcf7-textarea:focus-visible,
.wpcf7-form-control.wpcf7-select:focus-visible {
    outline: 3px solid var(--vm-blue);
    outline-offset: 0;
    border-color: var(--vm-blue);
}

/* Radio card labels (used in the contact form type selector). */
.vm-radio-card:focus-within {
    outline: 3px solid var(--vm-blue);
    outline-offset: 2px;
}

/* Interactive cards that link somewhere (blog cards, path cards). When a user
   tabs to the link inside the card, lift the whole card visually so they can
   see which one they are on. */
.vm-blog-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(4, 21, 49, 0.15);
}

.vm-blog-card a:focus-visible {
    outline-offset: 4px;
}

/* Pagination */
.vm-pagination .page-numbers:focus-visible {
    outline: 3px solid var(--vm-blue);
    outline-offset: 2px;
}

/* Hide outline from non-keyboard interactions (mouse click on a button) but
   keep it for keyboard. :focus-visible handles this automatically; this rule
   suppresses any leftover :focus styles that would otherwise show on click. */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link for screen reader and keyboard users. Hidden until focused, then
   appears at top left of viewport so users can skip the navigation. The link
   target #main-content already exists in the page structure. */
.vm-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--vm-blue);
    color: #ffffff;
    padding: 14px 24px;
    text-decoration: none;
    font-family: var(--vm-font-heading);
    font-weight: 600;
    font-size: 14px;
    z-index: 10000;
    transition: top 0.2s ease;
}

.vm-skip-link:focus,
.vm-skip-link:focus-visible {
    top: 0;
    color: #ffffff;
    text-decoration: none;
    outline: 3px solid #ffffff;
    outline-offset: -6px;
}

/* === Stage 6E: Unified card hover restore and row flex === */

.vm-path-card,
.vm-value-card,
.vm-benefit-card,
.vm-pain-card,
.vm-option-card,
.vm-card,
.vm-service-detail-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vm-path-card:hover,
.vm-value-card:hover,
.vm-benefit-card:hover,
.vm-pain-card:hover,
.vm-option-card:hover,
.vm-card:hover,
.vm-service-detail-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(4, 21, 49, 0.20);
}

.vc_row:has(.vm-path-card),
.vc_row:has(.vm-value-card),
.vc_row:has(.vm-benefit-card),
.vc_row:has(.vm-pain-card),
.vc_row:has(.vm-option-card),
.vc_row:has(.vm-card),
.vc_row:has(.vm-service-detail-card) {
    display: flex !important;
    align-items: stretch !important;
}

/* === Stage 6E: Inner-page banner refinement === */

.vc_row.vm-page-header {
    border-radius: 0 !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

.vc_row.vm-single-header {
    padding-bottom: 48px !important;
}

/* === Stage 6E: Path card button alignment finalisation === */

.wpb_text_column.vm-path-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.wpb_text_column.vm-path-card .wpb_wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.wpb_text_column.vm-path-card .vm-btn {
    margin-top: auto !important;
    align-self: flex-start;
}

/* =============================================================================
   STAGE 6F: Card design single source of truth
   Earlier blocks handle layout, padding, icon styling, and flex chains.
   This block is the authoritative final word on container border, shadow,
   radius, and hover behaviour across every card type on the site.
   ============================================================================= */

/* Rest state: all main card types */
.vm-card,
.vm-path-card,
.vm-value-card,
.vm-benefit-card,
.vm-pain-card,
.vm-process-step,
.vm-option-card,
.vm-service-detail-card {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(4, 21, 49, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Featured option card keeps its gradient tint, no border */
.vm-option-card.featured {
    background: linear-gradient(180deg, var(--vm-blue-light) 0%, #ffffff 70%);
}

/* Icon-box variant retains its gradient reveal on hover */
.vm-card.vm-icon-box:hover {
    background: linear-gradient(180deg, var(--vm-blue-light) 0%, #ffffff 60%);
}

/* Hover state: all main card types */
.vm-card:hover,
.vm-path-card:hover,
.vm-value-card:hover,
.vm-benefit-card:hover,
.vm-pain-card:hover,
.vm-process-step:hover,
.vm-option-card:hover,
.vm-service-detail-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(4, 21, 49, 0.15);
}

/* Scoped overflow: visible on card-row column chains.
   Replaces the global unscoped rules removed in this stage.
   Only rows containing cards get overflow: visible, leaving every other
   column on the site at its default.
   !important required: Unicon parent theme sets overflow: hidden on .vc_column-inner. */
.vc_row:has(.vm-card) .vc_column-inner,
.vc_row:has(.vm-path-card) .vc_column-inner,
.vc_row:has(.vm-value-card) .vc_column-inner,
.vc_row:has(.vm-benefit-card) .vc_column-inner,
.vc_row:has(.vm-pain-card) .vc_column-inner,
.vc_row:has(.vm-option-card) .vc_column-inner,
.vc_row:has(.vm-service-detail-card) .vc_column-inner,
.vc_row:has(.vm-process-step) .vc_column-inner,
.vc_row:has(.vm-card) .wpb_wrapper,
.vc_row:has(.vm-path-card) .wpb_wrapper,
.vc_row:has(.vm-value-card) .wpb_wrapper,
.vc_row:has(.vm-benefit-card) .wpb_wrapper,
.vc_row:has(.vm-pain-card) .wpb_wrapper,
.vc_row:has(.vm-option-card) .wpb_wrapper,
.vc_row:has(.vm-service-detail-card) .wpb_wrapper,
.vc_row:has(.vm-process-step) .wpb_wrapper {
    overflow: visible !important; /* !important: Unicon parent theme default is overflow: hidden */
}

/* =============================================================================
   STAGE 6G: Gold primary button system
   Primary CTAs become gold with navy text (premium accent).
   Secondary buttons stay navy outline. Navy solid remains available.
   ============================================================================= */

/* Primary button: gold fill, navy text. This is the main CTA across the site. */
.vm-btn-primary {
    background: var(--vm-gold);
    color: var(--vm-blue);
    border-color: var(--vm-gold);
    font-weight: 700;
}

.vm-btn-primary:hover {
    background: var(--vm-gold-dark);
    border-color: var(--vm-gold-dark);
    color: var(--vm-blue);
    text-decoration: none;
}

/* Outline button: navy outline, navy text, fills navy on hover. */
.vm-btn-outline {
    background: transparent;
    color: var(--vm-blue);
    border-color: var(--vm-blue);
}

.vm-btn-outline:hover {
    background: var(--vm-blue);
    color: var(--vm-white);
    border-color: var(--vm-blue);
    text-decoration: none;
}

/* White button (used on navy/dark sections): white fill, navy text, gold on hover. */
.vm-btn-white {
    background: var(--vm-white);
    color: var(--vm-blue);
    border-color: var(--vm-white);
}

.vm-btn-white:hover {
    background: var(--vm-gold);
    color: var(--vm-blue);
    border-color: var(--vm-gold);
    text-decoration: none;
}

/* On navy/dark sections the primary gold button keeps gold (it pops nicely
   against navy). Ensure its text stays navy for contrast. */
.vm-section-blue .vm-btn-primary,
.vm-section-dark .vm-btn-primary,
.vm-cta-box .vm-btn-primary {
    background: var(--vm-gold);
    color: var(--vm-blue);
    border-color: var(--vm-gold);
}

.vm-section-blue .vm-btn-primary:hover,
.vm-section-dark .vm-btn-primary:hover,
.vm-cta-box .vm-btn-primary:hover {
    background: var(--vm-gold-dark);
    border-color: var(--vm-gold-dark);
    color: var(--vm-blue);
}

/* Header nav CTA button (Hire a VA): gold to draw the eye. */
.vm-nav-cta {
    background: var(--vm-gold) !important; /* gold draws attention in the header */
    color: var(--vm-blue) !important;
}

.vm-nav-cta:hover {
    background: var(--vm-gold-dark) !important;
    color: var(--vm-blue) !important;
}

/* =============================================================================
   STAGE 6G: Gold accents
   Gold used sparingly as punctuation: section labels, dividers, card top
   accents on hover, list bullets. Navy stays structural; gold highlights.
   ============================================================================= */

/* Section labels (the small uppercase text above headings) go gold. */
.vm-section-label {
    color: var(--vm-gold);
}

/* On navy/dark sections keep the label gold (it reads well against navy). */
.vm-section-blue .vm-section-label,
.vm-section-dark .vm-section-label,
.vm-page-header .vm-section-label {
    color: var(--vm-gold);
}

/* Dividers go gold. */
.vm-divider {
    background: var(--vm-gold);
}

/* On hover, give cards a subtle gold top accent line via a pseudo element,
   so the lift is paired with a touch of gold. Applies to the main card types. */
.vm-value-card,
.vm-benefit-card,
.vm-service-detail-card,
.vm-option-card,
.vm-path-card {
    position: relative;
}

.vm-value-card::after,
.vm-benefit-card::after,
.vm-service-detail-card::after,
.vm-option-card::after,
.vm-path-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--vm-gold);
    border-radius: 12px 12px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.vm-value-card:hover::after,
.vm-benefit-card:hover::after,
.vm-service-detail-card:hover::after,
.vm-option-card:hover::after,
.vm-path-card:hover::after {
    transform: scaleX(1);
}

/* Stat numbers (the big 48hr, 100%, 0%) go gold for emphasis on white. */
.vm-stat-number {
    color: var(--vm-gold);
}

/* Inline blog CTA and highlight boxes get a gold left border accent. */
.vm-highlight-box {
    border-left-color: var(--vm-gold);
}

.vm-cta-inline {
    border-left-color: var(--vm-gold);
}

/* =============================================================================
   STAGE 6G: Page header banner, navy with gold hairline
   ============================================================================= */

.vc_row.vm-page-header,
body .vc_row.vm-page-header {
    background: linear-gradient(135deg, #041531 0%, #020c1f 100%) !important;
    border-bottom: 3px solid var(--vm-gold);
}

/* The hero CTA box on the home page: navy gradient instead of blue. */
.vm-cta-box {
    background: linear-gradient(135deg, #041531 0%, #0a2547 100%);
}

/* =============================================================================
   STAGE 6G: Logo sizing
   ============================================================================= */

.vm-logo-img {
    height: 52px;
    width: auto;
    display: block;
}

.vm-footer-logo-img {
    max-height: 88px;
    width: auto;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .vm-logo-img {
        height: 42px;
    }
}


/* =============================================================================
   STAGE 6H: Gold divider lines inside cards
   ============================================================================= */

.vm-service-detail-card .vm-service-tasks {
    border-top: 1px solid var(--vm-gold);
}

/* Generic internal hr-style dividers inside cards, if present. */
.vm-card hr,
.vm-service-detail-card hr,
.vm-option-card hr {
    border: none;
    border-top: 1px solid var(--vm-gold);
    margin: 16px 0;
}

/* =============================================================================
   STAGE 6H: Gold checkmarks in card lists
   ============================================================================= */

.vm-service-detail-card .vm-service-tasks li::before,
.vm-option-card .vm-option-features li::before {
    color: var(--vm-gold);
}

/* =============================================================================
   STAGE 6H: Navy icon boxes with gold icons
   Warms up the icon squares and ties navy + gold together. Scoped to the
   square icon containers on service and benefit cards. The round icon
   circles on value cards and path cards are intentionally left navy-on-light
   for variety; only the square icon boxes change here.
   ============================================================================= */

.vm-service-detail-card .vm-service-icon,
.vm-benefit-card .vm-benefit-icon {
    background: var(--vm-blue);
    color: var(--vm-gold);
}

/* On hover, deepen the effect slightly. */
.vm-service-detail-card:hover .vm-service-icon,
.vm-benefit-card:hover .vm-benefit-icon {
    background: var(--vm-blue-dark);
    color: var(--vm-gold);
}

/* =============================================================================
   Stage 6H-form: Fix contact form radio card layout
   The CF7 radio cards (vm-radio-card) contain a duplicate plain text span and
   stray <br> tags that push the label below the radio button. This hides the
   duplicates and aligns the real radio + label on one line with proper spacing.
   ============================================================================= */

/* Hide the stray <br> tags inside the radio cards. */
.vm-radio-card > br {
    display: none;
}

/* Hide the duplicate plain-text span (a direct child span of the label that is
   NOT the wpcf7 control wrap). The real label lives inside
   .wpcf7-form-control-wrap, so we hide any direct-child span that is not that. */
.vm-radio-card > span:not(.wpcf7-form-control-wrap) {
    display: none;
}

/* Make the wpcf7 control wrap and its nested spans lay out inline so the radio
   input and its real label sit on one line, vertically centered. */
.vm-radio-card .wpcf7-form-control-wrap,
.vm-radio-card .wpcf7-form-control.wpcf7-radio,
.vm-radio-card .wpcf7-list-item {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    width: 100%;
}

/* The actual radio input and its label, aligned with a comfortable gap. */
.vm-radio-card .wpcf7-list-item {
    gap: 12px;
}

.vm-radio-card .wpcf7-list-item input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--vm-blue);
    cursor: pointer;
}

/* Show the real CF7 label (it was hidden earlier by an old rule). Style it. */
.vm-radio-card .wpcf7-list-item-label {
    display: inline !important;
    font-weight: 600;
    color: var(--vm-text);
    font-size: 16px;
    line-height: 1.4;
}

/* Make the whole card a comfortable height now that content is one line. */
.vm-radio-card {
    padding: 20px 24px !important;
    min-height: 0 !important;
}

/* Selected state: when this card's radio is checked, navy border, light navy
   fill, and a gold left accent bar for a premium selected feel. */
.vm-radio-card:has(input:checked) {
    border-color: var(--vm-blue) !important;
    background: var(--vm-blue-light) !important;
    box-shadow: inset 4px 0 0 0 var(--vm-gold);
}

/* Hover state for the card. */
.vm-radio-card:hover {
    border-color: var(--vm-blue);
}
/* =============================================================================
   STAGE 7: Pricing cards
   ============================================================================= */

.vm-pricing-card {
    background: var(--vm-white);
    border: 2px solid var(--vm-border);
    border-radius: 12px;
    padding: 36px 28px 28px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: var(--vm-transition);
    box-shadow: var(--vm-shadow);
}

.vm-pricing-card:hover {
    transform: translateY(-4px);
    border-color: var(--vm-gold);
    box-shadow: 0 8px 32px rgba(4, 21, 49, 0.16);
}

.vm-pricing-card.vm-pricing-popular {
    border-color: var(--vm-gold);
    box-shadow: 0 8px 32px rgba(198, 157, 101, 0.25);
}

.vm-pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vm-gold);
    color: var(--vm-blue);
    font-family: var(--vm-font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 16px;
    border-radius: 20px;
    white-space: nowrap;
}

.vm-pricing-tier {
    font-family: var(--vm-font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vm-text-light);
    margin-bottom: 12px;
}

.vm-pricing-price {
    font-family: var(--vm-font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: var(--vm-blue);
    line-height: 1;
    margin-bottom: 4px;
}

.vm-pricing-price span {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--vm-text-light);
}

.vm-pricing-hours {
    font-size: 0.9rem;
    color: var(--vm-gold);
    font-weight: 600;
    margin-bottom: 8px;
}

.vm-pricing-desc {
    font-size: 0.9rem;
    color: var(--vm-text-light);
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--vm-border);
}

.vm-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left;
    flex: 1;
}

.vm-pricing-features li {
    padding: 6px 0 6px 24px;
    position: relative;
    font-size: 0.9rem;
    color: var(--vm-text);
    line-height: 1.4;
}

.vm-pricing-features li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--vm-gold);
    position: absolute;
    left: 0;
    top: 8px;
}

.vm-pricing-card .vm-btn {
    width: 100%;
    text-align: center;
    margin-top: auto;
}

/* =============================================================================
   STAGE 7: Dedicated pricing block
   ============================================================================= */

.vm-pricing-dedicated {
    background: linear-gradient(135deg, var(--vm-blue) 0%, var(--vm-blue-dark) 100%);
    border: 2px solid var(--vm-gold);
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.vm-pricing-dedicated .vm-pricing-tier {
    color: var(--vm-gold-light);
}

.vm-pricing-dedicated .vm-pricing-price {
    color: var(--vm-gold);
    font-size: 2.5rem;
    text-align: left;
}

.vm-pricing-dedicated .vm-pricing-price span {
    color: rgba(255, 255, 255, 0.7);
}

.vm-pricing-dedicated .vm-pricing-hours {
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}

.vm-pricing-dedicated p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
    max-width: 520px;
}

/* =============================================================================
   STAGE 7: FAQ items
   ============================================================================= */

.vm-faq-item {
    background: var(--vm-white);
    border: 1px solid var(--vm-border);
    border-left: 4px solid var(--vm-gold);
    border-radius: var(--vm-radius);
    padding: 24px;
    margin-bottom: 16px;
}

.vm-faq-item h4 {
    color: var(--vm-blue);
    margin-bottom: 8px;
    font-size: 1rem;
}

.vm-faq-item p {
    color: var(--vm-text);
    margin-bottom: 0;
    font-size: 0.95rem;
}


/* =============================================================================
   STAGE 7: Training coming soon block
   ============================================================================= */

.vm-coming-soon {
    background: var(--vm-blue);
    color: #ffffff;
    padding: 60px 40px;
    border: 2px solid var(--vm-gold);
    border-radius: 12px;
    text-align: center;
}

.vm-coming-soon h2 {
    color: #ffffff;
}

.vm-coming-soon .vm-badge {
    display: inline-block;
    background: var(--vm-gold);
    color: var(--vm-blue);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

/* =============================================================================
   STAGE 7.2: Pricing card polish
   ============================================================================= */

.vm-pricing-card {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 40px;
}

.vm-pricing-card.vm-pricing-popular {
    padding-top: 50px;
}

.vm-pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vm-gold);
    color: var(--vm-blue);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 8px 20px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(4, 21, 49, 0.15);
    z-index: 2;
}

.vm-pricing-card .vm-pricing-features {
    flex-grow: 1;
}

.vm-pricing-card .vm-btn {
    margin-top: auto;
    align-self: stretch;
    text-align: center;
}

.vm-section-sm .wpb_column { display: flex; }
.vm-section-sm .wpb_column > .vc_column-inner { display: flex; width: 100%; }
.vm-section-sm .wpb_column > .vc_column-inner > .wpb_wrapper { display: flex; flex-direction: column; width: 100%; }


/* =============================================================================
   STAGE 7.2: Slogan lock-up system
   ============================================================================= */

.vm-slogan {
    text-align: center;
    padding: 20px 0;
    font-family: 'Open Sans', sans-serif;
}

.vm-slogan .vm-slogan-text {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vm-blue);
    margin: 0 0 14px 0;
    display: block;
}

.vm-slogan .vm-slogan-rule {
    display: inline-block;
    width: 80px;
    height: 2px;
    background: var(--vm-gold);
    vertical-align: middle;
}

.vm-slogan.vm-slogan-reversed .vm-slogan-text {
    color: #ffffff;
}

.vm-slogan.vm-slogan-lg .vm-slogan-text {
    font-size: 1.25rem;
    letter-spacing: 0.22em;
}

.vm-slogan.vm-slogan-lg .vm-slogan-rule {
    width: 120px;
}

.vm-slogan.vm-slogan-sm .vm-slogan-text {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
}

.vm-slogan.vm-slogan-sm .vm-slogan-rule {
    width: 60px;
}

/* =============================================================================
   STAGE 7.3: Horizontal header logo sizing
   ============================================================================= */

.vm-site-logo-img {
    height: 50px;
    width: auto;
    max-width: 260px;
    display: block;
    object-fit: contain;
}

@media (max-width: 768px) {
    .vm-site-logo-img {
        height: 40px;
        max-width: 200px;
    }
}

.vm-site-logo {
    display: inline-flex;
    align-items: center;
}

/* =============================================================================
   STAGE 7.3: Banner styling matched to blog page banner
   ============================================================================= */

/* Base colour + reset, high specificity to defeat WPBakery inline bg_color */
body .vc_row.vm-page-header,
body .vc_row.wpb_row.vm-page-header,
body div.vm-page-header,
body div.vm-page-header[style] {
    background: #041531 !important;
    background-color: #041531 !important;
    background-image: none !important;
    border-radius: 0 !important;
    border-bottom: 4px solid #C69D65 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

/* Force full viewport width */
body .vc_row.vm-page-header,
body div.vm-page-header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

/* Inner container */
body .vm-page-header > .wpb_column,
body .vm-page-header .vc_column_container,
body .vm-page-header .vc_col-sm-12 {
    padding: 0 !important;
    margin: 0 !important;
}

body .vm-page-header .vc_column-inner {
    padding: 70px 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body .vm-page-header .wpb_wrapper {
    padding: 0 !important;
}

/* Typography */
body .vm-page-header .vm-section-label {
    color: #ffffff !important;
    opacity: 1 !important;
    display: block !important;
    text-align: left !important;
    margin: 0 0 20px 0 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
}

body .vm-page-header h1 {
    color: #ffffff !important;
    text-align: center !important;
    font-size: 2.6rem !important;
    line-height: 1.2 !important;
    margin: 0 auto 14px auto !important;
    padding: 0 !important;
    max-width: 900px !important;
    font-weight: 600 !important;
}

body .vm-page-header .vm-page-header-subtitle,
body .vm-page-header .wpb_text_column p.vm-page-header-subtitle {
    color: #ffffff !important;
    opacity: 0.85 !important;
    text-align: center !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    body .vm-page-header .vc_column-inner {
        padding: 45px 20px !important;
    }
    body .vm-page-header h1 {
        font-size: 1.75rem !important;
    }
    body .vm-page-header .vm-page-header-subtitle {
        font-size: 0.95rem !important;
    }
    body .vm-page-header .vm-section-label {
        font-size: 0.7rem !important;
        margin-bottom: 14px !important;
    }
}

/* ===== STAGE 8: How It Works 5-step onboarding journey ===== */
/* Added: Stage 8. Do not merge with earlier journey styles. */

.vm-journey-section {
    padding: 80px 0;
    background: #ffffff;
}

.vm-journey-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}

.vm-journey-intro h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #041531;
    font-size: 34px;
    margin-bottom: 16px;
}

.vm-journey-intro p {
    font-family: 'Open Sans', sans-serif;
    color: #4A4A4A;
    font-size: 17px;
    line-height: 1.6;
}

.vm-journey-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    position: relative;
    align-items: stretch;
}

.vm-journey-row::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: rgba(198, 157, 101, 0.3);
    z-index: 0;
}

.vm-journey-step {
    flex: 1 1 calc(20% - 20px);
    min-width: 180px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.vm-journey-step .vm-step-number {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #C69D65;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(4, 21, 49, 0.15);
}

.vm-journey-step .vm-step-card {
    background: #ffffff;
    border: 1px solid rgba(4, 21, 49, 0.08);
    border-radius: 8px;
    padding: 32px 24px;
    width: 100%;
    flex: 1;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vm-journey-step .vm-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(4, 21, 49, 0.12);
}

.vm-journey-step .vm-step-icon {
    color: #041531;
    font-size: 32px;
    margin-bottom: 16px;
    display: block;
}

.vm-journey-step .vm-step-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #041531;
    margin-bottom: 12px;
    line-height: 1.3;
}

.vm-journey-step .vm-step-body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #4A4A4A;
    line-height: 1.6;
    margin: 0;
}

/* Overflow fix so hover lift is not clipped */
.vm-journey-section,
.vm-journey-section .wpb_row,
.vm-journey-section .vc_column-inner,
.vm-journey-section .wpb_wrapper {
    overflow: visible !important;
}

/* Journey CTA */
.vm-journey-cta {
    text-align: center;
    margin-top: 60px;
    padding: 40px 24px;
    background: #041531;
    border-radius: 8px;
}

.vm-journey-cta h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #ffffff;
    font-size: 26px;
    margin-bottom: 20px;
}

.vm-journey-cta .vm-cta-button {
    display: inline-block;
    background: #C69D65;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 16px 36px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}

.vm-journey-cta .vm-cta-button:hover {
    background: #B08A54;
    transform: translateY(-2px);
    color: #ffffff;
    text-decoration: none;
}

/* Tablet */
@media (max-width: 991px) {
    .vm-journey-row::before {
        display: none;
    }
    .vm-journey-step {
        flex: 1 1 calc(50% - 12px);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .vm-journey-row {
        flex-direction: column;
        align-items: center;
    }
    .vm-journey-step {
        flex: 1 1 100%;
        max-width: 480px;
        position: relative;
    }
    .vm-journey-step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -24px;
        width: 2px;
        height: 24px;
        background: rgba(198, 157, 101, 0.3);
        transform: translateX(-50%);
    }
    .vm-journey-intro h2 {
        font-size: 28px;
    }
}
/* ===== END STAGE 8 ===== */