/* ==========================================================================
   Recruitment System - brand theme
   Palette and style pulled from the company's "We Are Hiring" poster:
   deep navy + mid blue gradient, gold/amber accents, bold uppercase
   headers, circular icon badges, clean card sections.
   ========================================================================== */

:root {
    --brand-navy-dark: #081633;
    --brand-navy: #0B1F4D;
    --brand-blue: #1E5AA8;
    --brand-blue-light: #2E74C8;
    --brand-gold: #F0A93A;
    --brand-gold-dark: #D4900F;
    --brand-bg: #F4F6FA;
    --brand-text: #1C2534;
}

body {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    background-color: var(--brand-bg);
    color: var(--brand-text);
}

/* ---------- Header bar (logo sits on white, matching the poster's layout) ---------- */

.brand-header-bar {
    background-color: #fff;
    padding: 0.75rem 0;
    box-shadow: 0 2px 8px rgba(11, 31, 77, 0.08);
}
.brand-header-bar img {
    height: 52px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* ---------- Hero / page banner (mirrors the poster's navy-to-blue header) ---------- */

.brand-hero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
    color: #fff;
    padding: 2.5rem 0;
    margin-bottom: 2rem;
}

.brand-hero h1 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.brand-hero p {
    color: #DCE6F5;
    margin-bottom: 0;
}

.brand-hero .brand-tagline {
    color: var(--brand-gold);
    font-style: italic;
    font-weight: 500;
}

/* ==========================================================================
   ClientLanding v2 - full marketing landing page redesign
   Replaces the earlier simple hero-row + About/Contact card layout with a
   navbar + hero + Applicant Portal + full footer, matching the supplied
   mockup. Kept as its own section (rather than folded into .brand-hero /
   .card-brand) since this page's layout is materially different from every
   other page's plain header-bar + hero + card list pattern.
   ========================================================================== */

/* ---------- Top navbar ---------- */

.landing-navbar {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(11, 31, 77, 0.08);
    border-bottom: 1px solid #E2E6ED;
    padding: 1rem 0;
}
.landing-navbar .navbar-brand img {
    height: 58px;
    width: auto;
    max-width: 230px;
}
.landing-nav-links .nav-link {
    color: var(--brand-navy);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.15rem;
    position: relative;
}
.landing-nav-links .nav-link:hover,
.landing-nav-links .nav-link:focus {
    color: var(--brand-blue);
}
.landing-nav-links .nav-link.active {
    color: var(--brand-blue);
}
.landing-nav-links .nav-link.active::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: -2px;
    height: 2px;
    background: var(--brand-blue);
}
.landing-nav-links .dropdown-menu {
    border: none;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(11, 31, 77, 0.15);
    padding: 0.5rem;
}
.landing-nav-links .dropdown-item {
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    color: var(--brand-text);
}
.landing-nav-links .dropdown-item:hover,
.landing-nav-links .dropdown-item:focus {
    background-color: var(--brand-bg);
    color: var(--brand-blue);
}
.landing-portal-btn {
    background-color: var(--brand-navy);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
}
.landing-portal-btn:hover {
    background-color: var(--brand-blue);
    color: #fff;
}

/* ---------- Hero ---------- */

