:root{
  /* ink */
  --ink:#15161c; --ink-soft:#4c5160; --ink-faint:#767c8c;
  --line:#e6e5e0; --line-soft:#f1f0ec;

  /* surfaces — warm neutrals, not the usual cold grey */
  --bg:#fff; --bg-soft:#faf9f6; --bg-warm:#fdf9f2;

  /* brand */
  --brand:#4338ca; --brand-2:#7c3aed; --brand-dark:#312a9c;
  --brand-tint:#eceafe; --brand-ink:#2a2380;

  /* accents */
  --accent:#f59e0b; --accent-soft:#fef3c7; --accent-ink:#92610a;
  --pink:#ec4899; --teal:#0d9488;
  --good:#059669; --good-soft:#ecfdf5;

  --wave-fill:#faf9f6;
  --radius:14px; --radius-lg:22px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(21,22,28,.05),0 1px 3px rgba(21,22,28,.05);
  --shadow-md:0 4px 12px rgba(21,22,28,.07),0 2px 4px rgba(21,22,28,.04);
  --shadow-lg:0 18px 44px rgba(67,56,202,.13),0 4px 12px rgba(21,22,28,.05);
  --wrap:1140px;
  --ease:cubic-bezier(.22,.68,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:750;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,1.25rem + 2.6vw,3.1rem)}
h2{font-size:clamp(1.4rem,1.1rem + 1.3vw,1.95rem)}
h3{font-size:1.08rem}
p{margin:0 0 1em}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;position:relative}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px;box-shadow:var(--shadow-md)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ============================================================ animation ==
   Cards fade up on load in a stagger. There is no JS, so the delay is set
   by nth-child rather than by an observer. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes floaty-slow{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(2deg)}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(22px,-16px) scale(1.05)}
  66%{transform:translate(-16px,12px) scale(.96)}}
@keyframes shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
@keyframes pop{0%{transform:scale(.85);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.rise{animation:rise .5s var(--ease) both}
.job-list>*{animation:rise .45s var(--ease) both}
.job-list>*:nth-child(1){animation-delay:.02s} .job-list>*:nth-child(2){animation-delay:.06s}
.job-list>*:nth-child(3){animation-delay:.1s}  .job-list>*:nth-child(4){animation-delay:.14s}
.job-list>*:nth-child(5){animation-delay:.18s} .job-list>*:nth-child(6){animation-delay:.22s}
.job-list>*:nth-child(n+7){animation-delay:.26s}
.cat-tiles>*{animation:rise .45s var(--ease) both}
.cat-tiles>*:nth-child(2){animation-delay:.03s} .cat-tiles>*:nth-child(3){animation-delay:.06s}
.cat-tiles>*:nth-child(4){animation-delay:.09s} .cat-tiles>*:nth-child(5){animation-delay:.12s}
.cat-tiles>*:nth-child(n+6){animation-delay:.15s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =============================================================== header == */
.site-header{border-bottom:1px solid var(--line);background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(10px);position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);font-size:1.2rem;
  letter-spacing:-.025em}
.logo:hover{text-decoration:none}
.logo-mark{background:linear-gradient(135deg,var(--brand),var(--brand-2) 55%,var(--pink));
  color:#fff;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  font-size:.84rem;letter-spacing:.01em;box-shadow:0 3px 10px rgba(67,56,202,.32);
  transition:transform .3s var(--ease)}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.07)}
.header-nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:.94rem}
.header-nav>*{flex:0 0 auto;white-space:nowrap}
/* Must exclude the buttons: the .header-nav a selector is more specific than
   .btn-sm, so without this it overrides the button's white text and the CTA
   renders dark-on-purple. */
.header-nav a:not(.btn):not(.btn-sm){color:var(--ink-soft)}
.header-nav a{font-weight:550;position:relative}
.header-nav a:not(.btn):not(.market-switch)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;
  height:2px;background:var(--brand);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease)}
