/* ===========================================================================
   CAREER PATHWAYS — /career-resources/pathways

   A REFERENCE SURFACE, NOT AN ARTICLE. The career-resources library is set in
   Source Serif on a narrow reading column, because an article is read once, top
   to bottom. These pages are the opposite: they are scanned, compared, and
   returned to months later to check whether a round has opened. So the whole
   visual language is different on purpose — Inter throughout, tabular figures,
   full-width rows instead of a reading measure, panels instead of prose, and a
   dark instrument-panel header rather than the library's mint band.

   PALETTE. Ground is a deep slate-navy that appears nowhere else on the site, so
   a reader always knows which surface they are on. The neutrals are biased
   toward that navy rather than being pure greys. Green is reserved almost
   entirely for LIVE STATE — a count that is real right now, a round that is
   open — so colour carries meaning instead of decoration.
   =========================================================================== */

:root {
    --pw-ink:        #101820;
    --pw-ink-soft:   #3d4b57;
    --pw-muted:      #5b6873;
    --pw-faint:      #8c97a1;
    --pw-rule:       #dfe4e8;
    --pw-rule-soft:  #eceff2;
    --pw-panel:      #ffffff;
    --pw-ground:     #f6f8f9;
    --pw-deep:       #0f1d2b;
    --pw-deep-2:     #16293b;
    --pw-live:       #0f7d4f;
    --pw-live-bg:    #e6f4ed;
    --pw-warn:       #b06f00;
    --pw-warn-bg:    #fdf3e0;
    --pw-urgent:     #b02a37;
}

.pw {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--pw-ink);
    background: var(--pw-ground);
    font-feature-settings: "tnum" 0;
}
.pw * { box-sizing: border-box; }

/* ---- Instrument-panel header ------------------------------------------- */

.pw-head {
    background: var(--pw-deep);
    background-image: linear-gradient(160deg, var(--pw-deep) 0%, var(--pw-deep-2) 100%);
    color: #fff;
    padding: 2.5rem 0 2.25rem;
}

.pw-crumb {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8fb3a4;
    text-decoration: none;
}
.pw-crumb:hover { color: #b9d8c9; text-decoration: none; }
.pw-crumb-sep { color: #44586a; margin: 0 .45rem; }

.pw-title {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin: 0.75rem 0 0;
    text-wrap: balance;
}

.pw-standfirst {
    font-size: 1.02rem;
    line-height: 1.62;
    color: #c4d2dc;
    max-width: 70ch;
    margin-top: 0.9rem;
}

/* Two things to do from the first screen. The hero used to end on the stat strip,
   which states the page's authority and then asks for nothing. */
.pw-head-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.35rem;
}

/* The stat strip: the page's claim to being live rather than written once. */
.pw-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.25rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.14);
}
.pw-stat { padding: .25rem 0; }
.pw-stat-n {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #6fd39b;
    line-height: 1.1;
}
.pw-stat-l {
    display: block;
    font-size: 0.73rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #93a7b6;
    margin-top: .15rem;
}

/* ---- Body scaffolding --------------------------------------------------- */

.pw-body { padding: 2.5rem 0 3.5rem; }

.pw-sec { margin-bottom: 3rem; }
.pw-sec:last-child { margin-bottom: 0; }

.pw-sec-head { margin-bottom: 1.4rem; max-width: 74ch; }

.pw-sec-title {
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    margin: 0 0 .4rem;
    color: var(--pw-ink);
}

.pw-sec-note {
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--pw-muted);
    margin: 0;
}

/* ---- The recruitment year ----------------------------------------------
   A scrolling strip: twelve months read as a sequence, and a wrapped grid would
   break that sequence into arbitrary rows on a phone. Scrolls inside itself so
   the page body never scrolls sideways. */

.pw-cal {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    padding-bottom: .75rem;
    scroll-snap-type: x proximity;
}

/* NOTE: `.pw-cal` is now used only on the PATHWAY pages, where a route has three or four
   dated programmes and a short strip is the right shape. The landing uses `.pw-tl` below —
   with twenty rows it needs to show all twelve months at once, which a strip cannot. */

.pw-mon {
    flex: 0 0 196px;
    scroll-snap-align: start;
    background: var(--pw-panel);
    border: 1px solid var(--pw-rule);
    border-radius: 6px;
    padding: .75rem;
}
.pw-mon.is-now { border-color: var(--pw-live); box-shadow: inset 0 2px 0 var(--pw-live); }

/* An empty month is still rendered, and still quiet. The gap between rounds is
   exactly the information a calendar exists to carry. */
