/* ============================================================
   Jork jobs portal — shared styles (all public pages)

   Responsive system. There used to be a single `max-width:1000px`
   block carrying every public page from desktop to phone, which left
   two real holes: below 1000px the nav links were hidden with nothing
   to replace them, and nothing at all was defined under 1000px, so a
   390px phone got the tablet layout with a 34px hero on top of it.
   The ladder below is 1120 / 1000 / 820 / 640 / 440, and the sizes
   that would otherwise snap between those steps (container gutter,
   section padding, headings) move on clamp() instead.
   ============================================================ */
:root{
  --navy-900:#0F1B2D; --navy-800:#16263F; --navy-700:#1F3556; --navy-50:#EEF2F9;
  --gold-700:#B88500; --gold-600:#D9A006; --gold-500:#F5B800; --gold-300:#FCD96B; --gold-100:#FFF3CC; --gold-50:#FFFAE6;
  --ink:#111827; --ink-2:#4b5563; --ink-3:#6b7280; --ink-4:#9ca3af;
  --line:#e5e7eb; --line-2:#f0f1f4; --bg:#f7f8fa; --bg-2:#eef1f6;
  --blue:#2557a7; --blue-50:#eef4fc;
  /* Indigo is the secondary brand colour: sign-up, section icons, skill and
     work-mode chips, footer social. Gold stays the primary action colour
     (Search jobs, Post a job) and the colour of every figure. */
  --indigo-700:#4338CA; --indigo-600:#4F46E5; --indigo-500:#6366F1;
  --indigo-100:#E4E2FD; --indigo-50:#F1F0FE;
  --good:#16a34a; --good-50:#ecfdf5;
  /* Fluid rhythm. --gut is the container gutter, --sec-y the vertical
     padding of a section; both are read by the per-page stylesheets too. */
  --gut:clamp(16px,4vw,24px);
  --sec-y:clamp(38px,6vw,64px);
  --ring:0 0 0 3px rgba(245,184,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
/* clip, not hidden: overflow-x:hidden on body makes overflow-y compute to
   auto, which turns body into a scroll container and breaks the sticky nav.
   clip contains the same stray pixels without creating one, and browsers
   that do not know it simply ignore the declaration. */
body{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;font-size:14px;outline:none}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-0.02em;color:var(--navy-900);text-wrap:balance}
h1{font-size:clamp(29px,4.6vw,44px);line-height:1.08}
h2{font-size:clamp(21px,2.5vw,27px);line-height:1.18}
h3{font-size:17px;font-weight:700}
p{margin:0;color:var(--ink-2)}
/* Keyboard focus was invisible on links and chips across the public site. */
:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;border-radius:4px}
.container{max-width:1200px;margin:0 auto;}
/* The gutter the ladder at the top of this file describes. --gut was declared
   for it and then referenced by nothing, so every public page ran edge to edge
   below 1200px: hero copy, cards, the nav bar and the footer all touched the
   screen on a phone. Scoped to the width at which the 1200px container stops
   fitting with room to spare, so desktop rendering is untouched — the landing
   hero still measures a full 1200 — and at 1248 the natural margin and the
   gutter are the same 24px, so there is no jump across the boundary. */
