/* ==========================================================
   VINCIT MANAGEMENT CONSULTING
   FILE       : 12-talent-acquisition.css
   PURPOSE    : Talent Acquisition Service Page
   VERSION    : 1.0.0
========================================================== */


/* ==========================================================
   SERVICE HERO
========================================================== */

.service-page-hero {
    position: relative;

    padding: 105px 0 115px;

    background: var(--color-navy);

    color: var(--color-white);

    overflow: hidden;
}


.service-page-hero::after {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -190px;
    top: -190px;

    border: 1px solid rgba(200, 162, 77, 0.22);

    border-radius: 50%;

    pointer-events: none;
}


.service-page-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(260px, 0.6fr);

    gap: 80px;

    align-items: end;
}


.service-page-hero__content {
    max-width: 850px;
}


.service-page-hero__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color: var(--color-gold);

    font-size: 12px;

    font-weight: var(--weight-bold);

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.service-page-hero__eyebrow::before {
    content: "";

    width: 34px;
    height: 1px;

    background: var(--color-gold);
}


.service-page-hero h1 {
    max-width: 850px;

    margin: 0;

    color: var(--color-white);

    font-family: var(--font-heading);

    font-size: clamp(52px, 6vw, 88px);

    font-weight: var(--weight-bold);

    line-height: 1.02;

    letter-spacing: -0.03em;
}


.service-page-hero h1 span {
    color: var(--color-emerald);
}


.service-page-hero__content > p {
    max-width: 700px;

    margin: 30px 0 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 18px;

    line-height: 1.8;
}


.service-page-hero__actions {
    margin-top: 35px;
}


.service-page-hero__actions .btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;
}


.service-page-hero__statement {
    position: relative;

    padding-left: 30px;

    border-left: 1px solid
        rgba(200, 162, 77, 0.55);
}


.service-page-hero__statement-number {
    display: block;

    margin-bottom: 18px;

    color: var(--color-gold);

    font-size: 12px;

    font-weight: var(--weight-bold);

    letter-spacing: 0.16em;
}


.service-page-hero__statement p {
    margin: 0;

    color: rgba(255, 255, 255, 0.75);

    font-family: var(--font-heading);

    font-size: 25px;

    line-height: 1.35;
}


/* ==========================================================
   INTRO
========================================================== */

.service-intro {
    padding: 120px 0;

    background: var(--color-white);

    color: var(--color-navy);
}


.service-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 100px;
}


.service-intro .section-eyebrow,
.talent-process .section-eyebrow,
.service-page-cta .section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--color-emerald);

    font-size: 12px;

    font-weight: var(--weight-bold);

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.service-intro .section-eyebrow::before,
.talent-process .section-eyebrow::before,
.service-page-cta .section-eyebrow::before {
    content: "";

    width: 34px;
    height: 1px;

    background: var(--color-gold);
}


.service-intro h2 {
    max-width: 620px;

    margin: 25px 0 0;

    color: var(--color-navy);

    font-family: var(--font-heading);

    font-size: clamp(43px, 4.5vw, 68px);

    line-height: 1.08;

    letter-spacing: -0.025em;
}


.service-intro h2 span {
    display: block;

    color: var(--color-emerald);
}


.service-intro__content {
    max-width: 690px;
}


.service-intro__content p {
    margin: 0 0 25px;

    color: var(--color-text-muted);

    font-size: 16px;

    line-height: 1.85;
}


.service-intro__content .service-intro__lead {
    color: var(--color-navy);

    font-size: 20px;

    line-height: 1.75;
}


/* ==========================================================
   TALENT PROCESS
========================================================== */

.talent-process {
    padding: 120px 0 130px;

    background: #F7F8F7;

    color: var(--color-navy);
}


.talent-process__header {
    display: grid;

    grid-template-columns:
        minmax(0, 0.65fr)
        minmax(0, 1.35fr);

    gap: 80px;

    align-items: end;

    margin-bottom: 70px;
}


.talent-process__header h2 {
    margin: 0;

    color: var(--color-navy);

    font-family: var(--font-heading);

    font-size: clamp(43px, 4.5vw, 68px);

    line-height: 1.06;

    letter-spacing: -0.025em;
}