.landing-hero-v2 {
    /* Opaque light-blue on the left (matches the flat gradient this replaced,
       so the text block keeps the same contrast/feel), fading to fully
       transparent by 46% - the text column's right edge sits around 28-30%,
       so this clears out well before the photo's people (previously the fade
       ran through 58-78%, which landed the semi-transparent band directly on
       top of the two leftmost people and washed them out). Photo anchored
       right so cover-cropping trims the empty sky on the left first, keeping
       the people visible instead of the text overlapping them. */
    background-image: linear-gradient(90deg, #EEF4FC 0%, #EEF4FC 32%, rgba(238, 244, 252, 0) 46%), url('Images/hero-visual.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    padding: 4rem 0;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-content {
    max-width: 560px;
}
.hero-kicker {
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.hero-heading {
    font-weight: 800;
    font-size: clamp(2.35rem, 4vw, 3.35rem);
    line-height: 1.08;
    color: var(--brand-navy);
    margin-bottom: 1rem;
}
.hero-heading-accent {
    color: var(--brand-blue);
}
.hero-sub {
    color: #4A5670;
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 480px;
    margin-bottom: 1.5rem;
}
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}
.btn-hero-primary {
    background-color: var(--brand-navy);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    height: 48px;
    padding: 0 1.5rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.btn-hero-primary:hover {
    background-color: var(--brand-blue);
    color: #fff;
}
.btn-hero-secondary {
    background-color: #fff;
    color: var(--brand-navy);
    border: 2px solid var(--brand-navy);
    font-weight: 700;
    font-size: 0.9rem;
    height: 48px;
    padding: 0 1.5rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.btn-hero-secondary:hover {
    background-color: var(--brand-navy);
    color: #fff;
}
.hero-trust-line {
    color: var(--brand-navy);
    font-weight: 600;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.hero-trust-line i {
    color: var(--brand-blue);
}

/* ---------- Applicant Portal section ---------- */

.applicant-portal-section {
    padding: 2.25rem 0 2rem;
    background-color: #fff;
}
.portal-heading-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
}
.portal-heading-line h2 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--brand-navy);
    font-size: 1.6rem;
    margin: 0;
}
.portal-heading-dash {
    width: 40px;
    height: 2px;
    background: var(--brand-blue);
    display: inline-block;
}
.portal-subtext {
    color: #6B7A99;
    margin-bottom: 2.5rem;
}

.portal-card {
    background: #fff;
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    padding: 1.6rem;
    box-shadow: 0 2px 10px rgba(11, 31, 77, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.portal-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(11, 31, 77, 0.10);
    border-color: var(--brand-blue);
}
.portal-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #E6EEFA;
    color: var(--brand-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.portal-card h3 {
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--brand-navy);
    margin-bottom: 0.5rem;
}
.portal-card p {
    color: #6B7A99;
    font-size: 0.88rem;
    flex-grow: 1;
    margin-bottom: 1rem;
}
.portal-card-link {
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.portal-card-link:hover {
    color: var(--brand-navy);
    text-decoration: underline;
}

.hiring-panel {
    background: linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
}
.hiring-title {
    font-weight: 800;
    font-size: 2rem;
    line-height: 0.98;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.hiring-title-accent {
    color: var(--brand-gold);
}
.hiring-panel > p {
    color: #C7D3EA;
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}
.hiring-categories {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 0.5rem;
    flex-grow: 1;
}
.hiring-categories li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
}
.hiring-dot {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.hiring-cta-btn {
    background-color: #fff;
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    margin-top: auto;
}
.hiring-cta-btn:hover {
    background-color: var(--brand-gold);
    color: var(--brand-navy-dark);
}

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

.landing-footer-v2 {
    background: linear-gradient(120deg, var(--brand-navy) 0%, var(--brand-navy-dark) 55%, #051230 100%);
    color: #B9C6E0;
    padding: 2.5rem 0 1rem;
}
@media (min-width: 992px) {
    .landing-footer-v2 .footer-col-company { flex: 0 0 23%; max-width: 23%; }
    .landing-footer-v2 .footer-col-links { flex: 0 0 16%; max-width: 16%; padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.10); }
    .landing-footer-v2 .footer-col-contact { flex: 0 0 22%; max-width: 22%; padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.10); }
    .landing-footer-v2 .footer-col-services { flex: 0 0 17%; max-width: 17%; padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.10); }
    .landing-footer-v2 .footer-col-accred { flex: 0 0 22%; max-width: 22%; padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.10); }
}
.landing-footer-v2 h4 {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 1rem;
}
.footer-logo img {
    height: 46px;
    width: auto;
    /* Existing full-color logo rendered as a flat white mark on the dark
       footer, matching the mockup's monochrome footer logo treatment. */
    filter: brightness(0) invert(1);
    margin-bottom: 0.9rem;
}
.footer-tagline {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1.1rem;
}
.footer-social {
    display: flex;
    gap: 0.6rem;
}
.footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1rem;
}
.footer-social a:hover {
    background: var(--brand-gold);
    color: var(--brand-navy-dark);
}

.footer-links, .footer-links-plain {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li, .footer-links-plain li {
    margin-bottom: 0.7rem;
    font-size: 0.85rem;
}
.footer-links a {
    color: #B9C6E0;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-links a:hover {
    color: var(--brand-gold);
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.85rem;
    margin-bottom: 0.85rem;
    line-height: 1.4;
}
.footer-contact .footer-contact-icon {
    flex: none;
    opacity: 0.9;
}

.accreditation-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}
.accreditation-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.accreditation-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.accreditation-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
}
.accreditation-sub {
    font-size: 0.75rem;
    color: #B9C6E0;
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.15);
    margin: 2rem 0 1rem;
}
.footer-bottom-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
}
.footer-bottom-row a {
    color: #B9C6E0;
    text-decoration: none;
}
.footer-bottom-row a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ==========================================================================
   JobListings v2 - banner + Current Job Openings redesign
   Uses the same navbar/footer classes as ClientLanding v2 for site-wide
   consistency, plus page-specific classes for the navy decorative banner,
   the numbered-badge company cards, the "Why Join Powerman?" sidebar, and
   the "Can't find the right job?" resume CTA bar.
   ========================================================================== */

.jl-banner {
    background: linear-gradient(110deg, var(--brand-navy-dark) 0%, var(--brand-navy) 35%, var(--brand-blue) 72%, var(--brand-blue-light) 100%);
    background-repeat: no-repeat;
    color: #fff;
    padding: 2.75rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.jl-banner-decor-left,
.jl-banner-decor-right {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    opacity: 0.55;
    pointer-events: none;
}
.jl-banner-decor-left {
    left: 0;
}
.jl-banner-decor-right {
    right: 0;
}
.jl-banner .container {
    position: relative;
    z-index: 1;
}
.jl-banner h1 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 2.875rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}
.jl-banner-dash {
    width: 90px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    display: inline-block;
    position: relative;
}
.jl-banner-dash::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-50%);
}
.jl-banner-dash.jl-dash-left::before {
    left: 0;
}
.jl-banner-dash.jl-dash-right::before {
    right: 0;
}
.jl-banner p {
    color: #C7D3EA;
    margin: 0.75rem 0 0;
    font-size: 1.18rem;
    position: relative;
    z-index: 1;
}

/* ---------- Section header row: icon + title + subtitle, filter on the right ---------- */

.jl-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2.5rem 0 1.75rem;
}
.jl-section-header-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.jl-icon-badge {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: #E6EEFA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.jl-section-header h2 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--brand-navy);
    font-size: 1.4rem;
    margin: 0 0 0.15rem;
}
.jl-section-header-sub {
    color: #6B7A99;
    font-size: 0.88rem;
    margin: 0;
}

