:root {
    --jit-primary: #0b5f6d;
    --jit-primary-dark: #083f48;
    --jit-accent: #d88c1f;
    --jit-accent-soft: #fbf1e2;
    --jit-surface: #eef6f7;
    --jit-ink: #16313a;
    --jit-ink-soft: #476670;
    --jit-border: rgba(11, 95, 109, 0.14);
    --jit-shadow: 0 18px 40px rgba(8, 63, 72, 0.12);
}

/* Jobs in Transport CMS page pack. Scoped so the pack can live beside the existing JIT theme. */
.jit-wrap {
    --jit-navy: #10263f;
    --jit-navy-2: #123d63;
    --jit-teal: #0ba68f;
    --jit-teal-dark: #087d70;
    --jit-amber: #f7c948;
    --jit-mist: #f4f9fb;
    --jit-mist-2: #e8f7f4;
    --jit-ink: #1d2b3a;
    --jit-muted: #5e7185;
    --jit-border: rgba(16, 38, 63, 0.12);
    --jit-shadow: 0 24px 70px rgba(16, 38, 63, 0.14);
    --jit-radius: 1.5rem;
    color: var(--jit-ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
}

.jit-wrap a {
    color: var(--jit-teal-dark);
}

.jit-wrap a:hover {
    color: var(--jit-navy);
}

.jit-wrap .text-muted {
    color: var(--jit-muted) !important;
}

.jit-wrap .jit-section {
    padding: clamp(3.5rem, 6vw, 6rem) 0;
}

.jit-wrap .jit-section-sm {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.jit-wrap .jit-bg-mist {
    background: var(--jit-mist);
}

.jit-wrap .jit-bg-navy {
    background: var(--jit-navy);
    color: #fff;
}

.jit-wrap .jit-rounded {
    border-radius: var(--jit-radius);
}

.jit-wrap .jit-shadow {
    box-shadow: var(--jit-shadow);
}

.jit-wrap .jit-eyebrow {
    align-items: center;
    color: var(--jit-teal-dark);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    gap: 0.45rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jit-wrap .jit-eyebrow::before {
    background: var(--jit-amber);
    border-radius: 999px;
    content: "";
    display: inline-block;
    height: 0.65rem;
    width: 0.65rem;
}

.jit-wrap .jit-bg-navy .jit-eyebrow {
    color: #9ff2e6;
}

.jit-wrap .jit-display {
    color: var(--jit-navy);
    font-size: clamp(2.35rem, 5vw, 5rem);
    font-weight: 850;
    letter-spacing: -0.045em;
    line-height: 0.95;
}

.jit-wrap .jit-bg-navy .jit-display,
.jit-wrap .jit-hero .jit-display {
    color: #fff;
}

.jit-wrap .jit-lead {
    color: var(--jit-muted);
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    max-width: 62rem;
}

.jit-wrap .jit-bg-navy .jit-lead,
.jit-wrap .jit-hero .jit-lead {
    color: rgba(255, 255, 255, 0.82);
}

.jit-wrap .jit-hero {
    background:
        radial-gradient(circle at 78% 14%, rgba(11, 166, 143, 0.5), transparent 32rem),
        linear-gradient(135deg, #0b2340 0%, #10263f 42%, #0b7f7c 100%);
    color: #fff;
    overflow: hidden;
    padding: clamp(4rem, 7vw, 7.5rem) 0;
    position: relative;
}

.jit-wrap .jit-hero-haulage {
    background:
        linear-gradient(90deg, rgba(11, 35, 64, 0.96) 0%, rgba(16, 38, 63, 0.88) 42%, rgba(16, 38, 63, 0.32) 74%, rgba(16, 38, 63, 0.08) 100%),
        url("/fileserver/jit-front/jobs-in-transport-haulage.webp") right center / cover no-repeat;
    min-height: clamp(32rem, 62vw, 42rem);
}

.jit-wrap .jit-hero-haulage::after {
    opacity: 0.14;
}

.jit-wrap .jit-hero-haulage .jit-lead {
    max-width: 42rem;
}

@media (max-width: 991.98px) {
    .jit-wrap .jit-hero-haulage {
        background:
            linear-gradient(180deg, rgba(11, 35, 64, 0.94) 0%, rgba(16, 38, 63, 0.82) 54%, rgba(16, 38, 63, 0.56) 100%),
            url("/fileserver/jit-front/jobs-in-transport-haulage.webp") center right / cover no-repeat;
    }
}

.jit-wrap .jit-hero::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 54px 54px;
    content: "";
    inset: 0;
    opacity: 0.28;
    pointer-events: none;
    position: absolute;
}

.jit-wrap .jit-hero > .container {
    position: relative;
    z-index: 1;
}

.jit-wrap .jit-btn-primary,
.jit-wrap .jit-btn-outline,
.jit-wrap .jit-btn-amber {
    border-radius: 999px;
    font-weight: 800;
    padding: 0.9rem 1.35rem;
}

.jit-wrap .jit-btn-primary {
    background: var(--jit-teal);
    border-color: var(--jit-teal);
    color: #fff !important;
}

.jit-wrap .jit-btn-primary:hover {
    background: var(--jit-teal-dark);
    border-color: var(--jit-teal-dark);
}

.jit-wrap .jit-btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff !important;
}

.jit-wrap .jit-btn-outline:hover {
    background: #fff;
    color: var(--jit-navy) !important;
}

.jit-wrap .jit-btn-amber {
    background: var(--jit-amber);
    border-color: var(--jit-amber);
    color: var(--jit-navy) !important;
}

.jit-wrap .jit-btn-amber:hover {
    filter: brightness(0.96);
}

.jit-wrap .jit-card {
    background: #fff;
    border: 1px solid var(--jit-border);
    border-radius: var(--jit-radius);
    box-shadow: 0 16px 45px rgba(16, 38, 63, 0.08);
    height: 100%;
}

.jit-wrap .jit-card-featured {
    border: 2px solid var(--jit-teal);
    transform: translateY(-0.6rem);
}

.jit-wrap .jit-icon {
    align-items: center;
    background: var(--jit-mist-2);
    border-radius: 1rem;
    color: var(--jit-teal-dark);
    display: inline-flex;
    font-size: 1.35rem;
    font-weight: 900;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.jit-wrap .jit-icon-amber {
    background: #fff5d6;
    color: #8a6500;
}

.jit-wrap .jit-icon-navy {
    background: #e7edf5;
    color: var(--jit-navy);
}

.jit-wrap .jit-image {
    background: #fff;
    border-radius: calc(var(--jit-radius) + 0.5rem);
    box-shadow: var(--jit-shadow);
    display: block;
    height: auto;
    max-width: 100%;
    overflow: hidden;
}

.jit-wrap .jit-image img {
    display: block;
    height: auto;
    width: 100%;
}

.jit-wrap .jit-search-panel {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 1.25rem;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
    margin-top: 2rem;
    padding: 1rem;
}

.jit-wrap .jit-search-panel .form-control,
.jit-wrap .jit-search-panel .form-select {
    border-color: rgba(16, 38, 63, 0.12);
    border-radius: 0.95rem;
    min-height: 3.25rem;
}

.jit-wrap .jit-chip,
.jit-wrap .jit-location-grid a {
    align-items: center;
    background: #fff;
    border: 1px solid var(--jit-border);
    border-radius: 999px;
    color: var(--jit-navy);
    display: inline-flex;
    font-weight: 750;
    gap: 0.45rem;
    padding: 0.65rem 0.95rem;
    text-decoration: none;
}

.jit-wrap .jit-chip::before,
.jit-wrap .jit-location-grid a::before {
    background: var(--jit-teal);
    border-radius: 999px;
    content: "";
    display: inline-block;
    height: 0.55rem;
    width: 0.55rem;
}

.jit-wrap .jit-location-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.jit-wrap .jit-stat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.2rem;
    padding: 1rem;
}

.jit-wrap .jit-stat strong {
    color: #fff;
    display: block;
    font-size: 1.7rem;
    line-height: 1;
}

.jit-wrap .jit-stat span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

.jit-wrap .jit-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jit-wrap .jit-list li {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.jit-wrap .jit-list li::before {
    background: var(--jit-teal);
    border-radius: 50%;
    color: #fff;
    content: "\2713";
    flex: 0 0 1.45rem;
    font-size: 0.85rem;
    font-weight: 900;
    height: 1.45rem;
    line-height: 1.45rem;
    margin-top: 0.18rem;
    text-align: center;
}

.jit-wrap .jit-price {
    color: var(--jit-navy);
    font-size: clamp(2.35rem, 4vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.jit-wrap .jit-price small {
    color: var(--jit-muted);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

.jit-wrap .jit-table th {
    color: var(--jit-navy);
}

.jit-wrap .jit-cta {
    background:
        radial-gradient(circle at 15% 0%, rgba(247, 201, 72, 0.3), transparent 22rem),
        linear-gradient(135deg, var(--jit-navy) 0%, var(--jit-navy-2) 50%, var(--jit-teal-dark) 100%);
    border-radius: calc(var(--jit-radius) + 0.75rem);
    color: #fff;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4rem);
}

.jit-wrap .jit-footer-note {
    color: var(--jit-muted);
    font-size: 0.95rem;
}

@media (max-width: 991.98px) {
    .jit-wrap .jit-card-featured {
        transform: none;
    }
}

.breadcrumbs {margin-top:50px}


body.jBoard-body {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8f8 100%);
    color: var(--jit-ink);
}

body.jBoard-body a {
    color: var(--jit-primary);
}

body.jBoard-body a:hover,
body.jBoard-body a:focus {
    color: var(--jit-accent);
}

.navbar,
.jBoard-body .navbar {
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(11, 95, 109, 0.12);
    box-shadow: 0 10px 30px rgba(8, 63, 72, 0.08);
}

.jBoard-body .navbar .container-fluid {
    gap: 1rem;
    align-items: center;
}

.jBoard-body .navbar-brand {
    margin: 0 !important;
    padding: 0;
}

.navbar .nav-link,
.navbar .dropdown-toggle {
    color: var(--jit-primary-dark) !important;
    font-weight: 700;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--jit-accent) !important;
}

.navbar .navbar-toggler {
    border-color: rgba(11, 95, 109, 0.2);
}

.navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(11, 95, 109, 0.12);
}

.navbar .navbar-toggler-icon {
    filter: invert(20%) sepia(17%) saturate(1450%) hue-rotate(145deg) brightness(94%) contrast(92%);
}

.bannerSec,
.bannerSecLrg {
    background:
        radial-gradient(circle at top left, rgba(216, 140, 31, 0.22), transparent 26%),
        linear-gradient(135deg, rgba(8, 63, 72, 0.96), rgba(11, 95, 109, 0.88));
}

/* Home banner: four photos cross-fade under the dark overlay, 6s each.
   Delays start 1.2s (one fade) early so the first photo is already showing on load. */
.jit-home-banner {
    position: relative;
    isolation: isolate;
    background: #000000 url("/fileserver/jit-front/images/homepage/jit-home-1.webp") center / cover no-repeat;
}

.jit-home-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

.jit-home-banner > .container {
    position: relative;
}

.jit-home-slides {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.jit-home-slides span {
    position: absolute;
    inset: 0;
    background: center / cover no-repeat;
    opacity: 0;
    animation: jitHomeFade 24s linear infinite;
}

.jit-home-slides span:nth-child(1) { background-image: url("/fileserver/jit-front/images/homepage/jit-home-1.webp"); animation-delay: -1.2s; }
.jit-home-slides span:nth-child(2) { background-image: url("/fileserver/jit-front/images/homepage/jit-home-2.webp"); animation-delay: 4.8s; }
.jit-home-slides span:nth-child(3) { background-image: url("/fileserver/jit-front/images/homepage/jit-home-3.webp"); animation-delay: 10.8s; }
.jit-home-slides span:nth-child(4) { background-image: url("/fileserver/jit-front/images/homepage/jit-home-4.webp"); animation-delay: 16.8s; }

@keyframes jitHomeFade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    25%  { opacity: 1; }
    30%  { opacity: 0; }
    100% { opacity: 0; }
}

.bannerPanel {
    background: #000000;
    border: 1px solid #000000;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(8, 63, 72, 0.14);
}

.btn-primary,
.custBtn.btn-primary,
.btn-torquoise {
    background-color: var(--jit-primary);
    border-color: var(--jit-primary);
}

.btn-primary:hover,
.custBtn.btn-primary:hover,
.btn-torquoise:hover {
    background-color: var(--jit-primary-dark);
    border-color: var(--jit-primary-dark);
}

.btn-danger,
.bg-red {
    background-color: var(--jit-accent) !important;
    border-color: var(--jit-accent) !important;
}

.pageHeading {
    color: var(--jit-primary-dark);
}

.mainContent {
    background: linear-gradient(180deg, #fff, var(--jit-surface));
}

.jit-hero-copy {
    max-width: 820px;
    margin: 0 auto;
}

.jit-home-banner .display-4 {
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.08;
}

.jit-hero-kicker {
    color: #dceff2;
    letter-spacing: 0;
    text-transform: uppercase;
}

.jit-hero-subtitle {
    color: #f6cf8a;
}

.jit-network-title {
    color: #fff;
    font-weight: 700;
}

.jit-network-logos {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
}

/* Fixed height, not max-height. Client feedback 02/09/2026: "TX Button needs
   padding top and bottom to match size of others" - the TransportXtra mark is
   much wider than it is tall, so under max-height its white tile only grew to
   the height that artwork needed at the column width, and sat short next to the
   squarer LTT / Parking Review / Evolution tiles. A fixed height makes every
   tile the same box and object-fit centres each logo inside it. */
.jit-network-logos img {
    background: #fff;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 10px 25px rgba(8, 63, 72, 0.08);
    width: 100%;
    height: 78px;
    object-fit: contain;
}

.jit-logo {
    max-height: 72px;
    width: auto;
}

/* jit-landor-footer: the footer Landor LINKS run on their own sites, which the
   client asked this one to match (feedback 19/08/2026) - black ground, the mark
   on the left, then Contact us / Navigation / Policies, a rule, and the company
   and VAT registrations.

   custom.css dresses this footer for a white page (#676767 headings, #B7B7B7
   copy, a #DBDBDB rule, 14px throughout), so each of those is restated here
   rather than nudged; jit.css loads after custom.min.css, so plain specificity
   carries it. Type stays Ubuntu - the reference is set in a serif, but swapping
   the face for the footer alone would read as a different site's furniture. */
body.jit-site footer {
    background: #000;
    border-top: 0;
    color: #e9e9e9;
    padding-top: 3.5rem;
}

body.jit-site footer .jit-footer-head {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1.1rem;
}

body.jit-site footer p,
body.jit-site footer address,
body.jit-site footer ul li span {
    color: #e9e9e9;
    font-size: 0.95rem;
    line-height: 1.75;
}

body.jit-site footer address {
    font-style: normal;
    margin-bottom: 1.75rem;
}

body.jit-site footer a,
body.jit-site footer ul li a,
body.jit-site .copyright a {
    color: #7ba7d7;
    font-size: 0.95rem;
    text-decoration: none;
}

body.jit-site footer a:hover,
body.jit-site footer a:focus,
body.jit-site footer ul li a:hover,
body.jit-site footer ul li a:focus {
    color: #a8c6e8;
    text-decoration: underline;
}

/* the muted repeat of the heading that sits above the email and phone lines */
body.jit-site .jit-footer-contact-label {
    color: #9a9a9a;
    display: block;
    margin-bottom: 0.35rem;
}

/* natural size, capped: the SVG is drawn larger than 240 and comes down to it,
   while the PNG stand-in is 152 wide and is left alone rather than upscaled. */
body.jit-site .jit-landor-logo {
    height: auto;
    max-width: 240px;
}

/* Our Network is this site's own and has no counterpart on landor.co.uk, so it
   sits under the columns where it does not disturb the shape of the reference. */
body.jit-site .jit-footer-network {
    margin-top: 3rem;
}

body.jit-site .jit-network-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.9rem;
}

body.jit-site .jit-footer-network .jit-network-logos {
    max-width: 620px;
}

@media (min-width: 576px) {
    body.jit-site .jit-footer-network .jit-network-logos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

body.jit-site footer .copyright {
    border-top: 1px solid #3a3a3a;
    margin: 3rem 0 0 !important;
    padding: 1.75rem 0 2.5rem;
}

body.jit-site footer .copyright p {
    color: #e9e9e9;
    margin-bottom: 0.9rem;
}

body.jit-site footer .copyright p:last-child {
    margin-bottom: 0;
}


.jBoard-body .dropdown-menu {
    border: 1px solid var(--jit-border);
    border-radius: 8px;
    padding: 0.6rem;
    box-shadow: var(--jit-shadow);
}

.jBoard-body .dropdown-menu .dropdown-item {
    border-radius: 8px;
    color: var(--jit-primary-dark) !important;
    font-weight: 600;
}

.jBoard-body .dropdown-menu .dropdown-item:hover,
.jBoard-body .dropdown-menu .dropdown-item:focus {
    background: var(--jit-accent-soft);
    color: var(--jit-primary-dark) !important;
}

.jBoard-body .blog-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 520px;
    overflow: hidden;
    margin-bottom: 4rem !important;
}

.jBoard-body .blog-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(8, 63, 72, 0.12) 0%, rgba(8, 63, 72, 0.84) 100%);
}

.jBoard-body .blog-hero > .container.position-absolute {
    position: relative !important;
    inset: auto !important;
    z-index: 1;
    height: auto !important;
    width: 100%;
    padding-top: 7rem;
    padding-bottom: 4.5rem !important;
}

.jBoard-body .blog-hero .row {
    align-items: flex-end;
    min-height: auto !important;
    width: 100%;
}

.jBoard-body .blog-hero h1 {
    max-width: 840px;
    margin-bottom: 0 !important;
    font-size: 2.75rem;
    line-height: 1.08;
    text-wrap: balance;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.32);
}