.pw-mon.is-empty { background: transparent; border-style: dashed; }

.pw-mon-head {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding-bottom: .45rem;
    margin-bottom: .55rem;
    border-bottom: 1px solid var(--pw-rule-soft);
}
.pw-mon-name { font-size: .85rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.pw-mon-year { font-size: .7rem; color: var(--pw-faint); font-variant-numeric: tabular-nums; }
.pw-mon-now {
    margin-left: auto;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff;
    background: var(--pw-live);
    border-radius: 3px;
    padding: .08rem .35rem;
}

.pw-mon-item { margin-bottom: .65rem; }
.pw-mon-item:last-child { margin-bottom: 0; }
.pw-mon-org {
    display: block;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pw-live);
}
.pw-mon-prog { display: block; font-size: .83rem; line-height: 1.35; font-weight: 500; margin: .1rem 0 .22rem; }

/* Three confidence levels, each stating its own status in words. Colour alone
   could not carry the difference between a date somebody checked and a pattern
   we have merely observed — and that difference is the honesty of the strip. */
.pw-tag {
    display: inline-block;
    font-size: .67rem;
    font-weight: 500;
    border-radius: 3px;
    padding: .08rem .32rem;
    background: var(--pw-ground);
    color: var(--pw-muted);
    border: 1px solid var(--pw-rule-soft);
}
.pw-tag.is-confirmed { background: var(--pw-live-bg); color: var(--pw-live); border-color: #bfe0d0; font-weight: 600; }
.pw-tag.is-irregular { background: var(--pw-warn-bg); color: var(--pw-warn); border-color: #f0dcb4; }

.pw-mon-none { font-size: .74rem; color: #b3bcc4; margin: 0; }

/* ---- Deadline list ------------------------------------------------------ */

.pw-dl { border-top: 1px solid var(--pw-rule); }

.pw-dl-row {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 0 .9rem;
    align-items: center;
    padding: .7rem .5rem;
    border-bottom: 1px solid var(--pw-rule-soft);
    text-decoration: none;
    color: inherit;
    background: var(--pw-panel);
}
.pw-dl-row:hover { background: var(--pw-live-bg); text-decoration: none; color: inherit; }
.pw-dl-row.is-urgent { box-shadow: inset 3px 0 0 var(--pw-urgent); }

.pw-dl-when { text-align: center; font-variant-numeric: tabular-nums; }
.pw-dl-when strong { display: block; font-size: .92rem; font-weight: 700; }
.pw-dl-when em { font-style: normal; font-size: .7rem; color: var(--pw-faint); }

.pw-dl-main { min-width: 0; }
.pw-dl-title { display: block; font-size: .92rem; font-weight: 550; line-height: 1.35; }
.pw-dl-row:hover .pw-dl-title { color: var(--pw-live); }
.pw-dl-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .76rem; color: var(--pw-muted); margin-top: .18rem; }

.pw-chip {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: .1rem .35rem;
    background: var(--pw-ground);
    color: var(--pw-muted);
    border: 1px solid var(--pw-rule-soft);
}
.pw-chip.is-round { background: var(--pw-live-bg); color: var(--pw-live); border-color: #bfe0d0; }

.pw-dl-left { font-size: .78rem; color: var(--pw-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-dl-left.is-urgent { color: var(--pw-urgent); font-weight: 700; }

/* ---- Closing note ------------------------------------------------------- */

.pw-plain {
    background: var(--pw-panel);
    border: 1px solid var(--pw-rule);
    border-left: 3px solid var(--pw-ink);
    border-radius: 6px;
    padding: 1.25rem 1.4rem;
    max-width: 78ch;
}
.pw-plain h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; }
.pw-plain p { font-size: .92rem; line-height: 1.62; color: var(--pw-ink-soft); margin: 0; }
.pw-plain a { color: var(--pw-live); font-weight: 550; }

@media (max-width: 767.98px) {
    .pw-route { grid-template-columns: 1fr; gap: .7rem; }
    .pw-route-side { text-align: left; display: flex; align-items: baseline; gap: .5rem; }
    .pw-route-go { margin-top: 0; margin-left: auto; }
    .pw-stats { gap: 0 1.5rem; }
    .pw-mon { flex-basis: 172px; }
    .pw-dl-row { grid-template-columns: 54px 1fr; }
    .pw-dl-left { grid-column: 2; }
}

/* Routes available inside an employer family — the band's actual payload. Set as a
   labelled field rather than prose so it can be compared straight down the grid:
   the useful discovery is that one family's list is much shorter than another's. */
.pw-fam-routes {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .45rem;
    padding: .55rem .65rem;
    margin-bottom: .85rem;
    background: var(--pw-ground);
    border-radius: 4px;
}
.pw-fam-routes-l {
    flex: 0 0 100%;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pw-faint);
    margin-bottom: .1rem;
}
.pw-fam-route {
    font-size: .77rem;
    font-weight: 500;
    color: var(--pw-live);
    text-decoration: none;
    border-bottom: 1px solid #c3e0d1;
}
.pw-fam-route:hover { color: var(--pw-deep); border-bottom-color: var(--pw-deep); text-decoration: none; }
.pw-fam-route:not(:last-child)::after { content: ""; }

/* ---- The comparison table ----------------------------------------------
   The payload of a pathway page. Scrolls inside its own wrapper so the page
   body never scrolls sideways, and the first column stays put while the rest
   moves — comparing "no age limit" against "32 or under" is worthless if you
   lose track of which institution each row belongs to. */

.pw-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--pw-rule);
    border-radius: 6px;
    background: var(--pw-panel);
}

.pw-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .84rem;
    min-width: 940px;
}