.jl-filters-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.jl-location-filter-wrap {
    background: #fff;
    border: 1.5px solid var(--brand-blue);
    border-radius: 8px;
    height: 46px;
    min-width: 205px;
    padding: 0 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.jl-location-filter-wrap > i {
    color: var(--brand-blue);
    font-size: 0.95rem;
    flex: none;
}
.jl-location-filter {
    background: transparent;
    border: none;
    color: var(--brand-navy);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    height: 100%;
    flex: 1;
    padding: 0;
}
.jl-location-filter:focus {
    outline: none;
    box-shadow: none;
}

/* ---------- Company cards (numbered "OPEN POSITIONS" badge + arrow link) ---------- */

.jl-company-card {
    background: #fff;
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    padding: 1.625rem;
    height: 100%;
    box-shadow: 0 2px 10px rgba(11, 31, 77, 0.05);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
a.company-card-link:hover .jl-company-card {
    transform: translateY(-2px);
    border-color: var(--brand-blue);
    box-shadow: 0 6px 18px rgba(11, 31, 77, 0.10);
}
.jl-company-card .company-avatar {
    font-size: 1.15rem;
}
.jl-company-name {
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--brand-navy);
    margin: 0;
    line-height: 1.3;
}
.jl-company-identity {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 0.82rem;
    margin-top: 0.4rem;
}
.jl-company-location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #6B7A99;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
.jl-company-divider {
    border-top: 1px solid #EEF1F7;
    margin: 1.1rem 0 0.9rem;
}
.jl-company-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.jl-company-closing {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #6B7A99;
    font-weight: 700;
    font-size: 0.78rem;
}
.jl-job-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.jl-job-count-number {
    background: #EEF1F7;
    color: var(--brand-navy);
    font-weight: 800;
    font-size: 0.95rem;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jl-job-count-label {
    color: #6B7A99;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.jl-view-link {
    color: var(--brand-blue);
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ---------- "Why Join Powerman?" sidebar ---------- */

.jl-sidebar-panel {
    background: #F3F6FC;
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    height: 100%;
}
/* This page's sidebar column also holds the resume CTA below the panel, so the
   panel can't stretch to fill the whole (row-matched) column height like it does
   when it's the column's only child - that pushed the CTA down with a big gap. */
.jl-sidebar-col .jl-sidebar-panel {
    height: auto;
}
.jl-sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.jl-sidebar-header h3 {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--brand-navy);
    margin: 0;
}
.jl-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.35rem;
}
.jl-sidebar-item:last-child {
    margin-bottom: 0;
}
.jl-sidebar-item .jl-icon-badge {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 1.1rem;
}
.jl-sidebar-item h4 {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--brand-navy);
    margin: 0 0 0.2rem;
}
.jl-sidebar-item p {
    color: #6B7A99;
    font-size: 0.83rem;
    margin: 0;
    line-height: 1.45;
}

/* ---------- "Can't find the right job?" resume CTA bar ---------- */

.jl-resume-cta {
    background: #F3F6FC;
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1rem;
}
.jl-resume-cta-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.jl-resume-cta-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
/* In the sidebar (right below "Why Join Powerman?") the CTA sits in a much
   narrower column than the main content area it used to span, so it always
   stacks - the same treatment the base rule only applies at <=576px. */
.jl-sidebar-panel + .jl-resume-cta {
    flex-direction: column;
    align-items: flex-start;
}
.jl-sidebar-panel + .jl-resume-cta .jl-resume-cta-btn {
    width: 100%;
    justify-content: center;
}

.jl-back-link {
    color: #6B7A99 !important;
    font-size: 0.85rem;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.jl-back-link:hover {
    color: var(--brand-navy) !important;
}

.job-listings-page .jl-icon-badge i,
.job-listings-page .jl-resume-cta-icon i,
.job-listings-page .company-avatar i {
    line-height: 1;
}

@media (min-width: 1400px) {
    .job-listings-page .container {
        max-width: 1360px;
    }
}
.jl-resume-cta h3 {
    font-weight: 800;
    font-size: 1rem;
    color: var(--brand-navy);
    margin: 0 0 0.2rem;
}
.jl-resume-cta p {
    color: #6B7A99;
    font-size: 0.85rem;
    margin: 0;
}
.jl-resume-cta-btn {
    background: var(--brand-blue);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    white-space: nowrap;
}
.jl-resume-cta-btn:hover {
    background: var(--brand-navy);
    color: #fff;
}

/* ==========================================================================
   ClientSignContract v2 - "Find Your Contract" lookup step redesign
   Banner is a full flattened image (see .full-banner-image, shared with
   RecruitmentAboutUs.aspx/RecruitmentContactUs.aspx) rather than composed
   from .jl-banner text + decorative PNGs. Reuses site-wide navbar/footer
   classes as-is.
   ========================================================================== */

.sc-lookup-section {
    padding: 0.5rem 0 3rem;
}

.sc-lookup-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(11, 31, 77, 0.08);
    padding: 2rem;
    height: 100%;
}
.sc-lookup-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.sc-lookup-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    background: #E6EEFA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.sc-lookup-header h2 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--brand-navy);
    font-size: 1.15rem;
    margin: 0 0 0.15rem;
}
.sc-lookup-header p {
    color: #6B7A99;
    font-size: 0.88rem;
    margin: 0;
}
.sc-lookup-divider {
    border-top: 1px solid #EEF1F7;
    margin-bottom: 1.5rem;
}

