/* ============================================================
   CAREERS — careers.css

   Loaded on the Careers page template AND on every single job, because
   three things are shared between them: the brand tokens, the job card,
   and the application modal. job-single.css layers the detail-page
   sections on top and depends on this file.

   Band rhythm down the listing page:

     hero      dark
     culture   white
     openings  lilac wash
     cta       dark

   Palette is the magenta / deep-purple set used by the service, trends
   and about pages. Declared per-page because the global tokens in
   base/_variables.css are still the old azure brand.
   ============================================================ */

/*
 * Tokens. `.apply-modal` is listed here deliberately: both templates print
 * the modal after </main>, so it is a SIBLING of the page container, not a
 * descendant, and cannot inherit these. Without it the form renders with no
 * borders at all and falls back to the old global azure brand.
 */
.page-careers,
.single-job,
.apply-modal {
    /* ---- Brand ---------------------------------------------- */
    --color-primary:      #C62052;
    --color-primary-dark: #A5235A;
    --color-primary-rgb:  198, 32, 82;

    --color-accent:       #9234F7;
    --color-accent-rgb:   146, 52, 247;

    --color-dark:         #280071;
    --color-dark-rgb:     40, 0, 113;

    --gradient-brand:  linear-gradient(65deg, #C62052 0%, #280071 100%);
    --gradient-bright: linear-gradient(120deg, #C62052 0%, #7B23DB 100%);

    /* ---- Neutrals ------------------------------------------- */
    --car-white:  #FFFFFF;
    --car-wash:   #F8F5FB;
    --car-line:   #EAE3F3;
    --car-ink:    #280071;
    --car-body:   #4A4363;
    --car-muted:  #64607A;

    /* ---- Dark bands ----------------------------------------- */
    --car-dark:   #14002F;
    --car-deep:   #0C0020;
    --car-dline:  rgba(255, 255, 255, .12);
    --car-dtext:  rgba(255, 255, 255, .72);
    --car-ddim:   rgba(255, 255, 255, .54);

    --car-radius: 20px;

    --car-shadow-sm: 0 1px 3px rgba(30, 5, 60, .06), 0 1px 2px rgba(30, 5, 60, .04);
    --car-shadow-md: 0 6px 22px rgba(30, 5, 60, .08), 0 2px 6px rgba(30, 5, 60, .04);
    --car-shadow-lg: 0 18px 50px rgba(30, 5, 60, .13), 0 6px 14px rgba(30, 5, 60, .05);
}

/* Page containers only — the modal is a fixed overlay, so a white background
   here would paint over the whole screen instead of just the panel.
   Decorative bleed must never widen the page either; `clip` creates no
   scroll container, so sticky positioning in the sidebar still works. */
.page-careers,
.single-job {
    background: var(--car-white);
    overflow-x: clip;
}

/* ── Shared: eyebrow ──────────────────────────────────────── */
.car-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.car-eyebrow__line {
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient-bright);
}

/* ── Shared: buttons ──────────────────────────────────────── */
.car-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 1.7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

.car-btn__icon {
    display: inline-flex;
    width: 17px;
    height: 17px;
    transition: transform .25s ease;
}
.car-btn__icon svg { width: 100%; height: 100%; }

.car-btn--primary {
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), .30);
}
.car-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(var(--color-primary-rgb), .40);
    color: #fff;
}
.car-btn--primary:hover .car-btn__icon { transform: translateX(4px); }

.car-btn--light {
    background: #fff;
    color: var(--car-ink);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
}
.car-btn--light:hover {
    transform: translateY(-2px);
    color: var(--color-primary);
}
.car-btn--light:hover .car-btn__icon { transform: translateX(4px); }

.car-btn--ghost {
    background: transparent;
    border-color: var(--car-line);
    color: var(--car-ink);
}
.car-btn--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.car-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* ============================================================
   1. HERO — dark band
   ============================================================ */
