/* ============================================================
   Career Detail / Career GPS
   career_detail.css

   FINAL STRUCTURE
   ------------------------------------------------------------
   01 Decision Hero
   02 Decision Process
   03 After the Choice
   04 Looking Back
   05 Career Context
   06 Other Decisions / Same Dilemma

   Design:
   White 70 / Deep Navy 20 / Blue 10
   ============================================================ */


/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */

   :root {

    /* Brand */

    --detail-navy-deep:
        #071b30;

    --detail-navy:
        #0d2744;

    --detail-blue:
        #1d5f9e;

    --detail-blue-hover:
        #174f83;

    --detail-blue-soft:
        #eef5fb;

    --detail-blue-soft-2:
        #f6faff;


    /* Base */

    --detail-bg:
        #f7f9fb;

    --detail-bg-soft:
        #fbfcfd;

    --detail-surface:
        #ffffff;

    --detail-surface-soft:
        #f9fbfd;


    /* Text */

    --detail-text:
        #17283a;

    --detail-text-strong:
        #071b30;

    --detail-muted:
        #637386;

    --detail-muted-light:
        #8997a6;


    /* Border */

    --detail-line:
        #dce5ee;

    --detail-line-soft:
        #eaf0f5;

    --detail-line-strong:
        #bdd1e3;


    /* Shadow */

    --detail-shadow-xs:
        0 2px 8px
        rgba(7, 27, 48, 0.025);

    --detail-shadow-sm:
        0 8px 22px
        rgba(7, 27, 48, 0.045);

    --detail-shadow-md:
        0 16px 40px
        rgba(7, 27, 48, 0.06);

    --detail-shadow-lg:
        0 22px 58px
        rgba(7, 27, 48, 0.075);


    /* Radius */

    --detail-radius-xl:
        24px;

    --detail-radius-lg:
        19px;

    --detail-radius-md:
        14px;

    --detail-radius-sm:
        10px;


    /* Width */

    --detail-wide:
        1220px;

    --detail-reading:
        820px;
}


/* ============================================================
   02. BASE
   ============================================================ */

html {
    scroll-behavior: smooth;
}


body {

    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            #f8fafc 420px,
            var(--detail-bg) 100%
        );

    color:
        var(--detail-text);

    font-family:
        'Roboto',
        'Noto Sans JP',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
}


main.career-detail-page {

    box-sizing:
        border-box;

    width:
        calc(100% - 220px);

    min-height:
        calc(100vh - 92px);

    margin-left:
        220px;

    margin-top:
        92px;

    padding:
        30px
        36px
        88px;

    overflow-x:
        hidden;
}


/* ============================================================
   03. COMMON WIDTH
   ============================================================ */

.career-detail-page
.career-gps-section,

.career-detail-page
.career-next-story,

.career-detail-page
.career-detail-back,

.career-detail-page
.career-decision-hero {

    width:
        100%;

    max-width:
        var(--detail-wide);

    margin-left:
        auto;

    margin-right:
        auto;

    box-sizing:
        border-box;
}


.career-detail-page
.career-gps-section {

    margin-bottom:
        30px;
}


/* ============================================================
   04. COMMON SECTION HEADER
   ============================================================ */

.career-detail-page
.career-section-label {

    margin:
        0
        0
        7px;

    color:
        var(--detail-blue);

    font-size:
        0.64rem;

    font-weight:
        800;

    letter-spacing:
        0.17em;

    line-height:
        1.4;
}


.career-detail-page
.career-section-header {

    position:
        static;

    display:
        grid;

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

    align-items:
        end;

    gap:
        34px;

    width:
        100%;

    min-width:
        0;

    margin:
        0
        0
        23px;

    padding:
        0;

    background:
        transparent;

    box-shadow:
        none;
}


.career-detail-page
.career-section-header__main {

    min-width:
        0;
}


.career-detail-page
.career-section-title {

    margin:
        0;

    color:
        var(--detail-text-strong);

    font-size:
        1.38rem;

    font-weight:
        800;

    letter-spacing:
        -0.025em;

    line-height:
        1.42;

    overflow-wrap:
        anywhere;
}


.career-detail-page
.career-section-description {

    min-width:
        0;

    max-width:
        570px;

    margin:
        0;

    color:
        var(--detail-muted);

    font-size:
        0.8rem;

    line-height:
        1.8;

    overflow-wrap:
        anywhere;
}


/* ============================================================
   05. BACK NAVIGATION
   ============================================================ */

.career-detail-page
.career-detail-back {

    margin-bottom:
        18px;
}


.career-detail-page
.career-detail-back__link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--detail-muted);

    font-size:
        0.73rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color 0.16s ease,
        transform 0.16s ease;
}


.career-detail-page
.career-detail-back__link:hover {

    color:
        var(--detail-blue);

    transform:
        translateX(-2px);
}


.career-detail-page
.career-detail-back__arrow {

    color:
        var(--detail-blue);

    font-size:
        0.86rem;
}


/* ============================================================
   06. DECISION HERO
   ============================================================ */

.career-detail-page
.career-decision-hero {

    position:
        relative;

    overflow:
        hidden;

    margin-bottom:
        34px;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-xl);

    background:
        var(--detail-surface);

    box-shadow:
        var(--detail-shadow-lg);
}


.career-detail-page
.career-decision-hero::before {

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        5px;

    background:
        linear-gradient(
            180deg,
            var(--detail-blue),
            var(--detail-navy)
        );

    content:
        '';
}


.career-detail-page
.career-decision-hero::after {

    position:
        absolute;

    top:
        -175px;

    right:
        -125px;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(29, 95, 158, 0.065) 0%,
            rgba(29, 95, 158, 0.02) 48%,
            rgba(29, 95, 158, 0) 72%
        );

    pointer-events:
        none;

    content:
        '';
}


.career-detail-page
.career-decision-hero__main {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.38fr)
        minmax(320px, 0.62fr);

    gap:
        38px;

    padding:
        39px
        40px
        37px;
}


/* ============================================================
   07. HERO - DECISION
   ============================================================ */

.career-detail-page
.career-decision-hero__decision {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;

    overflow:
        hidden;
}


.career-detail-page
.career-decision-hero__context {

    margin:
        0
        0
        9px;

    color:
        var(--detail-muted);

    font-size:
        0.72rem;

    font-weight:
        600;

    line-height:
        1.6;
}


.career-detail-page
.career-decision-hero__title {

    width:
        100%;

    max-width:
        720px;

    margin:
        0;

    color:
        var(--detail-navy-deep);

    font-size:
        clamp(
            1.85rem,
            2.65vw,
            2.45rem
        );

    font-weight:
        800;

    letter-spacing:
        -0.04em;

    line-height:
        1.3;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


/* ============================================================
   08. HERO - DILEMMA SUMMARY
   ============================================================ */

.career-detail-page
.career-decision-hero__dilemma {

    width:
        100%;

    min-width:
        0;

    max-width:
        720px;

    margin-top:
        20px;
}


.career-detail-page
.career-decision-hero__dilemma[hidden] {

    display:
        none;
}


.career-detail-page
.career-decision-hero__dilemma-label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--detail-muted);

    font-size:
        0.68rem;

    font-weight:
        700;
}


.career-detail-page
.career-decision-hero__dilemma-text {

    display:
        -webkit-box;

    width:
        100%;

    max-width:
        100%;

    margin:
        0;

    overflow:
        hidden;

    color:
        var(--detail-text);

    font-size:
        0.88rem;

    font-weight:
        500;

    line-height:
        1.78;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        3;
}


/* ============================================================
   09. HERO - SELECTED PATH
   ============================================================ */

.career-detail-page
.career-decision-hero__choice {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    width:
        100%;

    max-width:
        285px;

    min-width:
        0;

    margin-top:
        24px;

    padding:
        13px
        16px;

    box-sizing:
        border-box;

    border:
        1px solid
        var(--detail-line-strong);

    border-radius:
        var(--detail-radius-md);

    background:
        linear-gradient(
            135deg,
            var(--detail-blue-soft),
            #ffffff
        );
}


