/* ==========================================================================
   Vested Talent — Header / Footer / Menu styles
   --------------------------------------------------------------------------
   Colours are the live site's Duda palette (--color_1/3/7 teal, --color_4
   dark grey, footer black). Fonts are the client's own Avenir LT Pro files,
   loaded straight from their Duda CDN (it serves them with
   Access-Control-Allow-Origin: *, so they work cross-origin here).
   ========================================================================== */

@font-face {
    font-family: "VT Avenir";
    src: url("https://irp.cdn-website.com/2109a788/fonts/AvenirLTPro-Light-1745_400.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "VT Avenir";
    src: url("https://irp.cdn-website.com/2109a788/fonts/AvenirLTPro-Book-171b_400.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "VT Avenir";
    src: url("https://irp.cdn-website.com/2109a788/fonts/AvenirLTPro-Medium-afdb_400.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "VT Avenir";
    src: url("https://irp.cdn-website.com/2109a788/fonts/AvenirLTPro-Heavy-b7fb_400.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "VT Avenir";
    src: url("https://irp.cdn-website.com/2109a788/fonts/AvenirLTPro-Black-7062_400.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --vt-teal: #0085ac;
    --vt-teal-dark: #006d8d;
    --vt-grey: #2c2c2c;
    --vt-black: #000;
    --vt-white: #fff;
    --vt-divider: #dbdbdb;
    --vt-font: "VT Avenir", "Avenir Next", "Avenir", "Segoe UI", Helvetica, Arial, sans-serif;
    --vt-header-height: 92px;
    --vt-header-height-mobile: 72px;
    --vt-transition: 0.2s ease;
}

.vt_header,
.vt_drawer,
.vt_footer {
    font-family: var(--vt-font);
}

.vt_header *,
.vt_drawer *,
.vt_footer * {
    box-sizing: border-box;
}

.vt_header a,
.vt_header a:hover,
.vt_drawer a,
.vt_drawer a:hover,
.vt_footer a,
.vt_footer a:hover {
    text-decoration: none;
}

/* No fade on hover anywhere in the header or footer — Firefish's base
   template dims links/buttons on hover, so this pins them at full opacity. */
.vt_header a:hover,
.vt_header a:focus,
.vt_header button:hover,
.vt_header button:focus,
.vt_header a:hover img,
.vt_drawer a:hover,
.vt_drawer a:focus,
.vt_drawer button:hover,
.vt_drawer button:focus,
.vt_drawer a:hover img,
.vt_footer a:hover,
.vt_footer a:focus,
.vt_footer button:hover,
.vt_footer button:focus,
.vt_footer a:hover img {
    opacity: 1 !important;
}

.vt_header ul,
.vt_drawer ul,
.vt_footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Skip link — hidden until focused. */
.vt_skip_link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.vt_skip_link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1100;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.5rem 1rem;
    clip: auto;
    clip-path: none;
    background: var(--vt-white);
    color: var(--vt-grey);
    white-space: normal;
}

/* ==========================================================================
   Header — static grey (#2c2c2c, the live site's scrolled colour), fixed to
   the top of the screen at all times. The spacer below it reserves the same
   height so page content never starts underneath it.
   ========================================================================== */

.vt_header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    background-color: var(--vt-grey);
}

.vt_header_spacer {
    height: var(--vt-header-height);
}

.vt_header_inner {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: var(--vt-header-height);
    padding: 0 2%;
}

/* @ffMainLogo() renders its own <a href="/"><img/></a>. The live logo is a
   white card with 5px rounded corners sitting on the dark header. */
.vt_logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: auto;
}

.vt_logo a {
    display: inline-flex;
    align-items: center;
}

.vt_logo img {
    display: block;
    width: auto;
    max-width: 240px;
    max-height: 70px;
    border-radius: 5px;
}

/* ---------- Desktop menu ----------
   Ported from the live site's Duda "unifiednav" (horizontal_nav_layout_1,
   submenu_horizontal_1, effect-bottom2) in its *scrolled* header state — the
   state the live header is in whenever it's grey, which is always here. In
   that state Duda swaps the hover/active link colour and underline to teal
   (--header-on-scroll-navigation-links-hover-*: var(--color_3)). */

/* The nav, list and each <li> all stretch to the full header height (link
   text stays vertically centred), so a dropdown's top:100% opens from the
   bottom edge of the grey bar rather than from just under the link text —
   which also means there's no gap to cross between link and panel. */
.vt_desktop_nav {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0 15px;
}

.vt_menu_list {
    display: flex;
    align-items: stretch;
}

.vt_menu_item {
    position: relative;
    display: flex;
    align-items: center;
}

.vt_menu_link {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 8px;
    color: var(--vt-white);
    font-family: var(--vt-font);
    font-size: 15px;
    font-weight: 300;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.03em;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

.vt_menu_link:hover,
.vt_menu_link:focus,
.vt_menu_item:hover > .vt_menu_link,
.vt_menu_item.selected > .vt_menu_link {
    color: var(--vt-teal);
}

/* No text underline in any state, top level or dropdown — Firefish's base
   link styles underline a:hover, which beats a plain text-decoration:none. */
.vt_menu_link,
.vt_menu_link:hover,
.vt_menu_link:focus,
.vt_menu_link:active,
.vt_menu_link *,
.vt_menu_sub_link,
.vt_menu_sub_link:hover,
.vt_menu_sub_link:focus,
.vt_menu_sub_link:active,
.vt_menu_sub_link * {
    text-decoration: none !important;
}

/* effect-bottom2 — a 2px bar 0.2em under the text (icon included) that
   fades in and grows from the left edge. */
.vt_menu_text {
    display: block;
    white-space: nowrap;
}

.vt_menu_text::after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    margin-top: 0.2em;
    border-top: 2px solid var(--vt-teal);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.vt_menu_link:hover .vt_menu_text::after,
.vt_menu_link:focus-visible .vt_menu_text::after,
.vt_menu_item:hover > .vt_menu_link .vt_menu_text::after,
.vt_menu_item.selected > .vt_menu_link .vt_menu_text::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Font Awesome angle-down / angle-right, at Duda's own proportions. */
.vt_menu_icon {
    display: inline-block;
    height: 1em;
    vertical-align: -0.143em;
}

.vt_menu_icon_down {
    width: 0.643em;
    margin-left: 10px;
}

.vt_menu_icon_right {
    width: 0.357em;
    margin-left: 0;
    padding-left: 0;
    flex-shrink: 0;
}

/* Dropdown — submenu_horizontal_1: an off-white #faf9f9 panel, no shadow,
   offset 15px from the item's left edge, sliding down from -10px. */
.vt_menu_dropdown {
    position: absolute;
    top: 100%;
    left: 15px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 !important;
    background-color: #faf9f9;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: transform 0.4s ease-out, opacity 0.1s ease-out, visibility 0.1s ease-out;
}

.vt_menu_item_has_children:hover > .vt_menu_dropdown,
.vt_menu_item_has_children:focus-within > .vt_menu_dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

/* Third level flies out to the right of its parent row. */
.vt_menu_dropdown_nested {
    top: 0;
    left: 100%;
    min-width: 100%;
}

.vt_menu_sub_item {
    position: relative;
    display: flex;
    flex-direction: column;
}

.vt_menu_sub_link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 15px 30px 15px 15px;
    color: var(--vt-grey);
    font-family: var(--vt-font);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.vt_menu_sub_link:hover,
.vt_menu_sub_link:focus,
.vt_menu_sub_item:hover > .vt_menu_sub_link,
.vt_menu_sub_item.selected > .vt_menu_sub_link {
    background-color: var(--vt-teal);
    color: var(--vt-white);
}

/* ---------- Pill buttons ---------- */

.vt_header_actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 10px;
}

/* @ffMyAccountButton()/@ffLogoutButton() render as native <button>s, which
   Firefish's base template styles with !important padding/font/line-height
   and a themed background — hence the matching !important values on the
   properties it forces, and the explicit hover/focus resets below. */
.vt_btn,
button.vt_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    width: auto;
    margin: 0;
    padding: 0 18px !important;
    border: 1px solid transparent;
    border-radius: 50px;
    font-family: var(--vt-font);
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--vt-transition), color var(--vt-transition), border-color var(--vt-transition);
}