.car-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(5rem, 11vw, 9rem) clamp(4rem, 8vw, 6.5rem);
    background:
        linear-gradient(160deg, var(--car-deep) 0%, #1A0338 45%, #2C0752 100%);
    color: #fff;
}

.car-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.car-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}
.car-hero__glow--1 {
    top: -14%;
    right: -6%;
    width: min(46vw, 560px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), .42) 0%, transparent 70%);
}
.car-hero__glow--2 {
    bottom: -22%;
    left: -10%;
    width: min(40vw, 480px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), .34) 0%, transparent 70%);
}

.car-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    /* Fades out before the copy so the lines never fight the text. */
    -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
            mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
}

.car-hero__inner {
    max-width: 780px;
}

.car-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.1rem;
    border: 1px solid var(--car-dline);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
}

.car-hero__eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3DDC97;
    box-shadow: 0 0 0 3px rgba(61, 220, 151, .22);
}

.car-hero__title {
    margin: 1.4rem 0 0;
    font-size: clamp(2.3rem, 6vw, 4.1rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: #fff;
}

/* The global .gradient-text helper reads --color-primary / --color-accent,
   both of which are bright enough to hold on the dark band. */
.car-hero__title .gradient-text {
    background: linear-gradient(100deg, #FF5C8A 0%, #B77BFF 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.car-hero__desc {
    max-width: 60ch;
    margin: 1.35rem 0 0;
    font-size: clamp(1rem, 1.6vw, 1.13rem);
    line-height: 1.75;
    color: var(--car-dtext);
}

.car-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2.2rem;
}

.car-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.9rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: .96rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}

.car-hero__btn-icon {
    display: inline-flex;
    width: 17px;
    height: 17px;
    transition: transform .25s ease;
}
.car-hero__btn-icon svg { width: 100%; height: 100%; }

.car-hero__btn--primary {
    background: linear-gradient(100deg, #DB3EC0 0%, #9234F7 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(var(--color-accent-rgb), .38);
}
.car-hero__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(var(--color-accent-rgb), .48);
    color: #fff;
}
.car-hero__btn--primary:hover .car-hero__btn-icon { transform: translateX(4px); }

.car-hero__btn--ghost {
    border-color: var(--car-dline);
    background: rgba(255, 255, 255, .05);
    color: #fff;
}
.car-hero__btn--ghost:hover {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.car-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.6rem, 5vw, 3.4rem);
    margin: 3.2rem 0 0;
    padding-top: 2.2rem;
    border-top: 1px solid var(--car-dline);
}

.car-hero__stat-num {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    background: linear-gradient(100deg, #FF5C8A 0%, #B77BFF 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.car-hero__stat-label {
    margin: .5rem 0 0;
    font-size: .87rem;
    color: var(--car-ddim);
}

/* ============================================================
   2. LIFE AT YAGAS — white band
   ============================================================ */
.car-culture {
    padding-block: clamp(4rem, 8vw, 7rem);
    background: var(--car-white);
    color: var(--car-body);
}

.car-culture__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.car-culture--no-image .car-culture__grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
}

.car-culture__heading {
    margin: 0;
    font-size: clamp(1.8rem, 3.6vw, 2.75rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--car-ink);
}

.car-culture__heading .gradient-text {
    background: var(--gradient-bright);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.car-culture__desc {
    margin: 1.1rem 0 0;
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--car-muted);
}

.car-culture__media {
    margin-top: 2rem;
    border-radius: var(--car-radius);
    overflow: hidden;
    box-shadow: var(--car-shadow-lg);
}
.car-culture__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 6;
    object-fit: cover;
}

/* ── Perks grid ───────────────────────────────────────────── */
.car-perks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.car-perk {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--car-line);
    border-radius: 16px;
    background: var(--car-white);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Tinted wash that fades up on hover — cheaper than animating a shadow
   colour, and it keeps the card border doing the structural work. */
.car-perk::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(150deg, rgba(var(--color-primary-rgb), .06) 0%, rgba(var(--color-accent-rgb), .05) 100%);
    transition: opacity .3s ease;
}

