/* Careers / current openings page design layer.
 *
 * The presentation layer for Components/Pages/CurrentOpeningPage.razor. Global
 * CSS, linked from App.razor, so the same two rules every sibling page sheet
 * calls out apply here:
 *
 * 1. Nothing confines these rules to this page, so every selector is qco-
 *    prefixed or a descendant of one. No bare element selectors.
 * 2. @keyframes names are global too, hence the prefix on those as well — they
 *    must not collide with the compiled Tailwind bundle or with the qh-, qp-,
 *    qps-, qsm- and qfh- animations the other page sheets declare.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity. That is why this page can be styled
 * entirely from here instead of from utility classes: the bundle the site
 * serves is a Next.js build artefact, so it only contains the utilities that
 * build emitted and a class invented in the markup would not exist at runtime.
 *
 * ONE CLASS FROM THE BUNDLE IS LOAD-BEARING AND MUST KEEP WORKING. `.hidden`
 * gates the image fallback tile, which the img's own inline onerror reveals by
 * removing that class. So no rule in this file sets `display` on
 * .qco-media-fallback — an unlayered display would beat .hidden and the tile
 * would sit permanently on top of the photo. Everything else about it (colour,
 * background, the mark) is set here.
 *
 * The form is no longer part of the stored markup: it is
 * Components/Shared/CareerApplicationForm.razor, spliced in by
 * CurrentOpeningPage at the placeholder comment in page_html. Its classes are
 * still the qco- ones below, so the card looks the same as when it was CMS
 * markup, but its states (validation, submitting, submitted) are rendered by
 * the component rather than toggled by a class.
 *
 * PALETTE. The logo ramp the pricing, payroll and site-map sheets already share
 * — #a22dea (magenta-violet) → #7b5ee5 → #5b5de2 (indigo-blue), primary #4f46e5.
 * One surface is dark, the hero, and one is the closing call to action, so the
 * page opens and closes on the same material. Emerald appears in exactly one
 * role: "we are live / this is confirmed" — the hiring pulse dot, the proof
 * ticks and the submitted-application message. Nothing else uses it.
 *
 * The six benefit cards keep a hue each — that was the old page's idea and it
 * is worth keeping, because the grid is six equal-weight cards with no other
 * way to tell one from another at a glance. What changed is how the hue is
 * spent: it now tints only the icon tile and a hairline top rule, over a white
 * card, rather than flooding the whole card with a pastel gradient and hanging
 * a 4px bar off its left edge.
 *
 * Reading order the layout is built around: a dark hero with the application
 * form floating in it (the form is the page's only conversion, so it is above
 * the fold and never scrolled to) → why work here → who we are hiring → the
 * closing call to action → two link decks.
 *
 * CONTENT NOTE. Every heading, sentence, link target and form field on this
 * page is carried over verbatim from the `webpages` row this route used to
 * render. Restyle freely; do not reword, reorder or drop any of it.
 */

/* ── page shell ─────────────────────────────────────────────────────── */

/* This page's markup lives in webpages.page_html and is rendered by
   ContentPage, which wraps it in
   `<div class="max-w-none" style="color:#1a1a1a;line-height:1.8">`. That inline
   line-height is not decorative — every other stored page depends on it — but
   1.8 is far too loose for headings, badges and buttons, and an inline style on
   an ancestor cannot be overridden by a rule on a descendant. Re-declaring both
   properties HERE is what stops them reaching the rest of this page: they
   inherit from .qco-page down, not from the wrapper. Do not remove them. */