/* Never underlined in any state — Firefish's base link styles underline
   a:hover, which beats a plain text-decoration:none here. */
.vt_btn,
.vt_btn:hover,
.vt_btn:focus,
.vt_btn:active,
.vt_btn *,
.vt_btn:hover * {
    text-decoration: none !important;
}

/* Live site's default button: teal fill with a 1px white border. */
.vt_btn_primary {
    background-color: var(--vt-teal);
    border-color: var(--vt-white);
    color: var(--vt-white);
}

/* Buttons don't change colour on hover/focus/click — each state below
   repeats the button's resting colours. !important because Firefish's base
   template recolours button:hover (My Account / Logout render as <button>s). */
.vt_btn_primary:hover,
.vt_btn_primary:focus,
.vt_btn_primary:active {
    background-color: var(--vt-teal) !important;
    border-color: var(--vt-white) !important;
    color: var(--vt-white) !important;
}

/* Live site's "Upload CV" style (button_2) in the scrolled header state:
   Duda switches every header button to a teal fill (button-background-color:
   var(--color_3)) but leaves button_2's thin white border in place. */
.vt_btn_outline,
button.vt_btn_outline {
    background-color: var(--vt-teal);
    border-color: var(--vt-white);
    color: var(--vt-white);
}

.vt_btn_outline:hover,
.vt_btn_outline:focus,
.vt_btn_outline:active,
button.vt_btn_outline:hover,
button.vt_btn_outline:focus,
button.vt_btn_outline:active {
    background-color: var(--vt-teal) !important;
    border-color: var(--vt-white) !important;
    color: var(--vt-white) !important;
}

