/* ==========================================================================
   markXpand — Careers page (/Careers)
   --------------------------------------------------------------------------
   LAYOUT reference: the Burrito Madre careers page. What was taken from it is
   structural only — the "Join the crew" opener with a pull-quote out to each
   side of the crew shot, the one-claim ethos band under it, the "WHY <brand>?"
   beat, and the closing split where a full-bleed picture holds one half and the
   application form the other.

   NONE of its dressing came with it. Its type is a heavy display face in caps;
   ours is Plus Jakarta Sans / Inter / Space Mono from landing-page.css. Its
   palette is warm red and cream; ours is --brand / --brand-dark and the same
   deep blue ramp the Contact hero and the closing band already use. Its hero
   figure is a photographed portrait; ours is the supplied crew render, cut off
   its blue ground so it stands ON the band rather than sitting in a box.

   LOAD ORDER: landing-page.css (tokens) -> product-page.css (.pr-* shell, type
   scale, buttons, FAQ accordion, closing band) -> contact-page.css (.ct-* form
   language: labels, tinted inputs, submit states, status message) -> this file.
   Everything here is namespaced .cr-* and only ever ADDS. Where a .pr-* or
   .ct-* rule has to behave differently it is qualified by a .cr-* ancestor,
   never re-declared at its own selector.

   ORDER MATTERS: section 8 down is entirely inside media queries, widest-first
   so the narrower ones win. A media query adds no specificity, so an unmediated
   rule appended below one would silently beat it. Nothing unmediated may go
   after section 8.
   ========================================================================== */


/* ==========================================================================
   0. PAGE GROUND + LOCAL TOKENS
   ========================================================================== */
.cr-page {
    /* Opens on the blue crew band, so the ramp starts below it — the same shape
       as .ct-page, which this page also loads. Restated rather than inherited so
       the two pages can be re-pitched independently. */
    /* AUDIT 11: solid ground under the ramp — see .pr-page. */
    background-color: var(--bg);
    background-image: linear-gradient(180deg, #ffffff 0%, #f7fbfe 44%, #eaf3fa 100%);
    background-attachment: fixed;

    --cr-ease: cubic-bezier(.16, 1, .3, 1);
    /* AUDIT 05: on the landing page's symmetric radius scale, was 14px 72px
       and 8px 32px — the asymmetric corner was this page's dominant shape. */
    --cr-corner: var(--radius-lg);
    --cr-corner-sm: var(--radius);
}

@media (max-width:991.98px) {
    .cr-page { background-attachment: scroll; }
}


/* ==========================================================================
   1. HERO — the crew band
   ========================================================================== */
.cr-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    /* No bottom padding on purpose: the cut-out stands ON the fold, its feet on
       the seam between this band and the light page below it. That grounding is
       the whole point of cutting the render off its blue rectangle.

       The top is tuned so the CREW clears the fold, not just the headline. Every
       gap above the picture is on a budget: at 184px of lead-in the faces landed
       around 700px down, which is below the fold on any laptop, and the shot the
       band exists for was only ever seen by someone who scrolled. */
    padding: clamp(104px, 11vw, 148px) 0 0;
    color: #fff;
    /* Identical ramp to .ct-hero — one dark blue for the whole marketing site.
       Its lightest stop #226f9f is 5.4:1 against white, so the headline, the
       lede and the quotes all clear AA on the worst part of the gradient. */
    /* AUDIT 04: the shared band, declared once in product-page.css. */
    background: var(--pr-band);
}

/* Two soft radial lights, the same recipe as .pr-close and .ct-hero, so the
   blue never reads as flat fill. */
/* AUDIT 04: the radial lights come from .pr-hero--band::after now — this
   ::before block painted the identical pair and would have doubled them. */

.cr-hero-head {
    max-width: 64ch;
    margin-inline: auto;
    text-align: center;
}