.qco-page {
    color: #14103a;
    line-height: 1.55;
    background: linear-gradient(180deg, #f8f7fe 0%, #fbfbfd 520px, #fbfbfd 100%);
}

/* Visually hidden, still read out. */
.qco-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Clears the sticky header (64px, 80px from md) when a CTA jumps to the form,
   or the top of the card lands underneath it. Four links target this anchor,
   and it belongs on the form card itself — parked on the hero section, as it
   originally was, it resolved to the first element on the page and every one of
   those links read as "scroll to top". */
.qco-anchor {
    scroll-margin-top: 96px;
}

/* ── section rhythm ─────────────────────────────────────────────────── */

.qco-sec {
    position: relative;
    padding: 68px 0 72px;
}

/* The alternating surface. Used once, on the benefits grid, so the six white
   cards have something to sit on rather than floating on the page's own
   near-white. */
.qco-sec--tint {
    background:
        radial-gradient(ellipse 70% 55% at 8% 0%, rgba(162, 45, 234, .05), transparent 62%),
        radial-gradient(ellipse 60% 50% at 94% 30%, rgba(91, 93, 226, .06), transparent 62%),
        linear-gradient(180deg, #fbfaff 0%, #fff 45%, #faf9ff 100%);
    border-top: 1px solid rgba(124, 58, 237, .09);
    border-bottom: 1px solid rgba(124, 58, 237, .09);
}

@media (max-width: 767px) {
    .qco-sec {
        padding: 48px 0 52px;
    }
}

/* ── section heading ────────────────────────────────────────────────── */

.qco-head {
    max-width: 760px;
    margin: 0 0 44px;
}

/* Centred variant, for the two sections whose old markup centred them. */
.qco-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.qco-h2 {
    margin: 0;
    color: #14103a;
    font-size: clamp(1.65rem, 1.15rem + 1.7vw, 2.3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.022em;
}

.qco-sub {
    margin: 14px 0 0;
    color: #565273;
    font-size: 1.02rem;
    line-height: 1.7;
}

.qco-head--center .qco-sub {
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
}

/* Inline links inside body copy. The page carries a lot of them — the old
   markup leaned on them for internal linking — so they get an underline that
   only thickens on hover rather than a colour that shouts over the sentence. */
.qco-a {
    color: #5b21b6;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(91, 33, 182, .3);
    text-underline-offset: 3px;
    transition: color .18s ease, text-decoration-color .18s ease;
}

.qco-a:hover {
    color: #4c1d95;
    text-decoration-color: currentColor;
}

/* ── buttons ────────────────────────────────────────────────────────── */

.qco-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.qco-btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.qco-btn:hover {
    transform: translateY(-2px);
}

.qco-btn:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 3px;
}

/* Primary — the ramp, on light surfaces. */
.qco-btn--primary {
    background: linear-gradient(100deg, #a22dea 0%, #7b5ee5 52%, #5b5de2 100%);
    color: #fff;
    box-shadow: 0 12px 28px -12px rgba(124, 58, 237, .65);
}

.qco-btn--primary:hover {
    box-shadow: 0 18px 34px -12px rgba(124, 58, 237, .7);
}

/* Solid white — the primary action on the dark closing banner. */
.qco-btn--light {
    background: #fff;
    color: #4c1d95;
    box-shadow: 0 12px 26px -14px rgba(9, 6, 32, .8);
}

.qco-btn--light:hover {
    background: #f6f3ff;
}

/* Outlined white — the secondary action on the dark closing banner. */
.qco-btn--outline {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.qco-btn--outline:hover {
    background: #fff;
    color: #4c1d95;
    border-color: #fff;
}

.qco-btn--block {
    width: 100%;
}

/* ══ hero ═══════════════════════════════════════════════════════════════
   Dark, and the only dark surface above the closing banner. The form sits in
   it as a white card, which is the whole reason for the contrast: the card is
   the page's single conversion and it has to be the brightest object on the
   first screen. */

.qco-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 90% 70% at 12% -10%, rgba(162, 45, 234, .5), transparent 60%),
        radial-gradient(ellipse 85% 75% at 88% 8%, rgba(59, 82, 226, .45), transparent 62%),
        linear-gradient(160deg, #17123f 0%, #1b1450 45%, #14103a 100%);
    padding: 62px 0 76px;
}

/* Blurred colour fields. Separate elements rather than more background layers
   so they can drift independently and be stilled by reduced-motion below. */
.qco-hero__aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.qco-hero__aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(78px);
    opacity: .5;
}

.qco-hero__aurora i:nth-child(1) {
    width: 520px;
    height: 520px;
    top: -230px;
    right: -140px;
    background: radial-gradient(circle, rgba(162, 45, 234, .55), transparent 68%);
    animation: qco-drift 22s ease-in-out infinite;
}

.qco-hero__aurora i:nth-child(2) {
    width: 440px;
    height: 440px;
    bottom: -220px;
    left: -120px;
    background: radial-gradient(circle, rgba(56, 132, 232, .5), transparent 68%);
    animation: qco-drift 26s ease-in-out infinite reverse;
}

.qco-hero__aurora i:nth-child(3) {
    width: 300px;
    height: 300px;
    top: 34%;
    left: 42%;
    background: radial-gradient(circle, rgba(123, 94, 229, .42), transparent 70%);
    animation: qco-drift 30s ease-in-out infinite;
}

/* The fine grid overlay. Keeps the gradient from reading as a flat wash at
   large viewport widths, and is cheap — two repeating gradients, no image. */
.qco-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    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: 62px 62px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 78%);
}