.vt_btn:focus-visible,
.vt_menu_link:focus-visible,
.vt_menu_sub_link:focus-visible,
.vt_footer a:focus-visible,
.vt_drawer a:focus-visible {
    outline: 2px solid var(--vt-white);
    outline-offset: 3px;
}

/* ---------- Burger / close buttons ----------
   Real <button>s, so Firefish's !important button padding/font rules apply;
   width is pinned with min/max as well because Firefish widens buttons inside
   flex rows. Icons are aligned to the outer edge (flex-end / flex-start)
   rather than centred, so any widening never pulls them off the gutter. */
.vt_burger,
.vt_drawer_close {
    display: none;
    align-items: center;
    flex-shrink: 0;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--vt-white);
    cursor: pointer;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: normal !important;
    text-transform: none !important;
}

.vt_burger {
    justify-content: flex-end;
    align-self: center;
}

.vt_drawer_close {
    display: inline-flex;
    justify-content: flex-end;
}

.vt_burger:hover,
.vt_burger:active,
.vt_burger[type=button]:focus,
.vt_drawer_close:hover,
.vt_drawer_close:active,
.vt_drawer_close[type=button]:focus {
    background: none;
    border: none;
    color: var(--vt-white);
    outline: none !important;
}

.vt_burger[type=button]:focus-visible,
.vt_drawer_close[type=button]:focus-visible {
    background: none;
    outline: 2px solid var(--vt-white) !important;
    outline-offset: 2px;
}

/* ==========================================================================
   Mobile drawer — full-height grey panel that slides down from the top.
   ========================================================================== */

body.vt_no_scroll {
    overflow: hidden;
}

/* Grey full-screen panel that slides down from above the top of the screen.
   Pinned to exactly the viewport width (and never wider) so it can't push
   the page sideways, even while closed. */
.vt_drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    background-color: var(--vt-grey);
    color: var(--vt-white);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform 0.35s ease, visibility 0s linear 0.35s;
}

.vt_drawer.vt_active {
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.35s ease, visibility 0s linear 0s;
}

.vt_drawer_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    min-height: var(--vt-header-height-mobile);
    padding: 0 16px;
}

.vt_drawer_top .vt_logo {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 12px;
}

.vt_drawer_close {
    flex: 0 0 44px;
}

.vt_drawer_logo img {
    max-width: min(170px, 100%);
    max-height: 50px;
    height: auto;
}

.vt_drawer_nav {
    padding: 8px 16px 0;
}

.vt_mobile_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vt_mobile_link {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    padding: 15px 0;
    color: var(--vt-white);
    font-family: var(--vt-font);
    font-size: 20px;
    font-weight: 300;
    line-height: 1.2;
}

.vt_mobile_link:hover,
.vt_mobile_link:focus {
    color: var(--vt-white);
}

.vt_mobile_item.selected > .vt_mobile_row > .vt_mobile_link {
    font-weight: 800;
}

