/* =========================================================
   PERSONAL CAREER MENTOR

   Sits between #resume-building and OUR INSIGHTS on the
   homepage, so it is built as a sibling of .mi-section rather
   than as a new look: same 1280px measure, same badge, same
   two-tone headline, same button pair, same closing bar. Every
   size comes off the Global.css ladder, and the ones that are
   shared with mock interviews are deliberately identical
   values, not approximations -- the two blocks are read one
   after the other and any drift shows.

   What differs from mock interviews, and why:
     * three headline lines instead of two, because the accent
       line here is a sentence of its own;
     * the stats row is boxed. Mock interviews has the process
       panel above its stats to separate them from the artwork;
       this block does not, so the border does that job.
     * a learner-quote trio stands where the process panel sits
       there.
========================================================= */

.cm-section{
    background:var(--white);
    padding:var(--space-section) 0;
    font-family:var(--font-sans);
}

.cm-inner{
    width:100%;
    /* Matches .mi-inner and .rb-inner above it. */
    max-width:1280px;
    margin-inline:auto;
    padding-inline:20px;
}

/* ==========================
   HEAD
========================== */

/* Nearer an even split than the mock-interviews hero: there is no
   highlight row inside this column setting a floor on its width, and
   the artwork carries five labelled cards that need the room. */

.cm-hero{
    display:grid;
    grid-template-columns:minmax(0,560px) minmax(0,1fr);
    gap:48px;
    align-items:center;
}

.cm-head{
    max-width:560px;
}

.cm-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:7px 16px;
    border:1px solid var(--primary-50);
    border-radius:999px;
    background:var(--white);
    font-size:var(--fs-meta);
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    line-height:1;
    color:var(--primary);
}

.cm-badge i{
    font-size:12px;
}

/* Two-tone heading, as in #mock-interviews and #resume-building: the
   closing line carries the accent. Not the .bao-last single-word
   pattern, so the bao-last audit should skip it. */

.cm-title{
    margin-top:22px;
    font-family:var(--font-display);
    font-size:var(--fs-hero);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-.01em;
    color:var(--ink);
}

.cm-title-accent{
    color:var(--primary);
}

.cm-lead{
    margin-top:18px;
    font-size:var(--fs-lead);
    font-weight:400;
    line-height:1.7;
    color:var(--ink-500);
    text-wrap:pretty;
}

/* ==========================
   BUTTONS
========================== */

.cm-actions{
    margin-top:26px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.cm-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 26px;
    border:1px solid transparent;
    border-radius:var(--radius-md);
    font-family:var(--font-sans);
    font-size:var(--fs-body);
    font-weight:700;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.cm-btn--solid{
    background:var(--primary);
    color:var(--white);
}

.cm-btn--solid:hover{
    background:var(--primary-hover);
    box-shadow:var(--glow);
    transform:translateY(-2px);
}

/* padding-block is trimmed from the shared 15px because this is the only
   button on the site carrying two lines, and .cm-actions stretches, so its
   height also sets the height of the solid button beside it. At 15px the
   pair came out 75px against the 48px every other button pair on the page
   runs at; 12px puts it at 63, the step up the design draws. */

.cm-btn--ghost{
    padding-block:12px;
    background:var(--white);
    border-color:var(--primary-35);
    color:var(--ink-900);
}

.cm-btn--ghost:hover{
    border-color:var(--primary);
    box-shadow:var(--shadow-sm);
    transform:translateY(-2px);
}

.cm-btn--ghost i{
    font-size:18px;
    color:var(--primary);
}

/* This label is set on two lines in the design, so it cannot ride the
   flat line-height the button box uses for a single line. The stack
   carries its own, and the button centres it against the icon. */

.cm-btn-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    line-height:1.25;
    text-align:left;
}

/* The runtime is a footnote to the label, not part of it. */

.cm-btn-note{
    font-size:var(--fs-caption);
    font-weight:500;
    color:var(--ink-500);
}

/* ==========================
   ARTWORK
========================== */

.cm-art{
    border-radius:var(--r-20);
    overflow:hidden;
}

.cm-art img{
    display:block;
    width:100%;
    height:auto;
}

/* The illustration carries a flat #F7F7F7 ground of its own, so on a white
   section its edge would read as a faint rectangle. The radius above makes
   that edge deliberate, the way .mi-art handles the same thing. */

/* ==========================
   STATS
========================== */