.sc-form-label {
    font-weight: 700;
    color: var(--brand-navy);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

/* Agreement checkbox label - 1.5x the default 1rem label size, called out because
   this is the text that explains what clicking "Sign Contract" legally does. */
.sc-agree-label {
    font-size: 1.5rem;
}

.sc-info-icon {
    color: #9AAAC7;
    font-size: 0.85rem;
    cursor: help;
}
.sc-input-wrap {
    position: relative;
}
.sc-input-wrap .form-control {
    padding-right: 2.5rem;
}
.sc-input-icon {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9AAAC7;
    font-size: 1rem;
    pointer-events: none;
}

.sc-find-btn {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.75rem 1.4rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.sc-find-btn:hover, .sc-find-btn:focus {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

/* ---------- "What You Can Do Here" sidebar ---------- */

.sc-sidebar-panel {
    background: #F3F6FC;
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    height: 100%;
}
.sc-sidebar-panel h3 {
    font-weight: 800;
    color: var(--brand-navy);
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}
.sc-sidebar-underline {
    width: 40px;
    height: 3px;
    background: var(--brand-blue);
    border-radius: 2px;
    display: block;
    margin-bottom: 1.5rem;
}
.sc-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid #E2E8F4;
}
.sc-sidebar-item .jl-icon-badge {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 1.1rem;
}
.sc-sidebar-item h4 {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--brand-navy);
    margin: 0 0 0.2rem;
}
.sc-sidebar-item p {
    color: #6B7A99;
    font-size: 0.83rem;
    margin: 0;
    line-height: 1.45;
}
.sc-sidebar-item.sc-sidebar-highlight {
    background: #E6EEFA;
    border-radius: 10px;
    border-bottom: none;
    padding: 0.9rem 1rem;
    margin-bottom: 0;
}

/* ---------- CheckStatus v2 modifiers: solid-color icons, bordered sidebar item, safety note ----------
   Reuses ClientSignContract's .sc-* lookup/sidebar classes (same card shapes), with a
   few style variants this mockup uses instead: solid-blue icon circles rather than
   light-blue tinted ones, a plain white bordered card for the sidebar's last item
   instead of a light-blue highlight, and a safety-note bar inside the main card. */

.sc-icon-solid {
    background: var(--brand-blue);
    color: #fff;
}
.sc-icon-white {
    background: #fff;
    color: var(--brand-navy);
    box-shadow: 0 2px 6px rgba(11, 31, 77, 0.10);
}

.sc-sidebar-item.sc-sidebar-item-card {
    background: #fff;
    border: 1px solid #E2E8F4;
    border-radius: 10px;
    padding: 1rem;
    border-bottom: 1px solid #E2E8F4;
    margin-bottom: 0;
}

.sc-safety-note {
    background: #E6EEFA;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 1.5rem;
}
.sc-safety-note .jl-icon-badge {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 1rem;
}
.sc-safety-note h4 {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--brand-navy);
    margin: 0 0 0.2rem;
}
.sc-safety-note p {
    color: #6B7A99;
    font-size: 0.83rem;
    margin: 0;
    line-height: 1.45;
}

/* ---------- ClientSignContract-only overrides ----------
   .sc-* classes above are shared with CheckStatus.aspx (same card shapes),
   so page-specific sizing from the "Sign Your Contract" reference screenshot
   is scoped here under .sign-contract-page rather than edited into the
   shared rules, to avoid resizing CheckStatus.aspx as a side effect. */