.vt_mobile_sub_item .vt_mobile_link {
    padding: 10px 0;
    font-size: 15px;
}

/* <div role="button"> rather than <button>, so `all: unset` gives a clean
   slate regardless of any base-template styling. */
.vt_mobile_expand {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--vt-white);
    cursor: pointer;
}

.vt_mobile_expand svg {
    transition: transform var(--vt-transition);
}

.vt_mobile_expand:focus-visible {
    outline: 2px solid var(--vt-white);
    outline-offset: 2px;
}

.vt_accordion_open > .vt_mobile_row .vt_mobile_expand svg {
    transform: rotate(180deg);
}

.vt_mobile_submenu_wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.vt_accordion_open > .vt_mobile_submenu_wrap {
    grid-template-rows: 1fr;
}

.vt_mobile_submenu_inner {
    min-height: 0;
    overflow: hidden;
}

.vt_mobile_submenu {
    padding: 0 0 8px 16px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* @ffMyAccountButton()/@ffLogoutButton() render as native <button>s in the
   drawer's account rows. Firefish's base template gives buttons a themed
   background, border, uppercase text and !important padding/font/line-height,
   so this strips all of that back to a plain menu link — same look as the
   <a> rows. text-align/justify-content keep the label on the left, since
   Firefish also widens buttons. */
button.vt_mobile_link,
button.vt_mobile_link:hover,
button.vt_mobile_link:focus,
button.vt_mobile_link:active {
    width: 100%;
    margin: 0;
    background: none !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    color: var(--vt-white) !important;
    text-align: left;
    justify-content: flex-start;
    cursor: pointer;
    padding: 15px 0 !important;
    font-family: var(--vt-font);
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    letter-spacing: normal;
    text-transform: none !important;
    text-decoration: none !important;
}

.vt_drawer_nav a.vt_mobile_link,
.vt_drawer_nav a.vt_mobile_link:hover,
.vt_drawer_nav a.vt_mobile_link:focus {
    text-decoration: none !important;
}

/* ---------- Social icon (30px teal LinkedIn circle) ---------- */

.vt_social_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--vt-teal);
    color: var(--vt-white);
    transition: background-color var(--vt-transition);
}

.vt_social_icon:hover,
.vt_social_icon:focus {
    background-color: var(--vt-teal-dark);
    color: var(--vt-white);
}

/* ==========================================================================
   Header responsive
   ========================================================================== */

@media (max-width: 1440px) {

    .vt_desktop_nav {
        padding: 0 10px;
    }

    .vt_logo img {
        max-width: 200px;
    }

    .vt_header_actions {
        gap: 8px;
    }

    .vt_btn,
    button.vt_btn {
        padding: 0 14px !important;
        font-size: 14px !important;
    }
}

/* Same point the live nav collapses to its burger. */
@media (max-width: 1199px) {

    /* Belt and braces against sideways scroll on phones/tablets. `clip`
       (where supported) doesn't create a scroll container, so the fixed
       header still behaves; `hidden` is the fallback. */
    html,
    body {
        overflow-x: hidden;
        overflow-x: clip;
    }

    .vt_header {
        max-width: 100vw;
    }

    .vt_header_spacer {
        height: var(--vt-header-height-mobile);
    }

    /* Header row is exactly the screen width: the logo shrinks to whatever
       is left after the fixed 44px burger, and nothing can poke out. */
    .vt_header_inner {
        height: var(--vt-header-height-mobile);
        max-width: 100%;
        padding: 0 16px;
        overflow: hidden;
        justify-content: space-between;
    }

    .vt_logo {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 12px;
    }

    .vt_logo a {
        max-width: 100%;
    }

    .vt_logo img {
        max-width: min(170px, 100%);
        max-height: 50px;
        height: auto;
    }

    .vt_burger {
        flex: 0 0 44px;
    }

    .vt_desktop_nav,
    .vt_header_actions {
        display: none;
    }

    .vt_burger {
        display: inline-flex;
    }
}

@media (min-width: 1200px) {

    .vt_drawer {
        display: none;
    }
}

/* ==========================================================================
   Footer — black, teal headings, white Avenir Heavy links that turn teal.
   ========================================================================== */

.vt_footer {
    width: 100%;
    background-color: var(--vt-black);
    color: var(--vt-white);
}

.vt_footer_inner {
    width: 100%;
    padding: 5% 6% 2%;
}