.cr-hero-head .pr-kicker { color: rgba(255, 255, 255, .92); }
.cr-hero-head .pr-kicker::before { background: #fff; }
.cr-hero-h1 { color: #fff; margin: 4px 0 0; }
/* #cfeaff is 4.4:1 on the ramp's lightest stop — the same inverted accent the
   Contact hero uses, so the two dark openers speak with one voice. */
.cr-hero-head .pr-grad { color: var(--pr-band-accent); }

/* 62ch, not 58ch: the lede is two lines at this measure and was three at the
   old one, and the third line cost 29px out of the same budget as the padding
   above. Still inside a comfortable measure for a centred single paragraph. */
.cr-hero-lede {
    color: rgba(255, 255, 255, .9);
    margin: 16px auto 0;
    max-width: 62ch;
}

.cr-hero-actions { justify-content: center; margin-top: clamp(22px, 2.2vw, 28px); }

/* ---- 1a. the stage: quote / crew / quote ----
   The reference flanks its portrait with a line of copy on each side. Its
   cut-out is TALL, so those lines sit in columns beside it. Ours is WIDE — it
   has to run the full measure to stay legible — so the pair sits on the band's
   shoulders instead, and the picture is pulled up underneath them at desktop
   widths where its top corners are empty sky. Below 1200px the pull is
   withdrawn rather than guessed at, because that sky shrinks with the image. */
.cr-stage {
    position: relative;
    margin-top: clamp(22px, 2.4vw, 32px);
}

.cr-quotes {
    display: flex;
    justify-content: center;
}

/* 52ch, not 34ch: two lines at this measure rather than three, and that third
   line was 26px out of the fold budget — bought back without touching a word of
   the copy. Centred, because everything above it in .cr-hero-head is: a single
   quote parked on one shoulder has nothing left to balance against. */
.cr-quote {
    position: relative;
    margin: 0 auto;
    padding-top: 22px;
    max-width: 52ch;
    text-align: center;
    font-family: var(--font-h);
    font-weight: 600;
    font-size: clamp(.95rem, 1.25vw, 1.125rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
    text-wrap: balance;
}

/* A short brand rule over the quote instead of a quotation glyph — the device
   .pr-kicker uses to mark a label, at the scale of a pull-quote. */
/* Physical `left`, not the logical property the rest of this file prefers: the
   result is symmetric, so the pair centres the rule in either direction, while
   inset-inline-start:50% would anchor the WRONG edge under RTL. */
.cr-quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-light);
}

/* The crew used to be pulled up by calc(16px - 4%) into the transparent sky in
   the render's top corners — 4% being the measured width of that sky in
   careers-crew.webp. That worked while a quote sat on each shoulder and the
   middle of the frame was free. With one CENTRED quote the tuck runs the text
   straight through the face in the middle of the cut-out, which is the tallest
   part of it, so the pull is gone and the picture simply clears the quote. */
.cr-stage-img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: clamp(16px, 2vw, 28px);
    /* The render is a cut-out with no ground of its own, so it gets one here: a
       single soft drop-shadow, which is what stops it reading as a sticker
       pasted onto the blue. */
    filter: drop-shadow(0 24px 34px rgba(6, 24, 40, .42));
}


/* ==========================================================================
   2. ETHOS — one claim and one paragraph
   ========================================================================== */
.cr-ethos { padding: var(--space-section) 0; }

.cr-ethos-head {
    max-width: 74ch;
    margin-inline: auto;
    text-align: center;
}

.cr-ethos-head h2 { margin: 0 0 18px; }
.cr-ethos-head .pr-lede { margin-inline: auto; max-width: 68ch; }

/* ==========================================================================
   3. OPEN ROLES
   --------------------------------------------------------------------------
   The reference has no roles list at all — its Position dropdown IS the list.
   Written out here because a dropdown is not something a candidate can read,
   link to or share, and because the Apply button on each row is what
   pre-selects that role in the form below.
   ========================================================================== */
.cr-roles { padding: var(--space-section) 0; }