.header-nav a:not(.btn):not(.market-switch):hover{color:var(--brand);text-decoration:none}
.header-nav a:not(.btn):not(.market-switch):hover::after{transform:scaleX(1)}
.market-switch{border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 13px;
  font-size:.85rem;background:#fff;transition:border-color .2s,transform .2s var(--ease)}
.market-switch:hover{border-color:var(--brand);transform:translateY(-1px)}

/* ============================================================== buttons == */
.btn{display:inline-block;padding:12px 22px;border-radius:11px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-weight:650;font-size:.95rem;cursor:pointer;text-align:center;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s,border-color .18s}
.btn:hover{text-decoration:none;background:var(--bg-soft);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(67,56,202,.28)}
.btn-primary:hover{background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  box-shadow:0 8px 22px rgba(67,56,202,.36)}
.btn-accent{background:var(--accent);border-color:transparent;color:#3a2703;
  box-shadow:0 4px 14px rgba(245,158,11,.32)}
.btn-accent:hover{background:#e8940a}
.btn-sm{padding:8px 16px;font-size:.88rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff;
  box-shadow:0 3px 10px rgba(67,56,202,.26)}
.btn-lg{padding:15px 30px;font-size:1.04rem}
.btn-block{display:block;width:100%}

/* ================================================================= hero == */
.hero{position:relative;padding:64px 0 88px;overflow:hidden;
  background:
    radial-gradient(52rem 30rem at 82% -12%,var(--brand-tint),transparent 62%),
    radial-gradient(38rem 26rem at 4% 6%,var(--accent-soft),transparent 60%),
    linear-gradient(180deg,#fff,var(--bg-warm))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:44px;align-items:center}
.hero h1{max-width:16ch;margin-bottom:.3em}
.hero h1 .hl{position:relative;white-space:nowrap;
  background:linear-gradient(120deg,var(--brand),var(--brand-2) 60%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:1.14rem;color:var(--ink-soft);max-width:50ch;margin-bottom:1.7em}
.hero-art{width:100%;height:auto;animation:floaty 7s ease-in-out infinite}
.hero-art .hero-blob-1{animation:drift 15s ease-in-out infinite;transform-origin:center}
.hero-art .hero-blob-2{animation:drift 19s ease-in-out infinite reverse;transform-origin:center}
.hero-art .hero-card{animation:floaty-slow 8s ease-in-out infinite}
.hero-art .hero-glass{animation:floaty 5.5s ease-in-out infinite .4s;transform-origin:center}
.hero-art .hero-dot-1{animation:floaty 4.4s ease-in-out infinite}
.hero-art .hero-dot-2{animation:floaty 5.8s ease-in-out infinite .6s}
.hero-art .hero-dot-3{animation:floaty 5s ease-in-out infinite 1.1s}
.hero-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;color:var(--ink-soft);font-size:.92rem}
.hero-stat{display:flex;align-items:center;gap:8px}
.hero-stat .icon{width:18px;height:18px;color:var(--brand)}
.hero-stat b{color:var(--ink);font-weight:750}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art-wrap{display:none}
}

/* ========================================================== live banner ==
   The heading is SVG text on a path (see routes/home.ts). Sizing happens here
   rather than in the markup so the whole composition scales from one width:
   the viewBox keeps the lettering, the curve and the colour bands in the same
   proportion all the way down to a phone. */
.live-band{position:relative;margin:34px 0 0;padding:24px 22px 30px;border-radius:var(--radius-lg);
  background:var(--bg-warm);border:1px solid var(--line-soft);text-align:center}
.live-headline{margin:0;font-size:0}
.live-arc{display:block;width:min(640px,100%);margin:0 auto;overflow:visible;
  animation:arc-float 7s ease-in-out infinite}
.live-arc text{font-family:inherit;font-weight:800;letter-spacing:-.4px}
@keyframes arc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Pulled up into the mouth of the arch. The legs meet the bottom edge at 27%
   and 73% of the arc width, so the chip only clears them while the arc is
   wide -- the mobile rule below drops the overlap rather than risk a collision. */
.live-band-inner{position:relative;margin-top:-16px}
.live-kicker{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.76rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--good);background:var(--good-soft);
  border-radius:var(--radius-pill);padding:6px 14px;margin-bottom:12px}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 0 rgba(5,150,105,.6);animation:pulse 2s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(5,150,105,.55)}
  70%{box-shadow:0 0 0 11px rgba(5,150,105,0)}
  100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}
}
.live-sub{margin:0;color:var(--ink-soft);font-size:1.03rem;max-width:56ch;
  margin-left:auto;margin-right:auto}
