/* =========================================
   Amaryllis — CAREER PAGE
   -----------------------------------------
   Loaded only on the Career template. style.css stays the base:
   tokens, reset, header/footer and the .reveal / .stagger motion
   system all come from there.

   Figma widths that matter: the job grid and the application form
   both run to 1374, the Why Join block to ~1290, and a job card is
   446.55 x 352.
========================================= */

.career-page {
    /* --- Page inset -------------------------------------------
     * Figma inspect: the Why Join block is 1280 wide on a 1440
     * frame, i.e. 80 either side — identical to the About page. Held
     * as the RATIO (80/1440 = 5.55%) rather than a hard cap, so the
     * content is exactly 1280 at the design width and keeps that
     * proportion on a larger display instead of stranding several
     * hundred pixels of white down each side.
     * ----------------------------------------------------------- */
    /* Why Join sits at x=80 in a 1280 block — 80/1440 = 5.55%. Held
       as a ratio with no ceiling, and the block carries no max-width,
       for the same reason as the wide sections below: a fixed cap
       does not bind at 1440 but does above it, so the margins would
       jump the moment the window grew past the design width. */
    --page-inset: max(18px, 5.55vw);
    --content-max: none;

    /* --- The page has TWO insets, not one ----------------------
     * Why Join sits at x=80 in a 1280 block. But the job grid
     * (1372 at x=34), the application form (1374 at x=34) and the
     * Life images (1364 at x=38) all run much closer to the edge.
     * Applying the 80px inset to those three made them roughly 92px
     * narrower than the design.
     * ----------------------------------------------------------- */
    /* Each wide section has its OWN inset in Figma, and they differ:
     *     hiring row   x=30  (1381 wide)   30/1440 = 2.08vw
     *     job grid     x=34  (1372 wide)   34/1440 = 2.36vw
     *     application  x=34  (1374 wide)
     *     life images  x=38  (1364 wide)   38/1440 = 2.64vw
     *
     * These are vw with a floor and NO ceiling, and the rows carry no
     * max-width. That matters: a fixed cap does not bind at 1440 but
     * does above it, so the margins jumped the moment the window grew
     * past the design width. Expressed as a ratio, the page holds
     * Figma's proportions at every size. */
    --inset-hiring:   max(12px, 2.08vw);
    --inset-openings: max(14px, 2.36vw);

    /* From the Figma file: the Career frame is #fdfdfd and every piece
       of copy on it is #1f1f1f. The only other text colour is the
       #747474 used for form placeholders. */
    --career-ink: var(--c-ink);
    --career-body: var(--c-ink);
    --career-muted: #747474;

    /* The green in the banner headline. Matches the Contact page
       accent — same brand green, scoped per page rather than added
       to the global token block. */
    --c-accent: var(--c-brand);
    --c-rule: var(--c-brand);

    /* Form fields are a flat grey fill with no border */
    --field-bg: #d9d9d9;
    --field-placeholder: var(--c-muted);

    /* Figma uses ONE card shadow across the whole file:
       DROP_SHADOW y14 blur25 spread0 #000000 at 20% opacity. It sits
       on the job cards, the hiring cards, the application form and
       the Contact form alike. This was 0 3px 14px at 9% — far too
       tight and far too faint. */
    /* --card-shadow is defined ONCE, in style.css :root. Do not
       redefine it here — that is how four different shadows ended up
       on the site in the first place.
       Figma gives the hiring card's inner image a shorter shadow
       (y8/blur8); the theme uses one value everywhere now. */
    /* NOT var(--card-shadow). Figma gives the hiring card's inner image
       panel y8/blur8 at 20%, against the y14/blur25 on the card itself.
       Verified across the whole file: the shadows are systematic per
       component, not drift. */
    --image-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
    --career-inset: clamp(20px, 3.9vw, 56px);
}

/* =========================================
   1. BANNER
========================================= */
.career-hero {
    position: relative;
    width: 100%;
    /* Figma draws this one 1440 x 692, but every banner on the site is
       now the same height: the window, less the sticky header. */
    height: var(--hero-h);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #efeae3;
}

.career-hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.career-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.50) 0%,
        rgba(255, 255, 255, 0.20) 30%,
        rgba(255, 255, 255, 0) 54%
    );
    pointer-events: none;
}

.career-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--career-inset);
}

/* Figma: the hero copy block is 765 wide at x=85, y=292. */
.career-hero-copy {
    max-width: 765px;
}

/* Figma: Source Sans Pro w700 64 / lh 74 / #1f1f1f. Was capped at 40. */
.career-hero-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(32px, 4.44vw, 62px);
    font-weight: 700;
    line-height: 1.16;
    color: var(--career-ink);
}

/* "Shape the Future." — the second line only */
.career-hero-copy h1 em {
    font-style: normal;
    color: var(--c-accent);
}

/* Figma: 'Line 2' runs 226px at y=475, with the lead starting at 495. */
.career-hero-rule {
    display: block;
    width: clamp(120px, 15.7vw, 226px);
    height: 3px;
    margin: 16px 0 20px;
    background: var(--c-rule);
}

/* Figma: Open Sans w600 24 / lh 24 / #1f1f1f, across the full 765. */
.career-hero-copy p {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.67vw, 22px);
    font-weight: 400;
    line-height: 1.35;
    color: var(--career-body);
    max-width: 765px;
}

.has-js .career-hero-copy > * {
    opacity: 0;
    animation: amaryllis-rise 0.9s var(--ease) forwards;
}

.has-js .career-hero-copy > *:nth-child(1) { animation-delay: 0.15s; }
.has-js .career-hero-copy > *:nth-child(2) { animation-delay: 0.28s; }
.has-js .career-hero-copy > *:nth-child(3) { animation-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
    .has-js .career-hero-copy > * {
        opacity: 1;
        animation: none;
    }
}

/* =========================================
   2. SHARED SECTION FURNITURE
========================================= */
/* Figma: every section title on this page is Source Sans Pro w700 40
   / lh 24 / #1f1f1f — "Our hiring process", "Current Opening",
   "Application Form". Was capped at 28. */
.career-section-title {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.78vw, 38px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--career-ink);
    margin-bottom: clamp(28px, 3.33vw, 48px);
}

/* =========================================
   3. WHY JOIN
   Copy left, illustration right. The heading belongs to the copy
   column, not to the section, so it is left-aligned inside it.
========================================= */
.career-why {
    padding: clamp(34px, 4vw, 58px) var(--page-inset) clamp(26px, 3vw, 42px);
    /* Figma: the Career frame is #fdfdfd, not pure white. */
    background: var(--c-page);
    overflow-x: clip;
}