.career-detail-page
.career-decision-hero__choice-label {

    flex:
        0 0 auto;

    color:
        var(--detail-muted);

    font-size:
        0.66rem;

    font-weight:
        700;
}


.career-detail-page
.career-decision-hero__choice-value {

    min-width:
        0;

    margin-left:
        auto;

    color:
        var(--detail-navy);

    font-size:
        1rem;

    font-weight:
        800;

    text-align:
        right;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


.career-detail-page
.career-decision-hero__choice-value[data-path="change"] {

    color:
        var(--detail-blue);
}


.career-detail-page
.career-decision-hero__choice-value[data-path="stay"] {

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


.career-detail-page
.career-decision-hero__choice-value[data-path="internal"] {

    color:
        #365e86;
}


/* ============================================================
   10. HERO - META
   ============================================================ */

.career-detail-page
.career-decision-hero__meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px
        14px;

    margin-top:
        15px;

    color:
        var(--detail-muted-light);

    font-size:
        0.64rem;

    line-height:
        1.55;
}


.career-detail-page
.career-decision-hero__date:empty,

.career-detail-page
.career-decision-hero__related-career:empty {

    display:
        none;
}


.career-detail-page
.career-decision-hero__lead[hidden] {

    display:
        none;
}


/* ============================================================
   11. HERO - PERSON
   ============================================================ */

.career-detail-page
.career-decision-person {

    position:
        relative;

    align-self:
        stretch;

    min-width:
        0;

    padding-left:
        32px;

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


.career-detail-page
.career-decision-person__identity {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    min-width:
        0;

    margin-top:
        16px;
}


.career-detail-page
.career-decision-person__body {

    flex:
        1;

    min-width:
        0;
}


.career-detail-page
.career-profile__avatar {

    display:
        flex;

    flex:
        0 0 auto;

    align-items:
        center;

    justify-content:
        center;

    width:
        70px;

    height:
        70px;

    border:
        1px solid
        var(--detail-line-strong);

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            var(--detail-blue-soft)
        );

    color:
        var(--detail-navy);

    font-size:
        1.45rem;

    font-weight:
        800;

    box-shadow:
        inset 0 0 0 5px
        rgba(255,255,255,0.8);
}


.career-detail-page
.career-profile__name {

    margin:
        0;

    color:
        var(--detail-text-strong);

    font-size:
        1.12rem;

    font-weight:
        800;

    line-height:
        1.4;

    overflow-wrap:
        anywhere;
}


.career-detail-page
.career-profile__headline {

    margin:
        5px
        0
        0;

    color:
        var(--detail-muted);

    font-size:
        0.71rem;

    line-height:
        1.68;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


.career-detail-page
.career-profile__tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        13px;
}


.career-detail-page
.tag-pill {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        4px
        9px;

    border:
        1px solid
        #d7e4ef;

    border-radius:
        999px;

    background:
        var(--detail-blue-soft-2);

    color:
        #506a83;

    font-size:
        0.59rem;

    font-weight:
        700;

    overflow-wrap:
        anywhere;
}


.career-detail-page
.career-decision-person__current {

    margin-top:
        19px;

    padding-top:
        16px;

    border-top:
        1px solid
        var(--detail-line-soft);
}


.career-detail-page
.career-decision-person__current-label {

    margin:
        0
        0
        10px;

    color:
        var(--detail-muted-light);

    font-size:
        0.56rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;
}


.career-detail-page
.career-profile__snapshot-grid {

    display:
        grid;

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

    gap:
        8px;
}


.career-detail-page
.snapshot-item {

    min-width:
        0;

    padding:
        10px
        11px;

    border:
        1px solid
        var(--detail-line-soft);

    border-radius:
        10px;

    background:
        var(--detail-surface-soft);
}


.career-detail-page
.snapshot-item__label {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--detail-muted-light);

    font-size:
        0.54rem;

    font-weight:
        700;
}


.career-detail-page
.snapshot-item__value {

    display:
        block;

    min-width:
        0;

    overflow:
        hidden;

    color:
        var(--detail-text);

    font-size:
        0.72rem;

    font-weight:
        800;

    line-height:
        1.45;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* ============================================================
   12. DECISION PROCESS
   ============================================================ */

.career-detail-page
.career-decision-story-section,

.career-detail-page
.career-turning-section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        35px
        38px
        39px;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-xl);

    background:
        linear-gradient(
            145deg,
            #f7fbff 0%,
            #ffffff 58%,
            #f8fafc 100%
        );

    box-shadow:
        var(--detail-shadow-md);
}


.career-detail-page
.career-decision-story-section::before,

.career-detail-page
.career-turning-section::before {

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        4px;

    background:
        linear-gradient(
            180deg,
            var(--detail-blue),
            var(--detail-navy)
        );

    content:
        '';
}


.career-detail-page
.career-turning-list {

    position:
        relative;

    z-index:
        1;

    min-width:
        0;
}


.career-detail-page
.career-decision-story-card {

    width:
        100%;

    max-width:
        970px;

    margin:
        0
        auto;

    padding:
        29px
        37px
        15px;

    box-sizing:
        border-box;

    overflow:
        hidden;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-lg);

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

    box-shadow:
        var(--detail-shadow-sm);
}


/* ============================================================
   13. DECISION PROCESS STEPS
   ============================================================ */

.career-detail-page
.career-decision-step {

    display:
        grid;

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

    gap:
        18px;

    min-width:
        0;
}


.career-detail-page
.career-decision-step__rail {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}


.career-detail-page
.career-decision-step__number {

    display:
        flex;

    flex:
        0 0 auto;

    align-items:
        center;

    justify-content:
        center;

    width:
        31px;

    height:
        31px;

    border:
        1px solid
        var(--detail-line-strong);

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        var(--detail-blue);

    font-size:
        0.54rem;

    font-weight:
        800;

    box-shadow:
        0 3px 9px
        rgba(29,95,158,0.06);
}


.career-detail-page
.career-decision-step__line {

    width:
        1px;

    flex:
        1;

    min-height:
        34px;

    margin-top:
        5px;

    background:
        linear-gradient(
            180deg,
            rgba(29,95,158,0.35),
            rgba(29,95,158,0.06)
        );
}


.career-detail-page
.career-decision-step:last-child
.career-decision-step__line {

    visibility:
        hidden;
}


.career-detail-page
.career-decision-step__body {

    width:
        100%;

    min-width:
        0;

    max-width:
        var(--detail-reading);

    padding-bottom:
        28px;
}


.career-detail-page
.career-decision-step__phase {

    margin:
        0
        0
        4px;

    color:
        var(--detail-blue);

    font-size:
        0.55rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;
}


.career-detail-page
.career-decision-step__question {

    margin:
        0;

    color:
        var(--detail-text-strong);

    font-size:
        0.9rem;

    font-weight:
        800;

    line-height:
        1.52;

    overflow-wrap:
        anywhere;
}


.career-detail-page
.career-decision-step__answer {

    width:
        100%;

    max-width:
        100%;

    margin:
        9px
        0
        0;

    color:
        var(--detail-text);

    font-size:
        0.82rem;

    line-height:
        1.92;

    white-space:
        pre-line;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


/* ============================================================
   14. FINAL DECISION EMPHASIS
   ============================================================ */

.career-detail-page
.career-decision-step--decision
.career-decision-step__body {

    box-sizing:
        border-box;

    margin-bottom:
        17px;

    padding:
        17px
        20px;

    border:
        1px solid
        #c8dcec;

    border-radius:
        var(--detail-radius-md);

    background:
        linear-gradient(
            135deg,
            var(--detail-blue-soft),
            #ffffff
        );
}


/* ============================================================
   15. VALUE WALL
   ============================================================ */

.career-detail-page
.career-value-wall {

    position:
        relative;

    z-index:
        4;

    margin-top:
        -24px;

    padding-top:
        58px;
}


.career-detail-page
.career-value-wall[hidden] {

    display:
        none;
}


.career-detail-page
.career-value-wall__fade {

    position:
        absolute;

    top:
        0;

    right:
        -20px;

    left:
        -20px;

    height:
        116px;

    background:
        linear-gradient(
            180deg,
            rgba(247,249,251,0),
            rgba(247,249,251,0.84),
            #f7f9fb
        );

    pointer-events:
        none;
}


.career-detail-page
.career-value-wall__content {

    position:
        relative;

    z-index:
        2;

    max-width:
        670px;

    margin:
        0
        auto;

    padding:
        27px
        30px
        25px;

    box-sizing:
        border-box;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-lg);

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

    box-shadow:
        var(--detail-shadow-lg);

    text-align:
        center;
}