.car-perk:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-primary-rgb), .28);
    box-shadow: var(--car-shadow-md);
}
.car-perk:hover::before { opacity: 1; }

.car-perk__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1.05rem;
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(var(--color-primary-rgb), .12), rgba(var(--color-accent-rgb), .12));
    color: var(--color-primary);
}
.car-perk__icon svg { width: 22px; height: 22px; }

.car-perk__title {
    margin: 0;
    font-size: 1.03rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--car-ink);
}

.car-perk__text {
    margin: .5rem 0 0;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--car-muted);
}

/* ============================================================
   3. OPEN ROLES — lilac wash band
   ============================================================ */
.car-openings {
    position: relative;
    padding-block: clamp(4rem, 8vw, 7rem);
    background: var(--car-wash);
    /* Offsets the sticky header so an in-page jump does not hide the heading. */
    scroll-margin-top: 90px;
}

.car-openings__head {
    max-width: 660px;
    margin-bottom: 2.5rem;
}

.car-openings__heading {
    margin: 0;
    font-size: clamp(1.8rem, 3.6vw, 2.75rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--car-ink);
}

.car-openings__heading .gradient-text {
    background: var(--gradient-bright);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.car-openings__desc {
    margin: 1rem 0 0;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--car-muted);
}

/* ── Filter pills ─────────────────────────────────────────── */
.car-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 2rem;
}

.car-filter__pill {
    --pill-accent: var(--color-primary);

    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .62rem 1.15rem;
    border: 1px solid var(--car-line);
    border-radius: 999px;
    background: var(--car-white);
    font-family: inherit;
    font-size: .89rem;
    font-weight: 600;
    color: var(--car-body);
    cursor: pointer;
    transition: color .22s ease, border-color .22s ease, background-color .22s ease, transform .22s ease;
}

.car-filter__pill:hover {
    transform: translateY(-1px);
    border-color: var(--pill-accent);
    color: var(--pill-accent);
}

.car-filter__pill.is-active {
    border-color: transparent;
    background: var(--pill-accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), .22);
}

.car-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(var(--color-dark-rgb), .08);
    font-size: .74rem;
    font-weight: 700;
    color: inherit;
}
.car-filter__pill.is-active .car-filter__count {
    background: rgba(255, 255, 255, .24);
}


/* ── Job grid ─────────────────────────────────────────────── */
/* Compact tiles, three across on a wide screen. auto-fill rather than
   auto-fit, so a lone remaining card keeps its column width instead of
   stretching across the whole row. */
.car-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.car-grid__none {
    margin: 2.5rem 0 0;
    text-align: center;
    font-size: 1rem;
    color: var(--car-muted);
}

/* ── Job card ─────────────────────────────────────────────── */
.job-card {
    --job-accent: #C62052;

    position: relative;
    display: flex;
    flex-direction: column;
    /* Clips the accent rail to the card's rounded corners. The meta row is
       its own scroll container, so this does not interfere with it. */
    overflow: hidden;
    padding: 1.5rem 1.5rem 1.5rem 1.65rem;
    border: 1px solid var(--car-line);
    border-radius: 16px;
    background: var(--car-white);
    box-shadow: var(--car-shadow-sm);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease;
}

/* Gradient rail down the left edge, running from the department colour into
   the brand violet — widens slightly on hover. */
.job-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--job-accent) 0%, var(--color-accent) 100%);
    transition: width .3s cubic-bezier(.22, 1, .36, 1);
}
.job-card:hover::before,
.job-card:focus-within::before { width: 8px; }

.job-card:hover {
    transform: translateY(-4px);
    /* Plain accent first so a browser without color-mix() still picks up the
       department colour, just at full strength. */
    border-color: var(--job-accent);
    border-color: color-mix(in srgb, var(--job-accent) 34%, var(--car-line));
    box-shadow: var(--car-shadow-lg);
}

/* Keyboard users get the same affordance as the mouse — the title link is
   the focusable element, and it stretches over the whole card. */