.why-join {
    display: grid;
    /* Figma: a 1280 block at x=80 splitting 740 copy / 16 gap / 524
       artwork. Carried as fr units so the split survives at any width
       rather than only at 1280. The 703/518/59 here before was an
       approximation. */
    grid-template-columns: 740fr 524fr;
    gap: 16px;
    align-items: center;
    max-width: var(--content-max);
    margin: 0 auto;
}

/* Figma inspect: Source Sans Pro Bold 40 */
.why-join h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.78vw, 38px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--career-ink);
    margin-bottom: 18px;
}

/* Figma: Open Sans w600 24 / lh 40 / #1f1f1f in a 740 column. */
.why-join p {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.67vw, 22px);
    font-weight: 400;
    line-height: 1.67;
    color: var(--career-body);
}

.why-join-art {
    width: 100%;
    height: auto;
    /* An illustration, so it is never cropped — contain rather than
       cover, and the box holds the Figma ratio. */
    aspect-ratio: 524 / 424;
    object-fit: contain;
}

.has-js .why-join.stagger > *:nth-child(1) { --reveal-delay: 0ms;  --reveal-x: -24px; }
.has-js .why-join.stagger > *:nth-child(2) { --reveal-delay: 90ms; --reveal-x: 24px; }

/* =========================================
   4. HIRING PROCESS
   Five portrait cards in a row: illustration, label, step number.
========================================= */
/* Also a wide section: Figma's hiring row is 1381 at x=30. */
.career-hiring {
    padding: clamp(20px, 2.6vw, 36px) var(--inset-hiring) clamp(28px, 3.4vw, 48px);
    /* Figma: the Career frame is #fdfdfd, not pure white. */
    background: var(--c-page);
    overflow-x: clip;
}

.hiring-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Figma: five 241-wide cards in a 1381 row → (1381 - 5x241) / 4
       = 44px between them. The ~49 here was measured against a 1280
       column that this row does not actually use. */
    /* 44/1440 = 3.06vw, uncapped for the same reason as the inset. */
    gap: max(10px, 3.06vw);
    margin: 0 auto;
    /* Clearance for the number badges hanging off the bottom of
       each card. */
    padding-bottom: 3.5%;
}

.hiring-card {
    /* --- Card composition --------------------------------------
     * Read off the Figma card: 476 x 635, so a 0.75 ratio. Every
     * inside measurement is a share of the card's own WIDTH, so the
     * whole composition scales as one piece:
     *
     *   panel inset      5.9%      panel top       14.7%
     *   panel ratio      1.30      panel -> label  13.9%
     *   label type        8.8%     number type     12.0%
     *   number badge     21.8% across
     *
     * overflow stays visible: the number badge deliberately hangs
     * off the bottom edge.
     * ----------------------------------------------------------- */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma: Rectangle 41 is 241 x 316 with a 16px radius and the
       standard card shadow. The 341 measured earlier was the GROUP,
       which includes the number badge hanging below the card. */
    aspect-ratio: 241 / 316;
    border-radius: 16px;
    padding: 14.7% 5.9% 0;
    background: var(--c-page);
    box-shadow: var(--card-shadow);
    text-align: center;
    transition: box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.hiring-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow);
}

/* The illustration sits on its own raised panel inside the card,
   not flat against it. */
/* Figma: Rectangle 47 is 209 x 166, radius 8, with its own shorter
   shadow (y8 blur8) — not the card shadow. */
.hiring-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 209 / 166;
    border-radius: 8px;
    /* Restored. Figma gives the hiring card's inner panel its own
       shorter shadow — y8 / blur8 / #000000 at 20%, distinct from the
       y14/blur25 on the card around it. This was commented out, so the
       panel sat flat against the card. */
    /* box-shadow: var(--image-shadow); */
    object-fit: contain;
    background: var(--c-page);

    margin-bottom: 13.9%;
}

/* Figma I202:4953;206:3970: Source Sans Pro w600 24 / lh24 / #1f1f1f.
   Neither family nor weight was declared here, so these labels
   inherited Open Sans at w400 from body — the wrong typeface AND the
   wrong weight, on the only text in the card. */
.hiring-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(12px, 1.32vw, 20px);
    line-height: 1.35;
    color: var(--career-body);
    /* Two lines reserved — "Document Verification" and "Selection &
       Joining" wrap, the others do not, and the badge below is
       positioned off the card rather than off this text, so the
       labels have to hold their own height to stay level. */
    min-height: calc(2 * 1.35em);
}

/* --- Number badge ------------------------------------------------
 * A white disc centred on the card's bottom edge, hanging about a
 * third of its own height below it. Positioned against the card
 * rather than flowing after the label, so it sits at exactly the
 * same height on all five regardless of whether the label wrapped.
 * ---------------------------------------------------------------- */
.hiring-number {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 33%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21.8%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--c-page);
    box-shadow: var(--card-shadow);
    /* Figma: Source Sans Pro w700 40 / #1f1f1f. Was capped at 30. */
    font-family: var(--font-display);
    font-size: clamp(20px, 2.78vw, 38px);
    font-weight: 700;
    line-height: 1;
    color: var(--career-ink);
}

.has-js .hiring-grid.stagger > *:nth-child(n) { --reveal-x: 0px; }
.has-js .hiring-grid.stagger > *:nth-child(1) { --reveal-delay: 0ms; }
.has-js .hiring-grid.stagger > *:nth-child(2) { --reveal-delay: 70ms; }
.has-js .hiring-grid.stagger > *:nth-child(3) { --reveal-delay: 140ms; }
.has-js .hiring-grid.stagger > *:nth-child(4) { --reveal-delay: 210ms; }
.has-js .hiring-grid.stagger > *:nth-child(5) { --reveal-delay: 280ms; }

/* =========================================
   5. CURRENT OPENINGS
========================================= */
.career-openings {
    padding: clamp(24px, 3vw, 42px) var(--inset-openings) clamp(34px, 4vw, 56px);
    /* Figma: the Career frame is #fdfdfd, not pure white. */
    background: var(--c-page);
    overflow-x: clip;
}