.qco-hero > .boxed-container {
    position: relative;
    z-index: 1;
}

/* Asymmetric on purpose: the pitch column is wider than the form column, so
   the H1 gets a full measure instead of being squeezed to half the page. */
.qco-hero__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

@media (min-width: 1024px) {
    .qco-hero {
        padding: 78px 0 92px;
    }

    .qco-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 56px;
        align-items: center;
    }
}

/* ── hero: pitch column ─────────────────────────────────────────────── */

.qco-hero__pitch {
    max-width: 620px;
    min-width: 0;
}

.qco-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    padding: 7px 16px 7px 13px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #ede9ff;
    font-size: .845rem;
    font-weight: 600;
    line-height: 1;
}

/* The live pulse. Emerald, and the only emerald in the hero — it is saying
   "these roles are open now", which is the one claim the badge makes. */
.qco-dot {
    position: relative;
    display: inline-flex;
    width: 9px;
    height: 9px;
    flex: none;
}

.qco-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #34d399;
    opacity: .75;
    animation: qco-ping 1.5s cubic-bezier(0, 0, .2, 1) infinite;
}

.qco-dot::after {
    content: "";
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
}

.qco-hero__title {
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(2.1rem, 1.35rem + 3vw, 3.5rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.032em;
}

.qco-hero__lede {
    margin: 0 0 30px;
    max-width: 34em;
}

.qco-hero__lede p {
    margin: 0;
    color: rgba(233, 231, 255, .87);
    font-size: 1.06rem;
    line-height: 1.72;
}

/* ── hero: proof row ────────────────────────────────────────────────── */

.qco-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.qco-proof__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #e6e3ff;
    font-size: .795rem;
    font-weight: 600;
    line-height: 1;
}

.qco-proof__item svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: #34d399;
}

.qco-proof__item a {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
}

.qco-proof__item a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── hero: application form card ────────────────────────────────────── */

.qco-form-wrap {
    position: relative;
    min-width: 0;
}

/* The glow behind the card. Sits outside it so the card's own corner radius
   does not clip it. */
.qco-form-wrap::before {
    content: "";
    position: absolute;
    inset: -14px -10px -18px;
    border-radius: 32px;
    background: linear-gradient(140deg, rgba(162, 45, 234, .4), rgba(91, 93, 226, .28));
    filter: blur(26px);
    opacity: .75;
    pointer-events: none;
}

.qco-form-card {
    position: relative;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 24px;
    background: #fff;
    box-shadow:
        0 34px 64px -28px rgba(9, 6, 32, .72),
        0 2px 0 rgba(255, 255, 255, .6) inset;
}