.cr-role-list {
    display: grid;
    gap: clamp(12px, 1.4vw, 18px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr-role {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(18px, 2.6vw, 40px);
    padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 36px);
    border: 2px solid var(--pr-glass-line);
    border-radius: var(--cr-corner-sm);
    background: var(--pr-glass);
    -webkit-backdrop-filter: blur(6.5px);
    backdrop-filter: blur(6.5px);
    transition: transform .35s var(--cr-ease), border-color .35s var(--cr-ease), box-shadow .35s var(--cr-ease);
}

/* AUDIT 05: symmetric corner — nothing left to mirror. */

.cr-role:hover {
    transform: translateY(-3px);
    border-color: rgba(67, 163, 221, .45);
    box-shadow: var(--shadow-hover);
}

.cr-role-h {
    margin: 0 0 8px;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ink);
}

.cr-role-p {
    margin: 0 0 14px;
    max-width: 74ch;
    font-family: var(--font-b);
    font-size: .938rem;
    line-height: 1.65;
    color: var(--text-body);
    text-wrap: pretty;
}

.cr-role-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
}

.cr-role-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    background: rgba(67, 163, 221, .1);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-dark);
    white-space: nowrap;
}

.cr-role-meta i { font-size: .72rem; }

.cr-role-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.cr-role-btn i { font-size: .8rem; transition: transform .3s var(--cr-ease); }
.cr-role:hover .cr-role-btn i { transform: translateX(4px); }
[dir="rtl"] .cr-role:hover .cr-role-btn i { transform: translateX(-4px); }

.cr-role-none {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: clamp(22px, 2.6vw, 32px) 0 0;
    font-family: var(--font-b);
    font-size: .938rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.cr-role-none i { margin-top: 4px; color: var(--brand-dark); }
.cr-role-none a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }


/* ==========================================================================
   4. APPLY — the reference's closing split
   --------------------------------------------------------------------------
   Theirs is a looping background video on the left and the form on the right.
   Ours is the second crew render on the left, which costs no autoplay, no
   codec and no bandwidth budget on a phone, and carries a short caption over
   its foot the way the reference's video carries its heading.
   ========================================================================== */
.cr-apply { padding: var(--space-section) 0; }

.cr-apply-card {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    background: #fff;
    border-radius: var(--cr-corner);
    overflow: hidden;
    box-shadow:
        0 2px 6px rgba(9, 30, 48, .1),
        0 18px 40px -12px rgba(9, 30, 48, .22),
        0 60px 110px -30px rgba(9, 30, 48, .3);
}

.cr-apply-art {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    /* The render was cut off its own blue, so the panel supplies one — the same
       deep ramp as the hero, which is what ties the page's two crew shots
       together instead of leaving them looking like stock from two sources. */
    background: linear-gradient(160deg, #123a5c 0%, #1a5c8c 52%, #226f9f 100%);
}

.cr-apply-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* The subjects run edge to edge across a 1.9:1 render inside a panel that is
       taller than it is wide, so "cover" crops the sides hard. Anchored to the
       bottom centre it keeps the woman and the nearest robots, and takes the
       crop out of the far laptops instead. */
    object-fit: cover;
    object-position: 50% 100%;
}

.cr-apply-art-copy {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: clamp(24px, 3vw, 40px);
    /* A scrim, not a flat overlay: the caption has to clear 4.5:1 over whatever
       part of the render happens to sit under it. */
    background: linear-gradient(180deg, rgba(9, 30, 48, 0) 0%, rgba(9, 30, 48, .72) 46%, rgba(9, 30, 48, .9) 100%);
}

.cr-apply-art-h {
    margin: 0 0 6px;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    line-height: 1.25;
    letter-spacing: -.02em;
    color: #fff;
}

.cr-apply-art-p {
    margin: 0;
    max-width: 34ch;
    font-family: var(--font-b);
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .84);
}

.cr-apply-pane { min-width: 0; }

/* ---- 6a. selects ----
   contact-page.css has no select; this page has four. They wear .ct-input so
   the fill, the border, the focus ring and the invalid state are the same rules
   the text fields use, and only the parts a select needs are added here. */
.cr-select { position: relative; }

.cr-select select.ct-input {
    /* appearance:none is already on .ct-input; this clears the room the caret
       below needs, on the correct side in both directions. */
    padding-inline-end: 42px;
    cursor: pointer;
}