.talent-process__header h2 span {
    display: block;

    color: var(--color-emerald);
}


/* ==========================================================
   STAGE LIST
========================================================== */

.talent-process__list {
    border-top: 1px solid var(--color-border);
}


.talent-stage {
    display: grid;

    grid-template-columns:
        70px
        minmax(260px, 0.9fr)
        minmax(300px, 1.1fr);

    gap: 45px;

    padding: 50px 0;

    border-bottom: 1px solid var(--color-border);

    transition:
        background-color var(--transition-normal),
        padding var(--transition-normal);
}


.talent-stage:hover {
    padding-left: 20px;

    padding-right: 20px;

    background: var(--color-white);
}


.talent-stage__number {
    color: var(--color-gold);

    font-size: 12px;

    font-weight: var(--weight-bold);

    letter-spacing: 0.16em;
}


.talent-stage__main h3 {
    margin: 0 0 15px;

    color: var(--color-navy);

    font-family: var(--font-heading);

    font-size: clamp(28px, 2.5vw, 38px);

    line-height: 1.15;
}


.talent-stage__main p {
    max-width: 460px;

    margin: 0;

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.75;
}


.talent-stage__details {
    padding-left: 30px;

    border-left: 1px solid var(--color-border);
}


.talent-stage__details > span {
    display: block;

    margin-bottom: 16px;

    color: var(--color-emerald);

    font-size: 12px;

    font-weight: var(--weight-bold);

    letter-spacing: 0.04em;
}


.talent-stage__details ul {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px 25px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.talent-stage__details li {
    position: relative;

    padding-left: 17px;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.55;
}


.talent-stage__details li::before {
    content: "";

    position: absolute;

    left: 0;

    top: 9px;

    width: 5px;
    height: 5px;

    background: var(--color-gold);

    border-radius: 50%;
}


/* ==========================================================
   CTA
========================================================== */

.service-page-cta {
    padding: 120px 0;

    background: var(--color-emerald);

    color: var(--color-white);
}


.service-page-cta__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.8fr);

    gap: 100px;

    align-items: end;
}


.service-page-cta .section-eyebrow {
    color: var(--color-white);
}


.service-page-cta h2 {
    max-width: 650px;

    margin: 25px 0 0;

    color: var(--color-white);

    font-family: var(--font-heading);

    font-size: clamp(48px, 5vw, 76px);

    line-height: 1.04;

    letter-spacing: -0.025em;
}


.service-page-cta h2 span {
    display: block;

    color: var(--color-gold);
}


.service-page-cta__inner p {
    max-width: 550px;

    margin: 0;

    color: rgba(255, 255, 255, 0.85);

    font-size: 16px;

    line-height: 1.8;
}


.service-page-cta__link {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 30px;

    padding-bottom: 9px;

    border-bottom: 1px solid var(--color-gold);

    color: var(--color-white);

    font-size: 14px;

    font-weight: var(--weight-bold);
}