.sign-contract-page .sc-lookup-card {
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    padding: 2.1rem;
}
.sign-contract-page .sc-lookup-icon {
    width: 74px;
    height: 74px;
    min-width: 74px;
    font-size: 1.9rem;
}
.sign-contract-page .sc-lookup-header h2 {
    font-size: 1.45rem;
}
.sign-contract-page .sc-lookup-header p {
    font-size: 0.98rem;
}
.sign-contract-page .sc-form-label {
    font-weight: 600;
    font-size: 1.05rem;
}
.sign-contract-page .sc-lookup-card .form-control {
    height: 53px;
    border: 1px solid #D7E3F5;
    border-radius: 8px;
    font-size: 0.98rem;
}
.sign-contract-page .sc-lookup-card .form-control:focus {
    border-color: #1760DE;
    box-shadow: 0 0 0 3px rgba(23, 96, 222, 0.09);
}
.sign-contract-page .sc-find-btn {
    background: linear-gradient(90deg, #073FBD, #054FCF);
    border-color: transparent;
    height: 60px;
    font-size: 1.08rem;
    letter-spacing: 0.5px;
}
.sign-contract-page .sc-find-btn:hover, .sign-contract-page .sc-find-btn:focus {
    background: var(--brand-navy-dark);
    border-color: transparent;
}

.sign-contract-page .sc-sidebar-panel {
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    padding: 1.75rem;
}
.sign-contract-page .sc-sidebar-panel h3 {
    font-size: 1.55rem;
}
.sign-contract-page .sc-sidebar-item .jl-icon-badge {
    width: 66px;
    height: 66px;
    min-width: 66px;
    font-size: 1.5rem;
}
.sign-contract-page .sc-sidebar-item h4 {
    font-size: 0.98rem;
}
.sign-contract-page .sc-sidebar-item p {
    font-size: 0.85rem;
    line-height: 1.55;
}
.sign-contract-page .sc-sidebar-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Shared by ClientSignContract.aspx and CheckStatus.aspx - purely structural
   (icon alignment), so unscoped rather than duplicated per page. */
.jl-back-link-sc {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    margin-top: 1.5rem;
}

/* ---------- CheckStatus-only overrides ----------
   Same approach as the .sign-contract-page block above: .sc-* classes are
   shared with ClientSignContract.aspx, so page-specific sizing lives here
   rather than in the shared rules. Banner is now a flattened .full-banner-image
   (like RecruitmentAboutUs/RecruitmentContactUs/ClientSignContract) rather than
   .jl-banner, so no banner-sizing override is needed here any more. */

.check-status-page .sc-lookup-card {
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    padding: 2.1rem;
}
.check-status-page .sc-lookup-icon {
    width: 74px;
    height: 74px;
    min-width: 74px;
    font-size: 1.9rem;
}
.check-status-page .sc-lookup-header h2 {
    font-size: 1.45rem;
}
.check-status-page .sc-lookup-header p {
    font-size: 0.98rem;
}
.check-status-page .sc-form-label {
    font-weight: 600;
    font-size: 1.05rem;
}
.check-status-page .sc-lookup-card .form-control {
    height: 53px;
    border: 1px solid #D7E3F5;
    border-radius: 8px;
    font-size: 0.98rem;
}
.check-status-page .sc-lookup-card .form-control:focus {
    border-color: #1760DE;
    box-shadow: 0 0 0 3px rgba(23, 96, 222, 0.09);
}
.check-status-page .sc-find-btn {
    background: linear-gradient(90deg, #073FBD, #054FCF);
    border-color: transparent;
    height: 60px;
    font-size: 1.08rem;
    letter-spacing: 0.5px;
}
.check-status-page .sc-find-btn:hover, .check-status-page .sc-find-btn:focus {
    background: var(--brand-navy-dark);
    border-color: transparent;
}

.check-status-page .sc-sidebar-panel {
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    padding: 1.75rem;
}
.check-status-page .sc-sidebar-panel h3 {
    font-size: 1.55rem;
}
.check-status-page .sc-sidebar-item .jl-icon-badge {
    width: 62px;
    height: 62px;
    min-width: 62px;
    font-size: 1.4rem;
}
.check-status-page .sc-sidebar-item h4 {
    font-size: 0.98rem;
}
.check-status-page .sc-sidebar-item p {
    font-size: 0.85rem;
    line-height: 1.55;
}
.check-status-page .sc-sidebar-item.sc-sidebar-item-card {
    margin-top: 0.25rem;
}

/* ---------- ClientApplication-only overrides (lookup screen) ----------
   Same approach as .sign-contract-page / .check-status-page: this page's
   pnlLookupEntry reuses the same .sc-lookup-card/.sc-sidebar-panel shapes,
   so page-specific sizing lives here. No .jl-banner override needed - this
   page uses pre-rendered banner images (imgBannerAdd/imgBannerEdit), not
   the shared text-over-gradient banner. */
.client-application-page .sc-lookup-card {
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    padding: 2.1rem;
}
.client-application-page .sc-lookup-icon {
    width: 74px;
    height: 74px;
    min-width: 74px;
    font-size: 1.9rem;
}
.client-application-page .sc-lookup-header h2 {
    font-size: 1.45rem;
}
.client-application-page .sc-lookup-header p {
    font-size: 0.98rem;
}
.client-application-page .sc-form-label {
    font-weight: 600;
    font-size: 1.05rem;
}
.client-application-page .sc-lookup-card .form-control {
    height: 53px;
    border: 1px solid #D7E3F5;
    border-radius: 8px;
    font-size: 0.98rem;
}
.client-application-page .sc-lookup-card .form-control:focus {
    border-color: #1760DE;
    box-shadow: 0 0 0 3px rgba(23, 96, 222, 0.09);
}
.client-application-page .sc-find-btn {
    background: linear-gradient(90deg, #073FBD, #054FCF);
    border-color: transparent;
    height: 60px;
    font-size: 1.08rem;
    letter-spacing: 0.5px;
}
.client-application-page .sc-find-btn:hover, .client-application-page .sc-find-btn:focus {
    background: var(--brand-navy-dark);
    border-color: transparent;
}

.client-application-page .sc-sidebar-panel {
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    padding: 1.75rem;
}
.client-application-page .sc-sidebar-panel h3 {
    font-size: 1.55rem;
}
.client-application-page .sc-sidebar-item .jl-icon-badge {
    width: 62px;
    height: 62px;
    min-width: 62px;
    font-size: 1.4rem;
}
.client-application-page .sc-sidebar-item h4 {
    font-size: 0.98rem;
}
.client-application-page .sc-sidebar-item p {
    font-size: 0.85rem;
    line-height: 1.55;
}
.client-application-page .sc-sidebar-item.sc-sidebar-item-card {
    margin-top: 0.25rem;
}

/* ==========================================================================
   ClientApplication two-step wizard
   Client-side-only step switching (no postback between steps) - FileUpload
   controls never survive an intermediate postback in ASP.NET, so navigating
   Step 1 -> Step 2 -> back -> forward must never round-trip to the server or
   any files already chosen in Step 2 would be silently lost. Only the final
   Submit causes a real (full, non-async) postback.
   ========================================================================== */

.app-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.app-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    opacity: 0.5;
}
.app-step.active {
    opacity: 1;
}
.app-step-circle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: #E2E8F4;
    color: var(--brand-navy);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.app-step.active .app-step-circle {
    background: var(--brand-blue);
    color: #fff;
}
.app-step-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--brand-navy);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.app-step-line {
    width: 60px;
    height: 2px;
    background: #E2E8F4;
}

.app-doc-table th {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6B7A99;
    border-bottom: 2px solid #E2E8F4;
}
.app-doc-table td {
    vertical-align: middle;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}
.app-doc-table .app-doc-name {
    font-weight: 700;
    color: var(--brand-navy);
}

@media (max-width: 576px) {
    .app-stepper {
        gap: 0.4rem;
    }
    .app-step-label {
        display: none;
    }
    .app-step-line {
        width: 28px;
    }
}

/* ---------- HelpRecruitmentClientApplication: numbered step-by-step guide ----------
   Reuses .card-brand's shadow/radius so it matches the rest of the site, with a
   circular gold step-number badge (same shape as .icon-badge) overlapping the top
   edge of the card - the row needs top margin/padding so the badge isn't clipped. */

.help-steps-row {
    margin-top: 1.75rem;
}

.help-step-card {
    position: relative;
    text-align: center;
    padding-top: 1.5rem;
}

.help-step-number {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--brand-gold);
    color: var(--brand-navy-dark);
    font-weight: 800;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(11, 31, 77, 0.18);
    border: 3px solid #fff;
}