.career-detail-page
.career-value-wall__eyebrow {

    margin:
        0
        0
        7px;

    color:
        var(--detail-blue);

    font-size:
        0.59rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;
}


.career-detail-page
.career-value-wall__title {

    margin:
        0;

    color:
        var(--detail-navy-deep);

    font-size:
        1.22rem;

    font-weight:
        800;
}


.career-detail-page
.career-value-wall__description {

    max-width:
        560px;

    margin:
        11px
        auto
        0;

    color:
        var(--detail-muted);

    font-size:
        0.74rem;

    line-height:
        1.82;
}


.career-detail-page
.career-value-wall__benefits {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        6px;

    margin-top:
        16px;
}


.career-detail-page
.career-value-wall__benefits span {

    padding:
        5px
        10px;

    border:
        1px solid
        #d7e5f0;

    border-radius:
        999px;

    background:
        var(--detail-blue-soft);

    color:
        #496b89;

    font-size:
        0.59rem;

    font-weight:
        700;
}


.career-detail-page
.career-value-wall__cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        238px;

    margin-top:
        19px;

    padding:
        12px
        25px;

    border-radius:
        999px;

    background:
        var(--detail-navy);

    color:
        #ffffff;

    font-size:
        0.75rem;

    font-weight:
        800;

    text-decoration:
        none;

    box-shadow:
        0 10px 23px
        rgba(13,39,68,0.19);

    transition:
        transform 0.16s ease,
        background 0.16s ease;
}


.career-detail-page
.career-value-wall__cta:hover {

    transform:
        translateY(-1px);

    background:
        var(--detail-blue);
}


.career-detail-page
.career-value-wall__login {

    margin:
        9px
        0
        0;

    color:
        var(--detail-muted-light);

    font-size:
        0.61rem;
}


.career-detail-page
.career-value-wall__login a {

    color:
        var(--detail-blue);

    font-weight:
        700;
}


/* ============================================================
   16. AFTER THE CHOICE
   ============================================================ */

.career-detail-page
.career-outcome-section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        35px
        38px
        37px;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-xl);

    background:
        #ffffff;

    box-shadow:
        var(--detail-shadow-md);
}


.career-detail-page
.career-outcome-section::after {

    position:
        absolute;

    top:
        -125px;

    right:
        -110px;

    width:
        350px;

    height:
        350px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(29,95,158,0.045),
            rgba(29,95,158,0)
        );

    content:
        '';

    pointer-events:
        none;
}


/* ============================================================
   17. AFTER THE CHOICE - STORY
   ============================================================ */

.career-detail-page
.career-after-choice-story {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

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

    gap:
        12px;

    width:
        100%;

    max-width:
        930px;

    margin-bottom:
        25px;
}


.career-detail-page
.career-after-choice-story[hidden] {

    display:
        none;
}


.career-detail-page
.career-after-choice-item {

    min-width:
        0;

    padding:
        19px
        21px;

    box-sizing:
        border-box;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-md);

    background:
        #fafbfd;
}


.career-detail-page
.career-after-choice-item--result {

    grid-column:
        1 / -1;

    padding:
        22px
        24px;

    border-color:
        #c8dceb;

    background:
        linear-gradient(
            135deg,
            var(--detail-blue-soft),
            #ffffff
        );
}


.career-detail-page
.career-after-choice-item--unexpected {

    background:
        #fbfcfd;
}


.career-detail-page
.career-after-choice-item--learning {

    border-left:
        3px solid
        var(--detail-blue);

    background:
        linear-gradient(
            90deg,
            rgba(238,245,251,0.72),
            #ffffff
        );
}


.career-detail-page
.career-after-choice-item[hidden] {

    display:
        none;
}


.career-detail-page
.career-after-choice-item__label {

    margin:
        0
        0
        5px;

    color:
        var(--detail-blue);

    font-size:
        0.56rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.career-detail-page
.career-after-choice-item__title {

    margin:
        0;

    color:
        var(--detail-navy-deep);

    font-size:
        0.88rem;

    font-weight:
        800;

    line-height:
        1.5;
}


.career-detail-page
.career-after-choice-item__text {

    width:
        100%;

    margin:
        9px
        0
        0;

    color:
        var(--detail-text);

    font-size:
        0.8rem;

    line-height:
        1.9;

    white-space:
        pre-line;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


/* ============================================================
   18. OUTCOME KPI
   ============================================================ */

.career-detail-page
.career-outcome__kpis {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 230px)
        );

    gap:
        10px;

    max-width:
        930px;
}


.career-detail-page
.career-outcome__kpis:empty {

    display:
        none;
}


.career-detail-page
.outcome-kpi {

    min-width:
        0;

    padding:
        13px
        14px;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-sm);

    background:
        linear-gradient(
            145deg,
            #fafcff,
            #ffffff
        );
}


.career-detail-page
.outcome-kpi__label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--detail-muted-light);

    font-size:
        0.58rem;

    font-weight:
        700;
}


.career-detail-page
.outcome-kpi__value {

    display:
        block;

    color:
        var(--detail-navy);

    font-size:
        1.03rem;

    font-weight:
        800;

    line-height:
        1.36;

    overflow-wrap:
        anywhere;
}


/* ============================================================
   19. BEFORE / AFTER
   ============================================================ */

.career-detail-page
.career-outcome-comparison {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

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

    align-items:
        stretch;

    gap:
        14px;

    max-width:
        860px;

    margin-top:
        24px;
}


.career-detail-page
.career-outcome-comparison[hidden] {

    display:
        none;
}


.career-detail-page
.career-outcome-comparison__column {

    min-width:
        0;

    padding:
        19px
        20px;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-md);

    background:
        #fafbfd;
}


.career-detail-page
.career-outcome-comparison__column--after {

    border-color:
        #c7dced;

    background:
        linear-gradient(
            135deg,
            var(--detail-blue-soft),
            #ffffff
        );
}


.career-detail-page
.career-outcome-comparison__eyebrow {

    margin:
        0
        0
        3px;

    color:
        var(--detail-blue);

    font-size:
        0.55rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.career-detail-page
.career-outcome-comparison__title {

    margin:
        0
        0
        14px;

    color:
        var(--detail-navy);

    font-size:
        0.91rem;

    font-weight:
        800;
}


.career-detail-page
.career-outcome-comparison__value {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        9px
        0;

    border-top:
        1px solid
        var(--detail-line-soft);
}


.career-detail-page
.career-outcome-comparison__value span {

    color:
        var(--detail-muted);

    font-size:
        0.66rem;
}


.career-detail-page
.career-outcome-comparison__value strong {

    min-width:
        0;

    color:
        var(--detail-text-strong);

    font-size:
        0.82rem;

    font-weight:
        800;

    text-align:
        right;

    overflow-wrap:
        anywhere;
}


.career-detail-page
.career-outcome-comparison__arrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    color:
        var(--detail-blue);

    font-size:
        1.15rem;

    font-weight:
        700;
}


/* ============================================================
   20. OUTCOME CHART
   ============================================================ */

.career-detail-page
.career-outcome__chart {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    max-width:
        880px;

    height:
        315px;

    margin-top:
        25px;

    box-sizing:
        border-box;
}


.career-detail-page
.career-outcome__chart[hidden] {

    display:
        none;
}


.career-detail-page
.career-outcome__chart canvas {

    width:
        100% !important;

    height:
        100% !important;
}