@media(max-width:1248px){.container{padding-inline:var(--gut)}}
.mono{font-family:'JetBrains Mono',monospace}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 20px;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;border:1.5px solid transparent;transition:all .13s;white-space:nowrap}
.btn-primary{background:var(--gold-500);color:var(--navy-900)}
.btn-primary:hover{background:var(--gold-600)}
.btn-navy{background:var(--navy-900);color:#fff}
.btn-navy:hover{background:var(--navy-800)}
.btn-outline{border-color:var(--gold-500);color:var(--gold-700);background:#fff}
.btn-outline:hover{background:var(--gold-50)}
.btn-outline-navy{border-color:var(--navy-900);color:var(--navy-900);background:#fff}
.btn-outline-navy:hover{background:var(--navy-50)}
.btn-indigo{background:var(--indigo-600);color:#fff}
.btn-indigo:hover{background:var(--indigo-700)}
.btn-outline-ink{border-color:var(--line);color:var(--navy-900);background:#fff}
.btn-outline-ink:hover{border-color:var(--navy-900);background:var(--bg)}
.btn-sm{height:38px;padding:0 14px;font-size:13px}
.btn-lg{height:52px;padding:0 26px;font-size:15px;border-radius:10px}
.sec{padding:var(--sec-y) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,2.4vw,26px);flex-wrap:wrap}
.sec-head p{font-size:14px;color:var(--ink-3);margin-top:5px;max-width:56ch}
.sec-head a.more{font-size:13.5px;font-weight:700;color:var(--navy-900);display:inline-flex;align-items:center;gap:6px;min-height:32px}
.sec-head a.more:hover{color:var(--indigo-600)}
.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:600}
.tag-gold{background:var(--gold-100);color:var(--gold-700)}
.tag-blue{background:var(--indigo-50);color:var(--indigo-700)}
.tag-good{background:var(--good-50);color:#15803d}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--gold-700);margin-bottom:12px}
.eyebrow .bar{width:22px;height:2px;background:var(--gold-500);border-radius:2px}
.breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3);padding:16px 0}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb .sep{color:var(--ink-4)}

/* NAV */
.nav{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(15,27,45,.04)}
/* app.css pins a .tbl's header to the top of whatever it scrolls in and reads
   the offset from --tbl-top. On a website page that is the document, and the
   chrome the header has to clear is this nav - 64px of .nav-inner plus its
   hairline. This file is only loaded by WebsiteLayout, so the declaration
   cannot reach an app page; anything closer to the table wins over it. */
body{--tbl-top:65px}
.nav-inner{display:flex;align-items:center;gap:22px;height:64px}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo-mark{width:34px;height:44.2px;object-fit:contain;flex-shrink:0}
.logo-text{font-size:22px;font-weight:800;letter-spacing:-0.03em;color:var(--navy-900)}
.nav-search{flex:1;max-width:480px;display:flex;align-items:center;height:44px;background:var(--bg);border:1.5px solid var(--line);border-radius:999px;padding:0 6px 0 16px}
.nav-search:focus-within{border-color:var(--navy-700);background:#fff}
.nav-search input{flex:1;border:none;background:transparent;font-size:13.5px;min-width:0}
.nav-search button{width:34px;height:34px;border-radius:50%;background:var(--navy-900);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-links{display:flex;gap:22px}
.nav-links a{font-size:13.5px;font-weight:600;color:var(--ink-2);padding:20px 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--navy-900)}
.nav-links a.active{color:var(--navy-900);border-bottom-color:var(--indigo-600)}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}

/* NAV — mobile drawer.
   A details/summary disclosure, not a scripted menu: enhanced navigation
   inserts a page's inline scripts without executing them, so anything that
   needs a click handler is dead on arrival from another layout. This is the
   same pattern the hero's experience picker uses. Shown only under 1000px,
   where .nav-links, .nav-search and .nav-actions are hidden.
   Markup: Components/Modules/Website/Shared/WebsiteMobileNav.razor. */
.mnav{display:none;margin-left:auto}
.mnav>summary{list-style:none;width:44px;height:44px;border-radius:11px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy-900);background:#fff;transition:border-color .14s,color .14s}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary::marker{content:""}
.mnav>summary .ic-x{display:none}
/* Open, the same control is the drawer's close button. It is pinned to the
   coordinates it already occupied — 10px down is (64px of .nav-inner − 44px of
   control) / 2, and var(--gut) in is the container's own gutter — so it does
   not move out from under the thumb that just opened the drawer. */
.mnav[open]>summary{position:fixed;top:10px;right:var(--gut);z-index:1002;border-color:var(--indigo-600);border-width:2px;color:var(--indigo-600)}
.mnav[open]>summary .ic-x{display:block}
.mnav[open]>summary .ic-burger{display:none}

/* The scrim is a sibling of the <details>, not a child, and that is
   load-bearing: website.js closes a [data-close-outside] menu on a pointerdown
   outside it, so the scrim has to sit outside the element for a tap on it to
   count as "outside" and shut the drawer. Escape comes from the same helper. */
.mnav-scrim{display:none;position:fixed;inset:0;z-index:999;background:rgba(15,27,45,.5)}

.mnav-panel{position:fixed;top:0;right:0;bottom:0;z-index:1000;width:min(420px,100%);background:#fff;display:flex;flex-direction:column;box-shadow:-18px 0 48px rgba(15,27,45,.2)}
.mnav-head{flex-shrink:0;display:flex;align-items:center;height:64px;padding-inline:var(--gut);border-bottom:1px solid var(--line)}
/* overscroll-behavior keeps a flick at the end of the list from scrolling the
   page underneath once the drawer has run out of travel. */
.mnav-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px var(--gut) 22px}
.mnav-foot{flex-shrink:0;display:flex;gap:10px;padding:12px var(--gut);padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.mnav-foot .btn{flex:1}

.mnav-search{display:flex;align-items:center;gap:9px;height:46px;padding:0 14px;border-radius:12px;background:var(--bg);border:1.5px solid var(--line)}
.mnav-search:focus-within{border-color:var(--indigo-600);background:#fff}
.mnav-search button{flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--ink-4);cursor:pointer;padding:0}
.mnav-search:focus-within button{color:var(--indigo-600)}
.mnav-search input{flex:1;min-width:0;border:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);-webkit-appearance:none;appearance:none}
.mnav-search input::placeholder{color:var(--ink-4)}
.mnav-search input:focus{outline:none}

/* The nav is flat - the same four links the desktop .nav-links row carries.
   .mnav-row is shared with the language picker's <summary> below, which is
   the only disclosure left inside the drawer; .chev, .val and .mnav-sub
   serve that one control. */
.mnav-nav{display:flex;flex-direction:column;gap:2px;margin-top:18px}
.mnav-row{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 12px;border-radius:12px;font-size:15px;font-weight:700;color:var(--navy-900);cursor:pointer;list-style:none}
.mnav-row::-webkit-details-marker{display:none}
.mnav-row::marker{content:""}
.mnav-row:hover{background:var(--bg-2)}
.mnav-row .ic{flex-shrink:0;display:flex;color:var(--ink-3)}
.mnav-row .lbl{flex:1;min-width:0}
.mnav-row .val{font-size:13px;font-weight:600;color:var(--ink-3)}
.mnav-row .chev{flex-shrink:0;color:var(--ink-4);transition:transform .16s}
/* The row for the current page, and the language picker while it is open,
   carry the same indigo wash — both mark "this is where you are". */
.mnav-row.on,.mnav-grp[open]>.mnav-row{background:var(--indigo-50);color:var(--indigo-700)}
.mnav-row.on .ic,.mnav-grp[open]>.mnav-row .ic,.mnav-grp[open]>.mnav-row .chev{color:var(--indigo-600)}
.mnav-grp[open]>.mnav-row .chev{transform:rotate(180deg)}
.mnav-sub{display:flex;flex-direction:column;padding:2px 12px 10px 43px}
.mnav-sub a{display:flex;align-items:center;min-height:40px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.mnav-sub a:hover{color:var(--indigo-700)}

.mnav-promo{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px;border-radius:16px;background:var(--navy-900);color:#fff}
.mnav-promo .tx{flex:1;min-width:0}
.mnav-promo .t{font-size:15px;font-weight:800}
.mnav-promo .s{margin-top:3px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.68)}
.mnav-promo .go{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--gold-500);color:var(--navy-900);transition:background .14s}
.mnav-promo:hover .go{background:var(--gold-300)}

.mnav-lang{margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.mnav-lang .mnav-sub a{justify-content:space-between;gap:10px}
.mnav-lang .en{margin-left:7px;font-size:11.5px;font-weight:600;color:var(--ink-4)}
.mnav-lang .mnav-sub a.on{color:var(--indigo-700)}
.mnav-lang .mnav-sub a.on .en{color:var(--indigo-500)}

/* CARDS: jobs + companies + categories */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;align-items:center;gap:13px;min-width:0;min-height:84px;transition:border-color .14s,box-shadow .14s,transform .14s;cursor:pointer}
.cat-ic{width:44px;height:44px;border-radius:12px;background:var(--indigo-50);color:var(--indigo-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .14s,color .14s}
/* The label and count are one column so the arrow always parks on the right
   edge, whatever the name's length. min-width:0 lets a long name ellipsis
   rather than pushing the arrow out of the card. */
.cat-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.cat-name{font-size:15px;font-weight:700;color:var(--navy-900);letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat .c{font-size:12.5px;color:var(--ink-3);font-weight:600}
.cat .arr{margin-left:auto;color:var(--ink-4);flex-shrink:0;transition:transform .14s,color .14s}

/* Family tints. Eight tiles in one pale indigo read as the same chip repeated
   eight times, however different the glyphs inside them are — which was the
   whole point of matching a glyph to the skill name in the first place. The
   tint is keyed to the same family the glyph comes from (CategoryTaxonomy), so
   a grid has rhythm at a glance and the icon does work rather than decoration.
   Literal hex rather than tokens: these are eleven one-off tints for one
   component, and inventing eleven token families for them would put ten unused
   ones in every other portal's palette.

   They live here, not in the landing page's own <style>, because the categories
   page renders the same tiles and the same feature cards from the same data. */
.cat-ic.fam-code{background:#EEF0FE;border-color:#DCDFFB;color:#4F46E5}
.cat-ic.fam-data{background:#E8F1FD;border-color:#D1E2F9;color:#1D63C0}
.cat-ic.fam-design{background:#F5ECFE;border-color:#E8D9FB;color:#7C3AED}
.cat-ic.fam-cloud{background:#E3F5F2;border-color:#CBEAE4;color:#0E8B7D}
.cat-ic.fam-delivery{background:#FFF3CC;border-color:#FAE1A0;color:#B88500}
.cat-ic.fam-people{background:#FCEDF1;border-color:#F7DAE2;color:#C03A5B}
.cat-ic.fam-money{background:#E6F6EC;border-color:#CDEAD8;color:#15784A}
.cat-ic.fam-growth{background:#FFF0E3;border-color:#FADDC5;color:#C2560F}
.cat-ic.fam-care{background:#FDECEC;border-color:#F7D6D6;color:#C23B3B}
/* The supply family had a glyph and no tint, so logistics tiles fell back to
   the generic indigo and read as engineering. */
.cat-ic.fam-supply{background:#E6F4F8;border-color:#CCE6EF;color:#12708F}
.cat-ic.fam-ops{background:#EDF1F7;border-color:#DCE3EE;color:#3F5A80}

/* Tile refinements shared by every .cat-grid on the site. */
.cat-grid .cat{padding:16px 16px 16px 18px;min-height:92px;border-radius:16px;gap:14px}
.cat-grid .cat-ic{width:46px;height:46px;border-radius:13px;border:1px solid transparent}
.cat-grid .cat-name{font-size:15.5px}
/* The count is the one fact that separates one tile from the next, and it was
   the smallest, greyest thing on the card. The numeral takes the emphasis; the
   noun after it stays quiet. */
.cat-grid .cat .c{font-size:12.5px;color:var(--ink-3)}
.cat-grid .cat .c b{font-size:13.5px;font-weight:800;color:var(--navy-900);margin-right:4px;font-variant-numeric:tabular-nums}
/* A filled disc, not a bare chevron: on a short name like "SQL" the glyph
   floated alone in ~90px of empty card and read as a stray mark rather than as
   the affordance it is. */
.cat-grid .cat .arr{width:28px;height:28px;border-radius:50%;background:var(--bg-2);display:flex;align-items:center;justify-content:center}

.job-scroll{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.job{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;transition:border-color .14s,box-shadow .14s,transform .14s;cursor:pointer;position:relative;display:flex;flex-direction:column;min-width:0}
.job.promoted{border-color:var(--gold-300);background:linear-gradient(180deg,var(--gold-50),#fff 55%)}
.job-badges{display:flex;gap:6px;margin-bottom:12px}
.job-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}
.job-co{display:flex;gap:11px;align-items:center;min-width:0}
.job-logo{width:44px;height:44px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:17px}
/* Lets the company name ellipsis instead of pushing the save button out of
   the card; also the hook the /jobs list rows place on their grid. */
.job-co-txt{min-width:0}
.job-co-name{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job-rating{font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:3px;margin-top:1px}
.job-rating .star{color:var(--gold-500)}
.job-save{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-4);flex-shrink:0}
.job h3{font-size:16px;font-weight:700;line-height:1.3;margin-bottom:10px;overflow-wrap:anywhere}
.job-meta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:12.5px;color:var(--ink-2);margin-bottom:12px}
.job-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.job-meta svg{color:var(--ink-4);flex-shrink:0}
.job-skills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.job-skill{font-size:11.5px;padding:4px 9px;background:var(--indigo-50);color:var(--indigo-700);border-radius:6px;font-weight:600}
/* Badge slot. Driven by PublicJobCard.Fresh (posted within three days) — the
   only per-job flag the public service exposes. There is no "featured"/promoted
   column behind it, so the label says what the data actually means. */
.job-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;background:var(--good-50);color:#15803d;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
/* Work mode reads from JobTypeDisplay — full-time / contract / part-time. It
   used to sit under the company name as 11px grey text, where it was the least
   legible real fact on the card. */
.job-mode{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:7px;background:var(--indigo-50);color:var(--indigo-700);font-size:11.5px;font-weight:700;margin-bottom:12px}
.job-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line-2);margin-top:auto}
.job-posted{font-size:11.5px;color:var(--ink-3)}
.job-posted b{color:var(--good);font-weight:700}
.promoted-tag{position:absolute;top:0;right:20px;transform:translateY(-50%);background:var(--gold-500);color:var(--navy-900);font-size:10px;font-weight:800;padding:3px 9px;border-radius:5px;text-transform:uppercase;letter-spacing:.04em}

.jtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.jtab{height:38px;padding:0 15px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;gap:6px}
.jtab:hover{border-color:var(--navy-700)}
.jtab.on{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}
.jtab .c{font-size:11px;opacity:.7}

.co-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.co{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 16px;text-align:center;transition:border-color .14s,box-shadow .14s,transform .14s;cursor:pointer;min-width:0}
.co-logo{width:56px;height:56px;border-radius:14px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px}
.co-name{font-size:14px;font-weight:700;overflow-wrap:anywhere}
.co-rating{font-size:12px;color:var(--ink-3);margin-top:3px;display:flex;align-items:center;gap:3px;justify-content:center}
.co-rating .star{color:var(--gold-500)}
.co-open{font-size:12px;color:var(--indigo-600);font-weight:700;margin-top:8px}

/* EMPLOYER DIRECTORY (/companies). One panel, one line per employer: the page
   lists every employer with a live vacancy, and a name plus a count is a list,
   not a grid of tiles with 40px of air around each. The rows sit in a single
   bordered card so the dividers do the separating and the page keeps one edge
   down each side. */
.co-list{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.co-row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line-2);min-height:68px;transition:background .13s}
.co-row:last-child{border-bottom:none}
.co-row-logo{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:17px}
/* min-width:0 so a long employer name ellipses instead of pushing the count
   and the chevron off the right edge of the row. */
.co-row-name{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--navy-900);letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The width a row has that a tile does not, spent on the one comparison the
   page can honestly make: roles open here against the most on this page. */
.co-row-bar{width:132px;height:6px;border-radius:999px;background:var(--bg-2);flex-shrink:0;overflow:hidden}
.co-row-bar i{display:block;height:100%;border-radius:999px;background:var(--indigo-500)}
.co-row-count{font-size:12.5px;font-weight:700;color:var(--indigo-700);background:var(--indigo-50);border-radius:999px;padding:5px 11px;white-space:nowrap;flex-shrink:0}
.co-row-arr{color:var(--ink-4);display:flex;flex-shrink:0;transition:transform .13s,color .13s}

/* QUICK LINKS — the closing directory band.

   Four bare <ul>s with a "›" in front of every line read as a sitemap dump
   rather than a designed section: 13px grey text, no edges, nothing to aim
   at. They are now one bordered panel of four columns. The dividers are the
   1px grid gap showing a --line background through it, so the rules stay
   correct however the columns wrap at the breakpoints below — a border-left
   on every column but the first is wrong the moment the grid goes 2-up.
   The column headings borrow the footer's small-caps treatment, because the
   footer starts one band below this one. */
.ql-band{background:#fff;border-top:1px solid var(--line)}
.ql-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ql{background:#fff;padding:clamp(16px,1.8vw,22px)}
.ql h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;color:var(--navy-900);display:flex;align-items:center;gap:10px}
/* The icon sat loose against the text at 15px. A tinted chip gives the
   column a shoulder to start from and matches .cat-ic on the same page. */
.ql-ic{width:30px;height:30px;border-radius:9px;background:var(--indigo-50);color:var(--indigo-600);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ql h4 svg{flex-shrink:0}
.ql ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
/* Negative inline margin so the hover fill bleeds to the column's optical
   edge while the text stays on the heading's left rule. */
.ql a{font-size:13.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:8px;min-height:34px;padding:0 9px;margin-inline:-9px;border-radius:8px;transition:background .13s,color .13s}
/* The chevron rides in on hover instead of prefixing all twenty rows. */
.ql a::after{content:"›";margin-left:auto;font-size:17px;line-height:1;color:var(--indigo-500);flex-shrink:0;opacity:0;transform:translateX(-4px);transition:opacity .13s,transform .13s}
.ql a:hover,.ql a:focus-visible{background:var(--indigo-50);color:var(--indigo-700)}
.ql a:hover::after,.ql a:focus-visible::after{opacity:1;transform:translateX(0)}
/* Rows carrying a count: the label takes the slack so the pill and the
   chevron stay pinned right and a long category name ellipses. */
.ql-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ql-n{font-size:11.5px;font-weight:700;color:var(--indigo-700);background:var(--indigo-50);border-radius:999px;padding:2px 8px;flex-shrink:0;transition:background .13s}
.ql a:hover .ql-n{background:#fff}

/* FOOTER
   Navy slab. The quick-links band above it is white, so the colour change is
   the page's closing edge — no top border needed, the contrast is the rule. */
footer{background:var(--navy-900);color:#9bb3d4;padding:clamp(40px,5vw,60px) 0 24px;margin-top:0}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1.5fr;gap:clamp(22px,2.4vw,34px);margin-bottom:36px}
.foot-logo{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.foot-logo .logo-text{color:#fff}
.foot-blurb{font-size:13px;color:#8ba4c6;line-height:1.6;max-width:32ch;margin-bottom:14px}
.foot-copy{font-size:12.5px;color:#6b83a6}
.foot-col h5{font-size:12px;font-weight:800;color:#fff;margin:0 0 12px;text-transform:uppercase;letter-spacing:.06em}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.foot-col a{font-size:13px;color:#9bb3d4;display:inline-flex;align-items:center;min-height:30px}
.foot-col a:hover{color:var(--gold-300)}
/* Tiles, not bare glyphs: on navy an unfilled icon reads as debris. Indigo on
   hover ties them to the rest of the secondary palette. */
.foot-social{display:flex;gap:8px;margin-bottom:22px}
.foot-social a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;color:#cfd9ea}
.foot-social a:hover{background:var(--indigo-600);border-color:var(--indigo-600);color:#fff}
/* Newsletter. A GET form to /job-alerts, which is a real page — the input hands
   the address over as a query parameter rather than posting nowhere. */
.foot-news{display:flex;align-items:center;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);border-radius:10px;padding:0 0 0 14px;height:46px;max-width:320px}
.foot-news:focus-within{border-color:var(--indigo-500);background:rgba(255,255,255,.1)}
.foot-news input{flex:1;border:none;background:transparent;font-size:13.5px;min-width:0;color:#fff}
.foot-news input::placeholder{color:#7f97ba}
.foot-news button{width:40px;height:40px;margin-right:3px;border-radius:8px;background:var(--indigo-600);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.foot-news button:hover{background:var(--indigo-500)}
.foot-bottom{padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12.5px;color:#8ba4c6}
.foot-langs{display:flex;gap:18px;flex-wrap:wrap}
.foot-langs a:hover{color:var(--gold-300)}

/* AUTH OVERLAY

   A split card: a navy rail carrying the brand and what Jork is, and a light
   column holding the two ways in. The rail is what the all-white card was
   missing — the visitor had to pick a portal before the modal had said
   anything — and it folds down to a short band above the choices on a phone,
   dropping its list rather than pushing the two rows off a short screen.

   The two paths keep separate colours: gold for the candidate, indigo (the
   site's secondary brand colour, declared at the top of this file) for the
   recruiter. Navy-50 read as a disabled tile next to the gold one. Icon,
   title, blurb and call to action sit on one row each, so the two paths
   compare across rather than down two tall columns, and the phone layout is
   the same object narrower instead of a second design. */
.ov{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.ov.open{display:flex}
.ov-back{position:absolute;inset:0;background:rgba(15,27,45,.55);backdrop-filter:blur(4px)}
.ov-card{position:relative;background:#fff;border-radius:24px;width:100%;max-width:880px;max-height:calc(100dvh - 40px);overflow:hidden auto;box-shadow:0 40px 100px rgba(0,0,0,.4);animation:ovin .2s ease;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr)}
@keyframes ovin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ov-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:var(--ink-2);z-index:3}
.ov-close:hover{background:var(--bg-2);color:var(--navy-900)}

/* Rail. The two glows are decoration and are clipped here rather than by the
   card, which scrolls on a short screen and would let them drift. */
.ov-rail{position:relative;overflow:hidden;padding:30px 28px;color:#fff;display:flex;flex-direction:column;gap:22px;background:linear-gradient(160deg,#16263F 0%,var(--navy-900) 58%,#0B1424 100%)}
.ov-rail::before{content:"";position:absolute;width:320px;height:320px;right:-140px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(245,184,0,.26),transparent 68%)}
.ov-rail::after{content:"";position:absolute;width:280px;height:280px;left:-120px;bottom:-140px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.28),transparent 66%)}
.ov-rail>*{position:relative}
.ov-mark{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;letter-spacing:-.01em}
.ov-mark i{width:28px;height:28px;border-radius:8px;background:var(--gold-500);color:var(--navy-900);display:grid;place-items:center;font-style:normal;font-size:15px;font-weight:800}
.ov-rail h2{font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.02em;color:#fff}
.ov-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ov-pts li{display:flex;gap:10px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.8)}
.ov-pts svg{flex:none;margin-top:2px;color:var(--gold-500)}
.ov-secure{margin-top:auto;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:7px}

/* Light column. */
.ov-main{padding:32px clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:22px;background:#fff}
.ov-head .k{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-700)}
.ov-head h3{font-size:clamp(21px,3vw,25px);font-weight:800;margin-top:7px}
.ov-head p{font-size:14px;color:var(--ink-3);margin-top:5px}
.ov-opts{display:flex;flex-direction:column;gap:12px}
.ov-opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;padding:17px 18px;border:1.5px solid var(--line);border-radius:15px;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s,background .15s}
.ov-opt .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;transition:transform .15s}
.ov-opt.cand .ic{background:var(--gold-100);color:var(--gold-700)}
.ov-opt.rec .ic{background:var(--indigo-50);color:var(--indigo-600)}
.ov-opt .tx{min-width:0}
.ov-opt h4{font-size:15.5px;font-weight:800}
.ov-opt p{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-top:3px}
.ov-opt .go{display:block;margin-top:9px;font-size:12.5px;font-weight:700;color:var(--ink-3);transition:color .15s}
.ov-opt .arw{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--bg);color:var(--ink-3);transition:transform .16s,background .15s,color .15s}
.ov-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);text-align:center}
.ov-foot a,.ov-foot .ov-link{color:var(--indigo-600);font-weight:700}
/* The footer switch is a button so a JS throw cannot navigate to "#";
   it still has to read as the link it replaced. */
.ov-foot .ov-link{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:none}
.ov-foot .ov-link:hover{text-decoration:underline}

/* HOVER — pointer devices only.
   A transform lift fired by :hover sticks after a tap on touch, so the card
   stays raised until something else is tapped. Gating the whole family behind
   (hover:hover) leaves touch with the flat resting state it should have. */
@media (hover:hover){
  .cat:hover{border-color:var(--gold-500);box-shadow:0 10px 26px rgba(15,27,45,.08);transform:translateY(-2px)}
  .cat:hover .cat-ic{background:var(--gold-100);color:var(--gold-700)}
  .cat:hover .arr{transform:translateX(3px);color:var(--navy-900)}
  .cat-grid .cat:hover .arr{background:var(--navy-900);color:#fff}
  .job:hover{border-color:var(--navy-700);box-shadow:0 14px 34px rgba(15,27,45,.1);transform:translateY(-2px)}
  .job:hover h3{color:var(--blue)}
  .job-save:hover{color:var(--gold-700);border-color:var(--gold-500);background:var(--gold-50)}
  .co:hover{border-color:var(--gold-500);box-shadow:0 10px 26px rgba(15,27,45,.08);transform:translateY(-2px)}
  .co-row:hover{background:var(--bg)}
  .co-row:hover .co-row-name{color:var(--blue)}
  .co-row:hover .co-row-arr{color:var(--navy-900);transform:translateX(3px)}
  .ov-opt:hover{box-shadow:0 10px 26px rgba(15,27,45,.09)}
  .ov-opt:hover .ic{transform:scale(1.05)}
  .ov-opt:hover .arw{transform:translateX(3px)}
  .ov-opt.cand:hover{border-color:var(--gold-500);background:var(--gold-50)}
  .ov-opt.cand:hover .go{color:var(--gold-700)}
  .ov-opt.cand:hover .arw{background:var(--gold-500);color:var(--navy-900)}
  .ov-opt.rec:hover{border-color:var(--indigo-500);background:var(--indigo-50)}
  .ov-opt.rec:hover .go{color:var(--indigo-700)}
  .ov-opt.rec:hover .arw{background:var(--indigo-600);color:#fff}
}

/* ============================================================
   LEGAL DOCUMENT HERO — /privacy and /terms

   The two pages are a pair and were built twice. The same gradient,
   the same masked grid wash, the same rings, the same eyebrow
   recolour, the same facts and the same draft notice were declared
   once in each page's <HeadContent>, about sixty lines each.

   They had already drifted, in exactly the way a copied block does:
   the privacy hero was given catalog keys for its date, its scope
   and its draft notice, and the terms hero — same markup, other
   file — kept the English literals, so one of the two pages opened
   in English whatever language the visitor had chosen. Declared
   once here, both pages wear it, and the next change lands on both.

   Each page keeps its own prefix (.pv-* / .tm-*) for everything
   below the hero, which is where they genuinely differ: privacy
   opens on a summary card, terms goes straight to the clauses.
   ============================================================ */

/* One height for both pages. /privacy briefly had a deeper variant so a
   summary card could overlap into its lower edge, which left the two
   legal heroes visibly different sizes — the same band on one page and
   half as tall again on the other. The card sits below the hero now, and
   there is one hero.

   The inset hairline along the bottom is the seam into the white document
   band: navy cut straight into white on a hard edge, which read as two
   pages stacked rather than one page changing register. */
.lgl-hero{position:relative;color:#fff;background:linear-gradient(118deg,#0F1B2D 0%,#1A2050 46%,#33268C 78%,#4B37AD 100%);padding:clamp(34px,4.4vw,52px) 0 clamp(44px,5.6vw,68px);box-shadow:inset 0 -1px 0 rgba(255,255,255,.09)}

/* The decoration lives on its own clipping layer, so the section
   itself stays free of overflow rules. */
.lgl-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lgl-glow::before{content:"";position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(120% 90% at 16% 0,#000 22%,transparent 76%);mask-image:radial-gradient(120% 90% at 16% 0,#000 22%,transparent 76%)}
/* Rings from box-shadow on one element rather than extra nodes, so they
   scale with the hero instead of being positioned against it. They sit
   high and far right, which is where the facts card lands: the rings are
   its backing. Before the card they were the only thing in that half and
   read as decoration adrift in an empty corner. */
.lgl-glow::after{content:"";position:absolute;right:-150px;top:-70px;width:300px;height:300px;border-radius:50%;border:1px solid rgba(255,255,255,.09);box-shadow:0 0 0 62px rgba(255,255,255,.03),0 0 0 63px rgba(255,255,255,.055),0 0 0 136px rgba(255,255,255,.018)}
/* A bloom under the card, between the rings and the content, so the card
   has something to lift off. Its own layer rather than a third shadow on
   .lgl-glow, because it moves to a different corner when the hero folds
   to one column and the rings do not. */
.lgl-bloom{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(46% 70% at 84% 62%,rgba(124,106,255,.34),transparent 70%)}
.container.lgl-in{position:relative;z-index:2}

/* The top band: what kind of page this is on the left, which of the two
   documents you are reading on the right. */
.lgl-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
/* The shared .eyebrow is gold-700, which is for white pages; on navy it
   needs the lighter step of the same family. Its own bottom margin goes:
   the band is spacing this row now. */
.lgl-hero .eyebrow{margin-bottom:0;color:var(--gold-300)}
.lgl-hero .eyebrow .bar{background:var(--gold-300)}

/* THE PAIR SWITCH. Privacy and Terms are read as a set and linked as
   one: people arrive at the wrong one of the two, and check a clause in
   one against a clause in the other. Until now the only crossing was a
   button under the final clause — the far end of a long document, found
   by scrolling past the whole thing you did not come to read.

   A segmented control rather than two links, because the pair is closed:
   there are two legal documents, this is the one you are on, that is the
   other one. aria-current marks the active side for a screen reader and
   selects it visually, so the state has one source. */
.lgl-pair{display:inline-flex;gap:3px;padding:3px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13)}
.lgl-pair a{padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.2;color:#c3cede;white-space:nowrap;transition:background .13s,color .13s}
.lgl-pair a:hover{color:#fff;background:rgba(255,255,255,.09)}
.lgl-pair a[aria-current="page"]{background:#fff;color:var(--navy-900)}
/* The ring the shared :focus-visible draws is gold on navy already; it
   only needs to sit clear of the pill it belongs to. */
.lgl-pair a:focus-visible{outline-offset:-1px}

/* THE SPLIT. What the document says on the left, what the document is on
   the right. The hero used to be one left-hand column the full width of
   the container: the title held to 16ch, the intro to 62ch, and the whole
   right half carrying nothing but the rings. */
.lgl-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:clamp(26px,4vw,54px);align-items:center;margin-top:clamp(14px,2vw,20px)}

.lgl-hero h1{color:#fff;font-size:clamp(31px,4.7vw,48px);letter-spacing:-.028em;max-width:13ch}
/* The mark the pair shares. A short gold rule under the title, fading
   out — nothing else on the public site carries one, so the two legal
   pages are recognisable as a set before the pair switch is read. */
.lgl-hero h1::after{content:"";display:block;width:56px;height:3px;border-radius:3px;margin-top:16px;background:linear-gradient(90deg,var(--gold-500),rgba(245,184,0,0))}
.lgl-hero .sub{margin-top:16px;max-width:48ch;color:#cdd7e6;font-size:clamp(14.5px,1.45vw,16px);line-height:1.62;text-wrap:pretty}

/* THE REVIEW NOTICE. It is the first true thing either page can say about
   itself, so it sits above the document rather than under it — but a full
   gold border around a 74ch box carried as much weight as the title next
   to it, and the reader met the caveat before the document. A rule down
   the edge with a wash that fades off to the right says the same thing at
   the volume a caveat deserves. */
.lgl-draft{display:flex;gap:10px;margin-top:20px;max-width:56ch;padding:12px 16px;border-left:3px solid var(--gold-500);border-radius:0 11px 11px 0;background:linear-gradient(90deg,rgba(245,184,0,.13),rgba(245,184,0,.03));font-size:12.8px;line-height:1.6;color:#e8dcbd}
.lgl-draft svg{color:var(--gold-300);flex-shrink:0;margin-top:2px}

/* THE FACTS CARD. The date the document carries, what it governs, and the
   address it is answered at. The first two were loose chips under the
   intro — 12.5px on rgba(255,255,255,.06), the least legible thing in the
   hero — and the third was a button at the far end of the last clause.
   Held as one object they are a document header, which is what a reader
   arriving at a legal page checks first.

   Glass rather than a solid fill so the rings behind it still read; the
   inner panel is what gives the text a dark enough ground to sit on,
   since the gradient runs light under the right-hand column. */
.lgl-card{border-radius:18px;padding:6px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 22px 50px -24px rgba(6,10,26,.75)}
.lgl-card-in{border-radius:13px;padding:18px;background:rgba(10,16,38,.34);border:1px solid rgba(255,255,255,.07)}
.lgl-card-h{display:flex;align-items:center;gap:11px;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.11)}
.lgl-card-ic{width:36px;height:36px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--navy-900);background:linear-gradient(140deg,var(--gold-300),var(--gold-500))}
.lgl-card-h b{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:#fff;line-height:1.2}
.lgl-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lgl-facts li{display:flex;align-items:flex-start;gap:11px;padding:13px 0;font-size:13px;font-weight:600;line-height:1.5;color:#cdd7e6}
.lgl-facts li+li{border-top:1px solid rgba(255,255,255,.075)}
.lgl-facts svg{color:var(--gold-300);flex-shrink:0;margin-top:1px}
/* The address is the one thing in the card you can act on, so it is the
   one thing that looks like a link. */
.lgl-facts a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .13s}
.lgl-facts a:hover{border-bottom-color:var(--gold-300)}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* Five across is too tight for a company name once the viewport leaves
   desktop, and the names were wrapping mid-word. */
@media (max-width:1120px){
  .co-grid{grid-template-columns:repeat(4,1fr)}
}

/* Tablet and below: the inline nav gives way to the drawer. */
@media (max-width:1000px){
  .nav-search,.nav-links,.nav-actions{display:none}
  .co-row-bar{display:none}
  .mnav{display:block}
  .mnav[open]~.mnav-scrim{display:block}
  /* The page behind must not scroll under an open drawer. Scoped to the
     width where the drawer exists: above it the <details> is display:none
     and may still be [open] from before the resize. */
  html:has(.mnav[open]){overflow:hidden}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .job-scroll{grid-template-columns:repeat(2,1fr)}
  .ql-grid{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1.3fr 1fr 1fr}
  .foot-news{max-width:none}

  /* The legal hero folds: 336px of card beside the copy leaves the title
     a track too narrow to set at this size. The card follows the intro at
     full width, and the bloom moves with it — left where it was, it would
     light an empty corner above the card rather than the card. The two
     measures go back to the full track, since there is no second column
     left to hold them off. */
  .lgl-grid{grid-template-columns:1fr;gap:26px;align-items:stretch}
  .lgl-hero h1{max-width:none}
  .lgl-hero .sub{max-width:62ch}
  .lgl-bloom{background:radial-gradient(70% 40% at 70% 88%,rgba(124,106,255,.3),transparent 70%)}
}

@media (max-width:820px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .co-grid{grid-template-columns:repeat(3,1fr)}
  /* The rail folds to a band above the choices. It keeps the mark and the
     line that says what Jork is; the list goes, because on a short screen
     it would push the two rows the modal exists for below the fold. */
  .ov-card{grid-template-columns:1fr}
  .ov-rail{padding:22px clamp(20px,5vw,26px);gap:12px}
  .ov-rail h2{font-size:18px}
  .ov-pts,.ov-secure{display:none}
  .ov-main{padding:26px clamp(20px,5vw,26px)}
}

@media (max-width:640px){

  .job-scroll{grid-template-columns:1fr}
  /* Six columns is a very long single stack on a phone. The four link lists
     pair up two-across; only the brand block and the follow/subscribe block,
     which both hold prose, take the full width. */
  .foot-top{grid-template-columns:1fr 1fr;gap:22px}
  .foot-top>div:first-child,.foot-top>.foot-col:last-child{grid-column:1 / -1}
  .foot-blurb{max-width:none}
  .sec-head{align-items:flex-start;flex-direction:column;gap:10px}
}

@media (max-width:440px){
  .cat-grid{grid-template-columns:1fr}
  /* Phone: the row keeps the two facts and drops the chevron — the whole row
     is the tap target, and 44px of logo plus a count leaves no width for a
     glyph that says nothing the row does not. */
  .co-row{gap:11px;padding:12px 14px}
  .co-row-arr{display:none}
  .co-row-name{white-space:normal;overflow:visible;font-size:14.5px;line-height:1.3}
  .co-grid{grid-template-columns:repeat(2,1fr)}
  .ql-grid{grid-template-columns:1fr}

  /* The pair switch takes the width and splits it evenly rather than
     sitting inline. Two nowrap pills fit a 360px screen in English and
     do not in Burmese, where "Privacy" and "Terms" each run to several
     syllables; halves that wrap hold both. */
  .lgl-pair{display:flex;width:100%}
  .lgl-pair a{flex:1 1 0;text-align:center;white-space:normal}
  /* 18px of inner padding inside 6px of outer frame costs 48px of a 360px
     screen, which the scope line needs more than the frame does. */
  .lgl-card-in{padding:15px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .cat:hover,.job:hover,.co:hover{transform:none}
  .ov-opt:hover .ic,.ov-opt:hover .arw{transform:none}
  .co-row:hover .co-row-arr{transform:none}
  .cat:hover .arr{transform:none}
}

/* Public pages: FocusOnNavigate (Routes.razor) programmatically focuses the
   first <h1> for screen readers, which paints a focus ring on the big hero
   heading. Suppress the visible outline — focus still moves for AT users. */
h1:focus, h1:focus-visible { outline: none; }