/* Aligned to the job grid below it, not to the narrower 1280 column. */
.job-filters {
    display: flex;
    gap: 12px;
    margin: 0 auto clamp(20px, 2.4vw, 32px);
    /* Above the cards. The cards carry a reveal transform, which makes
       each of them a stacking context of its own, and being later in
       the document they were painting over an open dropdown. */
    position: relative;
    z-index: 20;
}

/* The phone sheet's chrome — the Filters button, its head and its
   foot — is not drawn at this width, and the two wrappers between the
   form and its <details> are display:contents, so the row is laid out
   exactly as it was before the sheet existed. All four are switched on
   together in the max-width 768 block. */
.job-filter-toggle,
.job-filter-sheet-head,
.job-filter-sheet-foot,
.job-filter-applied,
/* The named values under a rail row - phone sheet only, the same as
   the product listing's .filter-chosen. */
.job-filter-chosen {
    display: none;
}

.job-filter-bar,
.job-filter-groups {
    display: contents;
}

/* No width cap: the row spans the grid below it, six equal chips, the
   way the design draws it. The cap was 216px, which held the row to
   about 1356 while the cards ran the full width of the page.

   The flex sizing is on the <details> around the chip — that is the
   flex item, and the chip fills it. */
.job-filter-group {
    flex: 1 1 0;
    min-width: 0;
    /* The anchor for its own panel, so the dropdown is exactly as wide
       as the chip above it. */
    position: relative;
}

/* The summary fills its <details>; Clear all shares this class but is
   a link at the end of the row and keeps its own width. */
summary.job-filter {
    width: 100%;
}

.job-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: max(40px, 2.78vw);
    padding: 9px 16px;
    background: var(--c-page);
    border: 1px solid var(--career-ink);
    border-radius: 6px;
    font-family: var(--font-body);
    /* Figma's 13 at 1440 is 0.9vw. Capped rather than left fixed so a
       screen wider than the design does not shrink the type inside a
       chip that has grown. */
    font-size: clamp(12px, 0.9vw, 16px);
    /* w600, not w500. The design uses only 400, 600 and 700 across all
       1401 of its text nodes — w500 was resolving to the 400 face, so
       these pills rendered lighter than anything around them. */
    font-weight: 400;
    color: var(--career-ink);
    cursor: pointer;
    transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

/* Caret drawn from two borders — no icon font, and it inherits the
   label colour on hover for free. */
.job-filter-caret {
    width: 6px;
    height: 6px;
    /* 1.6px, not 1.5px, and the difference is visible.
     *
     * A border is drawn in whole DEVICE pixels. Windows at 125%
     * scaling - which is the common default on a laptop, and what this
     * was reported on - gives a device pixel ratio of 1.25. There,
     * 1.5px works out at 1.875 device pixels, the browser floors it to
     * 1, and the caret is drawn at 0.8 CSS px: thin, pale and patchy
     * against the chip.
     *
     * 1.6px is exactly 2.0 device pixels at that ratio, so it lands on
     * the grid and draws solid. The product-listing filters have always
     * used 1.6px, which is why theirs looked right and these did not.
     * ----------------------------------------------------------- */
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s var(--ease-out);
}

.job-filter:hover {
    background: var(--career-ink);
    color: var(--c-page);
}

.job-filter:hover .job-filter-caret {
    transform: translateY(0) rotate(45deg);
}

/* A <summary> draws a disclosure triangle of its own. The caret above
   is the design's, so the native one goes — two rules, because Safari
   uses the ::-webkit- pseudo-element and everything else honours
   `display` on the summary box. */
.job-filter::-webkit-details-marker { display: none; }
.job-filter::marker { content: ''; }
.job-filter { list-style: none; }

/* Open and chosen read the same as hovered: this chip is the one in
   play. */
.job-filter-group[open] > .job-filter,
.job-filter-group.has-selection > .job-filter {
    background: var(--career-ink);
    color: var(--c-page);
}

.job-filter-group[open] > .job-filter .job-filter-caret {
    transform: translateY(2px) rotate(225deg);
}

/* --- The panel ---------------------------------------------------
 * The same dropdown as the product listing's filters: drawn by the
 * theme rather than by the browser, so the choices are legible and
 * styled. A native <select> could not be: its option list is painted
 * by the operating system, and it inherited the control's own opacity,
 * which left the list blank.
 * ------------------------------------------------------------- */
.job-filter-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 170px;
    padding: 10px 12px;
    background: var(--c-page);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(31, 31, 31, 0.14);
    text-align: left;
}

.job-filter-options {
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.job-filter-options li {
    margin: 0 0 2px;
}

.job-filter-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: clamp(12px, 0.9vw, 16px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--career-ink);
    cursor: pointer;
    transition: background-color 0.2s var(--ease-out);
}

.job-filter-option:hover,
.job-filter-option:focus-visible {
    background: rgba(31, 31, 31, 0.05);
}

/* The real checkbox, off screen but still the control: the box beside
   it is drawn, and :checked on the input paints the tick. */
.job-filter-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.job-filter-box {
    flex: 0 0 auto;
    position: relative;
    width: 18px;
    height: 18px;
    border: 1.6px solid rgba(31, 31, 31, 0.25);
    border-radius: 3px;
    background: var(--c-white);
    transition:
        background-color 0.2s var(--ease-out),
        border-color 0.2s var(--ease-out);
}

/* Tick drawn from two borders, the same trick as the caret. */
.job-filter-box::after {
    content: '';
    position: absolute;
    top: 1.5px;
    left: 5.5px;
    width: 4.5px;
    height: 9px;
    border-right: 2px solid var(--c-page);
    border-bottom: 2px solid var(--c-page);
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s var(--ease-out);
}

.job-filter-option input:checked + .job-filter-box {
    background: var(--c-brand);
    border-color: var(--c-brand);
}

.job-filter-option input:checked + .job-filter-box::after {
    transform: rotate(45deg) scale(1);
}

.job-filter-option input:focus-visible + .job-filter-box {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

.job-filter-option-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* How many values are ticked in a filter, so a closed chip still says
   it is doing something. */
.job-filter-tally {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--c-brand);
    color: var(--c-page);
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1;
}

/* A tick applies straight away when the script runs, so this row is
   only for visitors without JavaScript. */
.job-filter-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(31, 31, 31, 0.12);
}

.has-js .job-filter-foot {
    display: none;
}