.jBoard-body .blog-date {
    position: static;
    display: flex;
    justify-content: center;
}

.jBoard-body .blog-date .date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--jit-primary-dark), var(--jit-primary));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
    color: #fff;
    font-family: Ubuntu, sans-serif;
    font-size: 0.88rem;
    line-height: 1.1;
}

.jBoard-body .blog-date .date span {
    display: block;
    color: var(--jit-accent);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 2.6rem;
}

.jBoard-body .jit-blog-index {
    margin-top: 4rem !important;
    margin-bottom: 5rem !important;
}

.jBoard-body .single-blog {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--jit-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(8, 63, 72, 0.09);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.jBoard-body .single-blog:hover,
.jBoard-body .single-blog:focus-within {
    transform: translateY(-4px);
    border-color: rgba(216, 140, 31, 0.38);
    box-shadow: var(--jit-shadow);
}

.jBoard-body .single-blog > a {
    display: block;
    overflow: hidden;
}

.jBoard-body .single-blog .blog-img {
    position: relative;
    height: 260px !important;
    background-color: #dce8ea !important;
    transition: transform 0.25s ease;
}

.jBoard-body .single-blog:hover .blog-img,
.jBoard-body .single-blog:focus-within .blog-img {
    transform: scale(1.03);
}

.jBoard-body .single-blog .blog-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 63, 72, 0.04), rgba(8, 63, 72, 0.34));
}