.job-card:focus-within {
    border-color: var(--job-accent);
    box-shadow: var(--car-shadow-lg);
}

/* ── Head row ─────────────────────────────────────────────── */
.job-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .9rem;
}

.job-card__dept {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--job-accent);
}

.job-card__dept-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--job-accent);
}

.job-card__flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .7rem;
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb), .10);
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}

.job-card__flag-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.job-card__flag--closed {
    background: rgba(var(--color-dark-rgb), .07);
    color: var(--car-muted);
}

/* ── Title & summary ──────────────────────────────────────── */
/*
 * Spacing runs downward: every block owns the gap BELOW itself. margin-top on
 * the footer is `auto` so footers line up across a row, and auto collapses to
 * zero on a card with no slack — which is what left the skills row sitting on
 * the footer rule. Margins do not collapse in a flex column, so the two add
 * up and the minimum gap always holds.
 */
.job-card__title {
    margin: 0 0 .6rem;
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -.01em;
    color: var(--car-ink);
}

.job-card__link {
    color: inherit;
    text-decoration: none;
    transition: color .22s ease;
}
/* Whole card is the hit area; the link keeps the semantics. */
.job-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.job-card:hover .job-card__link { color: var(--job-accent); }

.job-card__summary {
    margin: 0 0 1.1rem;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--car-muted);
}

/* ── Meta boxes ───────────────────────────────────────────── */
/*
 * One row that never wraps, exactly as in the reference — in a column this
 * narrow it scrolls sideways instead of stacking.
 *
 * z-index lifts it above the title's stretched link, which otherwise covers
 * the whole card and would swallow the swipe. Clicking a box therefore does
 * not navigate; the title and "View more" still do.
 *
 * The mask only shows itself when there is something to scroll to: if the
 * boxes fit, the faded strip sits over empty space and is invisible.
 */
.job-card__meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: .45rem;
    margin: 0 0 1.15rem;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
}
.job-card__meta::-webkit-scrollbar { display: none; }

.job-card__chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    padding: .32rem .6rem;
    border: 1px solid var(--car-line);
    border-radius: 8px;
    background: var(--car-white);
    font-size: .74rem;
    white-space: nowrap;
    color: var(--car-body);
    transition: border-color .25s ease;
}
.job-card:hover .job-card__chip {
    border-color: rgba(var(--color-primary-rgb), .18);
}

.job-card__chip-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    color: var(--car-muted);
}
.job-card__chip-icon svg { width: 100%; height: 100%; }

/* Salary rides in the same row as the rest; it is simply taller, carrying
   the optional period/negotiable line under the range. */
.job-card__chip--salary .job-card__chip-copy {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    line-height: 1.3;
    min-width: 0;
}
.job-card__chip--salary .job-card__chip-icon { color: var(--job-accent); }
.job-card__chip--salary strong {
    font-size: .78rem;
    font-weight: 700;
    color: var(--car-ink);
}
.job-card__chip--salary small {
    font-size: .69rem;
    color: var(--car-muted);
}

/* ── Key skills ───────────────────────────────────────────── */
.job-card__skills {
    margin-bottom: 1.15rem;
    padding-top: 1.05rem;
    border-top: 1px solid var(--car-line);
}

.job-card__skills-label {
    display: block;
    margin-bottom: .6rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--car-muted);
}

.job-card__skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.job-card__skill {
    padding: .38rem .75rem;
    border-radius: 8px;
    background: var(--car-wash);
    font-size: .79rem;
    font-weight: 500;
    color: var(--car-body);
}

/* The overflow counter for roles listing more skills than fit. */
.job-card__skill--more {
    background: rgba(var(--color-primary-rgb), .09);
    background: color-mix(in srgb, var(--job-accent) 11%, transparent);
    font-weight: 700;
    color: var(--job-accent);
}

/* ── Foot ─────────────────────────────────────────────────── */
.job-card__foot {
    display: flex;
    align-items: center;
    /* Pushes the footer down so cards in a row line their footers up
       regardless of how long the summary runs. */
    margin-top: auto;
    padding-top: 1.05rem;
    border-top: 1px solid var(--car-line);
}