.vt_footer_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1fr;
    column-gap: 4%;
    row-gap: 48px;
}

.vt_footer_col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.vt_footer h5.vt_footer_heading {
    margin: 0 0 18px;
    color: var(--vt-teal);
    font-family: var(--vt-font);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-transform: none;
}

.vt_footer_links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vt_footer_link {
    display: inline-block;
    color: var(--vt-white);
    font-family: var(--vt-font);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    transition: color var(--vt-transition);
}

.vt_footer_link:hover,
.vt_footer_link:focus {
    color: var(--vt-teal);
}

/* No underline on any footer link in any state — Firefish's base link
   styles underline a:hover. The email/phone links opt back in below. */
.vt_footer a,
.vt_footer a:hover,
.vt_footer a:focus,
.vt_footer a:active,
.vt_footer a * {
    text-decoration: none !important;
}

.vt_footer_btn {
    margin-top: 24px;
}

/* Footer "Discuss Your Next Hire" is the one button that does change on
   hover: black fill, white border, white text. More specific than the
   no-change .vt_btn_primary:hover rule so it wins between the two
   !important declarations. */
.vt_footer a.vt_footer_btn:hover,
.vt_footer a.vt_footer_btn:focus,
.vt_footer a.vt_footer_btn:active {
    background-color: var(--vt-black) !important;
    border-color: var(--vt-white) !important;
    color: var(--vt-white) !important;
}

.vt_footer_contact {
    gap: 15px;
}

/* "Follow Us On" + LinkedIn icon. Stacked on desktop/tablet (as on the live
   site); side by side on phones — see the 767px breakpoint. */
.vt_footer_social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.vt_footer .vt_footer_follow {
    margin: 0;
    color: var(--vt-teal);
    font-family: var(--vt-font);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

/* @ffMainLogo() renders its own <a href="/"><img/></a>, same as the header. */
.vt_footer_logo a {
    display: inline-block;
}

.vt_footer_logo img {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 5px;
}

.vt_footer .vt_footer_contact_lines {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.vt_footer_contact_link {
    color: var(--vt-white);
    font-family: var(--vt-font);
    font-size: 14px;
    font-weight: 900;
    line-height: 2;
    word-break: break-word;
    transition: color var(--vt-transition);
}

/* Email/phone are the one exception to "no underline" in the footer: white
   text with a faint white underline on hover. */
.vt_footer a.vt_footer_contact_link:hover,
.vt_footer a.vt_footer_contact_link:focus {
    color: var(--vt-white) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.4) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px;
}

.vt_footer_divider {
    height: 1px;
    margin: 0 6%;
    background-color: var(--vt-divider);
}

.vt_footer_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 20px 6% 28px;
}

.vt_footer .vt_footer_copyright {
    margin: 0;
    color: var(--vt-teal);
    font-family: var(--vt-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.vt_footer_poweredby {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ---------- Footer responsive ---------- */

@media (max-width: 1024px) {

    .vt_footer_inner {
        padding: 48px 4% 8px;
    }

    .vt_footer_grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 6%;
        row-gap: 40px;
    }

    .vt_footer_divider {
        margin: 32px 4% 0;
    }

    .vt_footer_bottom {
        padding: 20px 4% 28px;
    }

    .vt_footer h5.vt_footer_heading,
    .vt_footer .vt_footer_follow {
        font-size: 17px;
    }
}

@media (max-width: 767px) {

    .vt_footer_grid {
        grid-template-columns: 1fr;
        row-gap: 36px;
    }

    /* Phone order: logo, socials, contact details, then Expertise, Hire
       Talent, Policies, Why Vested, Candidates (the menu columns keep their
       source order). The contact column jumps to the top of the stack, and
       its own children are re-ordered within it. */
    .vt_footer_contact {
        order: -1;
    }

    .vt_footer_logo {
        order: 1;
    }

    .vt_footer_social {
        order: 2;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .vt_footer .vt_footer_contact_lines {
        order: 3;
    }

    .vt_footer h5.vt_footer_heading,
    .vt_footer .vt_footer_follow {
        font-size: 16px;
    }

    /* Copyright and Powered By centred on the screen. */
    .vt_footer_bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .vt_footer .vt_footer_copyright {
        text-align: center;
    }

    .vt_footer_poweredby {
        justify-content: center;
    }
}