.jBoard-body .single-blog .blog-img .top-meta {
    top: 1rem;
    left: 1rem;
    z-index: 1;
}

.jBoard-body .single-blog .blog-img .top-meta .date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--jit-primary-dark), var(--jit-primary));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-family: Ubuntu, sans-serif;
    font-size: 0.78rem;
    line-height: 1;
}

.jBoard-body .single-blog .blog-img .top-meta .date span {
    color: var(--jit-accent);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.7rem;
}

.jBoard-body .single-blog .card-body {
    display: flex;
    flex-direction: column;
    min-height: 230px;
    padding: 1.35rem;
}

.jBoard-body .single-blog .card-title {
    margin-bottom: 0.75rem;
}

.jBoard-body .single-blog .card-title a {
    color: var(--jit-primary-dark) !important;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.jBoard-body .single-blog .card-title a:hover,
.jBoard-body .single-blog .card-title a:focus {
    color: var(--jit-accent) !important;
}

.jBoard-body .single-blog .card-text {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 0;
    color: var(--jit-ink-soft);
    font-size: 0.95rem;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.jBoard-body .blog-article-content,
.jBoard-body .blogtext {
    margin-top: 4rem;
    margin-bottom: 4rem;
    color: var(--jit-ink);
    font-size: 1.05rem;
    line-height: 1.8;
}

.jBoard-body .blog-article-content h1,
.jBoard-body .blog-article-content h2,
.jBoard-body .blog-article-content h3,
.jBoard-body .blogtext h1,
.jBoard-body .blogtext h2,
.jBoard-body .blogtext h3 {
    color: var(--jit-primary-dark);
    line-height: 1.25;
}

.jBoard-body .blog-article-content img,
.jBoard-body .blogtext img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.jBoard-body .squareBlock {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(8, 63, 72, 0.09);
}

.jBoard-body .bg-darksmlc {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(8, 63, 72, 0.04), rgba(8, 63, 72, 0.82));
}

.jBoard-body .bg-darksmlc .h4 {
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.35;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.28);
}