@media(max-width:720px){
  .live-band{padding:18px 16px 24px;margin-top:26px}
  .live-band-inner{margin-top:4px}
  .live-sub{font-size:.96rem}
}

/* ============================================================= sort bar == */
.sort-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;
  font-size:.9rem}
.sort-label{color:var(--ink-faint);font-weight:600;margin-right:2px}
.sort-opt{padding:6px 13px;border-radius:var(--radius-pill);border:1px solid var(--line);
  color:var(--ink-soft);background:#fff;font-weight:600;transition:border-color .15s,color .15s}
a.sort-opt:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.sort-opt.is-on{background:var(--brand-tint);border-color:transparent;color:var(--brand-ink)}
@media(max-width:720px){
  .sort-bar{gap:6px;font-size:.85rem}
  .sort-opt{padding:6px 11px}
  .sort-label{width:100%;margin-bottom:2px}
}

/* ================================================================ admin == */
.admin-body{background:var(--bg-soft)}
.admin-wrap{max-width:760px;margin:0 auto;padding:26px 18px 60px}
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:22px;flex-wrap:wrap}
.admin-brand{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.admin-brand span{color:var(--ink-faint);font-weight:600}
.admin-inline{display:flex;align-items:center;gap:10px;margin:0}
.admin-who{color:var(--ink-faint);font-size:.85rem}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:16px}
.admin-card h1{font-size:1.4rem;margin:0 0 14px}
.admin-card h2{font-size:1.05rem;margin:0 0 12px}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;
  margin-bottom:18px}