.cm-stats{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    padding:20px 8px;
    border:1px solid var(--border);
    border-radius:var(--r-15);
    background:var(--white);
    list-style:none;
    margin-inline:0;
}

.cm-stat{
    display:flex;
    align-items:center;
    gap:14px;
    padding:4px 22px;
}

.cm-stat + .cm-stat{
    border-left:1px solid var(--border);
}

.cm-stat-icon{
    width:46px;
    height:46px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--cream-200);
    color:var(--primary);
    font-size:18px;
}

.cm-stat-text{
    min-width:0;
}

.cm-stat-num{
    display:block;
    font-family:var(--font-display);
    font-size:var(--fs-card);
    font-weight:800;
    line-height:1.15;
    color:var(--ink);
}

.cm-stat-label{
    display:block;
    font-size:var(--fs-meta);
    font-weight:700;
    line-height:1.3;
    color:var(--ink-900);
}

.cm-stat-note{
    display:block;
    margin-top:3px;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.4;
    color:var(--ink-500);
}

/* ==========================
   LEARNER QUOTES
========================== */

.cm-voices{
    margin-top:var(--space-block);
}

.cm-voices-head{
    text-align:center;
    margin-bottom:26px;
}

/* Set in caps in the design. Caps at --fs-section would shout next to
   the headline above, so it steps down to --fs-sub and earns its weight
   from the tracking instead. */

.cm-voices-title{
    font-family:var(--font-display);
    font-size:var(--fs-sub);
    font-weight:800;
    line-height:1.25;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--ink);
}

.cm-voices-sub{
    margin-top:8px;
    font-size:var(--fs-body);
    font-weight:400;
    line-height:1.6;
    color:var(--ink-500);
}

.cm-quotes{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    list-style:none;
    margin:0;
    padding:0;
}

.cm-quote{
    display:flex;
    flex-direction:column;
    padding:22px 22px 20px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-15);
    background:var(--white);
}

/* A drawn quote mark rather than an icon glyph: it has to sit tight to
   the first line of the review, and a font icon brings its own side
   bearings into that measurement. */

.cm-quote-mark{
    font-family:var(--font-display);
    font-size:34px;
    font-weight:800;
    line-height:.6;
    color:var(--primary);
}

/* The site already publishes these three reviews in .trust-badge-quote at
   15px, so they are set as running copy here too rather than dropped to the
   footnote size a compact card would otherwise take. */

.cm-quote-text{
    margin-top:10px;
    font-size:var(--fs-body);
    font-weight:400;
    line-height:1.65;
    color:var(--ink-600);
    text-wrap:pretty;
}

/* Pushed to the bottom so all three feet line up even when one review
   runs a line longer than its neighbours. */

.cm-quote-foot{
    margin-top:auto;
    padding-top:16px;
    display:flex;
    align-items:center;
    gap:10px;
}

.cm-quote-avatar{
    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:50%;
    object-fit:cover;
    background:var(--cream-200);
}

.cm-quote-who{
    min-width:0;
    flex:1 1 auto;
}

.cm-quote-name{
    display:block;
    font-size:var(--fs-meta);
    font-weight:700;
    line-height:1.3;
    color:var(--ink-900);
}

.cm-quote-role{
    display:block;
    margin-top:2px;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.35;
    color:var(--ink-500);
}

.cm-quote-stars{
    flex-shrink:0;
    font-size:var(--fs-meta);
    line-height:1;
    letter-spacing:.05em;
    color:var(--primary);
}

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

/* Same inset bar as #mock-interviews, to the pixel -- the two close the
   same way and sit four screens apart. */

.cm-cta{
    margin-top:var(--space-block);
    max-width:1130px;
    margin-inline:auto;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:22px;
    padding:24px 28px;
    border-radius:var(--r-15);
    background:var(--cream-50);
}

.cm-cta-icon{
    width:54px;
    height:54px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--cream-300);
    color:var(--primary);
    font-size:22px;
}

.cm-cta-text{
    flex:1 1 320px;
}

.cm-cta-title{
    font-family:var(--font-display);
    font-size:var(--fs-card);
    font-weight:700;
    line-height:1.3;
    color:var(--ink);
}

.cm-cta-sub{
    margin-top:6px;
    font-size:var(--fs-body);
    font-weight:400;
    line-height:1.6;
    color:var(--ink-500);
}

/* ==========================
   RESPONSIVE
========================== */