.jBoard-body .pagination {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jBoard-body .pagination .page-link {
    min-width: 42px;
    border: 1px solid var(--jit-border);
    border-radius: 8px;
    color: var(--jit-primary-dark);
    font-weight: 700;
    text-align: center;
    box-shadow: none;
}

.jBoard-body .pagination .page-link:hover,
.jBoard-body .pagination .page-link:focus,
.jBoard-body .pagination .page-item.active .page-link {
    border-color: var(--jit-primary);
    background: var(--jit-primary);
    color: #fff;
}

.jit-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
}

.jit-filter-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.jit-filter-card {
    display: flex;
    align-items: center;
    min-height: 72px;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--jit-border);
    border-radius: 8px;
    background: #fff;
    color: var(--jit-primary-dark);
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.jit-filter-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    background: rgba(0, 158, 163, 0.12);
    color: var(--jit-primary);
}

.jit-filter-card:hover,
.jit-filter-card:focus {
    border-color: var(--jit-primary);
    color: var(--jit-primary-dark);
    box-shadow: 0 12px 28px rgba(8, 63, 72, 0.12);
    transform: translateY(-2px);
}

.jit-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.jit-featured-job,
.jit-job-week {
    border: 1px solid var(--jit-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(8, 63, 72, 0.09);
}

.jit-featured-job {
    display: flex;
    min-height: 230px;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.35rem;
}

.jit-featured-job h3,
.jit-job-week h3 {
    color: var(--jit-primary-dark);
    font-size: 1.2rem;
    line-height: 1.25;
}

.jit-featured-job p,
.jit-job-week p {
    color: var(--jit-ink-soft);
}

.jit-featured-job .jit-salary,
.jit-job-week .jit-salary {
    color: var(--jit-primary-dark);
    font-weight: 700;
}

.jit-featured-job .btn {
    margin-top: auto;
}

.jit-featured-job__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 0.6rem;
}