.career-detail-page
.career-outcome__chart.is-compact {

    height:
        auto !important;

    min-height:
        0 !important;

    margin-top:
        22px;
}


/* ============================================================
   21. OUTCOME EMPTY
   ============================================================ */

.career-detail-page
.career-outcome-empty {

    max-width:
        700px;

    padding:
        17px
        0
        0;

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


.career-detail-page
.career-outcome-empty__label {

    margin:
        0
        0
        7px;

    color:
        var(--detail-blue);

    font-size:
        0.57rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.career-detail-page
.career-outcome-empty__text {

    margin:
        0;

    color:
        var(--detail-text);

    font-size:
        0.76rem;

    font-weight:
        700;

    line-height:
        1.7;
}


.career-detail-page
.career-outcome-empty__sub {

    margin:
        6px
        0
        0;

    color:
        var(--detail-muted-light);

    font-size:
        0.67rem;

    line-height:
        1.65;
}


/* ============================================================
   22. OUTCOME GUEST
   ============================================================ */

.career-detail-page
.career-outcome-guest {

    position:
        relative;

    display:
        grid;

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

    grid-template-areas:
        "icon title cta"
        "icon text  cta";

    align-items:
        center;

    column-gap:
        16px;

    row-gap:
        4px;

    box-sizing:
        border-box;

    width:
        100%;

    padding:
        20px
        22px;

    overflow:
        hidden;

    border:
        1px solid
        #ccdeed;

    border-radius:
        var(--detail-radius-md);

    background:
        linear-gradient(
            135deg,
            #f7fbff,
            #ffffff
        );
}


.career-detail-page
.career-outcome-guest::before {

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        3px;

    background:
        var(--detail-blue);

    content:
        '';
}


.career-detail-page
.career-outcome-guest__icon {

    grid-area:
        icon;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        41px;

    height:
        41px;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        50%;

    background:
        #ffffff;

    font-size:
        0.86rem;
}


.career-detail-page
.career-outcome-guest__title {

    grid-area:
        title;

    margin:
        0;

    color:
        var(--detail-navy);

    font-size:
        0.89rem;

    font-weight:
        800;
}


.career-detail-page
.career-outcome-guest__text {

    grid-area:
        text;

    margin:
        0;

    color:
        var(--detail-muted);

    font-size:
        0.7rem;

    line-height:
        1.7;
}


.career-detail-page
.career-outcome-guest__cta {

    grid-area:
        cta;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        155px;

    padding:
        10px
        17px;

    border-radius:
        999px;

    background:
        var(--detail-navy);

    color:
        #ffffff;

    font-size:
        0.68rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        background 0.16s ease,
        transform 0.16s ease;
}


.career-detail-page
.career-outcome-guest__cta:hover {

    background:
        var(--detail-blue);

    transform:
        translateY(-1px);
}


/* Legacy */

.career-detail-page
.career-outcome-lock {

    display:
        none !important;
}


/* ============================================================
   23. LOOKING BACK
   ============================================================ */

.career-detail-page
.career-looking-back-section {

    position:
        relative;

    padding:
        35px
        38px
        39px;

    overflow:
        hidden;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-xl);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f8fc 100%
        );

    box-shadow:
        var(--detail-shadow-sm);
}


.career-detail-page
.career-looking-back-section[hidden] {

    display:
        none;
}


.career-detail-page
.career-looking-back {

    width:
        100%;

    max-width:
        920px;
}


/* ============================================================
   24. LOOKING BACK - SAME CHOICE
   ============================================================ */

.career-detail-page
.career-looking-back__answer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        18px
        20px;

    border:
        1px solid
        #c8dceb;

    border-radius:
        var(--detail-radius-md);

    background:
        #ffffff;
}


.career-detail-page
.career-looking-back__answer[hidden] {

    display:
        none;
}


.career-detail-page
.career-looking-back__question {

    color:
        var(--detail-muted);

    font-size:
        0.75rem;

    font-weight:
        700;
}


.career-detail-page
.career-looking-back__value {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        85px;

    padding:
        8px
        17px;

    border-radius:
        999px;

    background:
        var(--detail-navy);

    color:
        #ffffff;

    font-size:
        0.77rem;

    font-weight:
        800;
}


/* ============================================================
   25. LOOKING BACK - REASON
   ============================================================ */

.career-detail-page
.career-looking-back__reason {

    margin-top:
        12px;

    padding:
        18px
        21px;

    border-left:
        3px solid
        var(--detail-blue);

    border-radius:
        0
        var(--detail-radius-md)
        var(--detail-radius-md)
        0;

    background:
        rgba(238,245,251,0.72);
}


.career-detail-page
.career-looking-back__reason[hidden] {

    display:
        none;
}


.career-detail-page
.career-looking-back__reason-label {

    margin:
        0
        0
        7px;

    color:
        var(--detail-blue);

    font-size:
        0.6rem;

    font-weight:
        800;
}