.job-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    font-size: .86rem;
    font-weight: 700;
    color: var(--job-accent);
    white-space: nowrap;
}

.job-card__cta-icon {
    display: inline-flex;
    width: 15px;
    height: 15px;
    transition: transform .25s ease;
}
.job-card__cta-icon svg { width: 100%; height: 100%; }
.job-card:hover .job-card__cta-icon { transform: translateX(4px); }

.job-card--closed { opacity: .72; }
.job-card--closed:hover { transform: none; }

/* ── Empty state ──────────────────────────────────────────── */
.car-empty {
    max-width: 520px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) 2rem;
    border: 1px dashed var(--car-line);
    border-radius: var(--car-radius);
    background: var(--car-white);
    text-align: center;
}

.car-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.3rem;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(var(--color-primary-rgb), .12), rgba(var(--color-accent-rgb), .12));
    color: var(--color-primary);
}
.car-empty__icon svg { width: 26px; height: 26px; }

.car-empty__title {
    margin: 0;
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--car-ink);
}

.car-empty__text {
    margin: .7rem auto 1.7rem;
    max-width: 42ch;
    font-size: .96rem;
    line-height: 1.7;
    color: var(--car-muted);
}

/* ============================================================
   4. CLOSING CTA — dark band
   ============================================================ */
.car-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: linear-gradient(150deg, var(--car-deep) 0%, #22053F 60%, #3A0A5E 100%);
    color: #fff;
}

.car-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.car-cta__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(70vw, 720px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), .30) 0%, transparent 65%);
    filter: blur(70px);
}

.car-cta__inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.car-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--car-dline);
    border-radius: 17px;
    background: rgba(255, 255, 255, .07);
    color: #fff;
}
.car-cta__icon svg { width: 26px; height: 26px; }

.car-cta__heading {
    margin: 0;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #fff;
}

.car-cta__text {
    margin: 1rem auto 0;
    max-width: 48ch;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--car-dtext);
}

.car-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    margin-top: 2.1rem;
}

.car-cta__email {
    font-size: .93rem;
    font-weight: 500;
    color: var(--car-ddim);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .22s ease, border-color .22s ease;
}
.car-cta__email:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .4);
}

/* ============================================================
   5. APPLICATION MODAL — shared by both templates
   ============================================================ */
body.apply-modal-open { overflow: hidden; }

.apply-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.apply-modal[hidden] { display: none; }

.apply-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 0, 26, .62);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .22s ease;
}
.apply-modal.is-open .apply-modal__backdrop { opacity: 1; }

.apply-modal__panel {
    position: relative;
    width: min(100%, 620px);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    border-radius: 22px;
    background: var(--car-white, #fff);
    box-shadow: 0 30px 80px rgba(10, 0, 26, .45);
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
.apply-modal.is-open .apply-modal__panel {
    opacity: 1;
    transform: none;
}

.apply-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--car-line);
    border-radius: 50%;
    background: #fff;
    color: var(--car-muted);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.apply-modal__close svg { width: 16px; height: 16px; }
.apply-modal__close:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: rotate(90deg);
}

.apply-modal__head {
    margin-bottom: 1.6rem;
    padding-right: 2.5rem;
}

.apply-modal__eyebrow {
    display: block;
    margin-bottom: .4rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.apply-modal__title {
    margin: 0;
    font-size: clamp(1.3rem, 2.6vw, 1.65rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--car-ink);
}

.apply-modal__note {
    margin: .7rem 0 0;
    padding: .7rem .9rem;
    border-left: 3px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
    background: rgba(var(--color-primary-rgb), .06);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--car-body);
}

/* ── Form ─────────────────────────────────────────────────── */
.apply-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * Fields carry their own prompt in the placeholder rather than a label above
 * — thin bordered pills on white, generously spaced. The <label> is still in
 * the markup for assistive tech, just visually hidden.
 */