.help-step-card .card-header {
    padding-top: 1.25rem;
}

.help-step-card ul {
    text-align: left;
    padding-left: 1.1rem;
    margin-bottom: 1rem;
}
.help-step-card ul li {
    margin-bottom: 0.4rem;
}

/* Chevron connector between step cards - desktop/tablet only, hidden once the
   cards stack to full width on phones. */
.help-step-connector {
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue-light);
    font-size: 1.5rem;
    font-weight: 700;
}
@media (min-width: 768px) {
    .help-step-connector {
        display: flex;
    }
}

/* ---------- Poster shown beside a lookup card or dashboard (Resume/CheckStatus/JobListings) ---------- */

.lookup-image img {
    max-width: 100%;
    height: auto;
    max-height: 420px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(11, 31, 77, 0.18);
}

/* ---------- JobListings: company dashboard grid + poster side by side ----------
   .brand-hero above this is untouched (same class every other page shares), so its
   height/padding stays exactly as it was - this row lives in the page body below it. */

.joblistings-hero-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.joblistings-cards {
    flex: 1 1 480px;
}

/* ---------- Buttons ---------- */

.btn-brand {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.55rem 1.4rem;
    border-radius: 8px;
}
.btn-brand:hover, .btn-brand:focus {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

.btn-brand-outline {
    background-color: transparent;
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.5rem 1.35rem;
    border-radius: 8px;
}
.btn-brand-outline:hover, .btn-brand-outline:focus {
    background-color: var(--brand-blue);
    color: #fff;
}

.btn-brand-gold {
    background-color: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--brand-navy-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.55rem 1.4rem;
    border-radius: 8px;
}
.btn-brand-gold:hover, .btn-brand-gold:focus {
    background-color: var(--brand-gold-dark);
    color: var(--brand-navy-dark);
}

/* ---------- Cards ---------- */

.card-brand {
    border: none;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(11, 31, 77, 0.10);
    overflow: hidden;
}

.card-brand .card-header {
    background: var(--brand-navy);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 3px solid var(--brand-gold);
}

.card-brand .modal-header {
    background: var(--brand-navy);
    color: #fff;
    border-bottom: 3px solid var(--brand-gold);
}
.card-brand .modal-title {
    color: #fff;
    font-weight: 700;
}

/* ---------- Badges / counts (mirrors the poster's rounded pill counters) ---------- */

.badge-brand {
    background-color: var(--brand-gold);
    color: var(--brand-navy-dark);
    font-weight: 700;
}

/* ---------- Circular icon badges (mirrors the poster's location/date/briefcase icons) ---------- */

.icon-badge {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    background-color: var(--brand-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* ---------- Checkmark list (mirrors the poster's "Requirements" checklist) ---------- */

.brand-check-list {
    list-style: none;
    padding-left: 0;
}
.brand-check-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.6rem;
}
.brand-check-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: -1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--brand-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Footer strip (mirrors the poster's dark navy contact bar) ---------- */

.brand-footer {
    background-color: var(--brand-navy);
    color: #DCE6F5;
    padding: 1.25rem 0;
    margin-top: 3rem;
}
.brand-footer a {
    color: var(--brand-gold);
    text-decoration: none;
}
.brand-footer a:hover {
    text-decoration: underline;
}

/* ---------- Form controls ---------- */

.form-control:focus, .form-select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 0.2rem rgba(30, 90, 168, 0.20);
}

label {
    font-weight: 600;
    color: var(--brand-navy);
    margin-top: 0.5rem;
}

/* Applied to free-text entry fields - visually uppercases as the person types.
   The actual value is also uppercased server-side on submit (see code-behind),
   since CSS text-transform only changes display, not the submitted value. */
.text-uppercase-input {
    text-transform: uppercase;
}

/* ---------- Mobile-first responsive helper ---------- */

/* Full-width CTA buttons on phones (better tap target than a small
   right-aligned button); reverts to normal inline sizing at tablet+. */
.btn-mobile-full {
    width: 100%;
}
@media (min-width: 768px) {
    .btn-mobile-full {
        width: auto;
    }
}

/* ---------- Links ---------- */

a.brand-link {
    color: var(--brand-blue);
    font-weight: 600;
    text-decoration: none;
}
a.brand-link:hover {
    color: var(--brand-navy);
    text-decoration: underline;
}

/* ==========================================================================
   Job listings dashboard (company grid -> position list)
   Deliberately restrained/corporate: one consistent brand color throughout
   (no per-card color cycling), subtle borders and shadows, KPI-style stat
   block instead of a large colored circle, minimal hover motion.
   ========================================================================== */

.dashboard-section-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--brand-navy);
    padding-bottom: 0.6rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #E2E6ED;
}

/* The whole card is wrapped in a LinkButton so it's clickable as a unit. */
a.company-card-link {
    text-decoration: none;
    display: block;
    height: 100%;
}

.dashboard-company-card {
    border: 1px solid #E2E6ED;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(11, 31, 77, 0.06);
    padding: 1.5rem;
    height: 100%;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
a.company-card-link:hover .dashboard-company-card {
    border-color: var(--brand-blue);
    box-shadow: 0 4px 12px rgba(11, 31, 77, 0.10);
}

.company-avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 7px;
    background: linear-gradient(145deg, var(--brand-blue) 0%, var(--brand-navy-dark) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-card-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--brand-text);
    margin: 0;
}

.company-card-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 1rem;
    margin-top: 0.25rem;
    border-top: 1px solid #E2E6ED;
}
.company-card-stat .stat-number {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-navy);
    line-height: 1;
}
.company-card-stat .stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #7A869A;
}