@media (min-width: 640px) {
    .qco-form-card {
        padding: 34px;
    }
}

/* Arriving from a "Submit Your CV" link. On desktop the form is already near
   the top of the document, so the scroll itself is only a few dozen pixels and
   reads as nothing happening — this is what says "here it is". One shot, on
   :target, so it costs nothing on a normal page load. */
.qco-form-wrap:target .qco-form-card {
    animation: qco-landed 1.5s ease-out 1;
}

.qco-form-card__head {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eeecf7;
}

.qco-form-card__title {
    margin: 0;
    color: #14103a;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.015em;
}

.qco-form {
    display: grid;
    gap: 17px;
}

.qco-field {
    display: grid;
    gap: 7px;
}

.qco-label {
    color: #3d3960;
    font-size: .845rem;
    font-weight: 600;
    line-height: 1.3;
}

.qco-req {
    color: #e11d48;
}

.qco-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e3e0f2;
    border-radius: 12px;
    background: #f9f8fd;
    color: #14103a;
    font: inherit;
    font-size: .94rem;
    line-height: 1.4;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.qco-input::placeholder {
    color: #9995b5;
}

.qco-input:hover {
    border-color: #cfc9ea;
}

.qco-input:focus {
    outline: none;
    background: #fff;
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .14);
}

/* The file input keeps the native control — a styled label proxy would break
   the `required` validation message the browser attaches to the input itself,
   and that validation is the only gate this form has. Only its button half is
   restyled. */
.qco-input--file {
    padding: 9px 12px;
    cursor: pointer;
}

.qco-input--file::file-selector-button {
    margin-right: 13px;
    padding: 8px 15px;
    border: 0;
    border-radius: 9px;
    background: #f0ebff;
    color: #5b21b6;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease;
}

.qco-input--file:hover::file-selector-button {
    background: #e5dcff;
}

.qco-hint {
    margin: 0;
    color: #7d7899;
    font-size: .765rem;
    line-height: 1.5;
}

/* ── hero: validation feedback ──────────────────────────────────────── */

/* Blazor puts .invalid on a field that failed validation. Scoped under the card
   so it cannot reach the admin forms or anything else on the site. */
.qco-form-card .qco-input.invalid {
    border-color: #e11d48;
    background: #fff5f7;
}

.qco-form-card .qco-input.invalid:focus {
    border-color: #e11d48;
    box-shadow: 0 0 0 4px rgba(225, 29, 72, .13);
}

.qco-field__error {
    margin: 0;
    color: #be123c;
    font-size: .765rem;
    font-weight: 500;
    line-height: 1.5;
}

/* Confirms the chosen file, since the native input only shows its name in a
   control the applicant may have already scrolled past. */
.qco-field__ok {
    margin: 0;
    color: #047857;
    font-size: .765rem;
    font-weight: 500;
    line-height: 1.5;
}

/* The submission itself failing — no form row to file against, disk full, the
   database down. Distinct from a field error: nothing the applicant typed is
   wrong, so it sits above the form rather than under a field. */
.qco-form-error {
    padding: 12px 14px;
    border: 1px solid #fecdd3;
    border-radius: 12px;
    background: #fff1f2;
    color: #9f1239;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.6;
}

.qco-submit[disabled] {
    opacity: .72;
    cursor: progress;
    transform: none;
}

/* ── hero: consent ──────────────────────────────────────────────────── */

/* The shared ConsentCheck component, dressed as this card's boxed row. Boxed
   rather than loose small print because this checkbox is the whole gate on the
   form, and it should read as a control rather than a footnote.

   Written as overrides of ConsentCheck's own Tailwind utilities, which is legal
   here for the reason this whole sheet exists: these rules are unlayered and the
   bundle's utilities are inside @layer, so they win on origin regardless of
   specificity. The component's markup is not ours to fork — the wording is the
   point of it — so this dresses what it renders. */