.jit-job-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 50%;
    max-width: 50%;
}

.jit-job-logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 60px;
    object-fit: contain;
}

.jit-job-week__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 50%;
    min-width: 0;
}

.jit-job-week__body .btn {
    margin-top: 0.85rem;
}

.jit-job-week__logo {
    align-self: stretch;
    flex: 0 0 50%;
    max-width: 50%;
}

.jit-job-week .jit-job-logo {
    max-height: 120px;
}

@media (max-width: 575.98px) {
    .jit-job-week {
        flex-direction: column;
        align-items: stretch;
    }

    .jit-job-week__logo {
        flex-basis: auto;
        max-width: 100%;
    }

    .jit-job-week .jit-job-logo {
        max-height: 90px;
    }
}

.jit-job-week {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem;
    border-left: 5px solid var(--jit-accent);
}

.jit-logo-ticker {
    overflow: hidden;
    border-block: 1px solid var(--jit-border);
    background: #fff;
}

.jit-logo-track {
    display: flex;
    width: max-content;
    min-width: 100%;
    gap: 1rem;
    padding: 1rem 0;
    animation: jit-logo-scroll 34s linear infinite;
}

.jit-logo-track span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 58px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--jit-border);
    border-radius: 8px;
    background: var(--jit-bg-soft);
    color: var(--jit-primary-dark);
    font-weight: 700;
    white-space: nowrap;
}

header {margin-bottom: 50px}

@keyframes jit-logo-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 767.98px) {
    .jit-logo {
        max-height: 56px;
    }

    .jit-network-logos {
        grid-template-columns: 1fr 1fr;
    }

    .jit-job-week {
        align-items: flex-start;
        flex-direction: column;
    }

    .jit-home-banner .display-4 {
        font-size: 2.35rem;
    }

    .jBoard-body .blog-hero {
        min-height: 420px;
        margin-bottom: 2.75rem !important;
    }

    .jBoard-body .blog-hero > .container.position-absolute {
        padding-top: 6rem;
        padding-bottom: 3rem !important;
    }

    .jBoard-body .blog-hero h1 {
        font-size: 2rem;
        line-height: 1.14;
    }

    .jBoard-body .blog-date {
        justify-content: flex-start;
        margin-bottom: 1rem;
    }

    .jBoard-body .blog-date .date {
        width: 76px;
        height: 76px;
        font-size: 0.75rem;
    }

    .jBoard-body .blog-date .date span {
        font-size: 2rem;
        line-height: 2rem;
    }

    .jBoard-body .jit-blog-index {
        margin-top: 2.5rem !important;
        margin-bottom: 3.5rem !important;
    }

    .jBoard-body .single-blog .blog-img {
        height: 220px !important;
    }

    .jBoard-body .single-blog .card-body {
        min-height: 0;
    }

    .jBoard-body .blog-article-content,
    .jBoard-body .blogtext {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }

}

/* ============================================================
   Company logo ticker ({companylogos} shortcode)
   Rendered by views/includes/brainiacMedia-pages.cfm
   ============================================================ */
.jit-company-ticker {
    width: 100%;
    overflow: hidden;
}

.jit-company-ticker__viewport {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.jit-company-ticker__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: jit-company-ticker-scroll 120s linear infinite;
}

.jit-company-ticker__viewport:hover .jit-company-ticker__track {
    animation-play-state: paused;
}

.jit-company-ticker__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
}