/* Company detail view (position table) */

.company-detail-card {
    border: 1px solid #E2E6ED;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(11, 31, 77, 0.06);
    padding: 1.5rem;
}

.position-table {
    margin-bottom: 0;
}
.position-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7A869A;
    border-bottom: 1px solid #E2E6ED;
    padding-bottom: 0.6rem;
}
.position-table tbody tr {
    border-bottom: 1px solid #E2E6ED;
}
.position-table tbody tr:last-child {
    border-bottom: none;
}
.position-table td {
    padding: 0.9rem 0.5rem;
    vertical-align: middle;
}
.position-table th:first-child, .position-table td:first-child {
    padding-left: 0;
}
.position-table .position-title {
    font-weight: 700;
    color: var(--brand-text);
}
.position-table .position-subtitle {
    color: #7A869A;
    font-size: 0.85rem;
}

/* ==========================================================================
   RecruitmentAboutUs - company profile page
   Reuses site-wide navbar/footer, .jl-banner, .jl-icon-badge, .portal-card,
   .brand-check-list, .accreditation-item, and .btn-hero-primary as-is; only
   the sections unique to this page (mission copy, stat cards, accreditation
   cards, closing CTA band) get new classes, scoped under .about-us-page.
   ========================================================================== */

.about-us-page .jl-banner {
    min-height: 178px;
    display: flex;
    align-items: center;
}

.au-section {
    padding: 3.5rem 0;
}
.au-section-alt {
    background-color: var(--brand-bg);
}

.au-eyebrow {
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.au-heading {
    font-weight: 800;
    font-size: clamp(1.9rem, 3.2vw, 2.4rem);
    line-height: 1.2;
    color: var(--brand-navy);
    margin-bottom: 1rem;
}
.au-heading-accent {
    color: var(--brand-blue);
}
.au-body {
    color: #4A5670;
    font-size: 1.02rem;
    line-height: 1.65;
    margin-bottom: 1.1rem;
}
.au-tagline {
    color: var(--brand-navy);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
    margin-bottom: 0;
}
.au-tagline i {
    color: var(--brand-blue);
}

.au-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.au-stat-card {
    background: #fff;
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(11, 31, 77, 0.05);
    padding: 1.5rem 1rem;
    text-align: center;
}
.au-stat-card .jl-icon-badge {
    margin: 0 auto 0.9rem;
}
.au-stat-number {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--brand-navy);
    line-height: 1.1;
}
.au-stat-label {
    color: #6B7A99;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 0.3rem;
}

.au-check-list li {
    font-size: 0.98rem;
    line-height: 1.5;
}

.au-accred-card {
    background: #fff;
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(11, 31, 77, 0.05);
    padding: 1.75rem;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}
.au-accred-card h4 {
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--brand-navy);
    margin-bottom: 0.35rem;
}
.au-accred-card p {
    color: #6B7A99;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
}

.au-cta {
    background: linear-gradient(120deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
    color: #fff;
    padding: 3.5rem 0;
    text-align: center;
}
.au-cta h2 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1.75rem;
    margin-bottom: 0.6rem;
}
.au-cta p {
    color: #C7D3EA;
    font-size: 1.02rem;
    max-width: 560px;
    margin: 0 auto 1.75rem;
}
.au-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.au-cta-secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.6);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.au-cta-secondary:hover {
    background-color: #fff;
    color: var(--brand-navy);
    border-color: #fff;
}

/* ==========================================================================
   RecruitmentContactUs - office directory + maps
   Reuses .au-section/.au-cta/.jl-icon-badge/.portal-heading-line from
   RecruitmentAboutUs.aspx as-is; only the quick-contact row and office cards
   (with their real-vs-placeholder map variants) are new, scoped under
   .contact-us-page. This page's banner is a full flattened image (see
   .full-banner-image below, shared with RecruitmentAboutUs.aspx) rather than
   the text-over-gradient .jl-banner used elsewhere.
   ========================================================================== */

/* Full-width flattened banner image (heading/subtext baked into the graphic) -
   used in place of .jl-banner on pages where the banner was supplied as a
   single pre-designed image rather than composed from text + decorative PNGs. */
.full-banner-image {
    line-height: 0;
}
.full-banner-image img {
    display: block;
    width: 100%;
    height: auto;
}