.job-filter-reset {
    font-family: var(--font-body);
    font-size: clamp(12px, 0.85vw, 14px);
    font-weight: 400;
    color: var(--career-body);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.job-filter-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 16px;
    background: var(--career-ink);
    border: 1px solid var(--career-ink);
    border-radius: 4px;
    color: var(--c-page);
    font-family: var(--font-body);
    font-size: clamp(12px, 0.85vw, 14px);
    font-weight: 600;
    cursor: pointer;
}

/* Figma: six 447-wide cards in a 1372 grid at x=34 — columns at
   34 / 497 / 959 gives a 16px column gap, and rows at 1979 / 2359
   gives a 28px row gap. */
.job-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Figma: 28px between rows, 16px between columns — 1.94vw and
       1.11vw of the 1440 frame. I briefly had both at 1.11, which
       halved the row gap. */
    gap: max(14px, 1.94vw) max(8px, 1.11vw);
    margin: 0 auto;
}

/* Figma: 447 x 352, radius 8, fill #fdfdfd, with the inner content
   block inset 21px horizontally and 24px from the top. */
/* The inset follows the card. Fixed at 24/21 it looked pinched once
   the card grew past the design's 447 on a wide screen. */
.job-card {
    display: flex;
    flex-direction: column;
    padding: max(24px, 1.67vw) max(21px, 1.46vw) max(21px, 1.46vw);
    background: var(--c-page);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.job-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow);
}

/* Figma: Open Sans w600 24 / lh 40 / #1f1f1f — the body font, not
   the display font, and much larger than the 19 this was capped at. */
/* All three sizes below are the design's figure at 1440 expressed in
   vw, with a floor and a ceiling. They were fixed, so on a screen half
   again as wide as the design the cards grew and the type inside them
   did not — which is what made the copy read as too small. */
.job-card h3 {
    font-family: var(--font-body);
    /* Figma 24 / 1440 = 1.67vw. */
    font-size: clamp(18px, 1.67vw, 30px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--career-ink);
    margin-bottom: max(12px, 0.83vw);
}

/* Figma: Open Sans w400 12 / lh 20 / #1f1f1f in a 405 column. */
.job-summary {
    font-family: var(--font-body);
    font-size: clamp(12px, 0.9vw, 17px);
    font-weight: 400;
    line-height: 1.67;
    color: var(--career-body);
    margin-bottom: max(14px, 0.97vw);
}

/* --- Long descriptions, clamped on the card ------------------------
 * A real job description pasted into the summary field runs to a dozen
 * paragraphs. Whole, it buried the Apply button and made every card a
 * different height.
 *
 * The clamp is CSS, not a PHP truncation: the full text stays in the
 * markup for find-in-page and for search engines, and there is no
 * half-sentence ending in an ellipsis. The fade at the foot says the
 * text continues without needing the word "more" inside it.
 * ------------------------------------------------------------------ */
.job-summary-wrap.is-clamped {
    position: relative;
}

.job-summary-wrap.is-clamped .job-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    margin-bottom: 0;
}

/* The fade sits over the last line. pointer-events:none so it cannot
   intercept a click meant for the text or the button below. */
.job-summary-wrap.is-clamped::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.2em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--career-card, #fff) 92%);
    pointer-events: none;
}

/* No script, no dialog — so the clamp comes off and the whole thing is
   simply on the card. A truncated description with no way to open it
   would be worse than a tall card. */
.no-js .job-summary-wrap.is-clamped .job-summary {
    display: block;
    overflow: visible;
}

.no-js .job-summary-wrap.is-clamped::after,
.no-js .job-more {
    display: none;
}

.job-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 max(14px, 0.97vw);
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-size: clamp(12px, 0.86vw, 15px);
    font-weight: 600;
    color: var(--career-ink);
    cursor: pointer;
    transition: gap 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}

.job-more:hover,
.job-more:focus-visible {
    gap: 11px;
    opacity: 0.78;
}

/* Same two-border caret the filters use, pointing right — including
   the 1.6px, which lands on a whole device pixel at 125% display
   scaling where 1.5px does not. See .job-filter-caret. */
.job-more-caret {
    width: 6px;
    height: 6px;
    border-right: 1.6px solid currentColor;
    border-top: 1.6px solid currentColor;
    transform: rotate(45deg);
}

.job-meta {
    /* margin-bottom:auto pushes the button to the card's foot so all
       three in a row line up even when one summary runs longer. */
    margin-bottom: auto;
    font-size: clamp(11px, 0.85vw, 16px);
    line-height: 1.7;
    color: var(--career-body);
}

.job-meta dt {
    display: inline;
    font-weight: 700;
    color: var(--career-ink);
}

.job-meta dd {
    display: inline;
    margin: 0;
}

/* Each label/value pair on its own line, without a wrapper element
   around them — dt and dd are inline, so the break goes after dd. */
.job-meta dd::after {
    content: '';
    display: block;
}

.job-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Figma: 404 x 34, radius 4, fill #1f1f1f, label Open Sans w700
       12 / lh 40 / #fdfdfd — 34/1440 and 12/1440, so the button grows
       with the card rather than sitting as a thin strip across it. */
    min-height: max(34px, 2.36vw);
    margin-top: max(16px, 1.11vw);
    padding: 8px 16px;
    background: var(--c-ink);
    border: 1px solid var(--c-ink);
    border-radius: 4px;
    color: var(--c-page);
    font-family: var(--font-body);
    font-size: clamp(12px, 0.9vw, 17px);
    font-weight: 700;
    transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

/* Brand green on hover, like every other solid CTA on the site.
   Figma gives each of these a Default and a Default_hover, and the
   hover is always #81af4a on #fdfdfd. This was inverting to
   transparent instead. --c-brand is #81af4a. */
.job-apply:hover,
.job-apply:focus-visible {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-page);
}