.jit-company-ticker__img {
    height: 48px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: grayscale(0);
    opacity: 1;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.jit-company-ticker__img:hover {
    filter: grayscale(100%);
    opacity: 0.75;
}

@keyframes jit-company-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================================
   JIT design-consistency layer (design feedback, 03/08/2026)
   Loaded only by the JIT headers, after custom.min.css, and scoped to the
   body.jit-site class those headers emit - other brands are untouched.
   One button system: navy rectangles (primary), amber (conversion CTA),
   navy outline (secondary); Ubuntu everywhere.
   ========================================================================== */

body.jit-site,
body.jit-site .btn,
body.jit-site input,
body.jit-site select,
body.jit-site textarea,
body.jit-site h1, body.jit-site h2, body.jit-site h3,
body.jit-site h4, body.jit-site h5, body.jit-site h6,
body.jit-site .h1, body.jit-site .h2, body.jit-site .h3,
body.jit-site .card-title, body.jit-site .subHeading,
body.jit-site .pageHeading, body.jit-site .accordion-button,
body.jit-site .form-check-label, body.jit-site .list-group-item,
body.jit-site .meta-desc, body.jit-site .meta-info {
    font-family: 'Ubuntu', sans-serif;
}

/* --- one rectangle button shape everywhere ------------------------------- */
body.jit-site .btn,
body.jit-site .btn.rounded-pill,
body.jit-site .custBtn,
body.jit-site .jit-wrap .jit-btn-primary,
body.jit-site .jit-wrap .jit-btn-outline,
body.jit-site .jit-wrap .jit-btn-amber {
    border-radius: 6px !important;
}

body.jit-site .custBtn {
    text-transform: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.55rem 1.25rem;
}
@media (max-width: 767px) {
    body.jit-site .custBtn {
        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;
    }
}

body.jit-site .rSide .custCard .btn,
body.jit-site .btn-sm {
    font-size: 14px;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
}

/* solid primary actions -> brand navy */
body.jit-site .custBtn.btn-blue,
body.jit-site .custBtn.btn-purple {
    background-color: #171a5b !important;
    border-color: #171a5b !important;
    color: #fff !important;
}

/* modal secondary action (e.g. Register link-button inside sign-in) -> outline */
body.jit-site .custModal .authSwitch {
    background: transparent !important;
    border: 1px solid #171a5b !important;
    color: #171a5b !important;
}
body.jit-site .custModal .authSwitch:hover,
body.jit-site .custModal .authSwitch:focus {
    background: #171a5b !important;
    color: #fff !important;
}

/* conversion CTA (Apply Now / Applied On) -> JIT red, white text.
   White on #e40513 measures ~4.85:1, so it clears the AA contrast bar. */
body.jit-site .btn-success-green {
    background: #e40513 !important;
    border-color: #e40513 !important;
    color: #fff !important;
}
body.jit-site .btn-success-green:hover,
body.jit-site .btn-success-green:focus {
    background: #c20410 !important;
    border-color: #c20410 !important;
    color: #fff !important;
}

/* secondary card actions (Save Job / View Job) -> solid JIT blue */
body.jit-site .rSide .custCard .btn-lighter,
body.jit-site .btn-lighter,
body.jit-site .btn-outline-success {
    background: #1b91be !important;
    color: #fff !important;
    border: 1px solid #1b91be !important;
}
body.jit-site .btn-lighter:hover,
body.jit-site .btn-outline-success:hover,
body.jit-site .btn-lighter:focus,
body.jit-site .btn-outline-success:focus {
    background: #17799e !important;
    border-color: #17799e !important;
    color: #fff !important;
}

/* destructive stays red, but rectangle + stronger contrast */
body.jit-site .btn-outline-danger-red {
    border-radius: 6px;
    color: #B42833 !important;
    border-color: #B42833;
}

/* marketing (jit-wrap) buttons join the same shape system */
body.jit-site .jit-wrap .jit-btn-primary,
body.jit-site .jit-wrap .jit-btn-outline,
body.jit-site .jit-wrap .jit-btn-amber {
    font-weight: 700;
    padding: 0.7rem 1.3rem;
}

/* --- modals -------------------------------------------------------------- */
/* "Reset your Password" was 10px */
body.jit-site .custModal .hyperLink a,
body.jit-site .custModal .modal-content .mobLink a {
    font-size: 14px !important;
    line-height: 20px;
}

/* register/sign-in checkbox labels were 12px pale grey */
body.jit-site .custModal .form-check .form-check-label,
body.jit-site #jobseekersSignup.custModal .form-check .form-check-label {
    color: #43535c !important;
    font-size: 14px;
    line-height: 21px;
}

body.jit-site .custModal .h2 {
    color: #10263f;
    font-weight: 700;
}

/* --- search sidebar readability ------------------------------------------ */
body.jit-site .lSide .accordion-flush .accordion-collapse .accordion-body .form-check-label {
    color: #3c4a52 !important;
    font-size: 14px;
}
body.jit-site .lSide .accordion-button {
    color: #1d2b3a !important;
    font-weight: 600;
}