.apply-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .85rem;
}

.apply-form__field { margin-bottom: .85rem; }
.apply-form__row .apply-form__field { margin-bottom: 0; }
.apply-form__row { margin-bottom: .85rem; }

.apply-form__field input[type="text"],
.apply-form__field input[type="email"],
.apply-form__field input[type="tel"],
.apply-form__field input[type="url"],
.apply-form__field textarea {
    width: 100%;
    padding: .95rem 1.15rem;
    border: 1px solid var(--car-line);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--car-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.apply-form__field input::placeholder,
.apply-form__field textarea::placeholder {
    color: #A9A2BC;
    opacity: 1; /* Firefox dims placeholders by default. */
}

.apply-form__field input:focus,
.apply-form__field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .12);
}

/* Only after the field has been touched, so an untouched form is not a wall
   of red the moment it opens. */
.apply-form__field input:not(:placeholder-shown):invalid {
    border-color: rgba(193, 18, 60, .55);
}

.apply-form__field textarea {
    resize: vertical;
    min-height: 104px;
}

/* Visually hidden, still reachable — the styled label is the control. */
.apply-form__file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Matches the text fields — same border, radius and white fill — so the
   upload reads as one more row of the form rather than a separate widget. */
.apply-drop {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem .85rem .8rem 1.15rem;
    border: 1px dashed var(--car-line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .22s ease, background-color .22s ease;
}
.apply-drop:hover,
.apply-drop.is-dragging {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), .04);
}
.apply-drop.has-file {
    border-style: solid;
    border-color: rgba(var(--color-primary-rgb), .45);
    background: rgba(var(--color-primary-rgb), .04);
}

/* Sits at the right end, reading as the button the whole label acts as. */
.apply-drop__action {
    flex-shrink: 0;
    margin-left: auto;
    padding: .55rem 1rem;
    border-radius: 8px;
    background: var(--car-wash);
    font-size: .82rem;
    font-weight: 600;
    color: var(--car-ink);
    transition: background-color .22s ease, color .22s ease;
}
.apply-drop:hover .apply-drop__action {
    background: var(--color-primary);
    color: #fff;
}

/* The input is visually hidden but still the focusable control, and it sits
   after its label in the markup — so the ring is put on the preceding label
   with :has(). Browsers without :has() simply show no ring on this one
   control; every other field keeps its own. */
.apply-drop:has(+ .apply-form__file:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.apply-drop__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(var(--color-primary-rgb), .09);
    color: var(--color-primary);
}
.apply-drop__icon svg { width: 17px; height: 17px; }

.apply-drop__copy {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.apply-drop__copy strong {
    font-size: .93rem;
    font-weight: 500;
    color: #A9A2BC;
    /* A long filename must not push the Browse chip off the row. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Once a file is picked the name becomes real content, not a prompt. */
.apply-drop.has-file .apply-drop__copy strong {
    font-weight: 600;
    color: var(--car-ink);
}
.apply-drop__copy span {
    font-size: .78rem;
    color: var(--car-muted);
}

.apply-form__status {
    margin: 0 0 .9rem;
    font-size: .88rem;
    line-height: 1.55;
    min-height: 0;
}
.apply-form__status:empty { display: none; }
.apply-form__status.is-error   { color: #C1123C; }
.apply-form__status.is-pending { color: var(--car-muted); }

.apply-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: 1rem 1.6rem;
    border: none;
    border-radius: 999px;
    background: var(--gradient-brand);
    font-family: inherit;
    font-size: .97rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), .30);
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.apply-form__submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(var(--color-primary-rgb), .40);
}
.apply-form__submit:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
}

.apply-form__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: carSpin .7s linear infinite;
}
.apply-form__submit.is-loading .apply-form__spinner { display: inline-block; }

@keyframes carSpin { to { transform: rotate(360deg); } }

.apply-form__legal {
    margin: 1rem 0 0;
    font-size: .78rem;
    line-height: 1.6;
    text-align: center;
    color: var(--car-muted);
}

