/* The blog: shared by blog/index.html and every post. The blog is not linked
   from the site; it exists for search engines and AI search, through the
   sitemap and llms.txt. Header and footer match index.html. */
:root{
  --bg:#FFFFFF; --bg-tint:#F5F8F5;
  --ink:#15201A; --body:#4A5650; --muted:#5B6660;
  --line:#E6EAE6; --line-2:#DCE2DD;
  --green:#2F8F6B; --green-deep:#1F6E51; --leaf:#7FC9AD; --photo:#EEF1EE;
  --serif:Newsreader,Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif;
  --shadow-card:0 2px 4px rgba(21,32,26,.04),0 18px 44px rgba(21,32,26,.09);
  --shadow-bar:0 1px 2px rgba(21,32,26,.04),0 6px 24px rgba(21,32,26,.05);
  /* gutter either side of the centred content column */
  --gut:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--green)} a:hover{color:var(--green-deep)}
img{display:block}

/* ── header: two frosted bars (as index.html) ── */
.nav{position:absolute;top:20px;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:0 24px;gap:12px}
.bar{display:flex;align-items:center;gap:2px;padding:5px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-bar)}
.wordmark{display:flex;align-items:center;gap:9px;height:36px;padding:0 10px 0 8px;color:var(--ink);text-decoration:none;font:700 17px/1 var(--sans);letter-spacing:-.3px;white-space:nowrap}
.wordmark:hover{color:var(--ink)}
.logo{width:17px;height:22px;flex:none}
.sep{width:1px;height:16px;background:var(--line-2);margin:0 4px}
.navb{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:8px;color:var(--ink);font:600 15px/1 var(--sans);text-decoration:none;white-space:nowrap}
.navb:hover{color:var(--ink);background:rgba(21,32,26,.05)}
.navb[aria-current="page"]{background:rgba(21,32,26,.07)}
.seg{position:relative;display:flex;align-items:center;gap:2px}
.seg-pill{display:none}
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.navcta{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;margin-left:4px;border-radius:10px;background:var(--ink);color:#fff;font:700 14px/1 var(--sans);text-decoration:none;white-space:nowrap}
.navcta:hover{color:#fff;background:#24332B}

/* ── a post: one centred column of reading ── */
.post{max-width:720px;margin:0 auto;padding:150px var(--gut) 100px}
.kicker{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--green)}
.kicker a{color:inherit;text-decoration:none}
.post h1{margin:0;font:400 52px/1.08 var(--serif);letter-spacing:-1.2px;color:var(--ink)}
.byline{margin:18px 0 0;font-size:15px;color:var(--muted)}
.byline a{color:var(--muted)}
.body{margin-top:40px}
.body p,.body li{font-size:18px;line-height:1.7;color:var(--body)}
.body p{margin:0 0 20px}
.body .lede{font-size:20px;line-height:1.6;color:var(--ink)}
.body h2{margin:44px 0 14px;font:400 32px/1.15 var(--serif);letter-spacing:-.5px;color:var(--ink)}
.body h3{margin:32px 0 10px;font-size:19px;font-weight:700;color:var(--ink)}
.body ul,.body ol{margin:0 0 20px;padding-left:22px}
.body li{margin:0 0 8px}
.body strong{color:var(--ink);font-weight:600}
.body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--leaf);text-decoration-thickness:2px;text-underline-offset:4px}
.body a:hover{color:var(--green-deep)}
.body blockquote{margin:28px 0;padding-left:22px;border-left:2px solid var(--leaf);font:400 26px/1.35 var(--serif);color:var(--ink)}
.body table{width:100%;margin:8px 0 24px;border-collapse:collapse;font-size:15.5px}
.body th,.body td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--body)}
.body th{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);background:var(--bg-tint)}
.end{margin-top:48px;padding-top:28px;border-top:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:12px;background:var(--ink);color:#fff;font:700 15.5px/1 var(--sans);text-decoration:none}
.btn:hover{color:#fff;background:#24332B}
.btn.ghost{border:1px solid var(--line-2);background:#fff;color:var(--ink)}
.btn.ghost:hover{background:#F3F6F3}

/* the blog index: a plain list of posts */
.list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.list li{padding:24px 0;border-bottom:1px solid var(--line)}
.list a{font:400 28px/1.2 var(--serif);color:var(--ink);text-decoration:none}
.list a:hover{color:var(--green-deep)}
.list p{margin:8px 0 0;font-size:16px;line-height:1.6;color:var(--body)}
.list time{display:block;margin-top:8px;font-size:14px;color:var(--muted)}

/* ── footer (as index.html) ── */
.foot{border-top:1px solid var(--line)}
.foot-in{max-width:1280px;margin:0 auto;padding:32px 24px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot .wordmark{height:auto;padding:0;font-size:15px;gap:8px}
.foot .logo{width:14px;height:18px}
.foot nav{display:flex;gap:24px;flex-wrap:wrap;font-size:14px}
.foot nav a{color:var(--body);text-decoration:none}
.foot nav a:hover{color:var(--green-deep)}
.foot .addr{flex-basis:100%;font-style:normal;font-size:13px;line-height:1.6;color:var(--muted)}


@media (max-width:900px){ .navmid{display:none !important} }
@media (max-width:760px){ .navcta{padding:0 12px;font-size:13px} .navcta svg{display:none} }
@media (max-width:640px){
  :root{--gut:16px}
  .nav{padding:0 16px;top:14px}
  .seg{display:none}
  .nav .sep{display:none}
  .post{padding:112px var(--gut) 72px}
  .post h1{font-size:38px;letter-spacing:-.8px}
  .body h2{font-size:27px}
  .body p,.body li{font-size:17px}
  .body table{display:block;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ── phone menu ──
   Below 900px the header hides About us and Company login, and below 680px
   the For talent / For employers tabs; this menu carries all of them, plus
   Open roles. A native <details>, so it opens with scripting off. The
   .menu and .sheet names are what analytics.js looks for: a tap in here is
   filed as "Phone menu", and opening it is not counted as an FAQ question.
   .bar's backdrop-filter makes it the containing block, so the sheet hangs
   from the right-hand bar rather than from .nav. */
.menu{display:none}
.menu summary{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:4px;border-radius:8px;color:var(--ink);cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{background:rgba(21,32,26,.05)}
.menu[open] summary{background:rgba(21,32,26,.07)}
.menu[open] .i-open,.menu:not([open]) .i-close{display:none}
.sheet{position:absolute;top:calc(100% + 8px);right:-1px;width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;gap:2px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-bar)}
.sheet a{display:flex;align-items:center;height:44px;padding:0 12px;border-radius:8px;color:var(--ink);font:600 15px/1 var(--sans);text-decoration:none}
.sheet a:hover{color:var(--ink);background:rgba(21,32,26,.05)}
.sheet a[aria-current="page"]{background:rgba(21,32,26,.07)}
@media (max-width:900px){
  .menu{display:block}
  .foot nav{column-gap:20px;row-gap:0}
  .foot nav a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:680px){
  .seg,.nav .sep{display:none}
}
/* the smallest phones keep the button and lose the name; the name stays
   readable to screen readers, so the home link keeps its label */
@media (max-width:419px){
  .wm-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav .wordmark{padding:0 9px}
}
/* Three audience tabs make the header about 990px wide, so below 1000px
   About us and Company login move into the menu (they did at 900px), and
   below 800px the tabs do too (they did at 680px). */
@media (max-width:1080px){
  .navmid{display:none !important}
  .menu{display:block}
}
@media (max-width:800px){
  .seg,.nav .sep{display:none}
}