/* --- search result cards -------------------------------------------------- */
/* meta line: salary first, then location, then job type; darker + larger */
body.jit-site .rSide .custCard .list-group-horizontal {
    display: flex !important;
    flex-wrap: wrap;
}
@media (max-width: 1199px) {
    body.jit-site .rSide .custCard .list-group-horizontal {
        flex-direction: column;
        align-items: flex-start;
    }
}
body.jit-site .rSide .custCard .list-group-horizontal > .list-group-item {
    color: #1d2b3a;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}
body.jit-site .rSide .custCard .list-group-horizontal > .list-group-item:nth-child(1) { order: 3; }
body.jit-site .rSide .custCard .list-group-horizontal > .list-group-item:nth-child(2) { order: 2; }
body.jit-site .rSide .custCard .list-group-horizontal > .list-group-item:nth-child(3) { order: 1; padding-left: 0; }

/* featured flag replaces the bare red stars */
body.jit-site .jobFeaturedFlag {
    color: #B42833;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
body.jit-site .jobFeaturedFlag .fa-stars {
    font-size: 16px;
    margin-right: 4px;
}

/* --- job advert: flat Job Specs list -------------------------------------- */
body.jit-site .jit-specs {
    text-align: left;
}
body.jit-site .jit-spec {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #e3e8ee;
}
body.jit-site .jit-spec:last-child {
    border-bottom: 0;
}
body.jit-site .jit-spec-label {
    color: #10263f;
    font-size: 14px;
    font-weight: 700;
}
body.jit-site .jit-spec-value {
    color: #3c4a52;
    font-size: 14px;
    text-align: right;
}

/* --- employer-area wayfinding bar ----------------------------------------- */
body.jit-employer-area .jit-area-bar {
    background: #000;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
body.jit-employer-area .jit-area-bar .jit-area-bar-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    font-size: 13px;
}

/* --- search-bar Save / Reset actions (JIT brand red, 03/08/2026 feedback) -----
   Targets only the two icon buttons in the search banner
   (header_job_jit.cfm:771-772). The plain .btn-light buttons beside them
   ("Register for Job Alerts", "Advertise a Job") deliberately keep their
   existing style, so scope stays on .custBtn.btn-light. */
body.jit-site .custBtn.btn-light,
body.jit-site a.custBtn.btn-light {
    background-color: #e40513 !important;
    border-color: #e40513 !important;
    color: #fff !important;
}
body.jit-site .custBtn.btn-light i {
    color: #fff !important;
}
body.jit-site .custBtn.btn-light:hover,
body.jit-site .custBtn.btn-light:focus,
body.jit-site a.custBtn.btn-light:hover,
body.jit-site a.custBtn.btn-light:focus {
    background-color: #c20410 !important;
    border-color: #c20410 !important;
    color: #fff !important;
}
body.jit-site .custBtn.btn-light:disabled,
body.jit-site .custBtn.btn-light[disabled] {
    background-color: #e40513 !important;
    border-color: #e40513 !important;
    color: #fff !important;
    opacity: .45;
}

/* --- search-bar buttons: one uniform size (04/08/2026 feedback) --------------
   All three (search / save / reset) are icon-only, so they were sized by their
   glyph: the search button rendered 67x40 while save and reset collapsed to
   ~40x18. Fixed box + flex centring makes them identical and independent of
   icon metrics. 40px height matches the search input beside them. */
body.jit-site .bannerPanel .custBtn.btn-primary,
body.jit-site .bannerPanel .custBtn.btn-light,
body.jit-site .bannerPanel a.custBtn.btn-light {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    height: 40px;
    padding: 0 !important;
    line-height: 1;
    vertical-align: middle;
}
body.jit-site .bannerPanel .custBtn i {
    font-size: 16px;
    line-height: 1;
}
body.jit-site .bannerPanel ul.listNone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.jit-site .bannerPanel ul.listNone > li {
    display: inline-flex !important;
    align-items: center;
}

/* --- employer entry points -> JIT red ---------------------------------------
   .btn-torquoise is the employer-side accent (Employers, Employers Sign In,
   Employers Login/Signup). Was amber #d88c1f. */
body.jit-site .btn-torquoise {
    background-color: #e40513 !important;
    border-color: #e40513 !important;
    color: #fff !important;
}
body.jit-site .btn-torquoise:hover,
body.jit-site .btn-torquoise:focus {
    background-color: #c20410 !important;
    border-color: #c20410 !important;
    color: #fff !important;
}
/* the search button and the save/reset list sit in sibling inline-blocks whose
   baselines differ once the list becomes inline-flex - align both by box middle
   so all three buttons share one baseline with the input */
body.jit-site .bannerPanel .d-inline-block,
body.jit-site .bannerPanel ul.listNone,
body.jit-site .bannerPanel .cust-form-control {
    vertical-align: middle;
}

/* --- CMS page-pack CTAs -> JIT blue (04/08/2026 feedback) --------------------
   .jit-btn-primary / .jit-btn-outline are the buttons in the seeded jit-wrap
   pages (employers landing hero, "Prefer to talk?" card, etc). Were teal. */
body.jit-site .jit-wrap .jit-btn-primary {
    background: #1b91be !important;
    border-color: #1b91be !important;
    color: #fff !important;
}
body.jit-site .jit-wrap .jit-btn-primary:hover,
body.jit-site .jit-wrap .jit-btn-primary:focus {
    background: #17799e !important;
    border-color: #17799e !important;
    color: #fff !important;
}

/* The outline variant was drawn for the dark hero (white border + white text).
   On the light jit-bg-mist sections it rendered white-on-near-white and was
   effectively invisible, so give it the blue treatment there... */
body.jit-site .jit-wrap .jit-btn-outline {
    background: transparent !important;
    border: 1px solid #1b91be !important;
    color: #1b91be !important;
}
body.jit-site .jit-wrap .jit-btn-outline:hover,
body.jit-site .jit-wrap .jit-btn-outline:focus {
    background: #1b91be !important;
    border-color: #1b91be !important;
    color: #fff !important;
}
/* ...but keep it white where it genuinely sits on the dark hero. */
body.jit-site .jit-wrap .jit-hero .jit-btn-outline {
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
}
body.jit-site .jit-wrap .jit-hero .jit-btn-outline:hover,
body.jit-site .jit-wrap .jit-hero .jit-btn-outline:focus {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--jit-navy) !important;
}

/* --- eyebrow labels + dot: teal green -> JIT red (04/08/2026 feedback) -------
   .jit-eyebrow is the "FEATURED JOBS" / "JOB OF THE WEEK" / "FEATURED JOB" /
   "EMPLOYERS" kicker; its ::before is the dot, which was amber. */
body.jit-site .jit-wrap .jit-eyebrow {
    color: #e40513 !important;
}
body.jit-site .jit-wrap .jit-eyebrow::before {
    background: #e40513 !important;
}
/* other green text in the CMS pages (inline links, icon glyphs) */
body.jit-site .jit-wrap a:not(.btn):not(.jit-btn-primary):not(.jit-btn-outline):not(.jit-btn-amber),
body.jit-site .jit-wrap .jit-icon {
    color: #e40513 !important;
}
/* the navy-section eyebrow stays light cyan - red on dark navy is unreadable */
body.jit-site .jit-wrap .jit-bg-navy .jit-eyebrow {
    color: #9ff2e6 !important;
}
body.jit-site .jit-wrap .jit-bg-navy .jit-eyebrow::before {
    background: #9ff2e6 !important;
}
body.jit-site .jit-wrap .jit-bg-navy a:not(.btn) {
    color: #9ff2e6 !important;
}

/* search-results "Featured job" flag matches the same red */
body.jit-site .jobFeaturedFlag,
body.jit-site .jobFeaturedFlag .fa-stars,
body.jit-site .jobFeaturedFlag .red-text {
    color: #e40513 !important;
}

/* --- amber CTA -> blue with white text --------------------------------------
   .jit-btn-amber is the "View job" / "Create a free account" CTA. */
body.jit-site .jit-wrap .jit-btn-amber {
    background: #1b91be !important;
    border-color: #1b91be !important;
    color: #fff !important;
}
body.jit-site .jit-wrap .jit-btn-amber:hover,
body.jit-site .jit-wrap .jit-btn-amber:focus {
    background: #17799e !important;
    border-color: #17799e !important;
    color: #fff !important;
    filter: none;
}

/* --- CMS card icons: neutralise the global .fa-cart-shopping hack -----------
   custom.css:11 styles EVERY cart icon for the employer-nav basket
   (position:absolute; padding-left:30px; font-size:24px; margin-top:-10px),
   so the "Choose packages" card icon was pulled out of flow and overlapped its
   heading. Match it to its sibling card icons instead. The nav basket itself is
   unaffected - it neutralises the same rule with its own inline styles. */
body.jit-site .jit-wrap .jit-card .fa-cart-shopping {
    position: static;
    padding-left: 0;
    margin-top: 0 !important;
    font-size: inherit;
    color: inherit !important;
    display: inline;
}

/* ============================================================================
   JIT header bars (client feedback, 31/08/2026)
   The solid blue header bar (#22326e) is the JIT brand mark, on the site
   since 2009: blue with white text on the job seeker side, black (#000) on
   the employer area. Replaces the white navbar this rebuild shipped with.
   ========================================================================== */

body.jit-site .navbar {
    background: #22326e;
    border-bottom: 0;
    box-shadow: 0 10px 30px rgba(10, 18, 51, 0.25);
}

body.jit-site .navbar .nav-link,
body.jit-site .navbar .dropdown-toggle {
    color: #fff !important;
}

body.jit-site .navbar .nav-link:hover,
body.jit-site .navbar .nav-link:focus {
    color: rgba(255, 255, 255, 0.72) !important;
}

body.jit-site .navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
}
body.jit-site .navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.18);
}
body.jit-site .navbar .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