/* =========================================
   FULL JOB DESCRIPTION DIALOG
   -----------------------------------------
   One dialog for the whole list, filled in on open. Built to match
   the catalogue dialog: same backdrop wash and blur, same soft
   shadow, same rounded card — so the site has one modal, not two
   that nearly agree.
========================================= */
.job-dialog {
    width: min(calc(100vw - 32px), 680px);
    max-width: none;
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

/* Centred. A browser's own dialog styles manage this with margin:auto
   against their own max-width; overriding that max-width above leaves
   the box in the top-left corner without this. Same fix as the
   catalogue dialog. */
.job-dialog[open] {
    position: fixed;
    inset: 0;
    margin: auto;
}

.job-dialog::backdrop {
    background: rgba(31, 31, 31, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s var(--ease-out);
}

.job-dialog.is-open::backdrop {
    opacity: 1;
}

/* --- The animation ----------------------------------------------
 * On the CARD, not the <dialog>. A dialog goes from display:none to
 * display:block, and a transition has nothing to animate from across
 * that change — which is why the class is added a frame after
 * showModal() rather than being hung off [open].
 *
 * It rises and scales very slightly. A big scale on a tall panel
 * reads as a bounce; 0.97 to 1 just gives it somewhere to come from.
 * --------------------------------------------------------------- */
.job-dialog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 48px);
    padding: clamp(26px, 3.2vw, 44px) clamp(22px, 3.2vw, 46px) clamp(22px, 2.6vw, 36px);
    border-radius: clamp(16px, 1.7vw, 24px);
    background: var(--c-page, #fdfdfd);
    box-shadow: 0 24px 60px rgba(31, 31, 31, 0.22);

    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}

.job-dialog.is-open .job-dialog-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.job-dialog-close {
    position: absolute;
    top: clamp(12px, 1.3vw, 18px);
    right: clamp(12px, 1.3vw, 18px);
    display: inline-flex;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--career-muted);
    cursor: pointer;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.job-dialog-close:hover,
.job-dialog-close:focus-visible {
    background: rgba(31, 31, 31, 0.07);
    color: var(--career-ink);
}

.job-dialog-close svg {
    width: 20px;
    height: 20px;
}

.job-dialog-title {
    /* Room for the close button, so a long profile name cannot run
       underneath it. */
    margin: 0 44px 14px 0;
    font-family: var(--font-display);
    font-size: clamp(19px, 1.7vw, 26px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--career-ink);
}

/* The same two-column list as the card, copied in wholesale. */
.job-dialog-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(31, 31, 31, 0.1);
    font-family: var(--font-body);
    font-size: clamp(12px, 0.86vw, 15px);
}

.job-dialog-meta[hidden] { display: none; }

.job-dialog-meta dt {
    font-weight: 600;
    color: var(--career-ink);
}

.job-dialog-meta dd {
    margin: 0;
    color: var(--career-body);
}

/* The only part that scrolls. The title, the meta and Apply stay put,
   so the button is reachable however long the description is — which
   was the whole complaint about the card. */
.job-dialog-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    padding-right: 6px;
    font-family: var(--font-body);
    font-size: clamp(13px, 0.93vw, 16px);
    line-height: 1.75;
    color: var(--career-body);
    overscroll-behavior: contain;
}

.job-dialog-body::-webkit-scrollbar { width: 6px; }
.job-dialog-body::-webkit-scrollbar-thumb {
    background: rgba(31, 31, 31, 0.18);
    border-radius: 3px;
}

.job-dialog-apply {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 28px;
    border: 1.5px solid var(--career-ink);
    border-radius: 999px;
    background: var(--career-ink);
    font-family: var(--font-body);
    font-size: clamp(13px, 0.9vw, 15px);
    font-weight: 600;
    color: var(--c-page);
    text-decoration: none;
    transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.job-dialog-apply:hover,
.job-dialog-apply:focus-visible {
    background: var(--c-brand);
    border-color: var(--c-brand);
}

.job-dialog-apply[hidden] { display: none; }

@media (max-width: 576px) {
    .job-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 24px);
    }

    .job-dialog-card {
        max-height: calc(100dvh - 24px);
    }

    .job-dialog-apply {
        align-self: stretch;
    }
}

/* Someone who has asked for less motion gets the dialog without the
   rise — still a fade, so it does not simply appear. */
@media (prefers-reduced-motion: reduce) {
    .job-dialog-card {
        transform: none;
        transition: opacity 0.15s linear;
    }

    .job-dialog.is-open .job-dialog-card {
        transform: none;
    }

    .job-more { transition: none; }
}

.has-js .job-grid.stagger > *:nth-child(3n + 1) { --reveal-delay: 0ms;   --reveal-x: -22px; }
.has-js .job-grid.stagger > *:nth-child(3n + 2) { --reveal-delay: 80ms;  --reveal-x: 0px; }
.has-js .job-grid.stagger > *:nth-child(3n + 3) { --reveal-delay: 160ms; --reveal-x: 22px; }

/* =========================================
   6. APPLICATION FORM
========================================= */
.career-apply {
    /* Figma sits this block far closer to the sections either side
       than the generous padding here was giving it. */
    padding: clamp(14px, 1.8vw, 26px) var(--inset-openings) clamp(20px, 2.4vw, 34px);
    background: var(--c-page);
}

/* Figma: 1374 x 607, radius 19.23, fill #fdfdfd, content inset 29px.
   No border — the card is distinguished from the #fdfdfd page only by
   its radius and the fields inside it. */
.apply-card {
    max-width: none;
    margin: 0 auto;
    padding: clamp(18px, 2.01vw, 29px);
    background: var(--c-page);
    border-radius: 19px;
    /* Rectangle 35 carries the same drop shadow as every other card.
       Removing the old 1px border left this floating with nothing at
       all — the shadow IS the card's edge in the design. */
    box-shadow: var(--card-shadow);
}

/* Figma: Open Sans w400 28.9 / lh 48.1 / #1f1f1f. */
.apply-card h3 {
    font-family: var(--font-body);
    font-size: clamp(19px, 2.01vw, 27px);
    font-weight: 400;
    line-height: 1.66;
    color: var(--career-ink);
    margin-bottom: 14px;
}

/* Figma: the three fields are NOT equal thirds. Row 1 sits at
   x = 63 / 485 / 954 measuring 401 / 443 / 426; row 2 at
   x = 63 / 485 / 949 measuring 401 / 443 / 431. Carried as fr so the
   proportions hold at any width. Rows are 24px apart. */
.apply-row {
    display: grid;
    grid-template-columns: 401fr 443fr 428fr;
    gap: 24px 21px;
    margin-bottom: 24px;
}

.apply-row--single {
    grid-template-columns: 1fr;
}

.apply-field {
    display: flex;
    flex-direction: column;
}

/* Figma: Open Sans w400 19.2 / lh 48.1 / #1f1f1f. */
/* --- Label metrics ----------------------------------------------
 * The visible label and the .label-spacer that stands in for it over
 * the second half of a pair ("Last", which has no label of its own)
 * MUST occupy identical vertical space, or the two inputs in that row
 * sit at different heights.
 *
 * They are declared TOGETHER for exactly that reason. Sizing the
 * label on its own is what pushed the "Last" field out of line: the
 * label went to 19px while the spacer stayed at 14px with a tighter
 * line-height, a difference of about 11px.
 * ------------------------------------------------------------- */