.pw-table thead th {
    position: sticky;
    top: 0;
    background: var(--pw-deep);
    color: #dce6ee;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: left;
    padding: .6rem .75rem;
    white-space: nowrap;
}

.pw-table tbody th {
    text-align: left;
    font-weight: 600;
    vertical-align: top;
    padding: .7rem .75rem;
    background: var(--pw-panel);
    position: sticky;
    left: 0;
    min-width: 210px;
    border-right: 1px solid var(--pw-rule);
    box-shadow: 2px 0 4px -2px rgba(16,24,32,.08);
}
.pw-table tbody th a { color: var(--pw-ink); text-decoration: none; }
.pw-table tbody th a:hover { color: var(--pw-live); text-decoration: underline; }

.pw-table-sub {
    display: block;
    font-size: .72rem;
    font-weight: 400;
    color: var(--pw-faint);
    line-height: 1.35;
    margin-top: .1rem;
}

.pw-table td {
    padding: .7rem .75rem;
    vertical-align: top;
    color: var(--pw-ink-soft);
    line-height: 1.45;
    border-top: 1px solid var(--pw-rule-soft);
    min-width: 145px;
}
.pw-table tbody th { border-top: 1px solid var(--pw-rule-soft); }
.pw-table tbody tr:first-child th,
.pw-table tbody tr:first-child td { border-top: 0; }
.pw-table tbody tr:hover td { background: #fbfcfc; }

/* Per-row provenance. A table that hid which figures came from the sponsor's own
   page would lend the weaker rows the credibility of the stronger ones. */
.pw-verified, .pw-unverified {
    display: inline-block;
    margin-top: .3rem;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .03em;
    border-radius: 3px;
    padding: .06rem .3rem;
}
.pw-verified   { background: var(--pw-live-bg); color: var(--pw-live); }
.pw-unverified { background: var(--pw-warn-bg); color: var(--pw-warn); }

/* ---- Pathway prose ------------------------------------------------------
   Structured reference writing, not article typography: sans-serif, tighter
   leading than the library uses, and headings that read as section labels
   rather than as magazine decks. */

.pw-prose {
    max-width: 76ch;
    font-size: .95rem;
    line-height: 1.68;
    color: var(--pw-ink-soft);
}
.pw-prose > *:first-child { margin-top: 0; }

.pw-prose h2 {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--pw-ink);
    margin: 2rem 0 .6rem;
    padding-top: .9rem;
    border-top: 1px solid var(--pw-rule);
}
.pw-prose h3 {
    font-size: 1rem;
    font-weight: 650;
    color: var(--pw-ink);
    margin: 1.5rem 0 .45rem;
}
.pw-prose p { margin: 0 0 .95rem; }
.pw-prose ul, .pw-prose ol { margin: 0 0 1rem; padding-left: 1.15rem; }
.pw-prose li { margin-bottom: .4rem; }
.pw-prose strong { color: var(--pw-ink); font-weight: 650; }
.pw-prose a { color: var(--pw-live); text-decoration: underline; text-underline-offset: 2px; }
.pw-prose a:hover { color: var(--pw-deep); }