.career-detail-page
.career-looking-back__reason-text {

    margin:
        0;

    color:
        var(--detail-text);

    font-size:
        0.8rem;

    line-height:
        1.88;

    white-space:
        pre-line;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


/* ============================================================
   26. LOOKING BACK - MESSAGE TO PAST SELF
   ============================================================ */

.career-detail-page
.career-looking-back__message {

    margin-top:
        29px;

    padding-top:
        27px;

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


.career-detail-page
.career-looking-back__message[hidden] {

    display:
        none;
}


.career-detail-page
.career-looking-back__message-title {

    max-width:
        650px;

    margin:
        0
        0
        22px;

    color:
        var(--detail-navy-deep);

    font-size:
        1.12rem;

    font-weight:
        800;

    letter-spacing:
        -0.02em;

    line-height:
        1.55;
}


.career-detail-page
.career-message-layout {

    position:
        relative;

    max-width:
        760px;

    padding:
        9px
        0
        9px
        48px;
}


.career-detail-page
.career-message-layout::before {

    position:
        absolute;

    top:
        2px;

    bottom:
        2px;

    left:
        17px;

    width:
        2px;

    background:
        linear-gradient(
            180deg,
            var(--detail-blue),
            rgba(29,95,158,0.10)
        );

    content:
        '';
}


.career-detail-page
.career-message-layout__quote {

    position:
        absolute;

    top:
        -24px;

    left:
        -1px;

    color:
        rgba(29,95,158,0.13);

    font-family:
        Georgia,
        serif;

    font-size:
        5rem;

    line-height:
        1;
}


.career-detail-page
.career-message {

    position:
        relative;

    z-index:
        1;

    max-width:
        680px;

    margin:
        0;

    padding:
        6px
        0
        12px;

    border:
        0;
}


.career-detail-page
.career-message p {

    margin:
        0;

    color:
        #24384c;

    font-size:
        clamp(
            1.02rem,
            1.45vw,
            1.22rem
        );

    font-weight:
        500;

    letter-spacing:
        0.01em;

    line-height:
        1.95;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


/* ============================================================
   27. MESSAGE LOCK
   ============================================================ */

.career-detail-page
.career-message.is-locked {

    max-height:
        92px;

    overflow:
        hidden;
}


.career-detail-page
.career-message.is-locked::after {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    height:
        48px;

    background:
        linear-gradient(
            180deg,
            rgba(247,249,251,0),
            var(--detail-bg)
        );

    content:
        '';
}


.career-detail-page
.career-message-lock {

    max-width:
        630px;

    margin:
        4px
        0
        0
        48px;
}


.career-detail-page
.career-message-lock[hidden] {

    display:
        none;
}


.career-detail-page
.career-message-lock__fade {

    display:
        none;
}


.career-detail-page
.career-message-lock__content {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding-top:
        11px;

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


.career-detail-page
.career-message-lock__content p {

    margin:
        0
        auto
        0
        0;

    color:
        var(--detail-muted-light);

    font-size:
        0.65rem;
}


.career-detail-page
.career-message-lock__content a {

    flex:
        0 0 auto;

    padding:
        9px
        16px;

    border-radius:
        999px;

    background:
        var(--detail-navy);

    color:
        #ffffff;

    font-size:
        0.64rem;

    font-weight:
        800;

    text-decoration:
        none;
}


/* ============================================================
   27-A. CAREER TALK
   ============================================================ */

   .career-detail-page
   .career-talk-section {
   
       position:
           relative;
   }
   
   
   .career-detail-page
   .career-talk-card {
   
       display:
           grid;
   
       grid-template-columns:
           minmax(0, 1fr)
           240px;
   
       align-items:
           center;
   
       gap:
           38px;
   
       padding:
           34px
           38px;
   
       box-sizing:
           border-box;
   
       border:
           1px solid
           var(--detail-line);
   
       border-radius:
           var(--detail-radius-xl);
   
       background:
           linear-gradient(
               135deg,
               #ffffff 0%,
               var(--detail-blue-soft-2) 100%
           );
   
       box-shadow:
           var(--detail-shadow-sm);
   }
   
   
   .career-detail-page
   .career-talk-card__main {
   
       min-width:
           0;
   }
   
   
   .career-detail-page
   .career-talk-card__title {
   
       margin:
           7px
           0
           10px;
   
       color:
           var(--detail-navy-deep);
   
       font-size:
           1.3rem;
   
       font-weight:
           800;
   
       letter-spacing:
           -0.02em;
   
       line-height:
           1.5;
   }
   
   
   .career-detail-page
   .career-talk-card__description {
   
       max-width:
           650px;
   
       margin:
           0;
   
       color:
           var(--detail-muted);
   
       font-size:
           0.78rem;
   
       line-height:
           1.85;
   }
   
   
   .career-detail-page
   .career-talk-card__message {
   
       max-width:
           650px;
   
       margin:
           17px
           0
           0;
   
       padding:
           15px
           0
           0;
   
       border-top:
           1px solid
           var(--detail-line-soft);
   
       color:
           var(--detail-text);
   
       font-size:
           0.76rem;
   
       line-height:
           1.82;
   }
   
   
   .career-detail-page
   .career-talk-card__action {
   
       min-width:
           0;
   
       text-align:
           center;
   }
   
   
   .career-detail-page
   .career-talk-card__meta {
   
       display:
           flex;
   
       align-items:
           baseline;
   
       justify-content:
           center;
   
       gap:
           8px;
   
       margin-bottom:
           14px;
   
       color:
           var(--detail-muted);
   
       font-size:
           0.72rem;
   }
   
   
   .career-detail-page
   .career-talk-card__meta strong {
   
       color:
           var(--detail-navy);
   
       font-size:
           1.15rem;
   
       font-weight:
           800;
   }
   
   
   .career-detail-page
   .career-talk-card__separator {
   
       color:
           var(--detail-muted-light);
   }
   
   
   .career-detail-page
   .career-talk-card__cta {
   
       display:
           inline-flex;
   
       align-items:
           center;
   
       justify-content:
           center;
   
       width:
           100%;
   
       min-height:
           44px;
   
       padding:
           11px
           18px;
   
       box-sizing:
           border-box;
   
       border:
           0;
   
       border-radius:
           999px;
   
       background:
           var(--detail-navy);
   
       color:
           #ffffff;
   
       font-family:
           inherit;
   
       font-size:
           0.72rem;
   
       font-weight:
           800;
   
       cursor:
           pointer;
   
       box-shadow:
           0 10px 23px
           rgba(13,39,68,0.16);
   
       transition:
           transform 0.16s ease,
           background 0.16s ease;
   }
   
   
   .career-detail-page
   .career-talk-card__cta:hover {
   
       transform:
           translateY(-1px);
   
       background:
           var(--detail-blue);
   }
   
   
   .career-detail-page
   .career-talk-card__note {
   
       margin:
           9px
           0
           0;
   
       color:
           var(--detail-muted-light);
   
       font-size:
           0.6rem;
   }
   
   
   /* ============================================================
      CAREER TALK - TABLET / MOBILE
      ============================================================ */
   
   @media (max-width: 900px) {
   
       .career-detail-page
       .career-talk-card {
   
           grid-template-columns:
               1fr;
   
           gap:
               25px;
   
           padding:
               27px
               22px;
       }
   
   
       .career-detail-page
       .career-talk-card__action {
   
           max-width:
               320px;
   
           text-align:
               left;
       }
   
   
       .career-detail-page
       .career-talk-card__meta {
   
           justify-content:
               flex-start;
       }
   
   }
   
   
   @media (max-width: 599px) {
   
       .career-detail-page
       .career-talk-card {
   
           gap:
               22px;
   
           padding:
               22px
               15px;
   
           border-radius:
               17px;
       }
   
   
       .career-detail-page
       .career-talk-card__title {
   
           font-size:
               1.08rem;
       }
   
   
       .career-detail-page
       .career-talk-card__description,
   
       .career-detail-page
       .career-talk-card__message {
   
           font-size:
               0.72rem;
       }
   
   
       .career-detail-page
       .career-talk-card__action {
   
           max-width:
               none;
       }
   
   
       .career-detail-page
       .career-talk-card__cta {
   
           width:
               100%;
       }
   
   }


/* ============================================================
   27-B. CAREER TALK MODAL
   ============================================================ */

   body.career-talk-modal-open {
    overflow:
        hidden;
}


.career-talk-modal {

    position:
        fixed;

    z-index:
        9999;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    box-sizing:
        border-box;
}


.career-talk-modal[hidden] {
    display:
        none;
}


.career-talk-modal__backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(7, 27, 48, 0.52);

    backdrop-filter:
        blur(3px);
}


.career-talk-modal__dialog {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    max-width:
        620px;

    max-height:
        calc(100vh - 48px);

    overflow-y:
        auto;

    padding:
        34px;

    box-sizing:
        border-box;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-xl);

    background:
        #ffffff;

    box-shadow:
        0 28px 80px
        rgba(7, 27, 48, 0.24);
}


.career-talk-modal__close {

    position:
        absolute;

    top:
        16px;

    right:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--detail-muted);

    font-size:
        1.5rem;

    cursor:
        pointer;
}


.career-talk-modal__header {
    padding-right:
        36px;
}


.career-talk-modal__title {

    margin:
        7px
        0
        9px;

    color:
        var(--detail-navy-deep);

    font-size:
        1.35rem;

    font-weight:
        800;

    line-height:
        1.5;
}


.career-talk-modal__description {

    margin:
        0;

    color:
        var(--detail-muted);

    font-size:
        0.76rem;

    line-height:
        1.8;
}


.career-talk-modal__summary {

    display:
        flex;

    align-items:
        baseline;

    gap:
        9px;

    margin-top:
        21px;

    padding:
        13px
        15px;

    border:
        1px solid
        var(--detail-line-soft);

    border-radius:
        var(--detail-radius-sm);

    background:
        var(--detail-blue-soft-2);

    color:
        var(--detail-muted);

    font-size:
        0.7rem;
}


.career-talk-modal__summary strong {

    color:
        var(--detail-navy);

    font-size:
        1rem;

    font-weight:
        800;
}


.career-talk-form {

    margin-top:
        24px;
}


.career-talk-form__field {

    margin-top:
        17px;
}


.career-talk-form__field:first-child {
    margin-top:
        0;
}


.career-talk-form__field label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--detail-text-strong);

    font-size:
        0.7rem;

    font-weight:
        800;
}


.career-talk-form__field label span {

    margin-left:
        6px;

    color:
        var(--detail-muted-light);

    font-size:
        0.59rem;

    font-weight:
        500;
}


.career-talk-form__field input,

.career-talk-form__field textarea {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        11px
        13px;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-sm);

    outline:
        none;

    background:
        #ffffff;

    color:
        var(--detail-text);

    font-family:
        inherit;

    font-size:
        0.78rem;

    line-height:
        1.6;
}


.career-talk-form__field textarea {

    resize:
        vertical;

    min-height:
        120px;
}


.career-talk-form__field input:focus,