/* A select with nothing chosen shows its placeholder option, which should read
   as placeholder text rather than as an answer — the same grey ::placeholder
   gets in contact-page.css.

   Keyed off the empty option being :checked rather than off :invalid, because
   only ONE of the four selects here is required: an optional select sitting on
   its empty option is perfectly valid, so :invalid would have left three of
   them showing a placeholder in full ink. */
.cr-select select.ct-input:has(option[value=""]:checked) { color: #93a6b5; }
.cr-select select.ct-input option { color: var(--ink); }

.cr-select-caret {
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: .75rem;
    color: var(--brand-dark);
}

/* ---- 6b. consent ---- */
.cr-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--ct-field-line);
    border-radius: var(--radius-sm);
    background: var(--ct-field);
    font-family: var(--font-b);
    font-size: .85rem;
    line-height: 1.55;
    color: var(--text-body);
    cursor: pointer;
    transition: border-color .22s var(--cr-ease), background .22s var(--cr-ease);
}

.cr-consent:hover { border-color: #c6dcee; }

.cr-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    accent-color: var(--brand-dark);
    cursor: pointer;
}

.cr-consent input:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--focus-ring); }

.cr-consent a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Matches .ct-form.was-tried .ct-input:invalid — the box turns red only once a
   send has actually been attempted, never on a pristine form. */
.ct-form.was-tried .cr-consent:has(input:invalid) {
    border-color: #d9534f;
    background: #fdf4f4;
}


/* ==========================================================================
   5. SMALL SHARED CORRECTIONS
   ========================================================================== */

/* The FAQ and the closing band come from product-page.css unchanged; only the
   seam above the FAQ is re-cut, because .cr-apply already carries the bottom
   padding .pr-faq would otherwise double. */
.cr-page .pr-faq { padding-top: 0; }


/* ==========================================================================
   6. RESPONSIVE — widest first; NOTHING UNMEDIATED BELOW THIS LINE
   ========================================================================== */

@media (max-width:991.98px) {
    /* The split becomes a stack: the picture leads, then the form. The art panel
       loses its absolute fill and takes a band height instead, or it would
       collapse to nothing with no column left to give it one. */
    .cr-apply-card { grid-template-columns: minmax(0, 1fr); border-radius: var(--cr-corner-sm); }
    .cr-apply-art { min-height: 0; height: clamp(230px, 42vw, 340px); }

    .cr-role { grid-template-columns: minmax(0, 1fr); }
    .cr-role-btn { justify-self: start; }
    [dir="rtl"] .cr-role-btn { justify-self: end; }
}

@media (max-width:767.98px) {
    .cr-hero { padding-top: clamp(94px, 20vw, 124px); }

    /* The quote drops its 52ch column here — at this width that measure leaves it
       a narrow ragged strip rather than a pull-quote. */
    .cr-quote { max-width: none; }

    .cr-hero-actions { width: 100%; }
    .cr-hero-actions .lp-btn-cta { flex: 1 1 200px; }

    /* The render is 2.3:1. Fitted to a phone it becomes a ~170px strip in which
       no face is legible and the whole point of the shot is lost. Blown past the
       viewport and re-centred, the middle of the group reads at a usable size;
       the outer two robots go over the edge, which is what .cr-hero's
       overflow:clip is there to absorb. Both values resolve against the same
       containing block, so -34% + 168% stays centred at every width, and the
       logical margin keeps it centred in RTL too. */
    .cr-stage-img { width: 168%; max-width: none; margin-inline-start: -34%; }

}

@media (max-width:575.98px) {

    /* The role rows already stack; at this width the meta pills wrap enough that
       nowrap starts cutting them off. */
    .cr-role-meta span { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .cr-role,
    .cr-role-btn i { transition: none; }

    .cr-role:hover { transform: none; }
}

@media print {
    .cr-hero::before,
    .cr-apply-art,
    .cr-hero-actions { display: none; }

    .cr-hero { padding-top: 0; background: none; color: #000; }
    .cr-hero-h1,
    .cr-hero-head .pr-grad { color: #000; }
    .cr-quote { color: #333; }
    .cr-apply-card { box-shadow: none; border: 1px solid #ccc; }
}