.qco-consent-slot {
    padding-top: 0;
}

.qco-consent-slot > label {
    padding: 13px 14px;
    border: 1px solid #eae7f7;
    border-radius: 13px;
    background: #faf9fe;
    transition: border-color .18s ease, background .18s ease;
}

.qco-consent-slot > label:hover {
    border-color: #d9d2f2;
    background: #f6f4fd;
}

.qco-consent-slot input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #6d28d9;
}

.qco-consent-slot span {
    color: #5c5878;
    font-size: .775rem;
    line-height: 1.65;
}

.qco-consent-slot a {
    color: #5b21b6;
    font-weight: 600;
    text-underline-offset: 2px;
}

.qco-submit {
    margin-top: 4px;
    padding: 15px 26px;
    border-radius: 15px;
    font-size: 1rem;
}

/* Post-submit confirmation. Rendered in place of the form once an application is
   filed, so a filled-in form is never left on screen inviting a second send. */
.qco-success {
    margin-top: 16px;
    padding: 15px 16px;
    border: 1px solid #a7f3d0;
    border-radius: 13px;
    background: #ecfdf5;
}

.qco-success p {
    margin: 0;
    color: #065f46;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.6;
}

/* ── hero: mobile prompt ────────────────────────────────────────────── */

/* Carried over from the old markup, which showed it below lg only. It sits
   under the form on narrow screens as a restatement of the ask. */
.qco-mobile-cta {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.qco-mobile-cta__title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
}

.qco-mobile-cta__text {
    margin: 0 0 18px;
    color: rgba(233, 231, 255, .84);
    font-size: .9rem;
    line-height: 1.65;
}

@media (min-width: 1024px) {
    .qco-mobile-cta {
        display: none;
    }
}

/* ══ benefits ═══════════════════════════════════════════════════════════ */

.qco-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .qco-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .qco-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --qco-accent is set per card by the modifiers below; everything inside the
   card reads it, so a hue change is one declaration. */
.qco-benefit {
    position: relative;
    overflow: hidden;
    padding: 28px 26px 26px;
    border: 1px solid #ece9f6;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 16, 58, .04);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

/* The hairline that carries the card's hue. Scales in from the left on hover,
   which is the only motion on the card besides the lift. */
.qco-benefit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qco-accent), var(--qco-accent-soft));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.qco-benefit:hover {
    transform: translateY(-4px);
    border-color: var(--qco-accent-soft);
    box-shadow: 0 24px 44px -26px rgba(20, 16, 58, .4);
}

.qco-benefit:hover::before {
    transform: scaleX(1);
}

.qco-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    border-radius: 15px;
    background: var(--qco-accent-tint);
    color: var(--qco-accent);
    transition: background .24s ease, color .24s ease;
}

.qco-benefit__icon svg {
    width: 24px;
    height: 24px;
}

.qco-benefit:hover .qco-benefit__icon {
    background: var(--qco-accent);
    color: #fff;
}

.qco-benefit__title {
    margin: 0 0 10px;
    color: #14103a;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.012em;
}

.qco-benefit__text {
    margin: 0;
    color: #565273;
    font-size: .93rem;
    line-height: 1.72;
}

/* One hue per card. Six cards of equal weight need something other than their
   heading to be told apart at a glance; this is that, spent on 3px of rule and
   a 50px tile rather than on the whole card. */