.apply-field label,
.apply-field .label-spacer {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(14px, 1.33vw, 17px);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 7px;
}

.apply-field label {
    color: var(--career-ink);
}

/* One visible label per pair in the design — "Full Name" sits over
   First and nothing sits over Last. The second input still needs an
   accessible name, so it carries a visually hidden label. */
.label-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Keeps the Last field level with the labelled ones beside it
   without faking it through margins. */
/* Metrics come from the shared rule above — nothing here may set
   font-size, line-height or margin, or the pair drifts apart again. */
.label-spacer {
    visibility: hidden;
}

.apply-field input,
.apply-field textarea {
    width: 100%;
    padding: 10px 13px;
    background: var(--field-bg);
    border: 1px solid transparent;
    /* Figma: radius 4.81 on a #d9d9d9 fill. */
    border-radius: 5px;
    font-family: var(--font-body);
    /* Figma: placeholders are Open Sans w400 16.8. */
    font-size: 17px;
    color: var(--career-ink);
    /* Figma draws these 35px tall; lifted to 40 so they are
       comfortably tappable. The block's proportions are unchanged. */
    min-height: 40px;
    transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

/* Figma: the message field is 1317 x 171. */
.apply-field textarea {
    min-height: 171px;
    resize: vertical;
    line-height: 1.6;
}

.apply-field input::placeholder,
.apply-field textarea::placeholder {
    color: var(--field-placeholder);
}

/* No border at rest, so focus must show without anything jumping —
   the transparent border above reserves the space, this colours it. */
.apply-field input:focus,
.apply-field textarea:focus {
    outline: none;
    background: #d0d0d0;
    border-color: var(--career-ink);
}

/* --- Upload CV --------------------------------------------------
 * A native file input renders differently in every browser and none
 * of them look like the design. The real input is hidden and the
 * label is styled as the field instead — clicking the label still
 * opens the picker, and it stays keyboard reachable because the
 * input is moved off-screen rather than display:none.
 * ------------------------------------------------------------- */
.file-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 10px 13px;
    background: var(--field-bg);
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 17px;
    color: var(--field-placeholder);
    cursor: pointer;
    transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.file-field input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Once a file is chosen the script swaps the text and adds this
   class, so the name reads as entered content rather than a prompt. */
.file-field.has-file {
    color: var(--career-ink);
}

.file-field:hover,
.file-field:focus-within {
    background: #d0d0d0;
    border-color: var(--career-ink);
}

.apply-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Figma: the Submit CTA is 1317 x 51, radius 4, fill #1f1f1f,
       label Source Sans 3 w700 14 / lh 40 / #fdfdfd. Note the family:
       this one button uses the display font while every other control
       on the form is Open Sans. */
    min-height: 51px;
    /* Message field ends at 3340, Submit begins at 3369 → 29px. */
    margin-top: 29px;
    padding: 12px 20px;
    background: var(--c-ink);
    border: 1px solid var(--c-ink);
    border-radius: 4px;
    color: var(--c-page);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

/* Brand green on hover, like every other solid CTA on the site.
   Figma gives each of these a Default and a Default_hover, and the
   hover is always #81af4a on #fdfdfd. This was inverting to
   transparent instead. --c-brand is #81af4a. */
.apply-submit:hover,
.apply-submit:focus-visible {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-page);
}

/* Honeypot — bots fill every field they find, humans never see this
   one. Positioned off-screen rather than display:none, which some
   bots check for. */
.career-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =========================================
   7. RESPONSIVE
========================================= */
@media (max-width: 1100px) {
    .job-filter {
        padding: 9px 11px;
        gap: 7px;
    }
}