.service-page-cta__link span {
    color: var(--color-gold);

    font-size: 18px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .service-page-hero {
        padding: 90px 0 100px;
    }


    .service-page-hero__grid,
    .service-intro__grid,
    .service-page-cta__inner {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .talent-process__header {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .talent-stage {
        grid-template-columns:
            55px
            minmax(0, 1fr);

        gap: 25px;
    }


    .talent-stage__details {
        grid-column: 2;

        padding-left: 0;

        padding-top: 25px;

        border-left: 0;

        border-top: 1px solid var(--color-border);
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .service-page-hero {
        padding: 75px 0 85px;
    }


    .service-page-hero h1 {
        font-size: 48px;
    }


    .service-page-hero__content > p {
        font-size: 16px;
    }


    .service-intro {
        padding: 80px 0;
    }


    .service-intro h2,
    .talent-process__header h2 {
        font-size: 42px;
    }


    .talent-process {
        padding: 80px 0 90px;
    }


    .talent-stage {
        grid-template-columns: 42px minmax(0, 1fr);

        gap: 18px;

        padding: 35px 0;
    }


    .talent-stage:hover {
        padding-left: 12px;

        padding-right: 12px;
    }


    .talent-stage__main h3 {
        font-size: 28px;
    }


    .talent-stage__details {
        grid-column: 2;
    }


    .talent-stage__details ul {
        grid-template-columns: 1fr;
    }


    .service-page-cta {
        padding: 80px 0;
    }


    .service-page-cta h2 {
        font-size: 46px;
    }

}

/* ==========================================================
   PROCESS HIGHLIGHTS
   Appears directly below Stage 06 — Onboarding Success
========================================================== */

.talent-process__highlights {
    grid-column: 1 / -1;

    position: relative;

    margin-top: 42px;

    padding: 0 22px 22px;

    background: #073957;

    border: 1px solid rgba(226, 169, 58, 0.55);

    border-radius: 4px;

    box-shadow: 0 14px 30px rgba(7, 57, 87, 0.12);
}


/* ==========================================================
   PROCESS HIGHLIGHTS TITLE
========================================================== */

.talent-process__highlights-title {
    position: relative;

    display: table;

    margin: -15px auto 0;

    padding: 7px 24px;

    background: #e2a93a;

    color: #073957;

    font-family: "Manrope", sans-serif;

    font-size: 13px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    border-radius: 18px;

    z-index: 2;
}


/* ==========================================================
   HIGHLIGHT ITEMS
========================================================== */

.talent-process__highlights-items {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    margin-top: 18px;
}


.talent-process__highlights-items span {
    position: relative;

    padding: 4px 25px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.5;

    text-align: center;

    white-space: nowrap;
}


/* ==========================================================
   GOLD SEPARATORS
========================================================== */

.talent-process__highlights-items span:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 1px;
    height: 22px;

    background: rgba(226, 169, 58, 0.65);

    transform: translateY(-50%);
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .talent-process__highlights {
        margin-top: 32px;

        padding: 0 15px 18px;
    }


    .talent-process__highlights-title {
        padding: 7px 18px;

        font-size: 11px;
    }


    .talent-process__highlights-items {
        margin-top: 14px;
    }


    .talent-process__highlights-items span {
        width: 50%;

        padding: 8px 10px;

        font-size: 11px;

        white-space: normal;
    }


    .talent-process__highlights-items span:nth-child(2)::after,
    .talent-process__highlights-items span:nth-child(4)::after {
        display: none;
    }

}
/* ==========================================================
   TALENT ACQUISITION SPECIALISATIONS
   Matched / Centered with Process Section
========================================================== */

.talent-process__specialisations {
    grid-column: 1 / -1;

    width: min(100%, 920px);

    margin: 42px auto 8px;

    position: relative;
}


/* ==========================================================
   SPECIALISATION ROW
========================================================== */

.talent-specialisation {
    position: relative;

    display: grid;

    grid-template-columns: 230px 1fr;

    align-items: stretch;

    gap: 10px;

    margin-bottom: 10px;

    background: transparent;

    border: 0;

    box-shadow: none;

    transition: transform 0.25s ease;
}


.talent-specialisation:hover {
    transform: translateY(-1px);
}


/* ==========================================================
   GOLD TITLE PANEL
========================================================== */

.talent-specialisation__title {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    min-height: 72px;

    padding: 15px 22px;

    background: #d9a441;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 13px;

    font-weight: 800;

    line-height: 1.35;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


/* ==========================================================
   RIGHT CONTENT PANEL
========================================================== */

.talent-specialisation__content {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 72px;

    padding: 15px 30px;

    background: #edf4fa;

    color: #073957;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.55;

    text-align: center;

    border: 1px solid rgba(7, 57, 87, 0.07);

    overflow: hidden;

    clip-path: polygon(
        8px 0,
        100% 0,
        calc(100% - 8px) 100%,
        0 100%
    );
}


/* ==========================================================
   SUBTLE GREEN / GOLD ACCENT
========================================================== */

.talent-specialisation__content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: #2e8b57;
}


.talent-specialisation:nth-child(2)
.talent-specialisation__content::before {
    background: #d9a441;
}


.talent-specialisation:nth-child(3)
.talent-specialisation__content::before {
    background: #2e8b57;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .talent-process__specialisations {
        width: 100%;

        margin-top: 30px;
    }


    .talent-specialisation {
        grid-template-columns: 1fr;

        gap: 0;

        margin-bottom: 12px;
    }


    .talent-specialisation:hover {
        transform: none;
    }


    .talent-specialisation__title {
        min-height: auto;

        justify-content: flex-start;

        padding: 14px 18px;

        font-size: 12px;
    }


    .talent-specialisation__content {
        min-height: 64px;

        padding: 14px 20px;

        font-size: 12px;

        text-align: center;

        clip-path: none;
    }

}

/* ==========================================================
   TALENT ACQUISITION HERO
   Creative Split Layout — Option C

   Purpose :
   Premium first-view Talent Acquisition hero

   Version :
   2.0.0
========================================================== */


/* ==========================================================
   HERO
========================================================== */

.talent-hero {
    position: relative;

    background: var(--color-navy);

    color: var(--color-white);

    overflow: hidden;

    padding: 55px 0 75px;
}


/* ==========================================================
   HERO GRID
========================================================== */

.talent-hero__grid {

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    gap: 65px;

    align-items: center;

    min-height: 570px;
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.talent-hero__content {
    position: relative;

    z-index: 5;

    max-width: 700px;
}


/* ==========================================================
   EYEBROW
========================================================== */

.talent-hero__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color: var(--color-gold);

    font-size: 12px;

    font-weight: var(--weight-bold);

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.talent-hero__eyebrow::before {

    content: "";

    width: 34px;

    height: 1px;

    background: var(--color-gold);
}


/* ==========================================================
   TITLE
========================================================== */

.talent-hero__content h1 {

    max-width: 700px;

    margin: 0;

    color: var(--color-white);

    font-family: var(--font-heading);

    font-size: clamp(
        54px,
        5.1vw,
        76px
    );

    font-weight: var(--weight-bold);

    line-height: 0.98;

    letter-spacing: -0.035em;
}


.talent-hero__content h1 span {

    color: var(--color-emerald);
}


/* ==========================================================
   LEAD
========================================================== */

.talent-hero__lead {

    max-width: 600px;

    margin: 34px 0 0;

    color: rgba(255,255,255,0.82);

    font-size: 17px;

    line-height: 1.75;
}


/* ==========================================================
   CTA
========================================================== */

.talent-hero__button {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 32px;

    padding: 15px 25px;

    background: var(--color-emerald);

    color: var(--color-white);

    font-size: 14px;

    font-weight: var(--weight-bold);

    border-radius: 5px;

    transition:
        transform var(--transition-normal),
        background var(--transition-normal);
}


.talent-hero__button span {

    color: var(--color-gold);

    font-size: 18px;
}


.talent-hero__button:hover {

    background: #23804d;

    transform: translateY(-2px);
}


/* ==========================================================
   RIGHT SERVICE AREA
========================================================== */

.talent-hero__services {

    position: relative;

    min-height: 510px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 18px;

    padding: 35px 0 35px 20px;
}


/* ==========================================================
   SUBTLE BACKGROUND VISUAL
========================================================== */

.talent-hero__visual {

    position: absolute;

    inset: 0;

    z-index: 0;

    opacity: 0.20;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(200,162,77,0.22),
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(46,139,87,0.20),
            transparent 35%
        );

    pointer-events: none;
}


/* ==========================================================
   SERVICE CARD
========================================================== */

.talent-hero__card {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        48px
        50px
        minmax(0, 1fr)
        35px;

    align-items: center;

    min-height: 125px;

    margin-left: 20px;

    overflow: hidden;

    background: rgba(255,255,255,0.96);

    color: var(--color-navy);

    box-shadow:
        0 18px 40px rgba(0,0,0,0.18);

    transform: skewX(-3deg);

    transition:
        transform 250ms ease,
        box-shadow 250ms ease;
}


/* ==========================================================
   CARD HOVER
========================================================== */

.talent-hero__card:hover {

    transform:
        skewX(-3deg)
        translateX(-6px);

    box-shadow:
        0 22px 50px rgba(0,0,0,0.24);
}


/* ==========================================================
   UN-SKEW CONTENT
========================================================== */

.talent-hero__card > * {

    transform: skewX(3deg);
}


/* ==========================================================
   NUMBER
========================================================== */

.talent-hero__card-number {

    align-self: stretch;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-white);

    font-size: 12px;

    font-weight: var(--weight-bold);

    letter-spacing: 0.08em;
}