.career-talk-form__field textarea:focus {

    border-color:
        var(--detail-blue);

    box-shadow:
        0 0 0 3px
        rgba(29, 95, 158, 0.08);
}


.career-talk-form__notice {

    margin:
        20px
        0
        0;

    color:
        var(--detail-muted-light);

    font-size:
        0.62rem;

    line-height:
        1.7;
}


.career-talk-form__submit {

    width:
        100%;

    margin-top:
        18px;

    padding:
        13px
        18px;

    border:
        0;

    border-radius:
        999px;

    background:
        var(--detail-navy);

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        0.75rem;

    font-weight:
        800;

    cursor:
        pointer;
}


.career-talk-form__submit:hover {

    background:
        var(--detail-blue);
}


/* ============================================================
  CAREER TALK - SUCCESS
  ============================================================ */

  .career-talk-modal
  .career-section-label {
  
      margin:
          0
          0
          7px;
  
      color:
          var(--detail-blue);
  
      font-size:
          0.64rem;
  
      font-weight:
          800;
  
      letter-spacing:
          0.17em;
  
      line-height:
          1.4;
  }
  
  
  .career-talk-success {
  
      padding:
          10px
          2px
          4px;
  
      text-align:
          center;
  }
  
  
  .career-talk-success__title {
  
      margin:
          8px
          0
          12px;
  
      color:
          var(--detail-navy-deep);
  
      font-size:
          1.4rem;
  
      font-weight:
          800;
  
      letter-spacing:
          -0.02em;
  
      line-height:
          1.5;
  }
  
  
  .career-talk-success__description {
  
      max-width:
          440px;
  
      margin:
          0
          auto;
  
      color:
          var(--detail-muted);
  
      font-size:
          0.76rem;
  
      line-height:
          1.85;
  }
  
  
  .career-talk-success__close {
  
      display:
          inline-flex;
  
      align-items:
          center;
  
      justify-content:
          center;
  
      min-width:
          190px;
  
      margin-top:
          26px;
  
      padding:
          12px
          24px;
  
      border:
          0;
  
      border-radius:
          999px;
  
      background:
          var(--detail-navy);
  
      color:
          #ffffff;
  
      font-family:
          inherit;
  
      font-size:
          0.72rem;
  
      font-weight:
          800;
  
      cursor:
          pointer;
  
      box-shadow:
          0 10px 23px
          rgba(13, 39, 68, 0.16);
  
      transition:
          transform 0.16s ease,
          background 0.16s ease;
  }
   
   
   .career-talk-success__close:hover {
   
       transform:
           translateY(-1px);
   
       background:
           var(--detail-blue);
   }
   
   
   /* 送信中 */
   .career-talk-form__submit:disabled {
   
       cursor:
           wait;
   
       opacity:
           0.65;
   }


@media (max-width: 599px) {

    .career-talk-modal {

        align-items:
            flex-end;

        padding:
            10px;
    }


    .career-talk-modal__dialog {

        max-height:
            calc(100vh - 20px);

        padding:
            27px
            18px
            22px;

        border-radius:
            20px;
    }


    .career-talk-modal__title {

        font-size:
            1.15rem;
    }

}


/* ============================================================
   28. CAREER CONTEXT
   ============================================================ */

.career-detail-page
.career-journey-section {

    padding:
        32px
        30px
        30px;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-xl);

    background:
        var(--detail-surface);

    box-shadow:
        var(--detail-shadow-sm);
}


.career-detail-page
.career-journey {

    width:
        100%;

    overflow-x:
        auto;

    padding-top:
        2px;
}


.career-detail-page
.career-journey__timeline {

    width:
        100%;
}


.career-detail-page
.journey-track {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    gap:
        clamp(
            24px,
            4vw,
            65px
        );

    width:
        100%;

    min-width:
        max-content;

    padding:
        15px
        22px
        8px;

    box-sizing:
        border-box;
}


.career-detail-page
.journey-track::before {

    position:
        absolute;

    top:
        32px;

    right:
        6%;

    left:
        6%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(29,95,158,0.06),
            rgba(29,95,158,0.5) 20%,
            rgba(29,95,158,0.5) 80%,
            rgba(29,95,158,0.06)
        );

    content:
        '';
}


.career-detail-page
.journey-node {

    position:
        relative;

    z-index:
        1;

    flex:
        0
        1
        210px;

    width:
        190px;

    min-width:
        145px;

    max-width:
        220px;

    padding:
        0
        8px;

    text-align:
        center;
}


.career-detail-page
.journey-node__year {

    display:
        block;

    height:
        15px;

    margin-bottom:
        7px;

    color:
        var(--detail-muted-light);

    font-size:
        0.62rem;

    font-weight:
        700;
}


.career-detail-page
.journey-node__marker {

    width:
        12px;

    height:
        12px;

    margin:
        0
        auto
        10px;

    border:
        3px solid
        #ffffff;

    border-radius:
        50%;

    background:
        var(--detail-blue);

    box-shadow:
        0 0 0 1px
        #b9d1e5,
        0 4px 11px
        rgba(29,95,158,0.13);
}


.career-detail-page
.journey-node__company {

    margin:
        0;

    color:
        var(--detail-navy);

    font-size:
        0.85rem;

    font-weight:
        800;

    line-height:
        1.43;

    overflow-wrap:
        anywhere;
}


.career-detail-page
.journey-node__role {

    margin:
        4px
        0
        0;

    color:
        var(--detail-muted);

    font-size:
        0.67rem;

    line-height:
        1.52;

    overflow-wrap:
        anywhere;
}


.career-detail-page
.journey-node__department {

    margin:
        3px
        0
        0;

    color:
        var(--detail-muted);

    font-size:
        0.65rem;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;
}


.career-detail-page
.journey-node__period {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--detail-muted-light);

    font-size:
        0.58rem;
}


/* ============================================================
   29. OTHER DECISIONS
   ============================================================ */

.career-detail-page
.career-other-decisions-section {

    padding:
        32px
        37px
        36px;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-xl);

    background:
        #ffffff;

    box-shadow:
        var(--detail-shadow-sm);
}


.career-detail-page
.career-other-decisions-section[hidden] {

    display:
        none;
}


.career-detail-page
.career-other-decisions {

    display:
        grid;

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

    gap:
        11px;
}


.career-detail-page
.career-other-decision-card {

    display:
        block;

    min-width:
        0;

    padding:
        18px
        19px;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-md);

    background:
        #ffffff;

    color:
        inherit;

    text-decoration:
        none;

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}


.career-detail-page
.career-other-decision-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #b9d2e6;

    box-shadow:
        var(--detail-shadow-sm);
}


.career-detail-page
.career-other-decision-card__meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


.career-detail-page
.career-other-decision-card__path {

    display:
        inline-flex;

    padding:
        4px
        9px;

    border-radius:
        999px;

    background:
        var(--detail-blue-soft);

    color:
        var(--detail-blue);

    font-size:
        0.6rem;

    font-weight:
        800;
}


.career-detail-page
.career-other-decision-card__date {

    color:
        var(--detail-muted-light);

    font-size:
        0.59rem;
}


.career-detail-page
.career-other-decision-card__title {

    margin:
        12px
        0
        0;

    color:
        var(--detail-navy);

    font-size:
        0.88rem;

    font-weight:
        800;

    line-height:
        1.57;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


.career-detail-page
.career-other-decision-card__link {

    display:
        inline-block;

    margin-top:
        14px;

    color:
        var(--detail-blue);

    font-size:
        0.63rem;

    font-weight:
        700;
}


/* ============================================================
   30. SAME DILEMMA / NEXT STORY
   ============================================================ */

.career-detail-page
.career-next-story {

    margin-top:
        42px;
}


.career-detail-page
.career-next-story__inner {

    position:
        relative;

    overflow:
        hidden;

    padding:
        39px
        42px;

    border-radius:
        var(--detail-radius-xl);

    background:
        linear-gradient(
            135deg,
            var(--detail-navy-deep),
            var(--detail-navy)
        );

    box-shadow:
        0 20px 50px
        rgba(7,27,48,0.16);
}


.career-detail-page
.career-next-story__inner::after {

    position:
        absolute;

    top:
        -140px;

    right:
        -100px;

    width:
        390px;

    height:
        390px;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius:
        50%;

    content:
        '';
}


.career-detail-page
.career-next-story
.career-section-label {

    position:
        relative;

    z-index:
        1;

    color:
        #77b2e6;
}


.career-detail-page
.career-next-story__title {

    position:
        relative;

    z-index:
        1;

    max-width:
        700px;

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            1.35rem,
            2.2vw,
            1.75rem
        );

    font-weight:
        800;

    letter-spacing:
        -0.025em;

    line-height:
        1.5;
}