@media (max-width: 992px) {
    /* Copy above, illustration below */
    .why-join {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .why-join-art {
        max-width: 524px;  /* Figma: the Why Join artwork is 524 x 424 */
        margin: 0 auto;
    }

    .has-js .why-join.stagger > *:nth-child(1),
    .has-js .why-join.stagger > *:nth-child(2) { --reveal-x: 0px; }

    /* Five across becomes too narrow to read the labels */
    .hiring-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(12px, 2.4vw, 26px);
        /* The cards wrap into rows here, and each number badge hangs a
           third of its height (about 20px) below its card. A row gap
           narrower than that put the badge on top of the card below. */
        row-gap: 44px;
    }

    /* Three across makes each card far wider than the Figma tile,
       so the ratio is dropped and the height comes from the content.
       The badge keeps its proportions relative to the card width. */
    .hiring-card {
        aspect-ratio: auto;
        padding: 20px 16px 34px;
    }

    .hiring-card img { margin-bottom: 16px; }
    .hiring-number { width: 62px; }

    .why-join p { line-height: 1.7; }

    /* Six across no longer fits, so they wrap — three and three rather
       than four and a ragged two. */
    .job-filter-group {
        flex: 1 1 calc(33.333% - 8px);
    }

    .job-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .has-js .job-grid.stagger > *:nth-child(3n + 1),
    .has-js .job-grid.stagger > *:nth-child(3n + 2),
    .has-js .job-grid.stagger > *:nth-child(3n + 3) {
        --reveal-delay: 0ms;
        --reveal-x: 0px;
    }

    .has-js .job-grid.stagger > *:nth-child(2n + 1) { --reveal-x: -20px; }
    .has-js .job-grid.stagger > *:nth-child(2n + 2) { --reveal-delay: 90ms; --reveal-x: 20px; }

    /* Upload CV drops onto its own line rather than sitting as a
       cramped third column */
    .apply-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* =====================================================
       PHONE FILTER SHEET
       -----------------------------------------------------
       The same component as the product listing's, so the two
       filter bars on the site behave identically. See the long
       note in css/products.css for the layout; this is that
       layout in the Career page's own tokens.
       ===================================================== */
    .has-js .job-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 8px 16px;
        background: var(--c-page);
        border: 1px solid var(--career-ink);
        border-radius: 8px;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 600;
        color: var(--career-ink);
        cursor: pointer;
    }

    .job-filter-toggle-icon {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
    }

    /* --- Applied filters, on the page, each one removable ---------
     * The chips are the only sign of what is filtered once the sheet
     * is closed. Plain links, so no script is involved. Same component
     * as the product listing's .filter-applied.
     * ----------------------------------------------------------- */
    .job-filter-applied {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 4px 0 4px;
    }

    .job-filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 30px;
        padding: 4px 10px;
        background: var(--c-brand);
        border-radius: 999px;
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--c-white);
    }

    .job-filter-chip-x {
        font-size: 16px;
        line-height: 1;
        opacity: 0.85;
    }

    .job-filter-chip--clear {
        background: transparent;
        border: 1px solid var(--career-ink);
        color: var(--career-ink);
    }

    .has-js .job-filters.is-open .job-filter-toggle {
        background: var(--career-ink);
        border-color: var(--career-ink);
        color: var(--c-white);
    }

    /* The scrim, drawn by the button that opened the sheet — so a tap
       on it arrives as a click on that button and closes it again. */
    .has-js .job-filters.is-open .job-filter-toggle::after {
        content: '';
        position: fixed;
        z-index: 1100;
        inset: 0;
        background: rgba(31, 31, 31, 0.45);
    }

    .has-js .job-filters:not(.is-open) .job-filter-bar {
        display: none;
    }

    /* --- Why the reveal has to go here ---------------------------
     * .job-filters carries the scroll reveal, and .reveal sets both a
     * transform and will-change: transform. Either one makes an
     * element the containing block for a position:fixed DESCENDANT —
     * so the sheet below was being pinned to this row, 1,400px down
     * the page, instead of to the bottom of the screen.
     *
     * The row is shown at full strength at this width instead. It is
     * one short bar on a phone; it arriving with the page costs
     * nothing. (The product bar needs the same rule for the same
     * reason — see css/products.css.)
     * ----------------------------------------------------------- */
    .has-js .job-filters.reveal {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
        will-change: auto;
    }

    .has-js .job-filters.is-open .job-filter-bar {
        position: fixed;
        z-index: 1200;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        height: min(80dvh, 620px);
        margin: 0;
        background: var(--c-page);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 40px rgba(31, 31, 31, 0.22);
        overflow: hidden;
    }

    .has-js .job-filters.is-open .job-filter-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: none;
        padding: 16px 18px 14px;
        border-bottom: 1px solid #e6e6e6;
    }

    .job-filter-sheet-title {
        margin: 0;
        font-family: var(--font-display);
        font-size: 19px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--career-ink);
    }

    .job-filter-sheet-close {
        display: inline-flex;
        padding: 4px;
        background: none;
        border: 0;
        color: var(--career-ink);
        cursor: pointer;
    }

    .job-filter-sheet-close svg {
        width: 20px;
        height: 20px;
    }

    .has-js .job-filters.is-open .job-filter-groups {
        position: relative;
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        background: #f5f6f7;
    }

    .has-js .job-filters.is-open .job-filter-group {
        display: block;
        width: 38%;
        position: static;
        flex: none;
    }

    /* Rail rows, not chips: the filled-chip treatment is undone for
       every state that sets it, :hover included — white text on the
       rail's light grey is invisible. */
    .has-js .job-filters.is-open .job-filter,
    .has-js .job-filters.is-open .job-filter:hover,
    .has-js .job-filters.is-open .job-filter-group.has-selection > .job-filter {
        justify-content: flex-start;
        min-height: 52px;
        padding: 10px 14px;
        background: transparent;
        border: 0;
        border-radius: 0;
        font-size: 14px;
        color: var(--career-muted);
        text-align: left;
    }

    .has-js .job-filters.is-open .job-filter-group.has-selection > .job-filter {
        color: var(--career-ink);
        font-weight: 700;
    }

    /* --- What is ticked, named under the filter -------------------
     * Client request. The rail said a filter was on and how many
     * values, but not which - and with the panel closed that is all
     * you can see. Two lines now: the filter's name, then its chosen
     * values in small brand-green type.
     * ----------------------------------------------------------- */
    .has-js .job-filters.is-open .job-filter {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .has-js .job-filters.is-open .job-filter-chosen {
        display: block;
        max-width: 100%;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--c-brand);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .has-js .job-filters.is-open .job-filter-tally {
        display: none;
    }

    .has-js .job-filters.is-open .job-filter-group[open] > .job-filter {
        background: var(--c-page);
        border-left: 3px solid var(--c-brand);
        padding-left: 11px;
        color: var(--career-ink);
        font-weight: 700;
    }

    .has-js .job-filters.is-open .job-filter-caret {
        display: none;
    }

    .has-js .job-filters.is-open .job-filter-panel {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 38%;
        width: auto;
        min-width: 0;
        padding: 14px 16px;
        background: var(--c-page);
        border-radius: 0;
        box-shadow: none;
        overflow-y: auto;
    }

    .has-js .job-filters.is-open .job-filter-options {
        columns: auto;
        max-height: none;
    }

    .has-js .job-filters.is-open .job-filter-option {
        padding: 9px 0;
        font-size: 14px;
    }

    .has-js .job-filters.is-open .job-filter-foot,
    .has-js .job-filters.is-open .job-filter--clear {
        display: none;
    }

    .has-js .job-filters.is-open .job-filter-sheet-foot {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: none;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid #e6e6e6;
        background: var(--c-page);
    }

    .job-filter-sheet-clear {
        flex: 0 0 auto;
        padding: 10px 4px;
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 700;
        color: var(--career-ink);
    }

    .job-filter-sheet-apply {
        flex: 1 1 auto;
        min-height: 44px;
        padding: 10px 18px;
        background: var(--c-brand);
        border: 0;
        border-radius: 8px;
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 700;
        color: var(--c-white);
        cursor: pointer;
    }

    /* --- No JavaScript ------------------------------------------
     * .is-open is only ever set by the script, so none of the above
     * applies: the bar stays in the page as the wrapping row of chips
     * it was before the sheet existed, two to a row.
     * ----------------------------------------------------------- */
    .job-filter-group {
        flex: 1 1 calc(50% - 6px);
    }

    .job-filter {
        min-height: 36px;
    }
}