.qco-benefit--indigo { --qco-accent: #4f46e5; --qco-accent-soft: #a5b4fc; --qco-accent-tint: #eef2ff; }
.qco-benefit--violet { --qco-accent: #7c3aed; --qco-accent-soft: #c4b5fd; --qco-accent-tint: #f5f3ff; }
.qco-benefit--blue   { --qco-accent: #2563eb; --qco-accent-soft: #93c5fd; --qco-accent-tint: #eff6ff; }
.qco-benefit--teal   { --qco-accent: #0d9488; --qco-accent-soft: #5eead4; --qco-accent-tint: #f0fdfa; }
.qco-benefit--amber  { --qco-accent: #d97706; --qco-accent-soft: #fcd34d; --qco-accent-tint: #fffbeb; }
.qco-benefit--rose   { --qco-accent: #e11d48; --qco-accent-soft: #fda4af; --qco-accent-tint: #fff1f2; }

/* ══ hiring split ═══════════════════════════════════════════════════════ */

.qco-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
}

@media (min-width: 1024px) {
    .qco-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 60px;
    }
}

.qco-split__body {
    min-width: 0;
}

.qco-split__copy {
    display: grid;
    gap: 16px;
    margin: 0 0 28px;
}

.qco-split__copy p {
    margin: 0;
    color: #4a4668;
    font-size: 1.03rem;
    line-height: 1.78;
}

/* ── hiring split: media ────────────────────────────────────────────── */

.qco-split__media {
    display: none;
}

@media (min-width: 1024px) {
    .qco-split__media {
        display: block;
        position: relative;
        min-height: 360px;
    }
}

.qco-media-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, .14);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 60px -34px rgba(20, 16, 58, .55);
}

.qco-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The tile the inline onerror handler reveals when the photo is missing. NO
   `display` here for the reason given at the top of this file — the element
   ships with `.hidden flex` from the bundle and the handler removes `.hidden`. */
.qco-media-fallback {
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(162, 45, 234, .16), transparent 62%),
        linear-gradient(160deg, #f6f3ff 0%, #fff 50%, #f1f0fe 100%);
}

.qco-media-fallback__inner {
    padding: 32px;
    text-align: center;
}

.qco-media-fallback__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin-bottom: 18px;
    border-radius: 22px;
    background: linear-gradient(140deg, #a22dea, #5b5de2);
    color: #fff;
    box-shadow: 0 20px 34px -18px rgba(124, 58, 237, .8);
}

.qco-media-fallback__mark svg {
    width: 38px;
    height: 38px;
}

.qco-media-fallback__title {
    margin: 0 0 6px;
    color: #14103a;
    font-size: 1.12rem;
    font-weight: 800;
}

.qco-media-fallback__meta {
    margin: 0;
    color: #6f6a8d;
    font-size: .84rem;
    letter-spacing: .02em;
}

/* ══ closing call to action ═════════════════════════════════════════════ */

.qco-cta-sec {
    padding: 0 0 72px;
}

.qco-cta {
    position: relative;
    overflow: hidden;
    padding: 56px 28px 52px;
    border-radius: 28px;
    background:
        radial-gradient(ellipse 70% 90% at 12% 0%, rgba(162, 45, 234, .55), transparent 60%),
        radial-gradient(ellipse 70% 90% at 88% 100%, rgba(59, 82, 226, .5), transparent 60%),
        linear-gradient(150deg, #17123f 0%, #1b1450 50%, #14103a 100%);
    box-shadow: 0 34px 70px -34px rgba(20, 16, 58, .7);
    text-align: center;
}

.qco-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000, transparent 76%);
}

.qco-cta > * {
    position: relative;
}

@media (min-width: 768px) {
    .qco-cta {
        padding: 68px 56px 62px;
    }
}

.qco-cta__title {
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.4rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.026em;
}

.qco-cta__text {
    margin: 0 auto 30px;
    max-width: 640px;
    color: rgba(226, 223, 255, .85);
    font-size: 1.03rem;
    line-height: 1.72;
}

.qco-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* The three numbers, on one rule under the buttons. Separated by hairlines
   rather than the pipe characters the old markup used, so a wrap never leaves
   a stray "|" at the start of a line. */
.qco-cta__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.qco-cta__stats span {
    position: relative;
    color: rgba(214, 210, 255, .8);
    font-size: .85rem;
    font-weight: 600;
}

.qco-cta__stats span + span::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    width: 1px;
    height: 13px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .22);
}