.career-detail-page
.career-next-story__description {

    position:
        relative;

    z-index:
        1;

    max-width:
        650px;

    margin:
        11px
        0
        0;

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

    font-size:
        0.76rem;

    line-height:
        1.8;
}


.career-detail-page
.career-next-story__cta {

    position:
        relative;

    z-index:
        1;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    margin-top:
        22px;

    padding:
        11px
        19px;

    border:
        1px solid
        rgba(255,255,255,0.24);

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        var(--detail-navy);

    font-size:
        0.71rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease;
}


.career-detail-page
.career-next-story__cta:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 22px
        rgba(0,0,0,0.18);
}


/* ============================================================
   31. EMPTY / ERROR
   ============================================================ */

.career-detail-page
.career-empty-message {

    margin:
        0;

    padding:
        18px
        20px;

    border:
        1px solid
        var(--detail-line);

    border-radius:
        var(--detail-radius-md);

    background:
        #ffffff;

    color:
        var(--detail-muted);

    font-size:
        0.76rem;

    line-height:
        1.7;
}


/* ============================================================
   32. GENERIC LONG-TEXT SAFETY
   ============================================================ */

.career-detail-page
p,

.career-detail-page
h1,

.career-detail-page
h2,

.career-detail-page
h3,

.career-detail-page
strong,

.career-detail-page
span {

    max-width:
        100%;
}


.career-detail-page
.career-decision-hero,

.career-detail-page
.career-decision-story-card,

.career-detail-page
.career-after-choice-item,

.career-detail-page
.career-looking-back,

.career-detail-page
.career-journey-section,

.career-detail-page
.career-other-decision-card {

    min-width:
        0;
}


/* ============================================================
   33. HIDDEN
   ============================================================ */

.career-detail-page
[hidden] {

    display:
        none !important;
}


/* ============================================================
   34. FOOTER
   ============================================================ */

footer {

    background:
        var(--detail-navy-deep)
        !important;

    color:
        #ffffff;
}


footer .footer-content,
footer .footer-items {

    background:
        transparent
        !important;
}


footer p,
footer a {

    color:
        rgba(255,255,255,0.92)
        !important;
}


/* ============================================================
   35. NARROW PC
   ============================================================ */

@media (max-width: 1100px) {

    main.career-detail-page {

        padding:
            30px
            24px
            76px;
    }


    .career-detail-page
    .career-decision-hero__main {

        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(290px, 0.88fr);

        gap:
            28px;

        padding:
            34px
            30px;
    }


    .career-detail-page
    .career-decision-person {

        padding-left:
            24px;
    }


    .career-detail-page
    .career-decision-story-section,

    .career-detail-page
    .career-turning-section {

        padding:
            31px
            28px
            34px;
    }


    .career-detail-page
    .career-decision-story-card {

        padding:
            27px
            30px
            13px;
    }


    .career-detail-page
    .career-outcome-section,

    .career-detail-page
    .career-looking-back-section {

        padding:
            31px
            30px
            34px;
    }

}


/* ============================================================
   36. TABLET
   ============================================================ */

@media (max-width: 900px) {

    main.career-detail-page {

        width:
            100%;

        margin-left:
            0;

        margin-top:
            84px;

        padding:
            25px
            18px
            60px;
    }


    /* -----------------------------------------
       Common headers
    ------------------------------------------ */

    .career-detail-page
    .career-section-header {

        grid-template-columns:
            1fr;

        gap:
            8px;

        margin-bottom:
            19px;
    }


    .career-detail-page
    .career-section-title {

        font-size:
            1.12rem;
    }


    .career-detail-page
    .career-section-description {

        max-width:
            none;

        font-size:
            0.72rem;
    }


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

    .career-detail-page
    .career-decision-hero__main {

        grid-template-columns:
            1fr;

        gap:
            24px;

        padding:
            30px
            26px;
    }


    .career-detail-page
    .career-decision-hero__title {

        max-width:
            none;

        font-size:
            1.82rem;
    }


    .career-detail-page
    .career-decision-hero__dilemma {

        max-width:
            none;
    }


    .career-detail-page
    .career-decision-person {

        padding:
            21px
            0
            0;

        border-top:
            1px solid
            var(--detail-line);

        border-left:
            0;
    }


    /* -----------------------------------------
       Decision Process
    ------------------------------------------ */

    .career-detail-page
    .career-decision-story-section,

    .career-detail-page
    .career-turning-section {

        padding:
            27px
            20px
            29px;

        border-radius:
            21px;
    }


    .career-detail-page
    .career-decision-story-card {

        padding:
            23px
            22px
            10px;
    }


    .career-detail-page
    .career-decision-step {

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

        gap:
            13px;
    }


    .career-detail-page
    .career-decision-step__body {

        max-width:
            none;
    }


    /* -----------------------------------------
       After Choice
    ------------------------------------------ */

    .career-detail-page
    .career-outcome-section,

    .career-detail-page
    .career-looking-back-section,

    .career-detail-page
    .career-other-decisions-section {

        padding:
            27px
            22px;
    }


    .career-detail-page
    .career-after-choice-story {

        grid-template-columns:
            1fr;
    }


    .career-detail-page
    .career-after-choice-item--result {

        grid-column:
            auto;
    }


    .career-detail-page
    .career-outcome-comparison {

        grid-template-columns:
            1fr;
    }


    .career-detail-page
    .career-outcome-comparison__arrow {

        width:
            auto;

        height:
            23px;

        transform:
            rotate(90deg);
    }


    .career-detail-page
    .career-outcome__chart {

        height:
            285px;
    }


    .career-detail-page
    .career-outcome__chart.is-compact {

        height:
            auto;
    }


    .career-detail-page
    .career-outcome-guest {

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

        grid-template-areas:
            "icon title"
            "icon text"
            "cta cta";
    }


    .career-detail-page
    .career-outcome-guest__cta {

        justify-self:
            start;

        margin-top:
            9px;
    }


    /* -----------------------------------------
       Career Journey
    ------------------------------------------ */

    .career-detail-page
    .career-journey-section {

        padding:
            27px
            22px;
    }


    .career-detail-page
    .career-journey {

        overflow:
            visible;
    }


    .career-detail-page
    .journey-track {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        min-width:
            0;

        padding:
            5px
            0;
    }


    .career-detail-page
    .journey-track::before {

        top:
            14px;

        right:
            auto;

        bottom:
            14px;

        left:
            14px;

        width:
            1px;

        height:
            auto;
    }


    .career-detail-page
    .journey-node {

        display:
            grid;

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

        grid-template-areas:
            "marker year"
            "marker company"
            "marker role"
            "marker department"
            "marker period";

        column-gap:
            12px;

        width:
            100%;

        min-width:
            0;

        max-width:
            none;

        padding:
            0
            0
            20px;

        text-align:
            left;
    }


    .career-detail-page
    .journey-node__marker {

        grid-area:
            marker;

        align-self:
            start;

        margin:
            3px
            auto
            0;
    }


    .career-detail-page
    .journey-node__year {

        grid-area:
            year;

        height:
            auto;

        margin:
            0
            0
            3px;
    }


    .career-detail-page
    .journey-node__company {

        grid-area:
            company;
    }


    .career-detail-page
    .journey-node__role {

        grid-area:
            role;
    }


    .career-detail-page
    .journey-node__department {

        grid-area:
            department;
    }


    .career-detail-page
    .journey-node__period {

        grid-area:
            period;
    }


    /* -----------------------------------------
       Other
    ------------------------------------------ */

    .career-detail-page
    .career-other-decisions {

        grid-template-columns:
            1fr;
    }


    .career-detail-page
    .career-next-story__inner {

        padding:
            33px
            29px;
    }

}