@media (max-width: 576px) {
    /* --- Phone: the banner carries its HEADLINE only ---------------
     * Client request, and the same rule on every page that has a
     * banner. At 375px the frame is too shallow for a headline and a
     * standfirst both; the headline alone sits comfortably on the
     * photograph, which is where the client wants it. Everything here
     * is back from 577px up.
     * ----------------------------------------------------------- */
    .career-hero-copy p,
    .career-hero-rule {
        display: none;
    }

    /* --- Bring the person into frame -----------------------------
     * Measured off the file (2880 x 1384): the left half is blank
     * window wall - mean luminance 234, detail 5 to 10 - and everything
     * in the photograph, the woman, the plant, the desk, sits in the
     * right 40% (detail 50 to 62).
     *
     * A phone frame is about 375 x 440, so cover shows only a 41% wide
     * slice of it. Centred, that slice was source 29% to 70%: almost
     * all wall, with her cut off at the right edge.
     *
     * Held at 100% it shows roughly 59% to 100% instead - both people are in
     * frame whole, and the table along the bottom is still clear for
     * the headline.
     * ----------------------------------------------------------- */
    .career-hero-img {
        object-position: 100% center;
    }

    /* Headline down to the table, not across her face.
     *
     * With the crop moved right she is in the middle of the frame,
     * which is exactly where a vertically centred headline lands. The
     * foreground table runs along the bottom of the shot and is light
     * and almost featureless, so the copy goes there instead - clear
     * of the subject and still legible in dark ink. */
    .career-hero {
        align-items: flex-end;
        padding-bottom: 26px;
    }

    .career-hero-copy,
    .career-hero-copy p { max-width: none; }

    .career-hero-copy p br { display: none; }

    /* --- Phone: five rectangular cards, centred -------------------
     * Client request. Two portrait tiles to a row left the fifth step
     * alone against the left edge, and the labels ("Document
     * Verification", "Selection & Joining") wrapped to two lines in a
     * 160px column.
     *
     * One card per row instead, laid out ACROSS — illustration, then
     * the step, then its number — so each card is a wide rectangle
     * rather than a tall tile, and the column is capped and centred so
     * the five read as one run down the middle of the screen.
     * ----------------------------------------------------------- */
    .hiring-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        /* Nothing hangs below a card now, so the clearance the badges
           needed goes with them. */
        padding-bottom: 0;
        justify-items: center;
    }

    .hiring-card {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        width: min(100%, 420px);
        padding: 14px 16px;
        text-align: left;
    }

    .hiring-card img {
        width: 92px;
        flex: none;
        margin-bottom: 0;
    }

    /* The two-line floor was there to keep five stacked cards level.
       Side by side they set their own height, and holding an empty
       second line here only padded the card out. */
    .hiring-label {
        flex: 1 1 auto;
        min-height: 0;
        font-size: 15px;
    }

    /* Back inside the card, at the end of the row, rather than a disc
       hanging off the bottom edge — there is no bottom edge to hang
       from in a layout this shallow. */
    .hiring-number {
        position: static;
        transform: none;
        flex: none;
        width: 42px;
        font-size: 20px;
    }

    .job-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .apply-row {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 14px;
    }

    /* With the pairs stacked, the spacer would leave a blank gap
       above the second field. */
    .label-spacer { display: none; }

    .apply-field textarea { min-height: 150px; }

    .apply-card { padding: 18px 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .hiring-card,
    .job-card,
    .job-filter,
    .job-filter-caret,
    .apply-field input,
    .apply-field textarea,
    .file-field,
    .apply-submit,
    .job-apply {
        transition: none;
    }

    .hiring-card:hover,
    .job-card:hover { transform: none; }
}

/* =========================================
   8. FILTERS — the chip's own bits
   -----------------------------------------
   The pill styling in section 5 covers .job-filter; these rules handle
   the label group inside it and the focus ring.
========================================= */
.job-filters {
    flex-wrap: wrap;
}

/* Figma: the label and its caret sit together in the middle of the
   chip. */
.job-filter-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.job-filter-group:focus-within > .job-filter {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.job-filter .job-filter-caret {
    flex: none;
}

/* Not a chip: a plain link at the end of the row with the running
   total beside it, the same as the product listing's Clear all. As a
   dashed chip it read as a seventh filter. */
.job-filter--clear {
    flex: 0 0 auto;
    gap: 8px;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--career-body);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.job-filter--clear:hover,
.job-filter--clear:focus-visible {
    background: none;
    color: var(--career-ink);
}

/* =========================================
   10. NO OPENINGS
========================================= */
.job-empty {
    max-width: 620px;
    margin: clamp(24px, 4vw, 50px) auto;
    text-align: center;
    font-size: clamp(13px, 1.15vw, 14px);
    line-height: 1.7;
    color: var(--career-body);
}

.job-empty a {
    color: var(--career-ink);
    font-weight: 400;
    box-shadow: inset 0 -1px 0 currentColor;
}

/* =========================================
   11. APPLICATION FORM — result message
========================================= */
.apply-notice {
    padding: 13px 16px;
    margin-bottom: 18px;
    border-left: 3px solid currentColor;
    border-radius: 2px;
    font-size: clamp(12px, 1.05vw, 12px);
    line-height: 1.55;
}

/* Focus is moved here by script so the message is announced; a ring
   would read as an error state on a success message. */
.apply-notice:focus {
    outline: none;
}

.apply-notice--ok    { background: #f1f7ea; color: #3f6115; }
.apply-notice--error { background: #fbf0ef; color: #8a2b21; }

.apply-help {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: #7a7a7a;
}

/* Guards against a double click filing two applications while the
   first upload is still in flight. */
.apply-submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* =========================================
   12. RESPONSIVE ADDITIONS
========================================= */
@media (max-width: 576px) {
    /* The panel is as wide as its chip here. A minimum would push the
       right-hand column's dropdown off the side of the screen, and the
       values in these six filters are short enough to sit in a chip's
       width — a long one wraps rather than overflowing. */
    .job-filter-panel {
        min-width: 0;
        padding: 8px 10px;
    }

    .job-filter-option {
        white-space: normal;
    }
}


/* === desktop -2px === */
/* -----------------------------------------------------------------
   2px off the desktop type, as asked. These selectors set a FIXED
   size, which applies at every width -- editing the value in place
   would have shrunk the phone too, and the phone was already right.
   So the reduction is scoped to desktop and the base rule, which is
   what mobile uses, is left exactly as it was.
   ----------------------------------------------------------------- */
@media (min-width: 1025px) {
    /* .job-summary and .job-apply were here at a fixed 10px. They are
       the card copy, and the card is now asked to read larger, so they
       scale with it from section 5 instead — a fixed size here would
       pin them back down at every desktop width. */
    .apply-field input, .apply-field textarea { font-size: 15px; }   /* was 17px */
    .file-field { font-size: 15px; }   /* was 17px */
    .apply-submit { font-size: 12px; }   /* was 14px */
    .apply-help { font-size: 10px; }   /* was 11px */
}