/* ══ link deck ══════════════════════════════════════════════════════════ */

.qco-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .qco-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .qco-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.qco-link-card {
    position: relative;
    display: block;
    padding: 22px 46px 22px 22px;
    border: 1px solid #ece9f6;
    border-radius: 18px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 16, 58, .04);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.qco-link-card:hover {
    transform: translateY(-3px);
    border-color: #c7bdf5;
    box-shadow: 0 22px 40px -26px rgba(20, 16, 58, .42);
}

.qco-link-card__title {
    margin: 0 0 7px;
    color: #4c1d95;
    font-size: 1rem;
    font-weight: 700;
}

.qco-link-card__text {
    margin: 0;
    color: #63607f;
    font-size: .875rem;
    line-height: 1.68;
}

.qco-link-card__chev {
    position: absolute;
    top: 24px;
    right: 20px;
    width: 17px;
    height: 17px;
    color: #b9b2e0;
    transition: transform .22s ease, color .22s ease;
}

.qco-link-card:hover .qco-link-card__chev {
    transform: translateX(3px);
    color: #7c3aed;
}

/* ══ quick actions ══════════════════════════════════════════════════════ */

.qco-quick-sec {
    padding: 0 0 84px;
}

.qco-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    border: 1px solid #ece9f6;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 40px -30px rgba(20, 16, 58, .45);
}

.qco-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px solid var(--qco-accent-soft);
    border-radius: 999px;
    background: var(--qco-accent-tint);
    color: var(--qco-accent);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}

.qco-pill svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.qco-pill:hover {
    transform: translateY(-2px);
    background: var(--qco-accent);
    border-color: var(--qco-accent);
    color: #fff;
}

.qco-pill--indigo { --qco-accent: #4f46e5; --qco-accent-soft: #ddd9fb; --qco-accent-tint: #eef2ff; }
.qco-pill--violet { --qco-accent: #7c3aed; --qco-accent-soft: #e2d9fd; --qco-accent-tint: #f5f3ff; }
.qco-pill--blue   { --qco-accent: #2563eb; --qco-accent-soft: #d3e3fd; --qco-accent-tint: #eff6ff; }
.qco-pill--teal   { --qco-accent: #0d9488; --qco-accent-soft: #c5f1ea; --qco-accent-tint: #f0fdfa; }

/* ── motion ─────────────────────────────────────────────────────────── */

@keyframes qco-ping {
    75%, 100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

/* Keeps the card's own two shadows and adds a third that expands and fades, so
   the ring grows out of the card rather than replacing its elevation. */
@keyframes qco-landed {
    0% {
        box-shadow:
            0 34px 64px -28px rgba(9, 6, 32, .72),
            0 2px 0 rgba(255, 255, 255, .6) inset,
            0 0 0 0 rgba(124, 58, 237, .55);
    }

    100% {
        box-shadow:
            0 34px 64px -28px rgba(9, 6, 32, .72),
            0 2px 0 rgba(255, 255, 255, .6) inset,
            0 0 0 16px rgba(124, 58, 237, 0);
    }
}

@keyframes qco-drift {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(24px, -20px, 0) scale(1.07);
    }
}

@media (prefers-reduced-motion: reduce) {

    .qco-hero__aurora i,
    .qco-dot::before,
    .qco-form-wrap:target .qco-form-card {
        animation: none;
    }

    .qco-btn,
    .qco-benefit,
    .qco-benefit::before,
    .qco-benefit__icon,
    .qco-link-card,
    .qco-link-card__chev,
    .qco-pill {
        transition: none;
    }

    .qco-btn:hover,
    .qco-benefit:hover,
    .qco-link-card:hover,
    .qco-pill:hover {
        transform: none;
    }

    .qco-benefit::before {
        transform: scaleX(1);
    }
}