/* ── Success state ────────────────────────────────────────── */
.apply-success {
    padding: 1.5rem 0 .5rem;
    text-align: center;
}

.apply-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 1.3rem;
    border-radius: 50%;
    background: rgba(16, 155, 105, .10);
    color: #109B69;
}
.apply-success__icon svg { width: 30px; height: 30px; }

.apply-success__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--car-ink);
}

.apply-success__text {
    margin: .7rem auto 1.6rem;
    max-width: 40ch;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--car-muted);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .car-culture__grid,
    .car-culture--no-image .car-culture__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .car-culture__media {
        max-width: 420px;
    }
}

@media (max-width: 720px) {
    /* Both buttons stay on one row, sharing the width equally. flex-basis 0
       rather than auto, so the longer label does not claim more space and
       leave the pills mismatched. */
    .car-hero__actions {
        flex-wrap: nowrap;
        gap: .6rem;
    }
    .car-hero__btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: .9rem .8rem;
        font-size: .88rem;
        text-align: center;
    }

    /* Three across rather than a wrapping flex row, so the numbers stay on
       one line instead of leaving a single stat orphaned underneath. */
    .car-hero__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem .7rem;
        margin-top: 2.4rem;
        padding-top: 1.8rem;
    }
    .car-hero__stat-num { font-size: 1.6rem; }
    .car-hero__stat-label {
        margin-top: .35rem;
        font-size: .76rem;
        line-height: 1.4;
    }

    /* A wrapped filter bar eats the screen on a phone, so it scrolls
       sideways in one row instead. Pulled out to the container gutter and
       padded back, so the row bleeds to the screen edge as it scrolls
       while the first pill still lines up with the heading above it. */
    .car-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .5rem;
        margin-inline: calc(var(--container-pad) * -1);
        padding-inline: var(--container-pad);
        scrollbar-width: none;
    }
    .car-filter::-webkit-scrollbar { display: none; }
    .car-filter__pill { flex-shrink: 0; }

    /* Bottom sheet on a phone: a floating card wastes the screen and puts
       the submit button somewhere unpredictable. Flush to the bottom, rounded
       at the top, and it scrolls inside itself. */
    .apply-modal {
        padding: 0;
        align-items: flex-end;
    }

    .apply-modal__panel {
        width: 100%;
        max-height: 92dvh;
        padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }
    .apply-modal.is-open .apply-modal__panel { transform: none; }

    .apply-form__row { grid-template-columns: 1fr; gap: .85rem; }

    /* Side by side, the Browse chip squeezes the format hint onto two lines
       and breaks it mid-phrase. Dropping it to its own full-width row gives
       the hint the space to stay on one, and makes a bigger tap target. */
    .apply-drop {
        flex-wrap: wrap;
        padding: .85rem;
    }
    .apply-drop__action {
        width: 100%;
        margin-left: 0;
        padding: .7rem 1rem;
        text-align: center;
    }
}

/* ============================================================
   Motion / contrast preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .job-card,
    .car-perk,
    .car-btn,
    .car-hero__btn,
    .apply-modal__panel,
    .apply-modal__backdrop,
    .car-filter__pill {
        transition: none;
    }
    .job-card:hover,
    .car-perk:hover,
    .car-btn:hover,
    .car-hero__btn:hover { transform: none; }

    .apply-form__spinner { animation-duration: 2s; }
}

/* Narrow phones — the arrow costs about 27px per button, which is the
   difference between "View 3 open roles" holding one line and wrapping. */
@media (max-width: 420px) {
    .car-hero__btn {
        padding: .85rem .6rem;
        font-size: .82rem;
    }
    .car-hero__btn-icon { display: none; }

    .car-hero__stats { gap: 1rem .5rem; }
    .car-hero__stat-num { font-size: 1.42rem; }
    .car-hero__stat-label { font-size: .72rem; }
}

@media (forced-colors: active) {
    .job-card,
    .car-perk,
    .car-filter__pill { border: 1px solid CanvasText; }
}