/* ==========================================================
   ICON
========================================================== */

.talent-hero__card-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    margin-left: 8px;

    border: 1px solid currentColor;

    border-radius: 50%;

    font-size: 18px;

    font-weight: 600;
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.talent-hero__card-content {

    padding: 18px 18px;
}


.talent-hero__card-content h2 {

    margin: 0 0 6px;

    color: var(--color-navy);

    font-family: var(--font-body);

    font-size: 17px;

    font-weight: var(--weight-bold);

    line-height: 1.25;

    text-transform: uppercase;
}


.talent-hero__card-content p {

    margin: 0;

    color: #36566b;

    font-size: 13px;

    line-height: 1.5;
}


/* ==========================================================
   ARROW
========================================================== */

.talent-hero__card-arrow {

    padding-right: 15px;

    color: var(--color-navy);

    font-size: 22px;

    transition:
        transform 200ms ease;
}


.talent-hero__card:hover
.talent-hero__card-arrow {

    transform: translateX(4px);
}


/* ==========================================================
   CARD ACCENTS
========================================================== */

.talent-hero__card--gold
.talent-hero__card-number {

    background: var(--color-gold);
}


.talent-hero__card--green
.talent-hero__card-number {

    background: var(--color-emerald);
}


.talent-hero__card--navy
.talent-hero__card-number {

    background: var(--color-navy);
}