.cu-quick-card {
    background: #fff;
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(11, 31, 77, 0.05);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.cu-quick-card h4 {
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--brand-navy);
    margin-bottom: 0.3rem;
}
.cu-quick-card p {
    color: #4A5670;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}
.cu-quick-card p a {
    color: var(--brand-blue);
    font-weight: 600;
    text-decoration: none;
}
.cu-quick-card p a:hover {
    text-decoration: underline;
}

.cu-office-card {
    background: #fff;
    border: 1px solid #E2E6ED;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(11, 31, 77, 0.05);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.cu-office-body {
    padding: 1.5rem 1.5rem 1.25rem;
}
.cu-office-badge {
    display: inline-block;
    background: #E6EEFA;
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}
.cu-office-badge-muted {
    background: #EEF1F7;
    color: #7A869A;
}
.cu-office-card h3 {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--brand-navy);
    margin-bottom: 0.6rem;
}
.cu-office-address {
    color: var(--brand-navy);
    font-weight: 600;
    font-size: 0.92rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.cu-office-address i {
    color: var(--brand-blue);
    margin-top: 0.2rem;
}
.cu-office-detail {
    color: #6B7A99;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.cu-office-map {
    width: 100%;
    height: 240px;
    border-top: 1px solid #E2E6ED;
    margin-top: auto;
}
.cu-office-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.cu-office-map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--brand-bg);
    color: #9AAAC7;
}
.cu-office-map-placeholder i {
    font-size: 1.8rem;
}
.cu-office-map-placeholder span {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cu-office-card-placeholder {
    background: var(--brand-bg);
}
.cu-office-card-placeholder .cu-office-map {
    border-top: 1px solid #E2E6ED;
}

/* ==========================================================================
   Mobile responsiveness
   Bootstrap's grid is mobile-first by design (col-md-* etc. only apply at
   that breakpoint and up, with col-12 as the explicit small-screen base
   applied throughout the markup) - these rules tighten spacing/sizing that
   Bootstrap doesn't handle on its own: hero banner scale, card padding,
   and the header logo, all of which look oversized/cramped at phone widths
   if left at their desktop values.
   ========================================================================== */

@media (max-width: 576px) {
    .brand-header-bar {
        padding: 0.5rem 0;
    }
    .brand-header-bar img {
        height: 38px;
    }

    .brand-hero {
        padding: 1.75rem 0;
    }
    .brand-hero h1 {
        font-size: 1.6rem;
    }
    .brand-hero p {
        font-size: 0.9rem;
    }

    .landing-hero {
        padding: 1.75rem 0;
    }
    .lookup-image img {
        max-height: 280px;
    }

    h2 {
        font-size: 1.4rem;
    }
    h5 {
        font-size: 1.05rem;
    }

    .landing-navbar {
        padding: 0.6rem 0;
    }
    .landing-navbar .navbar-brand img {
        height: 40px;
    }
    .landing-hero-v2 {
        /* cover-cropping the wide (1000x563) photo into a much narrower/shorter
           box zooms in hard, so the scrim covers more of the width here to
           keep text legible regardless of exactly what part of the photo ends
           up behind it - but still clears to fully transparent (not a
           lingering haze) so the photo itself doesn't look washed out. */
        background-image: linear-gradient(90deg, #EEF4FC 0%, #EEF4FC 45%, rgba(238, 244, 252, 0) 65%), url('Images/hero-visual.png');
        padding: 2rem 0 1.75rem;
        min-height: 340px;
    }
    .hero-heading {
        font-size: 1.9rem;
    }
    .btn-hero-primary, .btn-hero-secondary {
        width: 100%;
        justify-content: center;
    }
    .applicant-portal-section {
        padding: 2.25rem 0;
    }
    .hiring-title {
        font-size: 1.6rem;
    }
    .hiring-categories {
        grid-template-columns: 1fr;
    }
    .footer-bottom-row {
        flex-direction: column;
        text-align: center;
    }

    .au-section {
        padding: 2.25rem 0;
    }
    .au-stats-grid {
        grid-template-columns: 1fr;
    }
    .au-cta {
        padding: 2.25rem 0;
    }
    .au-cta h2 {
        font-size: 1.4rem;
    }
    .au-cta-row {
        flex-direction: column;
        align-items: stretch;
    }
    .cu-office-map {
        height: 200px;
    }

    .jl-banner {
        padding: 2rem 0;
        min-height: auto;
    }
    .jl-banner h1 {
        font-size: 2rem;
        gap: 0.6rem;
    }
    .jl-banner p {
        font-size: 1rem;
    }
    .jl-banner-dash {
        width: 30px;
    }
    .jl-banner-decor-left,
    .jl-banner-decor-right {
        opacity: 0.35;
    }
    .jl-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .jl-location-filter-wrap {
        width: 100%;
        min-width: 0;
    }
    .jl-resume-cta {
        flex-direction: column;
        align-items: flex-start;
    }
    .jl-resume-cta-btn {
        width: 100%;
        justify-content: center;
    }
    .jl-company-card, .jl-sidebar-panel {
        padding: 1.25rem;
    }

    .sc-lookup-card, .sc-sidebar-panel {
        padding: 1.4rem;
    }

    .card-brand, .dashboard-company-card, .company-detail-card, .landing-info-card {
        padding: 1.1rem;
    }

    .job-count-badge {
        width: 56px;
        height: 56px;
    }

    .company-avatar {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 0.95rem;
    }

    .company-card-stat .stat-number {
        font-size: 1.35rem;
    }

    /* Buttons and links that sit side-by-side on desktop stack more
       comfortably full-width on narrow screens. */
    .brand-footer {
        padding: 1rem 0;
        font-size: 0.9rem;
    }
}