/* A stated fact worth stopping on — used sparingly, and never for decoration. */
.pw-prose .pw-note {
    background: var(--pw-panel);
    border: 1px solid var(--pw-rule);
    border-left: 3px solid var(--pw-live);
    border-radius: 0 5px 5px 0;
    padding: .85rem 1rem;
    margin: 1.25rem 0;
    font-size: .9rem;
}
.pw-prose .pw-note strong { display: block; margin-bottom: .25rem; color: var(--pw-ink); }

/* A widely repeated claim that is wrong. The most useful thing these pages do. */
.pw-prose .pw-myth {
    background: var(--pw-warn-bg);
    border: 1px solid #f0dcb4;
    border-radius: 5px;
    padding: .85rem 1rem;
    margin: 1.25rem 0;
    font-size: .9rem;
}
.pw-prose .pw-myth strong { display: block; margin-bottom: .25rem; color: var(--pw-warn); }

@media (max-width: 767.98px) {
    /* The sticky first column costs more than it gives on a narrow screen — it
       eats half the viewport and leaves no room for the cell being compared. */
    .pw-table tbody th { position: static; box-shadow: none; }
    .pw-prose { font-size: .92rem; }
}

/* ---- One programme: state, spec, follow --------------------------------
   The state block carries the single fact the page exists to deliver, so it
   gets the strongest treatment on the page. Status is encoded twice — a pill
   AND the literal date — because a pill alone is a claim the reader cannot
   check, and a deadline is exactly the fact they must be able to verify. */