.admin-stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.admin-stat b{font-size:1.3rem;font-weight:750;letter-spacing:-.02em}
.admin-stat span{color:var(--ink-faint);font-size:.8rem}
.admin-stat.is-warn{border-color:#f5c2c2;background:#fff8f8}
.admin-stat.is-warn b{color:#b91c1c}
.admin-action{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-top:1px solid var(--line-soft);margin:0;color:inherit}
.admin-action:first-of-type{border-top:0}
.admin-action:hover{text-decoration:none}
.admin-action div{display:flex;flex-direction:column;gap:1px}
.admin-action span{color:var(--ink-faint);font-size:.83rem}
.admin-go{color:var(--brand);font-weight:600;font-size:.88rem;white-space:nowrap}
.admin-login label{display:block;font-weight:600;font-size:.88rem;margin:0 0 6px}
.admin-login input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:1rem;margin-bottom:12px}
.admin-login input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 4px var(--brand-tint)}
.admin-login .btn{width:100%;display:block}
.admin-ghost{background:#fff;color:var(--ink-soft);border:1px solid var(--line);box-shadow:none}
.admin-ghost:hover{background:var(--bg-soft);color:var(--ink)}
.admin-hint{color:var(--ink-faint);font-size:.83rem;margin:8px 0 0}
.admin-or{display:flex;align-items:center;gap:12px;margin:22px 0 18px;color:var(--ink-faint);
  font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.admin-or::before,.admin-or::after{content:"";flex:1;height:1px;background:var(--line)}
.admin-note{padding:10px 13px;border-radius:10px;font-size:.9rem;margin:0 0 16px}
.admin-note-ok{background:var(--good-soft);color:#046c4e}
.admin-note-bad{background:#fff1f1;color:#b91c1c}
.admin-foot{color:var(--ink-faint);font-size:.83rem;text-align:center;margin-top:22px}
@media(max-width:560px){
  .admin-action{flex-direction:column;align-items:flex-start;gap:8px}
}

/* =============================================================== search == */
.search{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.search-field{flex:1 1 210px;display:flex;position:relative}
.search input{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:12px;
  font-size:1rem;background:#fff;min-width:0;transition:border-color .2s,box-shadow .2s}
.search input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 4px var(--brand-tint)}
.search-hero{background:#fff;padding:9px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  border:1px solid var(--line-soft)}
.search-hero input{border-color:transparent;padding:16px}
.search-hero input:focus{border-color:var(--brand)}
.search-hero .btn{padding:16px 30px}

/* ============================================================== sections == */
.section{padding:56px 0;position:relative}
.section-tint{background:var(--bg-soft)}
.section-warm{background:linear-gradient(180deg,var(--bg-warm),#fff)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:24px}
.section-head p{margin:0;color:var(--ink-soft)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--brand);background:var(--brand-tint);
  padding:5px 12px;border-radius:var(--radius-pill);margin-bottom:14px}
.eyebrow .icon{width:14px;height:14px}
/* The divider SVG ships from icons.ts with class="wave-divider"; .wave is kept
   as an alias so either name gets sized. Without display:block the inline
   baseline strut leaves a ~7px stripe of the previous section's colour between
   the wave and the tinted band it is supposed to flow into. */
.wave,.wave-divider{display:block;width:100%;height:56px;margin-bottom:-1px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:38px;align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr}}

/* ============================================================= job cards == */
.job-list{display:flex;flex-direction:column;gap:18px}
.job-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:#fff;
  position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .22s var(--ease),transform .22s var(--ease)}
.job-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  transform:scaleY(0);transform-origin:top;transition:transform .25s var(--ease)}
.job-card:hover{border-color:#cfcbf5;box-shadow:var(--shadow-md);transform:translateY(-2px)}
.job-card:hover::before{transform:scaleY(1)}
.job-title{margin:0 0 5px;font-size:1.1rem}
.job-title a{color:var(--ink)}
.job-title a:hover{color:var(--brand)}
.job-meta{margin:0 0 9px;font-size:.92rem;color:var(--ink-faint);display:flex;gap:10px;flex-wrap:wrap}
.job-company{font-weight:650;color:var(--ink-soft)}
.job-location::before{content:"· "}
.job-snippet{margin:0 0 12px;color:var(--ink-soft);font-size:.95rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.job-tags{margin:0;display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:.87rem}
.pay{font-weight:750;color:var(--good);background:var(--good-soft);padding:3px 11px;
  border-radius:var(--radius-pill)}
.pay-contract::after{content:" · day rate";font-weight:500;opacity:.75;font-size:.9em}
.pay-none{color:var(--ink-faint);font-weight:500;background:transparent;padding:3px 0}
.tag{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:3px 11px;color:var(--ink-soft)}
.job-date{margin-left:auto;color:var(--ink-faint)}

/* ================================================== pinned (premium) jobs ==
   Pinned listings have to be distinguishable from an organic result at a
   glance — that is a requirement of the ASA/CAP code, not a styling
   preference. The amber accent already in the palette does that job precisely
   because it is not the indigo brand: it reads as a different kind of thing
   rather than as a second house colour.

   Three signals, deliberately: a warm card tint, a solid amber left edge, and
   the word itself. Colour never carries the meaning alone — the pill is real
   text, so it survives greyscale, high-contrast mode and a screen reader.
   #92610a on #fef3c7 is 4.7:1, which clears AA for the pill's size. */
.job-card.sponsored{border-color:#eddba4;
  background:linear-gradient(180deg,#fffbf0,#fff 72%)}
.job-card.sponsored::before{width:4px;transform:scaleY(1);
  background:linear-gradient(180deg,var(--accent),#d97706)}
.job-card.sponsored:hover{border-color:#e3c877;box-shadow:0 4px 14px rgba(146,97,10,.13)}
.sponsored-flag{margin:0 0 10px;display:flex}
.sponsored-pill{display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-soft);color:var(--accent-ink);
  border:1px solid #edcf7e;border-radius:var(--radius-pill);
  padding:3px 12px;font-size:.78rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.35}
.sponsored-pill::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:none}

/* ============================================================ categories == */
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:13px}
.cat-tile{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff;
  display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .2s}
.cat-tile::after{content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(135deg,var(--brand-tint),transparent 65%);transition:opacity .25s}
.cat-tile:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-md);
  border-color:#cfcbf5}
.cat-tile:hover::after{opacity:1}
.cat-tile>*{position:relative;z-index:1}
.cat-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:8px;
  background:var(--brand-tint);color:var(--brand);transition:transform .25s var(--ease)}
.cat-ico .icon{width:21px;height:21px}
.cat-tile:hover .cat-ico{transform:scale(1.1) rotate(-6deg)}
.cat-tile:nth-child(4n+2) .cat-ico{background:var(--accent-soft);color:var(--accent-ink)}
.cat-tile:nth-child(4n+3) .cat-ico{background:var(--good-soft);color:var(--good)}
.cat-tile:nth-child(4n+4) .cat-ico{background:#fce7f3;color:#be1e64}
.cat-name{font-weight:680;color:var(--ink)}
.cat-count{font-size:.85rem;color:var(--ink-faint)}

.cat-copy{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.cat-copy article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.cat-copy article:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.cat-copy h3{display:flex;align-items:center;gap:10px;margin-bottom:.5em}
.cat-copy h3 a{color:var(--ink)}
.cat-copy h3 .cat-ico{margin-bottom:0;width:34px;height:34px;flex:0 0 auto}
.cat-copy h3 .cat-ico .icon{width:18px;height:18px}
.cat-copy p{color:var(--ink-soft);font-size:.95rem;margin-bottom:.7em}
.cat-more{font-weight:650;font-size:.92rem;display:inline-flex;align-items:center;gap:6px}
.cat-more .icon{width:15px;height:15px;transition:transform .2s var(--ease)}
.cat-copy article:hover .cat-more .icon{transform:translateX(4px)}

/* ================================================================= logos == */
.logo-badge{border-radius:11px;object-fit:contain;background:#fff;flex:0 0 auto;
  display:inline-grid;place-items:center;font-weight:800;letter-spacing:-.02em;
  border:1px solid var(--line-soft)}
.logo-mono{border:0}
.brand .logo-badge{margin:0 auto 9px}
.company-head{display:flex;gap:16px;align-items:center;margin-bottom:8px}
.company-head .logo-badge{width:62px;height:62px;font-size:22px}
.job-card-head{display:flex;gap:13px;align-items:flex-start}
.job-card-head .logo-badge{width:40px;height:40px;font-size:14px;margin-top:2px}
.job-card-body{min-width:0;flex:1}
.cat-empty{color:var(--ink-faint);font-size:.9rem;margin-top:14px;line-height:1.9}
.cat-empty span{display:inline-block;border:1px dashed var(--line);border-radius:var(--radius-pill);
  padding:4px 12px;margin:0 6px 6px 0}

/* ================================================================ brands == */
.brand-rail{overflow:hidden;position:relative;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.brand-track{display:flex;gap:13px;width:max-content;animation:marquee 46s linear infinite}
.brand-rail:hover .brand-track{animation-play-state:paused}
.brand{border:1px solid var(--line);border-radius:var(--radius);padding:15px 20px;background:#fff;
  text-align:center;display:flex;flex-direction:column;gap:3px;justify-content:center;
  min-width:172px;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.brand:hover{border-color:var(--brand);text-decoration:none;transform:translateY(-3px);
  box-shadow:var(--shadow-md)}
.brand-name{font-weight:680;color:var(--ink);font-size:.96rem}
.brand-count{font-size:.83rem;color:var(--ink-faint)}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:13px}

/* ================================================================== misc == */
.chip-grid{display:flex;flex-wrap:wrap;gap:8px}
.chip-grid a{background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:8px 15px;font-size:.88rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:7px;
  transition:border-color .2s,color .2s,transform .18s var(--ease),box-shadow .18s}
.chip-grid a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none;
  transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.chip-n{background:var(--brand-tint);color:var(--brand-ink);border-radius:var(--radius-pill);
  padding:1px 8px;font-size:.76rem;font-weight:700}
.breadcrumbs{font-size:.87rem;color:var(--ink-faint);margin:20px 0}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.breadcrumbs li+li::before{content:"/";margin-right:7px;color:var(--line)}
.pagination{display:flex;gap:7px;justify-content:center;margin:36px 0;flex-wrap:wrap}
.pagination a,.pagination .current{padding:10px 16px;border:1px solid var(--line);border-radius:10px;
  transition:border-color .2s,transform .18s var(--ease)}
.pagination a:hover{border-color:var(--brand);transform:translateY(-2px);text-decoration:none}
.pagination .current{background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-color:transparent;color:#fff;font-weight:650}
.empty{border:2px dashed var(--line);border-radius:var(--radius-lg);padding:40px;text-align:center;
  color:var(--ink-soft);background:var(--bg-soft)}
.empty .icon{width:42px;height:42px;color:var(--ink-faint);margin-bottom:10px}
.prose{max-width:70ch}
.prose h2{margin-top:1.7em}
.prose ul,.prose ol{padding-left:1.3em}
.notice{border:1px solid var(--line);border-left:4px solid var(--brand);background:var(--bg-soft);
  border-radius:10px;padding:15px 19px;margin:0 0 22px;animation:rise .4s var(--ease) both}
.notice-error{border-left-color:#d02b2b;background:#fef4f4}
.notice-good{border-left-color:var(--good);background:var(--good-soft)}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:none;stroke:currentColor}

/* =========================================================== job detail == */
.job-header{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:26px}
.job-header h1{margin-bottom:.3em;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem)}
.job-facts{display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--ink-soft);font-size:.96rem;
  margin:0 0 20px;padding:0;list-style:none}
.job-facts li{display:flex;align-items:center;gap:7px}
.job-facts .icon{width:17px;height:17px;color:var(--brand)}
.job-facts strong{color:var(--ink)}
.job-body{font-size:1rem;line-height:1.72}
.job-body h2,.job-body h3{margin-top:1.6em;font-size:1.1rem}
.job-body ul,.job-body ol{padding-left:1.35em}
.job-body a{text-decoration:underline}
.apply-box{border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;
  background:linear-gradient(180deg,#fff,var(--bg-warm));position:sticky;top:88px;
  box-shadow:var(--shadow-sm)}
.apply-box .btn{margin-bottom:10px}
.apply-note{font-size:.85rem;color:var(--ink-faint);margin:0}
.aside-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px;
  background:#fff}
.aside-card h2{font-size:1rem;margin-bottom:.7em}
.aside-card ul{list-style:none;margin:0;padding:0;font-size:.93rem}
.aside-card li{padding:7px 0;border-bottom:1px solid var(--line-soft)}
.aside-card li:last-child{border-bottom:0}

/* ================================================================= forms == */
.form{max-width:660px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:650;margin-bottom:6px;font-size:.94rem}
.field .hint{font-size:.85rem;color:var(--ink-faint);margin:5px 0 0}
.field input[type=text],.field input[type=email],.field input[type=url],.field input[type=number],
.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;
  transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:200px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand);outline:none;box-shadow:0 0 0 4px var(--brand-tint)}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px}
.check{display:flex;gap:9px;align-items:flex-start;font-size:.92rem;padding:5px 0;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--brand)}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0 0 22px;
  background:#fff}
legend{font-weight:700;padding:0 9px}

/* =============================================================== pricing == */
.price-card{border-radius:var(--radius-lg);padding:38px;max-width:460px;background:#fff;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
  border:1px solid var(--line)}
.price-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--pink),var(--accent))}
.price{font-size:3.4rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin:0;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.price small{font-size:1rem;font-weight:500;color:var(--ink-faint);letter-spacing:normal;
  -webkit-text-fill-color:var(--ink-faint)}
.price-list{list-style:none;padding:0;margin:24px 0}
.price-list li{padding:9px 0 9px 30px;position:relative;border-bottom:1px solid var(--line-soft)}
.price-list li::before{content:"";position:absolute;left:0;top:12px;width:19px;height:19px;
  border-radius:50%;background:var(--good-soft)}
.price-list li::after{content:"";position:absolute;left:6px;top:17px;width:7px;height:4px;
  border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg)}

/* ================================================================ footer == */
.site-footer{border-top:1px solid var(--line);background:var(--bg-soft);margin-top:60px;
  padding:52px 0 30px;font-size:.93rem;position:relative}
.site-footer h2{font-size:1.08rem;margin-bottom:.9em}
.site-footer h3{font-size:.9rem;color:var(--ink);margin-bottom:.6em}
.site-footer section{margin-bottom:38px}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:26px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{padding:3px 0}
.footer-col a{color:var(--ink-soft)}
.footer-legal{border-top:1px solid var(--line);padding-top:22px;color:var(--ink-faint)}
.footer-legal nav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.footer-legal p{margin:0;font-size:.87rem}

@media(max-width:720px){
  .header-nav{gap:10px;font-size:.88rem}
  .header-nav a:not(.btn-sm):not(.market-switch){display:none}
  .hero-stats{gap:10px 18px;margin-top:20px;font-size:.88rem}
  .hero{padding:38px 0 52px}
  .job-date{margin-left:0;width:100%;margin-top:2px}
  .apply-box{position:static}
  .section{padding:38px 0}

  /* Cards were tight against the gutter and against each other on a phone,
     which is where most jobseeker traffic is. */
  .wrap{padding:0 16px}
  .job-list{gap:14px}
  .job-card{padding:18px 16px;border-radius:12px}
  .job-card-head{gap:11px}
  .job-card-head .logo-badge{width:36px;height:36px;font-size:13px}
  .job-title{font-size:1.04rem;line-height:1.3}
  .job-snippet{-webkit-line-clamp:3}
  .job-tags{gap:7px;row-gap:8px}

  /* The advert itself needs room to breathe more than the listing does. */
  .job-header{padding-bottom:20px;margin-bottom:20px}
  .job-header h1{font-size:1.45rem;line-height:1.25}
  .company-head{gap:12px}
  .company-head .logo-badge{width:46px;height:46px;font-size:16px}
  .job-facts{gap:8px 16px;font-size:.92rem;margin-bottom:16px}
  .job-body{font-size:1rem;line-height:1.7}
  .job-body ul,.job-body ol{padding-left:1.15em}
  .job-body h2,.job-body h3{margin-top:1.4em}
  .btn-lg{padding:14px 22px;font-size:1rem}
  .aside-card,.apply-box{padding:18px 16px}
  .cat-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .price-card{padding:26px 20px}
  .price{font-size:2.6rem}
}

/* Below ~420px the logo wordmark, the CTA and the market switch cannot all fit
   on one line. Dropping the wordmark keeps the CTA intact rather than letting
   its label overflow the button. */
@media(max-width:430px){
  .logo-word{display:none}
  .header-inner{gap:12px;min-height:60px}
  .header-nav{gap:8px}
  .btn-sm{padding:8px 13px;font-size:.85rem}
  .market-switch{padding:6px 10px;font-size:.8rem}
}