/* The artwork's five labelled cards stop being legible below roughly a
   300px column, the same floor .mi-art hits. One column instead. */

@media (max-width:1000px){

    .cm-hero{
        grid-template-columns:minmax(0,1fr);
        gap:32px;
    }

    .cm-head{
        max-width:none;
    }

    /* The copy column is capped by the grid at desktop; once it goes full
       width the lead has nothing holding it, and at 980px it ran a single
       940px line. Back to the house 70ch measure. */

    .cm-lead{
        max-width:70ch;
    }

    .cm-art{
        max-width:620px;
        margin-inline:auto;
    }

}

@media (max-width:900px){

    .cm-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px 0;
        padding:22px 8px;
    }

    /* The rules were drawn for one unbroken row; at two columns the third
       cell starts a row and its rule would hang off the left edge. */

    .cm-stat + .cm-stat{
        border-left:0;
    }

    .cm-stat:nth-child(2n){
        border-left:1px solid var(--border);
    }

    .cm-stat{
        padding-inline:16px;
    }

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

}

@media (max-width:768px){

    .cm-quotes{
        grid-template-columns:minmax(0,1fr);
    }

}

@media (max-width:560px){

    .cm-stats{
        grid-template-columns:1fr;
        gap:18px 0;
    }

    .cm-stat,
    .cm-stat:nth-child(2n){
        border-left:0;
    }

    .cm-btn{
        width:100%;
        justify-content:center;
    }

    .cm-btn-stack{
        align-items:center;
        text-align:center;
    }

    .cm-cta{
        padding:22px 20px;
    }

    .cm-cta .cm-btn{
        width:100%;
    }

}

/* =========================================================
   HOMEPAGE MEET THE MENTORS MARQUEE
========================================================= */

.ab-mentors {
    padding: clamp(48px, 6vw, 76px) 0;
    margin: 20px 0;
    overflow: hidden;
}

.ab-mentors .container {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 20px;
}

.ab-mentors .ab-head {
    text-align: center;
    max-width: 840px;
    margin: 0 auto clamp(28px, 4vw, 44px);
    padding-inline: 16px;
}

.ab-mentors .ab-head h2 {
    font-family: var(--font-display, inherit);
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink, #111);
}

.ab-mentors .ab-head p {
    margin-top: 14px;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.6;
    color: var(--ink-500, #555);
}

.ab-mentors .bao-marquee {
    margin-top: 24px;
}

.int-mentors-grid {
    display: flex;
    gap: 24px;
}

.int-mentor-card {
    width: 245px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-soft, #e5e7eb);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
    text-align: left;
    flex-shrink: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
    transition: transform var(--dur-base, .25s) ease, border-color var(--dur-base, .25s) ease, box-shadow var(--dur-base, .25s) ease;
}

.int-mentor-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 102, 0, 0.45);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07), 0 4px 12px rgba(255, 102, 0, 0.1);
}

.int-mentor-media {
    position: relative;
    width: calc(100% - 16px);
    margin: 8px 8px 0;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 12px;
    background: #fdfbf9;
    border: 1px solid rgba(240, 230, 220, 0.8);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: -webkit-radial-gradient(white, black);
}

.int-mentor-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, center top);
    transform: scale(var(--zoom, 1));
    transition: transform .35s ease;
    border-radius: 12px;
}

.int-mentor-card:hover .int-mentor-media img {
    transform: scale(calc(var(--zoom, 1) * 1.05));
}

.int-mentor-badge {
    display: grid;
    place-items: center;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--primary, #ff6600);
    font-size: 10px;
    color: #fff;
    box-shadow: 0 3px 8px rgba(255, 102, 0, 0.3);
}

.int-mentor-body {
    flex: 1;
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.int-mentor-name h4 {
    font-family: var(--font-sans, inherit);
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ink, #0f172a);
    margin: 0;
}

.int-mentor-role {
    display: block;
    margin-top: 4px;
    font-family: var(--font-sans, inherit);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink, #0f172a);
}

.int-mentor-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.int-mentor-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans, inherit);
    font-size: 10.5px;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 3px 7px;
}

.int-mentor-stat i {
    color: var(--primary, #ff6600);
    font-size: 9.5px;
    flex-shrink: 0;
}

.int-mentor-expertise {
    font-family: var(--font-sans, inherit);
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(226, 232, 240, 0.9);
}

.int-mentor-expertise strong {
    color: #1e293b;
    font-weight: 700;
}