.pw-state {
    background: var(--pw-panel);
    border: 1px solid var(--pw-rule);
    border-left: 4px solid var(--pw-muted);
    border-radius: 6px;
    padding: 1.15rem 1.35rem;
}
.pw-state.is-open     { border-left-color: var(--pw-live); background: var(--pw-live-bg); }
.pw-state.is-urgent   { border-left-color: var(--pw-urgent); background: #fdeff0; }
.pw-state.is-upcoming { border-left-color: #2b6cb0; background: #eef4fb; }
.pw-state.is-closed   { border-left-color: var(--pw-faint); }

.pw-state-pill {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: .15rem .45rem;
    margin-bottom: .55rem;
    background: rgba(16,24,32,.07);
    color: var(--pw-ink);
}
.pw-state.is-open   .pw-state-pill { background: var(--pw-live);   color: #fff; }
.pw-state.is-urgent .pw-state-pill { background: var(--pw-urgent); color: #fff; }
.pw-state.is-upcoming .pw-state-pill { background: #2b6cb0; color: #fff; }

.pw-state-body { font-size: 1rem; line-height: 1.6; color: var(--pw-ink-soft); }
.pw-state-body strong { color: var(--pw-ink); font-weight: 700; }

.pw-apply {
    display: inline-block;
    margin-top: .9rem;
    background: var(--pw-live);
    color: #fff;
    font-size: .87rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    padding: .55rem 1.1rem;
}
.pw-apply:hover { background: #0b6440; color: #fff; text-decoration: none; }

/* Eligibility as a spec list. Two columns so the labels form a scannable rail —
   a reader checking one criterion should not have to read the other five. */
.pw-spec {
    display: grid;
    grid-template-columns: minmax(120px, 170px) 1fr;
    gap: 0;
    margin: 0;
    background: var(--pw-panel);
    border: 1px solid var(--pw-rule);
    border-radius: 6px;
    overflow: hidden;
}
.pw-spec dt {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pw-faint);
    padding: .7rem .9rem;
    border-top: 1px solid var(--pw-rule-soft);
    background: #fbfcfd;
}
.pw-spec dd {
    margin: 0;
    padding: .7rem .9rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--pw-ink-soft);
    border-top: 1px solid var(--pw-rule-soft);
}
.pw-spec dt:first-of-type, .pw-spec dt:first-of-type + dd { border-top: 0; }

/* Follow — the only capture on the page, and the one thing a reader arriving
   between rounds can actually act on. */
.pw-follow {
    background: var(--pw-deep);
    border-radius: 6px;
    padding: 1.3rem 1.4rem;
    color: #fff;
}
.pw-follow-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; }
.pw-follow-note { font-size: .86rem; line-height: 1.55; color: #b6c6d2; margin: 0 0 .9rem; }

.pw-follow-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.pw-follow-form input[type=email] {
    flex: 1 1 240px;
    min-width: 0;
    font: inherit;
    font-size: .9rem;
    padding: .55rem .75rem;
    border: 1px solid #33485a;
    background: #0b1722;
    color: #fff;
    border-radius: 5px;
}
.pw-follow-form input[type=email]::placeholder { color: #6d8091; }
.pw-follow-form input[type=email]:focus { outline: 2px solid var(--pw-live); outline-offset: 1px; border-color: transparent; }
.pw-follow-form button {
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    padding: .55rem 1.2rem;
    border: 0;
    border-radius: 5px;
    background: var(--pw-live);
    color: #fff;
    cursor: pointer;
}
.pw-follow-form button:hover { background: #0b6440; }

@media (max-width: 575.98px) {
    .pw-spec { grid-template-columns: 1fr; }
    .pw-spec dt { padding-bottom: .1rem; border-top: 1px solid var(--pw-rule-soft); }
    .pw-spec dd { padding-top: .15rem; border-top: 0; }
    .pw-spec dt:first-of-type + dd { border-top: 0; }
}

/* ===========================================================================
   LANDING BODY — cards, colour and bands

   The first version of this page presented nine routes as nine near-identical
   paragraphs. That is the wrong shape for the job: a reader is not reading all
   nine, they are FINDING THEIRS, and uniform text gives them nothing to aim at.
   So each career stage carries its own colour, each route its own icon, and the
   sections alternate between white and a tinted band so the page has rhythm
   rather than one long column.

   Colour is doing real work here, not decoration: the three stage gradients and
   the five family gradients are all distinct, so a reader who scrolled past a
   heading still knows which group they are looking at.
   =========================================================================== */

.pw-lead-in { max-width: 68ch; margin: 0 0 1.6rem; }
.pw-lead-in-center { margin-left: auto; margin-right: auto; text-align: center; }

.pw-h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.022em;
    color: var(--pw-ink);
    margin: 0 0 .5rem;
    text-wrap: balance;
}
.pw-lede { font-size: 1rem; line-height: 1.65; color: var(--pw-muted); margin: 0; }

/* ---- Career-stage band header ------------------------------------------ */

.pw-stage-block { margin-bottom: 2.75rem; }

.pw-stage-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    border-radius: 12px;
    padding: 1rem 1.35rem;
    margin-bottom: 1.1rem;
}
.pw-stage-head > i { font-size: 1.6rem; opacity: .9; flex: 0 0 auto; }
.pw-stage-h { font-size: 1.06rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.pw-stage-p { font-size: .86rem; margin: .1rem 0 0; color: rgba(255,255,255,.82); }
.pw-stage-count {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: rgba(255,255,255,.18);
    border-radius: 100px;
    padding: .25rem .7rem;
}

/* ---- Route card --------------------------------------------------------- */

.pw-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--pw-panel);
    border: 1px solid var(--pw-rule);
    border-radius: 14px;
    padding: 1.35rem 1.3rem 1.2rem;
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pw-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(16,24,32,.11);
    text-decoration: none;
    color: inherit;
}

.pw-card-ic {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: .85rem;
}

.pw-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .45rem;
}
.pw-card-h { font-size: 1.04rem; font-weight: 700; letter-spacing: -.013em; line-height: 1.3; }
.pw-card-n {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1;
}
.pw-card-n small { display: block; font-size: .6rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--pw-faint); margin-top: .1rem; }

.pw-card-p { font-size: .88rem; line-height: 1.58; color: var(--pw-ink-soft); margin-bottom: .85rem; }

/* The eligibility line: the fact that decides whether the rest of the card is
   relevant at all, so it is a labelled field rather than another sentence. */
.pw-card-who {
    display: block;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--pw-ink-soft);
    background: var(--pw-ground);
    border-radius: 8px;
    padding: .55rem .7rem;
    margin-top: auto;
}
.pw-card-who-l {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pw-faint);
    margin-bottom: .1rem;
}

.pw-card-go { display: block; margin-top: .8rem; font-size: .8rem; font-weight: 650; }

/* ---- Employer family card ----------------------------------------------- */

.pw-fams { margin-bottom: 1rem; }