/* ============================================================
   37. MOBILE
   ============================================================ */

@media (max-width: 768px) {

    main.career-detail-page {

        padding:
            22px
            15px
            54px;
    }


    .career-detail-page
    .career-detail-back {

        margin-bottom:
            15px;
    }


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

    .career-detail-page
    .career-decision-hero {

        border-radius:
            20px;
    }


    .career-detail-page
    .career-decision-hero__main {

        padding:
            26px
            21px;
    }


    .career-detail-page
    .career-decision-hero__title {

        font-size:
            1.5rem;

        line-height:
            1.36;
    }


    .career-detail-page
    .career-decision-hero__dilemma-text {

        font-size:
            0.8rem;
    }


    .career-detail-page
    .career-decision-hero__choice {

        width:
            100%;

        max-width:
            none;

        margin-top:
            20px;
    }


    .career-detail-page
    .career-profile__avatar {

        width:
            61px;

        height:
            61px;

        font-size:
            1.3rem;
    }


    .career-detail-page
    .career-profile__snapshot-grid {

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


    /* -----------------------------------------
       Decision Process
    ------------------------------------------ */

    .career-detail-page
    .career-decision-story-card {

        padding:
            17px
            16px
            8px;
    }


    .career-detail-page
    .career-decision-step {

        display:
            block;

        padding:
            17px
            0;

        border-bottom:
            1px solid
            var(--detail-line-soft);
    }


    .career-detail-page
    .career-decision-step:last-child {

        border-bottom:
            0;
    }


    .career-detail-page
    .career-decision-step__rail {

        display:
            none;
    }


    .career-detail-page
    .career-decision-step__body {

        padding-bottom:
            0;
    }


    .career-detail-page
    .career-decision-step--decision
    .career-decision-step__body {

        margin:
            0;

        padding:
            14px
            15px;
    }


    /* -----------------------------------------
       After Choice
    ------------------------------------------ */

    .career-detail-page
    .career-after-choice-item {

        padding:
            17px;
    }


    .career-detail-page
    .career-after-choice-item--result {

        padding:
            18px;
    }


    .career-detail-page
    .career-outcome__kpis {

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


    /* -----------------------------------------
       Looking Back
    ------------------------------------------ */

    .career-detail-page
    .career-looking-back__answer {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;
    }


    .career-detail-page
    .career-looking-back__message {

        margin-top:
            24px;

        padding-top:
            22px;
    }


    .career-detail-page
    .career-looking-back__message-title {

        font-size:
            1rem;
    }


    .career-detail-page
    .career-message-layout {

        padding-left:
            38px;
    }


    .career-detail-page
    .career-message-lock {

        margin-left:
            38px;
    }

}


/* ============================================================
   38. SMALL SMARTPHONE
   ============================================================ */

@media (max-width: 599px) {

    main.career-detail-page {

        padding:
            18px
            10px
            46px;
    }


    .career-detail-page
    .career-gps-section {

        margin-bottom:
            20px;
    }


    .career-detail-page
    .career-section-title {

        font-size:
            1.02rem;
    }


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

    .career-detail-page
    .career-decision-hero {

        margin-bottom:
            20px;

        border-radius:
            17px;
    }


    .career-detail-page
    .career-decision-hero__main {

        padding:
            23px
            16px;
    }


    .career-detail-page
    .career-decision-hero__title {

        font-size:
            1.31rem;
    }


    .career-detail-page
    .career-decision-hero__context {

        font-size:
            0.68rem;
    }


    .career-detail-page
    .career-decision-person__identity {

        align-items:
            flex-start;

        gap:
            12px;
    }


    .career-detail-page
    .career-profile__avatar {

        width:
            54px;

        height:
            54px;

        font-size:
            1.18rem;
    }


    .career-detail-page
    .career-profile__name {

        font-size:
            1rem;
    }


    .career-detail-page
    .career-profile__headline {

        font-size:
            0.68rem;
    }


    .career-detail-page
    .career-profile__snapshot-grid {

        grid-template-columns:
            1fr
            1fr;

        gap:
            6px;
    }


    /* -----------------------------------------
       Decision Process
    ------------------------------------------ */

    .career-detail-page
    .career-decision-story-section,

    .career-detail-page
    .career-turning-section {

        padding:
            21px
            10px
            23px;

        border-radius:
            17px;
    }


    .career-detail-page
    .career-decision-story-card {

        padding:
            13px
            12px
            5px;

        border-radius:
            14px;
    }


    .career-detail-page
    .career-decision-step {

        padding:
            14px
            0;
    }


    .career-detail-page
    .career-decision-step__question {

        font-size:
            0.79rem;
    }


    .career-detail-page
    .career-decision-step__answer {

        font-size:
            0.73rem;
    }


    /* -----------------------------------------
       After Choice / Looking Back / Other
    ------------------------------------------ */

    .career-detail-page
    .career-outcome-section,

    .career-detail-page
    .career-looking-back-section,

    .career-detail-page
    .career-other-decisions-section {

        padding:
            22px
            15px;

        border-radius:
            17px;
    }


    .career-detail-page
    .career-after-choice-item__title {

        font-size:
            0.81rem;
    }


    .career-detail-page
    .career-after-choice-item__text {

        font-size:
            0.73rem;
    }


    .career-detail-page
    .career-outcome__kpis {

        grid-template-columns:
            1fr;

        gap:
            7px;
    }


    .career-detail-page
    .career-outcome-comparison__column {

        padding:
            16px;
    }


    .career-detail-page
    .career-outcome__chart {

        height:
            255px;

        margin-top:
            19px;
    }


    .career-detail-page
    .career-outcome__chart.is-compact {

        height:
            auto;
    }


    .career-detail-page
    .career-outcome-guest {

        display:
            block;

        padding:
            19px
            16px;
    }


    .career-detail-page
    .career-outcome-guest__icon {

        width:
            36px;

        height:
            36px;

        margin-bottom:
            11px;
    }


    .career-detail-page
    .career-outcome-guest__cta {

        width:
            100%;

        box-sizing:
            border-box;

        margin-top:
            14px;
    }


    /* -----------------------------------------
       Looking Back Message
    ------------------------------------------ */

    .career-detail-page
    .career-looking-back__message-title {

        margin-bottom:
            15px;

        font-size:
            0.95rem;
    }


    .career-detail-page
    .career-message-layout {

        padding-left:
            22px;
    }


    .career-detail-page
    .career-message-layout::before {

        left:
            8px;
    }


    .career-detail-page
    .career-message-layout__quote {

        left:
            2px;

        font-size:
            3.45rem;
    }


    .career-detail-page
    .career-message p {

        font-size:
            0.79rem;

        line-height:
            1.85;
    }


    .career-detail-page
    .career-message-lock {

        margin-left:
            22px;
    }


    .career-detail-page
    .career-message-lock__content {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            9px;
    }


    /* -----------------------------------------
       Career Context
    ------------------------------------------ */

    .career-detail-page
    .career-journey-section {

        padding:
            22px
            15px;

        border-radius:
            17px;
    }


    /* -----------------------------------------
       Next Story
    ------------------------------------------ */

    .career-detail-page
    .career-next-story__inner {

        padding:
            28px
            20px;

        border-radius:
            17px;
    }


    .career-detail-page
    .career-next-story__title {

        font-size:
            1.17rem;
    }


    .career-detail-page
    .career-next-story__description {

        font-size:
            0.7rem;
    }


    .career-detail-page
    .career-next-story__cta {

        width:
            100%;

        box-sizing:
            border-box;

        justify-content:
            center;
    }

}