/* the navy sign-in/register/sign-out buttons disappear on the blue bar -> inverse them */
body.jit-site .navbar .btn-primary,
body.jit-site .navbar .btn-blue-dark {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #22326e !important;
}
body.jit-site .navbar .btn-primary:hover,
body.jit-site .navbar .btn-primary:focus,
body.jit-site .navbar .btn-blue-dark:hover,
body.jit-site .navbar .btn-blue-dark:focus {
    background-color: #d9dff3 !important;
    border-color: #d9dff3 !important;
    color: #22326e !important;
}

/* employer area: same bar in black, joining the black wayfinding strip above */
body.jit-site.jit-employer-area .navbar {
    background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* flush + sticky header (feedback 31/08/2026): the white gap under the bar was
   the global "header {margin-bottom: 50px}" above; the bar now sits flush and
   sticks to the top of the viewport instead. z-index matches Bootstrap's
   .sticky-top so modals (1050+) still cover it. */
body.jit-site header {
    position: sticky;
    top: 0;
    z-index: 1030;
    margin-bottom: 0;
}

/* employer bar: same inverse buttons, black text to match the black bar */
body.jit-site.jit-employer-area .navbar .btn-primary,
body.jit-site.jit-employer-area .navbar .btn-blue-dark {
    color: #000 !important;
}

/* --- shop: "+ VAT" next to the headline price ---------------------------- */
/* Client feedback 02/09/2026: "Show that prices are + VAT". The suffix is
   emitted by views/shop/_shopProductCard*.cfm whenever the app stores net
   prices and the basket adds VAT on top. It has to read as a qualifier on the
   price, not as part of the number, so it stays small and muted next to the
   .h1 figure rather than inheriting its size. */
body.jit-site .shop-price-vat {
    color: #6b6b6b;
    font-size: 0.95rem;
    font-weight: 600;
    margin-left: 0.35rem;
    white-space: nowrap;
}