.pw-famcard {
    height: 100%;
    background: var(--pw-panel);
    border: 1px solid var(--pw-rule);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Colour on the header strip rather than the whole card: the body carries
   employer chips and route links, and white text on a gradient would make both
   harder to read than they need to be. */
/* ONE LINE. This header stacked into two rows when the band ran four cards across and the
   icon, the name and the count were fighting over 250px. At half width they all fit, so it
   is a single row again — but the two rules that made a single row survivable stay:
   `min-width: 0` lets the TITLE shrink below its content width and wrap, and the count is
   pushed right and told never to break. Without those, the longest family name shunts the
   count onto a line of its own and that card's strip stands taller than its neighbour's. */
.pw-famcard-top {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    padding: .9rem 1.15rem;
}
.pw-famcard-top > i { font-size: 1.3rem; opacity: .92; flex: 0 0 auto; }
.pw-famcard-h {
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.01em;
    line-height: 1.3;
}
/* Only in the tablet range. At 360px the longest family name wraps to two lines while its
   neighbour's fits on one, so the two headers in that row stand eight pixels apart. Wider
   than that every name fits on one line, and narrower the cards are stacked, so nothing
   sits beside anything to be ragged against — reserving the second line there would just
   be an empty band under three of the four names. */
@media (min-width: 768px) and (max-width: 991.98px) { .pw-famcard-h { min-height: 2.6em; } }

.pw-famcard-n {
    margin-left: auto;
    white-space: nowrap;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(255,255,255,.2);
    border-radius: 100px;
    padding: .2rem .6rem;
    font-variant-numeric: tabular-nums;
}

/* Horizontal padding matches the header's, or the blurb's left edge sits inside the
   family name's and the card reads as two mismatched panels stacked together. */
.pw-famcard-body { padding: 1.05rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.pw-famcard-p { font-size: .85rem; line-height: 1.55; color: var(--pw-ink-soft); margin: 0 0 .7rem; }

/* `.pw-famcard-note` lived here — an amber callout under each family blurb. Removed with
   its markup: four amber boxes in one band read as four warnings rather than four facts,
   and on this page the warning colour is reserved for figures nobody has verified. */

.pw-famcard-field { margin-bottom: .85rem; }
/* The employer list used to be pushed to the foot of the card with `margin-top: auto`, so
   that all four "Employers we carry" labels lined up. With four cards carrying between two
   and six route chips, that pin opened a void in the MIDDLE of the two shortest cards,
   which reads as something failing to load. Content flows from the top instead: the
   leftover space now falls at the bottom of a card, where uneven lengths look like uneven
   lengths. */
.pw-famcard-field:last-child { margin-bottom: 0; }

.pw-field-l {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pw-faint);
    margin-bottom: .35rem;
}

.pw-tags { display: flex; flex-wrap: wrap; gap: .35rem; }

.pw-tag-link {
    font-size: .78rem;
    font-weight: 550;
    color: var(--pw-live);
    background: var(--pw-live-bg);
    border-radius: 6px;
    padding: .2rem .5rem;
    text-decoration: none;
}
.pw-tag-link:hover { background: var(--pw-live); color: #fff; text-decoration: none; }

.pw-org {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    font-size: .77rem;
    font-weight: 500;
    color: var(--pw-ink-soft);
    background: var(--pw-ground);
    border: 1px solid var(--pw-rule-soft);
    border-radius: 6px;
    padding: .18rem .45rem;
    text-decoration: none;
}
.pw-org:hover { background: var(--pw-live-bg); border-color: #bfe0d0; color: var(--pw-live); text-decoration: none; }
.pw-org span { font-size: .68rem; color: var(--pw-faint); font-variant-numeric: tabular-nums; }
.pw-org:hover span { color: var(--pw-live); }

.pw-fam-caveat { font-size: .7rem; color: var(--pw-faint); margin: .5rem 0 0; }

/* The way out of the card. Sits below the employer chips as a quiet link rather than a
   button: it is an answer to "is this everyone?", not the action the card is asking for. */
.pw-fam-more {
    display: inline-block;
    margin-top: .55rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--pw-live);
    text-decoration: none;
}
.pw-fam-more:hover { color: var(--pw-deep); text-decoration: underline; }

/* ---- Tinted band (the calendar) ----------------------------------------- */

.pw-band {
    background: #eef3f6;
    border-top: 1px solid #e2e9ee;
    border-bottom: 1px solid #e2e9ee;
    padding: 2.75rem 0;
    margin: 1rem 0 2.75rem;
}
.pw-band-foot { font-size: .82rem; color: var(--pw-muted); margin: .9rem 0 0; text-align: center; }

/* ---- Deadline card ------------------------------------------------------ */

.pw-dl-card {
    background: var(--pw-panel);
    border: 1px solid var(--pw-rule);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 3rem;
}
.pw-dl-card .pw-dl { border-top: 0; }

/* ---- Closing statement -------------------------------------------------- */

.pw-closer {
    background: var(--pw-deep);
    background-image: linear-gradient(150deg, var(--pw-deep) 0%, var(--pw-deep-2) 100%);
    border-radius: 16px;
    padding: 2.4rem 2rem;
    text-align: center;
    color: #fff;
    margin-bottom: 2rem;
}
.pw-closer > i { font-size: 2rem; color: #6fd39b; }
.pw-closer h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin: .7rem 0 .6rem; }
.pw-closer p { font-size: .97rem; line-height: 1.68; color: #c4d2dc; max-width: 62ch; margin: 0 auto; }

.pw-closer-btns { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.4rem; }

/* Buttons only. With the heading and paragraph gone the block is a call to action, not a
   closing statement, so it loses the padding that was holding prose and the top margin
   that was separating the buttons from it. */
.pw-closer.is-actions { padding: 1.5rem 2rem; }
.pw-closer.is-actions .pw-closer-btns { margin-top: 0; }
.pw-btn {
    display: inline-block;
    background: var(--pw-live);
    color: #fff;
    font-size: .9rem;
    font-weight: 650;
    border-radius: 100px;
    padding: .6rem 1.4rem;
    text-decoration: none;
}
.pw-btn:hover { background: #0b6440; color: #fff; text-decoration: none; }
.pw-btn.is-ghost { background: transparent; border: 1px solid rgba(255,255,255,.35); }
.pw-btn.is-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }

@media (max-width: 575.98px) {
    .pw-stage-head { flex-wrap: wrap; gap: .6rem .8rem; }
    .pw-stage-count { margin-left: 0; }
    .pw-closer { padding: 1.75rem 1.25rem; }
}

/* ---- The recruitment year, as a timeline --------------------------------
   Twenty programmes against twelve months. The previous strip put months on
   the x-axis as equal-height flex columns: only six fitted, and every column
   stretched to the height of the busiest, so a quiet October rendered as a
   tall empty box. Here the months are narrow fixed columns and the programmes
   are rows, so the whole year fits and an empty month is visibly empty.

   One grid, `--pw-tl-cols` columns wide plus a label column, shared by the
   header and every row — which is what keeps the month headings aligned over
   their cells without a second measurement. */

.pw-tl-wrap {
    overflow-x: auto;
    background: var(--pw-panel);
    border: 1px solid var(--pw-rule);
    border-radius: 10px;
    padding: .5rem .75rem .75rem;
}

.pw-tl { min-width: 660px; }

.pw-tl-head,
.pw-tl-row {
    display: grid;
    grid-template-columns: 218px repeat(var(--pw-tl-cols, 12), 1fr);
    align-items: center;
}

/* Month headings align to their BASELINE, not their centre. Only the current month and
   each January carry a year beneath them, so centring made those two columns sit lower
   than the other ten and the header row read as crooked. */
.pw-tl-head { position: sticky; top: 0; background: var(--pw-panel); z-index: 1; align-items: end; }
.pw-tl-corner { }

.pw-tl-m {
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pw-faint);
    padding: .45rem 0 .5rem;
    border-bottom: 1px solid var(--pw-rule);
}
.pw-tl-m em { display: block; font-style: normal; font-size: .6rem; font-weight: 500; color: #b3bcc4; line-height: 1.1; }
/* Reserve the year line on every month so all twelve headings share one baseline. */
.pw-tl-m::after { content: ""; display: block; font-size: .6rem; line-height: 1.1; }
.pw-tl-m:has(em)::after { display: none; }
.pw-tl-m.is-now { color: var(--pw-live); border-bottom-color: var(--pw-live); }

.pw-tl-row { border-bottom: 1px solid var(--pw-rule-soft); }
.pw-tl-row:last-child { border-bottom: 0; }
.pw-tl-row:hover { background: #fbfcfd; }

.pw-tl-label {
    padding: .5rem .75rem .5rem .25rem;
    font-size: .82rem;
    line-height: 1.3;
    min-width: 0;
}
.pw-tl-label a { color: var(--pw-ink); text-decoration: none; font-weight: 550; }
.pw-tl-label a:hover { color: var(--pw-live); text-decoration: underline; }
.pw-tl-label em {
    display: block;
    font-style: normal;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pw-faint);
    margin-top: .05rem;
}

/* The month cell is the track; the bar inside it is the claim. Keeping them
   separate is what lets a run of months read as one continuous bar while each
   cell still carries its own "is this the current month" shading. */
.pw-tl-cell {
    height: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: .3rem 0;
    box-shadow: inset 1px 0 0 var(--pw-rule-soft);
}
.pw-tl-cell.is-now { background: rgba(15,125,79,.05); }

.pw-bar {
    display: block;
    width: 100%;
    height: 15px;
    background: var(--pw-rule);
}
.pw-bar.is-first { border-radius: 4px 0 0 4px; margin-left: 3px; }
.pw-bar.is-last  { border-radius: 0 4px 4px 0; margin-right: 3px; }
.pw-bar.is-first.is-last { border-radius: 4px; }

.pw-bar.is-confirmed { background: var(--pw-live); }
.pw-bar.is-expected  { background: #a8c8bb; }
/* Hatched rather than merely paler: "does not run every year" is a different
   KIND of claim from "usually opens", not a weaker shade of the same one. */
.pw-bar.is-irregular {
    background: repeating-linear-gradient(135deg, #e2c58a 0 5px, #f2e3c4 5px 10px);
}

.pw-tl-key {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    justify-content: center;
    margin-top: 1rem;
    font-size: .78rem;
    color: var(--pw-muted);
}
.pw-tl-key span { display: inline-flex; align-items: center; gap: .45rem; }
.pw-tl-key i { width: 22px; height: 11px; border-radius: 3px; flex: 0 0 auto; }

@media (max-width: 767.98px) {
    .pw-tl-head, .pw-tl-row { grid-template-columns: 132px repeat(var(--pw-tl-cols, 12), 1fr); }
    .pw-tl-label { font-size: .74rem; }
    .pw-tl-m { font-size: .6rem; }
}

/* ---- Open right now -----------------------------------------------------
   The only time-critical band on the page, so it leads it. Everything else
   teaches a reader how a route works and keeps for a month; a round that shuts
   in eleven days does not. It is given the page's strongest treatment for that
   reason alone — not because there are many of them. There are usually two. */

.pw-now { margin-bottom: 3rem; }

.pw-now-head { margin-bottom: 1.1rem; }

.pw-now-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 .35rem;
}
.pw-now-title > i { color: var(--pw-live); font-size: 1.15rem; }
.pw-now-note { font-size: .93rem; line-height: 1.6; color: var(--pw-muted); margin: 0; max-width: 72ch; }

.pw-now-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 1rem;
}

.pw-now-card {
    display: grid;
    gap: .3rem;
    padding: 1.1rem 1.2rem;
    background: var(--pw-panel);
    border: 1px solid var(--pw-rule);
    border-left: 4px solid var(--pw-live);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}
.pw-now-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,24,32,.10); text-decoration: none; color: inherit; }
.pw-now-card.is-urgent { border-left-color: var(--pw-urgent); }

.pw-now-state {
    justify-self: start;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: .14rem .42rem;
    margin-bottom: .25rem;
}
.pw-now-state.is-open   { background: var(--pw-live-bg); color: var(--pw-live); }
.pw-now-state.is-urgent { background: #fdeff0; color: var(--pw-urgent); }
.pw-now-state.is-soon   { background: #eef4fb; color: #2b6cb0; }

.pw-now-org {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pw-faint);
}
.pw-now-name { font-size: 1.04rem; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; }
.pw-now-card:hover .pw-now-name { color: var(--pw-live); }

.pw-now-when { font-size: .85rem; color: var(--pw-ink-soft); line-height: 1.45; }
.pw-now-when strong { font-weight: 650; color: var(--pw-ink); }

.pw-now-count {
    margin-top: .35rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--pw-live);
    font-variant-numeric: tabular-nums;
}
.pw-now-count.is-urgent { color: var(--pw-urgent); }

/* The official-source link, given the weight of an action rather than a footnote.
   It is the most useful thing in the block: whatever we publish, the sponsor's own
   page is where an applicant should end up before applying. */
.pw-source-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 650;
    color: var(--pw-live);
    background: var(--pw-live-bg);
    border: 1px solid #bfe0d0;
    border-radius: 6px;
    padding: .5rem .85rem;
    margin-bottom: .85rem;
    text-decoration: none;
}
.pw-source-link:hover { background: var(--pw-live); color: #fff; text-decoration: none; }
.pw-source-link > i { font-size: .95rem; }

/* Neutral, not alarming. Says where the figures came from, not how much to doubt them. */
.pw-unverified { background: var(--pw-ground); color: var(--pw-muted); border: 1px solid var(--pw-rule); }

/* ---- Sources: one link, one stamp, one caveat --------------------------- */

.pw-src { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }

.pw-src-stamp {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--pw-faint);
    white-space: nowrap;
}

.pw-src-note { font-size: .84rem; color: var(--pw-muted); margin: .7rem 0 0; }

/* The link keeps its weight — it is the one thing in this block a reader acts on —
   but no longer needs its own bottom margin now the stamp sits beside it. */
.pw-source-link { margin-bottom: 0; }