/* ==========================================================
   GOLD CARD ACCENT
========================================================== */

.talent-hero__card--gold {

    border-left: 5px solid var(--color-gold);
}


/* ==========================================================
   GREEN CARD ACCENT
========================================================== */

.talent-hero__card--green {

    border-left: 5px solid var(--color-emerald);
}


/* ==========================================================
   NAVY CARD ACCENT
========================================================== */

.talent-hero__card--navy {

    border-left: 5px solid var(--color-navy);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .talent-hero__grid {

        grid-template-columns:
            0.9fr
            1.1fr;

        gap: 35px;
    }


    .talent-hero__content h1 {

        font-size: clamp(
            50px,
            5.5vw,
            68px
        );
    }


    .talent-hero__services {

        padding-left: 0;
    }


    .talent-hero__card {

        margin-left: 0;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 850px) {

    .talent-hero {

        padding: 75px 0 65px;
    }


    .talent-hero__grid {

        grid-template-columns: 1fr;

        min-height: auto;

        gap: 55px;
    }


    .talent-hero__content {

        max-width: 720px;
    }


    .talent-hero__services {

        min-height: auto;

        padding: 0;
    }


    .talent-hero__card {

        transform: skewX(-2deg);

        margin-left: 0;
    }


    .talent-hero__card > * {

        transform: skewX(2deg);
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 600px) {

    .talent-hero {

        padding: 60px 0 55px;
    }


    .talent-hero__content h1 {

        font-size: 48px;

        line-height: 1;
    }


    .talent-hero__lead {

        font-size: 16px;

        line-height: 1.7;
    }


    .talent-hero__card {

        grid-template-columns:
            38px
            42px
            minmax(0, 1fr)
            25px;

        min-height: 110px;
    }


    .talent-hero__card-icon {

        width: 32px;

        height: 32px;

        margin-left: 4px;

        font-size: 15px;
    }


    .talent-hero__card-content {

        padding: 15px 10px;
    }


    .talent-hero__card-content h2 {

        font-size: 14px;
    }


    .talent-hero__card-content p {

        font-size: 11px;
    }

}