/* Beverage-AI Radar — McKinsey editorial design language.
   Captured from mckinsey.com/about-us/case-studies (2026-07-22): Bower serif
   display over a light-weight McKinsey Sans body, white ground, one saturated
   blue accent (#2251FF), square flat surfaces, hairline rules, and a chevron
   affordance on every linked headline.

   Both brand faces are licensed, so this uses the fallback chains McKinsey's
   own CSS declares — Georgia for the serif, Helvetica Neue/Calibri/Corbel for
   the sans. No webfont request, nothing to license, same silhouette. */
/* The hidden attribute is enforced by a USER-AGENT display:none, and any
   author display declaration outranks it. .kpis is display:grid, so
   element.hidden = true was silently doing nothing and the KPI strip kept
   showing stale figures from the previously viewed tab, Jobs numbers on the
   About page among them. .door and .grid had the same latent defect. One rule,
   applied once, rather than a display:none patch at every call site. */
[hidden] { display: none !important; }

:root {
  /* Pure #000 on pure #fff is the highest contrast available and reads as
     glare over long sessions. Softening both ends keeps well above WCAG AA
     while taking the hard edge off; the ratio is still ~16:1 for headlines. */
  /* One neutral family. Every grey shares hue 95 at C .005: previously --bg and
     the rules were warm (H 106) while --ink, --body and --muted were pure
     neutral (C 0), so the page ran two grey families at once and the cards
     read as a different material from the text on them.

     --bg is also darker than it was (L .968, was .988). A white card on a
     .988 ground measured 1.035:1, which is not a boundary anyone can see, so
     cards floated and the hairline did all the work at 1.23:1. */
  --bg: #F5F4F1;
  --surface: #FFFFFF;
  --raised: #FFFFFF;          /* hover-lift card face */
  --ink: #1B1B17;             /* headlines */
  --body: #42413D;            /* body copy */
  --muted: #6A6965;
  /* Cards carry NO fill in this design; they are delineated by the rule alone,
     so the rule has to actually be visible. At L .906 it measured 1.20:1
     against the ground, which is a suggestion of a boundary rather than one. */
  --line: #D0CFCC;            /* hairline rule, 1.42:1 on --bg */
  --line-strong: #B2B1AD;
  --accent: #2D56CD;          /* OKLCH .50 .19 265deg */
  --accent-hover: #1536AC;
  --navy: #0F182E;            /* same hue family as the accent, not a stray blue */
  --dormant: #8A8986;
  --radius: 0;                /* square. McKinsey rounds nothing. */
  --shadow-lift: 0 2px 18px rgba(0, 0, 0, .10);
  --serif: Newsreader, Bower, Georgia, "Times New Roman", serif;
  --font: "McKinsey Sans", "Helvetica Neue", Calibri, Corbel, Helvetica, Arial, sans-serif;
  --measure: 66ch;
  --radar: var(--accent);

  --v-beer: #9D7C00;      /* OKLCH .60 .123  90deg  gold   */
  --v-whiskey: #BD6444;   /* OKLCH .60 .123  40deg  copper */
  --v-wine: #A565A8;      /* OKLCH .60 .123 325deg  purple */
}
@media (prefers-color-scheme: dark) {
  /* The reference is committed light. Dark stays a restrained token swap so
     dark-OS readers are not flash-banged, not a second design. */
  :root:not([data-theme="light"]) {
    --bg: #0b0f14; --surface: #0f151c; --raised: #16202b;
    /* #fff on a near-black ground haloes; #e8edf2 keeps 14:1 without the bloom */
    --ink: #e8edf2; --body: #c2ccd6; --muted: #97a3b0;
    --line: #212c38; --line-strong: #33404f;
    /* Dark commits to the radar console: the accent IS the trace colour, so
       links, focus rings, active filters, KPI numbers and the sweep all read
       as one instrument rather than a blue UI with a green decoration behind
       it. 11.07:1 on the ground, comfortably past AA, and greens hold their
       hue better than blues at low opacity, which is where most of this
       colour is actually used. Light keeps the blue: green on white reads as
       a highlighter, not a screen. */
    --accent: #35e07a; --accent-hover: #6fecA3; --navy: #05090d;
    --radar: #35e07a;         /* P7-ish phosphor, pulled back from pure #00ff41 */
    /* Same hues, lifted to L .78: a colour that reads correctly on white is
       too dark to carry on a near-black ground. Chroma is unchanged, so the
       three stay equals in dark exactly as they do in light. */
    --v-beer: #D8B345; --v-whiskey: #FF9874; --v-wine: #E299E6;
    --dormant: #6b7683;
    --shadow-lift: 0 2px 18px rgba(0, 0, 0, .6);
  }

}
/* Explicit dark choice, so the toggle works on a light OS. */
  :root[data-theme="dark"] {
    --bg: #0b0f14; --surface: #0f151c; --raised: #16202b;
    /* #fff on a near-black ground haloes; #e8edf2 keeps 14:1 without the bloom */
    --ink: #e8edf2; --body: #c2ccd6; --muted: #97a3b0;
    --line: #212c38; --line-strong: #33404f;
    /* Dark commits to the radar console: the accent IS the trace colour, so
       links, focus rings, active filters, KPI numbers and the sweep all read
       as one instrument rather than a blue UI with a green decoration behind
       it. 11.07:1 on the ground, comfortably past AA, and greens hold their
       hue better than blues at low opacity, which is where most of this
       colour is actually used. Light keeps the blue: green on white reads as
       a highlighter, not a screen. */
    --accent: #35e07a; --accent-hover: #6fecA3; --navy: #05090d;
    --radar: #35e07a;         /* P7-ish phosphor, pulled back from pure #00ff41 */
    /* Same hues, lifted to L .78: a colour that reads correctly on white is
       too dark to carry on a near-black ground. Chroma is unchanged, so the
       three stay equals in dark exactly as they do in light. */
    --v-beer: #D8B345; --v-whiskey: #FF9874; --v-wine: #E299E6;
    --dormant: #6b7683;
    --shadow-lift: 0 2px 18px rgba(0, 0, 0, .6);
  }


* { box-sizing: border-box; }
/* the masthead is sticky, so anything scrolled to must clear it */
html { scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  /* Was weight 300 at 1rem. A light weight at body size is the main source of
     eye strain here: the strokes thin out and the reader compensates. 400 at a
     slightly larger size and looser leading reads calmer without changing the
     silhouette of the design. */
  font-family: var(--font); font-weight: 400; font-size: 1.03rem; line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
/* grid/flex children must be allowed to shrink below their content min-width */
.grid > *, .people-list > *, .kpis > *, .breakdowns > * { min-width: 0; }
.company__id, .person__body, .res__body { min-width: 0; }
.company h3, .company .usecase, .res__title, .person__name { overflow-wrap: anywhere; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 2.5rem 3.5rem; }

/* Chevron affordance: McKinsey appends a blue ">" to every linked headline.
   Pure CSS so no card template has to change. */
.company h3::after,
.res__title a::after,
.person__name a::after {
  content: "\203A";                 /* single right angle quote reads as their chevron */
  color: var(--accent); font-weight: 400; font-size: 1.15em;
  line-height: 0; margin-left: .3em;
  display: inline-block; transform: translateY(.06em);
  transition: transform .18s ease;
}
.company:hover h3::after,
.res__title a:hover::after,
.person__name a:hover::after { transform: translate(.18em, .06em); }

/* --- Hero: centered editorial masthead ---------------------------------- */
.hero {
  padding: 4.5rem 2.5rem 3rem; border-bottom: 1px solid var(--line);
  background: var(--surface); text-align: center;
}
.hero .hero__eyebrow, .hero .hero__title, .hero .hero__search {
  max-width: 900px; margin-left: auto; margin-right: auto;
}
.hero .hero__lede { max-width: 68ch; margin-left: auto; margin-right: auto; }
.hero__eyebrow {
  font-size: .76rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.hero__title {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4.25rem); line-height: 1.12;
  color: var(--ink); letter-spacing: -.005em; margin: 1.25rem 0 1.5rem;
}
.hero__lede {
  color: var(--body); margin: 0 auto; max-width: 68ch;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.85rem); font-weight: 300; line-height: 1.4;
}
.hero__lede em { font-style: normal; font-weight: 400; color: var(--ink); }
.hero__meta {
  display: block; margin-top: 1rem; font-size: .8rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.hero__search { margin-top: 2.5rem; max-width: 640px; }
#globalq {
  width: 100%; font: inherit; font-size: 1.05rem; font-weight: 300; text-align: center;
  padding: .95rem 1.1rem; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  transition: border-color .18s ease;
}
#globalq::placeholder { color: var(--muted); }
#globalq:hover { border-bottom-color: var(--muted); }
#globalq:focus { outline: none; border-bottom-color: var(--accent); border-bottom-width: 2px; }
.global-hint {
  margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center; justify-content: center; font-size: .85rem; color: var(--muted);
}
.ghint {
  font: inherit; font-size: .78rem; font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; padding: .4rem .9rem;
  border: 1px solid var(--accent); border-radius: 0; background: none; color: var(--accent);
  transition: background .18s ease, color .18s ease;
}
.ghint:hover { background: var(--accent); color: #fff; }
.ghint.is-empty { border-color: var(--line); color: var(--muted); cursor: default; }
.ghint.is-empty:hover { background: none; color: var(--muted); }

/* --- KPI band: serif figures on hairlines, no boxes --------------------- */
.kpis {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  padding-top: 3rem; padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; } }
@media (max-width: 480px) { .kpis { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } }
.kpi {
  background: none; border: 0; border-left: 1px solid var(--line);
  padding: .25rem 1.5rem; display: flex; flex-direction: column;
}
.kpi:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 900px) { .kpi:nth-child(3n+1) { border-left: 0; padding-left: 0; } }
@media (max-width: 480px) { .kpi:nth-child(odd) { border-left: 0; padding-left: 0; } }
.kpi__num {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem);
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.kpi__label {
  font-weight: 400; font-size: .78rem; margin-top: .85rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.kpi__sub { color: var(--muted); font-size: .8rem; margin-top: .3rem; font-weight: 300; }

/* --- Logos & avatars: square, flat -------------------------------------- */
.logo { position: relative; width: 44px; height: 44px; flex: none; }
.logo::before {
  content: ""; position: absolute; inset: 0; border-radius: 0;
  background: var(--surface); border: 1px solid var(--line);
}
.logo__fav {
  position: absolute; inset: 0; margin: auto; width: 26px; height: 26px;
  object-fit: contain; border-radius: 0; z-index: 1;
}
.avatar {
  width: 44px; height: 44px; flex: none; border-radius: 0; display: flex;
  align-items: center; justify-content: center; font-weight: 400; font-size: .95rem;
  letter-spacing: .04em; color: oklch(32% 0.08 var(--h)); background: oklch(93% 0.035 var(--h));
}
.logo .avatar { position: absolute; inset: 0; display: none; }
.avatar--person { border-radius: 999px; }   /* people stay circular, as on their site */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avatar { color: oklch(92% 0.05 var(--h)); background: oklch(38% 0.07 var(--h)); }

}
/* Explicit dark choice, so the toggle works on a light OS. */
  :root[data-theme="dark"] .avatar { color: oklch(92% 0.05 var(--h)); background: oklch(38% 0.07 var(--h)); }



/* --- Masthead ----------------------------------------------------------- */
/* The reference opens with a white bar: wordmark left, section nav centre,
   utility links right, one hairline under the whole thing. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar__inner {
  max-width: 1240px; margin: 0 auto; padding: 0 2.5rem;
  display: flex; align-items: center; gap: 2.5rem; min-height: 76px;
}
.topbar__brand {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 400; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none; flex: none; line-height: 1.1;
}
.topbar__brand:hover { color: var(--ink); }
.topnav { display: flex; gap: 1.75rem; align-items: stretch; flex: 1 1 auto; }
.topbar__util {
  flex: none; display: flex; align-items: center; gap: .6rem;
  font-size: .8rem; color: var(--line-strong);
}
.topbar__util a { color: var(--accent); text-decoration: none; }
.topbar__util a:hover { text-decoration: underline; }
@media (max-width: 1100px) {
  .topbar__inner { flex-wrap: wrap; gap: 0 1.5rem; min-height: 0; padding-top: 1rem; }
  .topbar__brand { padding-bottom: 1rem; }
  .topbar__util { margin-left: auto; padding-bottom: 1rem; }
  .topnav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
}
.tabs {
  display: flex; gap: 2.25rem; margin: 0 auto 2.5rem; padding: 0 2.5rem;
  max-width: 1240px; border-bottom: 1px solid var(--line);
}
.tab {
  font: inherit; font-weight: 400; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; padding: 1.6rem .1rem;
  border: none; border-bottom: 3px solid transparent; background: none; color: var(--muted);
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }

/* --- Breakdowns: open panels, not boxes --------------------------------- */
.breakdowns {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0; margin-bottom: 3rem; border-bottom: 1px solid var(--line); padding-bottom: 2.5rem;
}
.card {
  background: none; border: 0; border-left: 1px solid var(--line);
  border-radius: 0; padding: 0 2rem; box-shadow: none;
}
.card:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 640px) {
  .breakdowns { gap: 2rem; }
  .card { border-left: 0; padding-left: 0; }
}
.card h2 {
  font-size: .78rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.25rem;
}
/* --- Breakdown: one stacked proportion bar + a legend --------------------
   A row per category ran ~700px tall on the ten-category theme panel. The
   composition is the point, so one bar carries it and the legend carries
   identity and counts. The legend is also the relief for the two palette
   entries that sit under 3:1 on white: every segment is named and numbered,
   never colour alone. */
.bars { display: block; }
.stack {
  display: flex; width: 100%; height: 16px; margin: .35rem 0 1rem;
  border-radius: 4px; overflow: hidden;
  gap: 2px;                       /* surface gap between fills, not a border */
  background: var(--line);
}
.seg {
  display: block; min-width: 3px; background: var(--paint);
  transition: filter .18s ease, opacity .18s ease;
}
.seg[data-filter] { cursor: pointer; }
.seg:hover { filter: brightness(1.12); }
.stack:has(.is-on) .seg:not(.is-on) { opacity: .35; }

.keys { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.key {
  display: inline-flex; align-items: baseline; gap: .4rem;
  font: inherit; font-size: .82rem; font-weight: 300; color: var(--body);
  background: none; border: 0; padding: .15rem 0; cursor: pointer; text-align: left;
  transition: color .18s ease;
}
.key:hover, .key.is-on { color: var(--ink); }
.key.is-on .key__label { font-weight: 400; }
.key__dot {
  width: 9px; height: 9px; flex: none; background: var(--paint);
  border-radius: 2px; transform: translateY(-1px);
}
.key.is-on .key__dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--paint); }
.key__n { font-variant-numeric: tabular-nums; font-weight: 400; color: var(--ink); }
.key__pct { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.keys .key:not([data-filter]) { cursor: default; }

@media (prefers-color-scheme: dark) {
  /* Dark is stepped for the dark surface, not an automatic flip of the light hues. */
  :root:not([data-theme="light"]) .seg { background: var(--paint-dark); }
  :root:not([data-theme="light"]) .key__dot { background: var(--paint-dark); }
  :root:not([data-theme="light"]) .key.is-on .key__dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--paint-dark); }

}
/* Explicit dark choice, so the toggle works on a light OS. */
  :root[data-theme="dark"] .seg { background: var(--paint-dark); }
  :root[data-theme="dark"] .key__dot { background: var(--paint-dark); }
  :root[data-theme="dark"] .key.is-on .key__dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--paint-dark); }


/* tell people the legend and segments are filters */
.card h2::after {
  content: " · click to filter"; color: var(--line-strong); letter-spacing: .06em;
}

/* --- Controls: underlined fields, no chrome ----------------------------- */
.controls {
  display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center;
  margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.controls input, .controls select {
  font: inherit; font-size: .9rem; font-weight: 300; padding: .5rem .1rem;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  transition: border-color .18s ease;
}
.controls select { cursor: pointer; }
.controls input { flex: 1 1 260px; }
.controls input:hover, .controls select:hover { border-bottom-color: var(--muted); }
.controls input:focus, .controls select:focus {
  outline: none; border-bottom-color: var(--accent); box-shadow: none;
}
.count {
  color: var(--muted); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  margin-left: auto;
}

/* --- Company cards: flat until hovered, then they lift ------------------ */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 3rem 2.5rem;
}
.company {
  position: relative; isolation: isolate; background: none; border: 0; border-radius: 0;
  padding: 0; box-shadow: none; display: flex; flex-direction: column; gap: .75rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
/* The hover lift: a white card grows out from behind the flat content,
   exactly the treatment on the reference grid. */
.company::before {
  content: ""; position: absolute; inset: -1.25rem -1.25rem;
  background: var(--raised); box-shadow: var(--shadow-lift);
  opacity: 0; transition: opacity .2s ease; z-index: -1;
}
.company:hover::before { opacity: 1; }
.company > * { position: relative; }
.company[data-status="dormant"] { opacity: .6; }
.company[data-status="dormant"]:hover { opacity: 1; }
/* Image-led card. The reference opens every card with a photograph; the radar
   has no photography, so the logo becomes the visual band instead: a tinted
   16:9 panel keyed to the vertical, with the mark centred in it. Same rhythm
   down the grid, no images to source and no template change. */
.company__head { display: block; }
/* .logo is a <span> and .avatar can be a direct child, so both need
   blockifying before width/aspect-ratio mean anything. */
.company .company__head > .logo,
.company .company__head > .avatar {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  margin-bottom: 1.1rem; flex: none;
}
.company .company__head .logo::before {
  border: 0; background: var(--tint, #f2f2f2);
}
.company .company__head .logo__fav {
  width: 34%; max-width: 74px; height: 52%; object-fit: contain;
}
/* Look only. Crucially this must NOT set `display`: the fallback initial
   nested inside .logo stays hidden until the favicon's onerror reveals it,
   otherwise both the mark and the letter paint at once. */
.company .company__head > .avatar,
.company .company__head > .logo > .avatar {
  background: var(--tint, #f2f2f2); border-radius: 0;
  font-family: var(--serif); font-size: 2.6rem; font-weight: 400;
  color: var(--tint-ink, #4a4a4a); letter-spacing: .06em;
  align-items: center; justify-content: center;
}
.company .company__head > .avatar { display: flex; }
.company .company__head > .logo > .avatar { display: none; }
/* individuals get the same band, not a circle, so the grid stays even */
.company .company__head > .avatar--person { aspect-ratio: 16 / 9; border-radius: 0; }
/* Vertical keys the tint, read off the chip the card already renders. */
.company:has(.chip--beer) { --tint: #F8F2E4; --tint-ink: #634D00; }
.company:has(.chip--whiskey) { --tint: #FFEEE9; --tint-ink: #882F07; }
.company:has(.chip--wine) { --tint: #FAEEFA; --tint-ink: #723176; }
.company:has(.chip--multiple) { --tint: #ECF3FF; --tint-ink: #2D4A96; }
.company:has(.chip--non_alcoholic) { --tint: #E4F4F1; --tint-ink: #0B5B52; }
.company:has(.chip--food) { --tint: #F0F3E2; --tint-ink: #4A5520; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .company:has(.chip--beer) { --tint: #231E0E; --tint-ink: #E6C873; }
  :root:not([data-theme="light"]) .company:has(.chip--whiskey) { --tint: #2A1A14; --tint-ink: #FFB79D; }
  :root:not([data-theme="light"]) .company:has(.chip--wine) { --tint: #251A25; --tint-ink: #EFB2F2; }
  :root:not([data-theme="light"]) .company:has(.chip--multiple) { --tint: #181E2B; --tint-ink: #B2CAFF; }
  :root:not([data-theme="light"]) .company:has(.chip--non_alcoholic) { --tint: #0F211F; --tint-ink: #7FD9CC; }
  :root:not([data-theme="light"]) .company:has(.chip--food) { --tint: #1C2011; --tint-ink: #C3D275; }
  :root:not([data-theme="light"]) .company .company__head .logo::before { background: var(--tint, #1b232d); }

}
/* Explicit dark choice, so the toggle works on a light OS. */
  :root[data-theme="dark"] .company:has(.chip--beer) { --tint: #231E0E; --tint-ink: #E6C873; }
  :root[data-theme="dark"] .company:has(.chip--whiskey) { --tint: #2A1A14; --tint-ink: #FFB79D; }
  :root[data-theme="dark"] .company:has(.chip--wine) { --tint: #251A25; --tint-ink: #EFB2F2; }
  :root[data-theme="dark"] .company:has(.chip--multiple) { --tint: #181E2B; --tint-ink: #B2CAFF; }
  :root[data-theme="dark"] .company:has(.chip--non_alcoholic) { --tint: #0F211F; --tint-ink: #7FD9CC; }
  :root[data-theme="dark"] .company:has(.chip--food) { --tint: #1C2011; --tint-ink: #C3D275; }
  :root[data-theme="dark"] .company .company__head .logo::before { background: var(--tint, #1b232d); }


.company__id { min-width: 0; }
.company h3 {
  font-size: 1.35rem; font-weight: 700; margin: 0; line-height: 1.2;
  letter-spacing: -.005em; color: var(--ink);
}
.company .loc {
  color: var(--muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  margin-top: .3rem; display: block;
}
.company .usecase {
  font-size: .78rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.company p { margin: 0; font-size: .95rem; font-weight: 300; line-height: 1.55; color: var(--body); }
.company .people { font-size: .85rem; color: var(--muted); font-weight: 300; }
.company .people a { color: var(--accent); text-decoration: none; }
.company .people a:hover { text-decoration: underline; }
.company .people .role { opacity: .75; }
.company .srcs { margin-top: auto; font-size: .78rem; padding-top: .5rem; }
.company .srcs a { color: var(--accent); text-decoration: none; }
.company .srcs a:hover { text-decoration: underline; }
.empty {
  color: var(--muted); grid-column: 1 / -1; padding: 5rem 2rem; text-align: center;
  font-family: var(--serif); font-size: 1.4rem;
}

/* --- Chips: flat uppercase micro-labels, ruled not filled --------------- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.chip {
  font-size: .72rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  padding: 0 0 0 .55rem; border-radius: 0; background: none; color: var(--muted);
  border-left: 2px solid var(--line-strong); line-height: 1.5;
}
.chip--muted { color: var(--muted); }
.chip--dormant { color: #a4262c; border-left-color: #a4262c; }
.chip--indiv { color: var(--accent); border-left-color: var(--accent); }
/* Vertical + maturity keep their colour coding, carried by the rule not a pill. */
.chip--v, .chip--mat { color: var(--ink); }
.chip--beer { border-left-color: var(--v-beer); }
.chip--whiskey { border-left-color: var(--v-whiskey); }
.chip--wine { border-left-color: var(--v-wine); }
.chip--multiple { border-left-color: var(--accent); }
.chip--shipping { border-left-color: #0b7a3b; }
.chip--pilot { border-left-color: #8a8a8a; }
/* Checked negative: the vendor makes no AI claim. Muted on purpose so it
   never reads as a weaker grade of AI - it is a different kind of entry. */
.chip--none { border-left-color: #b9b9b9; opacity: .85; }
.chip--research { border-left-color: var(--line-strong); color: var(--muted); }

/* --- People ------------------------------------------------------------- */
.people-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0;
}
.person {
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 1.35rem .5rem 1.35rem 0; box-shadow: none;
  display: flex; gap: 1rem; align-items: center;
  transition: background .18s ease;
}
.person:hover { background: none; }
.person:hover .person__name a { color: var(--accent); }
.person__body { min-width: 0; }
.person[data-status="dormant"] { opacity: .6; }
.person__name { font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.person__name a { color: var(--ink); text-decoration: none; }
.person__name .li {
  font-size: .58rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: none; border: 1px solid var(--accent);
  border-radius: 0; padding: .08rem .3rem; vertical-align: middle; margin-left: .35rem;
}
.person__meta { font-size: .85rem; color: var(--muted); margin-top: .3rem; font-weight: 300; }
.person__meta strong { color: var(--body); font-weight: 400; }

/* --- Resources: image-led cards, the reference's core unit -------------- */
.res-intro {
  color: var(--body); font-size: 1.15rem; font-weight: 300; line-height: 1.5;
  margin: 0 0 2.5rem; max-width: var(--measure);
}
.res {
  position: relative; isolation: isolate; background: none; border: 0; border-radius: 0; box-shadow: none;
  overflow: visible; display: flex; flex-direction: column; gap: .75rem;
  transition: box-shadow .2s ease;
}
.res::before {
  content: ""; position: absolute; inset: -1.5rem -1.5rem;
  background: var(--raised); box-shadow: var(--shadow-lift);
  opacity: 0; transition: opacity .2s ease; z-index: -1;
}
.res:hover::before { opacity: 1; }
.res > * { position: relative; }
.res__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; background: var(--navy);
  overflow: hidden;
}
.res__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.res:hover .res__thumb img { transform: scale(1.04); }
.res__play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff;
  background: var(--accent); border-radius: 999px; padding-left: 3px;
}
.res__body { padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.res__tags { display: flex; gap: .4rem .9rem; flex-wrap: wrap; }
.res__title { font-size: 1.2rem; font-weight: 700; margin: 0; line-height: 1.25; }
.res__title a { color: var(--ink); text-decoration: none; }
.res__title a:hover { color: var(--ink); }
/* Date + summary read as one italic-led paragraph, as on the reference. */
.res__meta {
  font-size: .9rem; color: var(--body); font-style: italic; font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.res__sum { font-size: .95rem; margin: 0; color: var(--body); font-weight: 300; line-height: 1.55; }
.chip--kind { color: var(--ink); }
.chip--paper { border-left-color: #5c2d91; }
.chip--news { border-left-color: var(--accent); }
.chip--repo { border-left-color: #24292f; }
.chip--video { border-left-color: #c4141a; }
.chip--podcast { border-left-color: #7c3aed; }
.chip--blog { border-left-color: #0b7a3b; }
.chip--featured { color: var(--ink); border-left-color: #c8931f; }
.res--video.res:has(.chip--featured), .res:has(.chip--featured) { border-color: transparent; box-shadow: none; }

/* --- About: long-form editorial column ---------------------------------- */
.about {
  max-width: var(--measure); background: none; border: 0; border-radius: 0;
  box-shadow: none; padding: 0;
}
.about h2 {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 400; line-height: 1.2;
  color: var(--ink); margin: 3rem 0 1rem;
}
.about h2:first-child { margin-top: 0; }
.about p { margin: 0 0 1.1rem; font-size: 1.1rem; font-weight: 300; line-height: 1.6; }
.about ul { margin: 0 0 1.1rem; padding-left: 1.1rem; display: grid; gap: .7rem; font-size: 1.05rem; font-weight: 300; }
.about ul strong { font-weight: 700; color: var(--ink); }
.about__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.about__cta a {
  display: inline-block; padding: .85rem 1.75rem; border-radius: 0;
  font-size: .8rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: background .18s ease, color .18s ease;
}
.about__cta a:first-child { background: var(--accent); color: #fff; }
.about__cta a:first-child:hover { background: var(--accent-hover); color: #fff; }
.about__cta a:last-child { border: 1px solid var(--ink); color: var(--ink); }
.about__cta a:last-child:hover { background: var(--ink); color: var(--bg); }
.changelog { list-style: none; padding-left: 0; }
.changelog li {
  padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; font-weight: 300;
  display: flex; gap: 1.25rem; align-items: baseline;
}
.cl-date {
  display: inline-block; min-width: 6.5rem; flex: none; color: var(--muted);
  font-size: .78rem; letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
.about__note { font-size: .9rem; color: var(--muted); margin-top: 2rem; font-weight: 300; }

/* --- Detail pages ------------------------------------------------------- */
.is-clickable { cursor: pointer; }
.back {
  display: inline-block; margin-bottom: 2.5rem; color: var(--accent); text-decoration: none;
  font-size: .78rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
}
.back:hover { text-decoration: underline; }
.detail {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; max-width: 820px;
}
.detail__head { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.5rem; }
.detail__head .logo, .detail__head .avatar { width: 64px; height: 64px; }
.detail__head .logo__fav { width: 38px; height: 38px; }
.detail__head .avatar { font-size: 1.4rem; }
.detail__kind {
  font-size: .76rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.detail h1 {
  font-family: var(--serif); font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); font-weight: 400;
  margin: .35rem 0 .35rem; line-height: 1.15; letter-spacing: -.005em; color: var(--ink);
}
.detail .usecase {
  color: var(--accent); font-weight: 400; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; margin: 0;
}
.detail__desc {
  font-size: 1.25rem; font-weight: 300; line-height: 1.55; color: var(--body);
  margin: 1.75rem 0; max-width: var(--measure);
}
.detail__facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; margin: 2rem 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 560px) { .detail__facts { grid-template-columns: 1fr; gap: 0; } }
.drow {
  display: flex; flex-direction: column; gap: .35rem; padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.drow dt {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 400;
}
.drow dd { margin: 0; font-size: 1rem; font-weight: 300; color: var(--ink); }
.drow dd a { color: var(--accent); }
.detail h2 {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin: 2.5rem 0 1rem;
  color: var(--ink);
}
.detail__list {
  margin: 0; padding-left: 1.1rem; display: grid; gap: .6rem;
  font-size: .98rem; font-weight: 300;
}
.detail__list a { color: var(--accent); }
.detail .muted { color: var(--muted); }

/* --- Footer: deep navy band, their closing signature -------------------- */
/* --- Footer -------------------------------------------------------------
 * Corporate-footer proportions: wordmark and social on the left, then bold
 * uppercase column headings over generously spaced links. The spacing is the
 * design here. Links are NOT underlined by default; a wall of underlines in a
 * dark footer reads as noise, so the underline arrives on approach instead.
 */
.foot {
  background: var(--navy); color: rgba(255, 255, 255, .78);
  font-size: .95rem; font-weight: 300; line-height: 1.5;
  margin-top: 4rem; padding: 0 clamp(1.25rem, 6vw, 5rem);
  max-width: none;
}
.foot__top {
  max-width: 78rem; margin: 0 auto; padding: 1.4rem 0 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  text-align: right; font-size: .85rem;
}
.foot__grid {
  max-width: 78rem; margin: 0 auto;
  display: grid; gap: 2.5rem 2.5rem;
  grid-template-columns: 1.35fr repeat(4, 1fr);
  padding: 3.5rem 0 1rem;
}
.foot__mark {
  color: #fff; font-family: var(--serif); font-size: 1.6rem;
  font-weight: 400; margin: 0 0 1.4rem; letter-spacing: -.01em;
}

.foot__social { display: flex; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.foot__social a { display: block; color: #fff; opacity: .92; transition: opacity 140ms ease; }
.foot__social a:hover, .foot__social a:focus-visible { opacity: 1; }
.foot__social svg { width: 25px; height: 25px; fill: currentColor; display: block; }

/* Uppercase, tracked, and heavier than the links beneath: the heading has to
   win on weight because it cannot win on size at this scale. */
.foot__h {
  color: #fff; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 1.5rem;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot__col li { margin-bottom: 1.15rem; }

.foot a { color: rgba(255, 255, 255, .82); text-decoration: none;
          transition: color 140ms ease; }
.foot a:hover, .foot a:focus-visible { color: #fff; text-decoration: underline;
          text-underline-offset: 4px; text-decoration-thickness: 1px; }
.foot a:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 3px; }

.foot__bar {
  max-width: 78rem; margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding: 1.4rem 0 2.75rem; margin-top: 2.5rem;
}
.foot__bar p { margin: 0; font-size: .8rem; line-height: 1.6;
               color: rgba(255, 255, 255, .5); max-width: 100ch; }

@media (max-width: 75rem) {
  .foot__grid { grid-template-columns: repeat(3, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 46rem) {
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; padding-top: 2.5rem; }
}
@media (max-width: 30rem) {
  .foot__grid { grid-template-columns: 1fr; }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 720px) {
  .wrap { padding: 0 1.25rem 2.5rem; }
  .hero { padding: 3rem 1.25rem 2rem; }
  .hero__search { margin-top: 1.75rem; }
  .tabs {
    padding: 0 1.25rem; gap: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: none; }
  .controls { gap: .75rem; }
  .controls input, .controls select { flex: 1 1 100%; width: 100%; }
  .count { margin-left: 0; }
  .grid, .people-list, .breakdowns { grid-template-columns: 1fr; }
  .grid { gap: 2.5rem; }
  /* the hover lift would clip on a single narrow column */
  .company::before, .res::before { display: none; }
  .foot { padding: 2.5rem 1.25rem 3rem; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Capability chips: the second axis (IoT, AI, ERP, BI, ESG, consultancy).
   Deliberately quieter than the vertical chip so the card still reads
   company-first, capability-second. */
.chip--cap {
  background: transparent;
  border: 1px solid rgba(0, 103, 184, 0.35);
  color: #0067b8;
  font-size: 0.72rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip--cap { border-color: rgba(120, 180, 240, 0.4); color: #7ab4f0; }

}
/* Explicit dark choice, so the toggle works on a light OS. */
  :root[data-theme="dark"] .chip--cap { border-color: rgba(120, 180, 240, 0.4); color: #7ab4f0; }



/* --- Filter visibility ---------------------------------------------------
   An active filter must look different from an idle one. Before this, all
   fourteen selects on the Companies tab looked identical whether set or not. */
.controls select.is-active,
.controls input.is-active {
  border-bottom-color: var(--accent);
  border-bottom-width: 2px;
  font-weight: 400;
  color: var(--accent);
}

/* Removable chips summarising current filter state, below the controls. */
.chipbar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: -1.75rem 0 2rem;
}
.fchip {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .78rem; line-height: 1;
  padding: .4rem .6rem; cursor: pointer;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 999px; color: var(--ink);
  transition: background .15s ease, border-color .15s ease;
}
.fchip:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); }
.fchip__k { text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-size: .7rem; }
.fchip__v { font-weight: 400; }
.fchip__x { color: var(--muted); font-size: .95rem; margin-left: .1rem; }
.fchip:hover .fchip__x { color: var(--accent); }
.fchip--clear {
  background: transparent; border-style: dashed; color: var(--muted);
}
.fchip--clear:hover { color: var(--accent); border-color: var(--accent); }


/* Below tablet the 16-column grid becomes unreadable, so show names instead
   of trying to preserve geography at 3px per tile. */
@media (max-width: 720px) {
  .wmap { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
  .wtile { grid-column: auto !important; grid-row: auto !important; flex-direction: row; gap: .35rem; }
  .wtile__k { display: inline; font-size: .74rem; }
  .wtile__c { display: none; }             /* full name is shown at this size */
}


/* Capability chips carry a small inline icon; same stroke family as the map. */
.chip--cap { display: inline-flex; align-items: center; gap: .3rem; }
.chip--cap svg { width: 11px; height: 11px; flex: none; opacity: .8; }

/* --- World map (projected choropleth) ------------------------------------
   Geometry is built offline by scripts/build_worldmap.py and served locally;
   nothing is fetched from a CDN at runtime. */
.wmap-card { margin-bottom: 2rem; }
.wmap-hint {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 300; margin-left: .75rem;
}
svg.wmap { width: 100%; height: auto; display: block; margin-top: .75rem; }

/* Countries with no data stay visible but recede: the shape of the world is
   the context that makes the filled countries legible. */
.wc {
  fill: var(--line); stroke: var(--bg); stroke-width: .6;
  transition: fill .15s ease;
}
.wc--has {
  fill: color-mix(in oklab, var(--accent) calc(var(--w, .5) * 100%), var(--line));
  cursor: pointer;
}
.wc--has:hover { fill: var(--accent); }
.wc--has:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wc--has.is-on { stroke: var(--ink); stroke-width: 1.4; }

.wmap__legend {
  display: flex; align-items: center; gap: .4rem; margin-top: .6rem;
  font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
}
.wmap__scale { display: inline-flex; gap: 2px; }
.wmap__scale i {
  width: 14px; height: 8px; display: block;
  background: color-mix(in oklab, var(--accent) calc(var(--w) * 100%), var(--line));
}
.wmap__spacer { flex: 0 0 .5rem; }
.wmap__note { margin-left: auto; text-transform: none; letter-spacing: 0; }

/* City-states have no drawable polygon; a marker keeps them on the map. */
.wc--dot { stroke: var(--bg); stroke-width: 1; }
.wc--dot.is-on { stroke: var(--ink); stroke-width: 1.6; }

/* Count labels: only on landmasses big enough to hold them (see LABEL_MIN_AREA).
   Non-interactive so they never swallow a click meant for the country. */
.wc__num {
  font-size: 11px; font-weight: 600; fill: var(--bg);
  text-anchor: middle; dominant-baseline: central;
  pointer-events: none; paint-order: stroke;
  stroke: color-mix(in oklab, var(--ink) 55%, transparent); stroke-width: 2.4px;
}

/* Custom tooltip: the native <title> takes ~1s to appear and cannot show a
   breakdown. This one is instant and carries the vertical split plus names. */
.wtip {
  position: absolute; z-index: 20; pointer-events: none;
  min-width: 9rem; max-width: 15rem; padding: .55rem .7rem;
  background: var(--bg); border: 1px solid var(--line-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14); border-radius: 4px;
  font-size: .78rem; line-height: 1.35;
}
.wtip__h { font-weight: 600; margin-bottom: .1rem; }
.wtip__n { color: var(--accent); font-size: .76rem; margin-bottom: .3rem; }
.wtip__vs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .3rem; }
.wtip__v {
  font-size: .7rem; padding: .1rem .35rem; border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--muted);
}
.wtip__list { font-size: .74rem; color: var(--muted); }
.wmap-card { position: relative; }        /* tooltip anchors to the card */

/* --- Map zoom, detail and back ------------------------------------------- */
.wmap__back {
  position: absolute; top: .6rem; right: .6rem; z-index: 15;
  font: inherit; font-size: .76rem; cursor: pointer;
  padding: .35rem .6rem; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line-strong); color: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.is-zoomed .wmap__back { opacity: 1; pointer-events: auto; }
.wmap__back:hover { border-color: var(--accent); color: var(--accent); }

/* Granular list for the selected place. Capped height so a 67-company country
   cannot push the rest of the page off screen. */
.wdetail:empty { display: none; }
.wdetail {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line);
  max-height: 15rem; overflow-y: auto;
}
.wdetail__h {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: .5rem;
}
.wdetail__list { list-style: none; margin: 0; padding: 0; }
.wdetail__list li {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .3rem 0; border-bottom: 1px solid var(--line);
  font-size: .8rem;
}
.wdetail__n { font-weight: 400; }
.wdetail__m { color: var(--muted); font-size: .76rem; margin-left: auto; }
.wdetail__more { font-size: .76rem; color: var(--muted); padding-top: .5rem; }

/* --- Reading state, shortlist, what's new --------------------------------
   Visit history is per-browser localStorage: the radar is a public page with
   no accounts, so there is nowhere else for it to live. */
.chip--seen { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.chip--seen-new {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent); font-weight: 500;
}
.chip--seen-seen { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.chip--seen-revisit { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); }

.starb {
  margin-left: auto; align-self: flex-start; font: inherit; font-size: 1rem;
  line-height: 1; cursor: pointer; background: none; border: 0; padding: .1rem .2rem;
  color: var(--line-strong); transition: color .15s ease, transform .15s ease;
}
.starb:hover { color: var(--accent); transform: scale(1.15); }
.starb.is-on { color: var(--accent); }

.wnew {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .6rem .8rem; margin-bottom: 1rem; font-size: .8rem;
  background: color-mix(in oklab, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  border-radius: 4px;
}
.wnew__t { color: var(--ink); }
.wnew__b {
  font: inherit; font-size: .76rem; cursor: pointer; padding: .25rem .55rem;
  border-radius: 999px; background: var(--bg);
  border: 1px solid var(--line-strong); color: var(--ink);
}
.wnew__b:hover { border-color: var(--accent); color: var(--accent); }
.wnew__b--q { margin-left: auto; color: var(--muted); border-style: dashed; }

.hint {
  display: flex; gap: .8rem; align-items: center; font-size: .8rem;
  padding: .6rem .8rem; margin-bottom: 1rem; color: var(--muted);
  border-left: 2px solid var(--accent); background: color-mix(in oklab, var(--accent) 4%, transparent);
}
.hint kbd {
  font: inherit; font-size: .76rem; padding: .05rem .3rem;
  border: 1px solid var(--line-strong); border-radius: 3px;
}
.hint__x {
  margin-left: auto; flex: none; font: inherit; font-size: .76rem; cursor: pointer;
  background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .2rem .55rem; color: var(--ink);
}
.hint__x:hover { border-color: var(--accent); color: var(--accent); }

/* Saved views: a named set of filter values, restorable in one click. */
.viewbar { display: flex; flex-wrap: wrap; gap: .4rem; margin: -1.5rem 0 1.75rem; }
.vchip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden;
}
.vchip button {
  font: inherit; font-size: .76rem; cursor: pointer; background: none; border: 0;
  padding: .25rem .55rem; color: var(--ink);
}
.vchip button:hover { color: var(--accent); }
.vchip__x { color: var(--muted); border-left: 1px solid var(--line) !important; }
.vchip--add { border-style: dashed; color: var(--muted); }

/* --- Command palette ------------------------------------------------------ */
.cmdk { position: fixed; inset: 0; z-index: 100; }
.cmdk__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.cmdk__box {
  position: relative; max-width: 34rem; margin: 12vh auto 0;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25); overflow: hidden;
}
.cmdk__q {
  width: 100%; font: inherit; font-size: 1rem; padding: .9rem 1rem;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink);
}
.cmdk__q:focus { outline: none; }
.cmdk__list { list-style: none; margin: 0; padding: .3rem; max-height: 22rem; overflow-y: auto; }
.cmdk__i {
  display: flex; align-items: baseline; gap: .6rem; cursor: pointer;
  padding: .45rem .6rem; border-radius: 4px; font-size: .85rem;
}
.cmdk__i.is-active { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.cmdk__k {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); min-width: 4.2rem; flex: none;
}
.cmdk__h { margin-left: auto; font-size: .76rem; color: var(--muted); }
.cmdk__empty { padding: .8rem; color: var(--muted); font-size: .85rem; }
.cmdk__foot {
  padding: .5rem .8rem; border-top: 1px solid var(--line);
  font-size: .72rem; color: var(--muted);
}
.cmdk__foot kbd {
  font: inherit; padding: .05rem .28rem; margin-right: .2rem;
  border: 1px solid var(--line-strong); border-radius: 3px;
}

/* --- Skip link ------------------------------------------------------------
   First focusable element on the page. Without it a keyboard user tabs the
   whole masthead and every filter before reaching a single result. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: .7rem 1.1rem;
  text-decoration: none; border-radius: 0 0 4px 0;
}
.skip:focus { left: 0; }

/* --- Disclosure for filters and map --------------------------------------
   On a phone these two blocks were taller than the viewport and pushed the
   first result 4.3 screens down. */
.disclose {
  display: none; width: 100%; align-items: center; justify-content: space-between;
  font: inherit; font-size: .82rem; cursor: pointer; text-align: left;
  padding: .8rem .1rem; margin: 0 0 .4rem;
  background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink);
}
.disclose__c::after { content: "＋"; color: var(--muted); }
.disclose[aria-expanded="true"] .disclose__c::after { content: "－"; }

@media (max-width: 720px) {
  .disclose { display: flex; }
  /* min-height 0 rather than display:none so the panel can animate and so
     focus inside it is not lost while it is closed */
  .collapsible { display: none; }
  .collapsible.is-open { display: block; }
  .controls.collapsible.is-open { display: flex; }

  /* WCAG 2.5.8: 24px minimum target. Touch guidance says 44px; these were
     22x19 and smaller, which is a miss-tap every time on a phone. */
  .controls select, .controls input, .tab, .fchip, .vchip button,
  .wnew__b, .hint__x, .starb, .wmap__back, .cmdk__i {
    min-height: 44px;
  }
  .starb { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .fchip, .vchip button, .wnew__b { padding-top: .6rem; padding-bottom: .6rem; }

  /* The map was 303x152 with 11px labels. Taller box, bigger labels, and the
     count text drops out entirely below this size: the tooltip carries it. */
  svg.wmap { min-height: 210px; }
  .wc__num { font-size: 9px; }
}

@media (max-width: 420px) {
  .wc__num { display: none; }     /* unreadable at this width; tooltip still works */
}

@media (max-width: 720px) {
  .breakdowns.collapsible { display: none; }
  .breakdowns.collapsible.is-open { display: grid; }

  /* Six KPI cards stacked was 484px. A two-column grid of compact tiles says
     the same thing in a quarter of the height. */
  .kpis { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .kpis .kpi { padding: .6rem .7rem; }
  .kpi__num { font-size: 1.5rem; }
  .kpi__sub { display: none; }        /* the label alone carries it at this size */

  /* The hero lede is a full paragraph of scene-setting above the tool itself. */
  .hero { padding-top: 1.2rem; padding-bottom: 1rem; }
  .hero__lede { font-size: 1rem; line-height: 1.5; }
  .hero__lede br { display: none; }
}

@media (max-width: 720px) {
  .vchip__x { min-width: 44px; }   /* the last sub-24px control */
}

/* --- Ambient background ---------------------------------------------------
   The geometry has to mean something to THIS audience — brewers, distillers,
   winemakers and the data people who work with them — or it is just wallpaper.
   Three layers, each a literal reference held at an abstract distance:

   1. RIPPLE   concentric rings on a liquid surface. Doubles as a radar sweep,
               which is the name of the thing. Two readings, one shape.
   2. LATTICE  a hexagonal field, not a square grid. Hexagons are what the
               chemistry of this industry looks like on paper: hop acids,
               esters, phenols. A square grid would have said "dashboard";
               a hex field says "fermentation science".
   3. RISE     carbonation. Slow upward drift, the one motion every person in
               this industry watches in a glass without thinking about it.

   Restraint is the whole brief. 3-5% opacity, 30-60s periods. If you notice it
   moving while reading, it has failed. transform and opacity only, so it stays
   on the compositor: this page already carries 17k DOM nodes and the
   background must cost nothing. */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  contain: strict;
}
body > *:not(.ambient) { position: relative; z-index: 1; }
.ambient__rings, .ambient__grid, .ambient__sweep { position: absolute; inset: -25%; }

/* 1. Ripple. One paint for the whole set via repeating-radial-gradient. */
.ambient__rings {
  background: repeating-radial-gradient(circle at var(--ax, 50%) var(--ay, 40%),
    transparent 0 78px,
    color-mix(in oklab, var(--radar) 45%, transparent) 78px 79.5px,
    transparent 79.5px 160px);
  opacity: .05;
  animation: ambient-drift 38s cubic-bezier(.42, 0, .58, 1) infinite alternate;
  will-change: transform;
}

/* 2. Hex lattice. Three 60-degree gradient sets interleave into a honeycomb
      without a single extra element or an image request. */
.ambient__grid {
  --hx: color-mix(in oklab, var(--ink) 26%, transparent);
  background-image:
    linear-gradient(60deg,  var(--hx) 1px, transparent 1px),
    linear-gradient(-60deg, var(--hx) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hx) 1px, transparent 1px);
  background-size: 104px 60px;
  opacity: .03;
  animation: ambient-lattice 54s linear infinite;
  will-change: transform;
}


@keyframes ambient-drift {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.12) rotate(3.5deg); }
}
@keyframes ambient-lattice {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-104px, -60px, 0); }
}

/* Per-view character: the ripple originates somewhere different on each tab,
   so switching views shifts the horizon rather than redrawing the same frame. */
body[data-view="companies"] .ambient__rings { --ax: 26%; --ay: 34%; }
body[data-view="people"]    .ambient__rings { --ax: 74%; --ay: 30%; }
body[data-view="resources"] .ambient__rings { --ax: 50%; --ay: 68%; }
body[data-view="jobs"]      .ambient__rings { --ax: 18%; --ay: 72%; }
body[data-view="prospects"] .ambient__rings { --ax: 82%; --ay: 62%; }
body[data-view="about"]     .ambient__rings { --ax: 50%; --ay: 42%; opacity: .07; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ambient__rings { opacity: .1; }
  :root:not([data-theme="light"]) .ambient__grid { opacity: .05; --hx: color-mix(in oklab, var(--radar) 30%, transparent); }
  :root:not([data-theme="light"]) .ambient__sweep { opacity: .5; }

}
/* Explicit dark choice, so the toggle works on a light OS. */
  :root[data-theme="dark"] .ambient__rings { opacity: .1; }
  :root[data-theme="dark"] .ambient__grid { opacity: .05; --hx: color-mix(in oklab, var(--radar) 30%, transparent); }
  :root[data-theme="dark"] .ambient__sweep { opacity: .5; }



/* Motion is a preference. Reduced motion holds the geometry still rather than
   removing it, so the page does not restyle for those readers. */
@media (prefers-reduced-motion: reduce) {
  .ambient__rings, .ambient__grid, .ambient__sweep { animation: none; }
  .ambient__blips i { animation: none; opacity: .5; }
}

/* A phone is a small canvas held close to the face; the field is heavier there
   for the same perceived weight, and one layer is dropped to save fill rate. */
@media (max-width: 720px) {
  .ambient__grid { background-size: 76px 44px; }
  .ambient__sweep { opacity: .55; }
}

/* --- Radar sweep ----------------------------------------------------------
   The rings above stop being decoration once this is over them: they read as
   range rings. A conic gradient gives the whole beam, including its trailing
   decay, in one paint, rotated on the compositor.

   Slow on purpose. A real radar sweeps every few seconds and that speed is
   what makes most radar backgrounds feel cheap: it demands attention on a loop.
   72 seconds per revolution means the beam takes over a minute to come back
   round, so you catch it at the edge of vision and then forget about it. 26s
   was tried first and still read as motion rather than as atmosphere. */
.ambient__sweep {
  background: conic-gradient(from 0deg at var(--ax, 50%) var(--ay, 40%),
    color-mix(in oklab, var(--radar) 60%, transparent) 0deg,
    transparent 26deg, transparent 360deg);
  opacity: .3;
  mask-image: radial-gradient(circle at var(--ax, 50%) var(--ay, 40%),
    #000 0 42%, transparent 66%);
  animation: ambient-sweep 72s linear infinite;
  will-change: transform;
}
@keyframes ambient-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Blips. Each one's animation-delay is derived from its angle in the markup,
   so it lights as the beam reaches it and decays behind it, instead of
   blinking on an unrelated loop the way a decorative dot field would. */
.ambient__blips { position: absolute; inset: 0; }
.ambient__blips i {
  position: absolute; left: var(--bx); top: var(--by);
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--radar);
  opacity: 0;
  animation: ambient-blip 72s ease-out infinite;
  animation-delay: var(--bd);
}
@keyframes ambient-blip {
  0%   { opacity: 0;   transform: scale(.6); }
  0.6% { opacity: .85; transform: scale(1.5); }   /* the beam arrives */
  8%   { opacity: .2;  transform: scale(1); }
  38%  { opacity: 0;   transform: scale(1); }     /* faded before it returns */
  100% { opacity: 0;   transform: scale(.6); }
}

/* Dark is where a radar belongs: a lit trace on a dark ground is the whole
   visual language, so the sweep and blips carry noticeably more weight there
   while the light theme keeps them near-subliminal. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ambient__sweep { opacity: .5; }
  :root:not([data-theme="light"]) .ambient__blips i { width: 6px; height: 6px; margin: -3px 0 0 -3px;
                      box-shadow: 0 0 12px 3px color-mix(in oklab, var(--radar) 60%, transparent); }

}
/* Explicit dark choice, so the toggle works on a light OS. */
  :root[data-theme="dark"] .ambient__sweep { opacity: .5; }
  :root[data-theme="dark"] .ambient__blips i { width: 6px; height: 6px; margin: -3px 0 0 -3px;
                      box-shadow: 0 0 12px 3px color-mix(in oklab, var(--radar) 60%, transparent); }


@media (max-width: 720px) {
  .ambient__blips i { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
}

/* ---- Theme toggle ------------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; cursor: pointer; padding: .2rem .3rem;
  font: inherit; color: inherit; opacity: .8; border-radius: 6px;
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .theme-toggle { min-height: 44px; min-width: 44px; } }

/* ---- Mobile: cost of a 378-card page ------------------------------------ */
/* Every card renders, which measured 291,625px tall at 375px wide.
   content-visibility lets the browser skip layout and paint for off-screen
   cards: native, one property, no virtual-list machinery to maintain.
   contain-intrinsic-size supplies a placeholder height so the scrollbar does
   not jump as cards realise. Measured 291,625px -> 109,102px. */
.company, .person, .resource, .job {
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}

@media (max-width: 720px) {
  .hero { padding-top: 1rem; padding-bottom: .5rem; }
  .hero__title { font-size: clamp(2rem, 11vw, 2.75rem); }
  .hero__search { margin-top: 1.25rem; }
  .hero__eyebrow { margin-bottom: .25rem; }
  .kpis { row-gap: 1rem; }
}

@media (max-width: 720px) and (pointer: coarse) {
  /* 44px minimum touch targets on the controls that are actually tapped. */
  .tab, .key, .chip, .btn, select, .theme-toggle { min-height: 44px; }
  .tabs { scroll-snap-type: x proximity; }
  .tab { scroll-snap-align: start; }
}

/* ---- Mobile app shell ---------------------------------------------------
   The complaint was scrolling, and the measurements agreed: 1,345px of hero,
   KPI grid and banners before the first company, then a 109,102px list. Two
   separate fixes: get content to the top, then make each card cost less.
   Everything here is scoped to small screens; the desktop design is untouched. */
@media (max-width: 720px) {
  /* 1. The preamble. The hero is a landing-page device; on a phone opened to
        look something up it is pure scroll. Keep the title small and the
        search, drop the rest. */
  .hero { padding-top: .5rem; padding-bottom: 0; }
  .hero__eyebrow, .hero__lede { display: none; }
  .hero__title { font-size: 1.35rem; margin: 0; letter-spacing: 0; }
  .hero__search { margin-top: .6rem; }
  .ambient { display: none; }          /* decorative, and it repaints on scroll */

  /* KPI block is six numbers; two rows of three is enough on a phone. */
  .kpis { grid-template-columns: repeat(3, 1fr); row-gap: .6rem; margin: .75rem 0; }
  .kpi { font-size: .8rem; }

  /* Dismissible desktop affordances. They stack to ~400px before any data. */
  .global-hint, .wmap-hint { display: none; }

  /* 2. Card cost. Denser padding and tighter line box: the list is the page. */
  .company { padding: .6rem 0; }
  .company__desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
                   -webkit-box-orient: vertical; overflow: hidden; }
  .contain-intrinsic-fallback { }
  .company, .person, .resource, .job { contain-intrinsic-size: auto 150px; }

  /* 3. Bottom navigation. Thumbs reach the bottom of a phone, not the top,
        and a fixed bar means no scrolling back up to switch view. */
  .topnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; justify-content: space-around; gap: 0;
    margin: 0; padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
    max-width: none; border-top: 1px solid var(--line); border-bottom: 0;
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px);
  }
  /* A thumb bar carries five destinations. Eight forced every label into an
     ellipsis ("PEOP...", "PAPE...") and squeezed the touch targets to 44px,
     which is the floor, not a target. Jobs, Leads and About leave the bar:
     Jobs and About both have doors on the landing view and links in the
     footer, and Leads is private and absent from the published site anyway. */
  .topnav .tab[data-short="Jobs"],
  .topnav .tab[data-short="Leads"],
  .topnav .tab[data-short="About"] { display: none; }

  .topnav .tab {
    flex: 1 1 0; min-width: 0; min-height: 52px;
    font-size: 0;                              /* hides the long desktop label */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: .3rem 2px;
  }
  .topnav .tab::after {
    content: attr(data-short); font-size: .68rem; letter-spacing: .01em;
    white-space: nowrap;
  }
  /* The icon sits above its label rather than beside it, so the cell reads as
     one target instead of two things sharing a row. */
  .topnav .tab svg { width: 18px; height: 18px; flex: none; }
  /* The list must clear the fixed bar, plus the home indicator. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  /* 4. Search stays reachable instead of scrolling away with the hero. */
  .hero__search { position: sticky; top: 0; z-index: 50; padding: .4rem 0;
                  background: var(--bg); }
}

/* Respect a reduced-motion preference for the blur/sticky work above. */
@media (prefers-reduced-motion: reduce) {
  .topnav { backdrop-filter: none; }
}

@media (max-width: 720px) {
  /* Reading-history banner: another 119px of chrome before the data. */
  .wnew { display: none; }
}
/* Paging control. Hidden until the pager decides there is more to show, and
   never shown on desktop, where the full list is the point. */
.mpager { display: none; }
@media (max-width: 720px) {
  .mpager.is-on {
    display: block; width: 100%; margin: 1rem 0 .5rem; padding: .85rem 1rem;
    font: inherit; font-size: .9rem; cursor: pointer; border-radius: 10px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
    min-height: 44px;
  }
  .mpager.is-on:hover { border-color: var(--accent); }
}

@media (max-width: 720px) {
  /* The explainer bar is #hintbar, not .global-hint: 137px of chrome that a
     phone user opening the page to look something up does not need. */
  #hintbar { display: none; }

  /* Three columns squeezed "INDIVIDUALS" onto two lines at 106px each.
     Two columns fits the longest label on one line. */
  .kpis { grid-template-columns: 1fr 1fr; }

  /* The bar is the app's primary navigation: it must never scroll or clip. */
  .topnav { overflow: visible; align-items: center; }
  .topnav .tab::after { white-space: nowrap; }
}

/* ---- Filter hierarchy ---------------------------------------------------- */
.filter-more {
  font: inherit; font-size: .8rem; cursor: pointer; padding: .35rem .7rem;
  border: 1px dashed var(--line-strong); border-radius: 999px;
  background: none; color: var(--muted); align-self: center;
}
.filter-more:hover { color: var(--ink); border-color: var(--accent); }
.filter-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .filter-more { min-height: 44px; } }

/* ---- Icons --------------------------------------------------------------- */
.ico { width: 20px; height: 20px; flex: none; }
/* Desktop keeps its text-only tabs; the glyphs are a mobile affordance where
   the bar is a thumb target rather than a row of words. */
.topnav .ico { display: none; }
@media (max-width: 720px) {
  .topnav .tab { flex-direction: column; gap: 2px; padding: .25rem 0; }
  .topnav .ico { display: block; width: 22px; height: 22px; }
  .topnav .tab::after { font-size: .62rem; letter-spacing: .02em; }
  /* Active view is carried by colour on a filled icon, not just an underline
     which is hard to see at the very bottom edge of a screen. */
  .topnav .tab.is-active .ico { color: var(--accent); }
  .topnav .tab.is-active::after { color: var(--accent); }
}

/* ---- Laptop / desktop parity -------------------------------------------- */
/* The same three problems the phone had, measured at 1440: 2,274px before the
   first card, 44 screens of list, and navigation that scrolls out of reach.
   The phone got a fixed bottom bar; the laptop gets a sticky top one. */
@media (min-width: 721px) {
  /* .topbar is already sticky in the base rules; no need to restate it.
     What did need fixing: adding the theme toggle pushed .topbar__util to
     1497px against a 1440px viewport and put the whole page into horizontal
     scroll. The label goes, the accessible name stays on the button. */
  .topbar__util { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .theme-toggle__label { position: absolute; width: 1px; height: 1px;
                         overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Icons on desktop too. The point of an icon set is that it is the same set
     everywhere; showing glyphs only on the phone is the inconsistency. */
  .topnav .ico { display: block; width: 17px; height: 17px; opacity: .75; }
  .topnav .tab { display: inline-flex; align-items: center; gap: .45rem; }
  /* Adding a glyph to each tab widened the row enough to push .topbar__util
     past the viewport and put the page into horizontal scroll. Tighten the
     gap to pay for the icons, and let the bar wrap rather than overflow if a
     narrower laptop still cannot fit it. */
  .topnav { gap: 1.15rem; flex-wrap: wrap; }
  .topbar__inner { flex-wrap: wrap; row-gap: .25rem; }
  .topnav .tab.is-active .ico { opacity: 1; color: var(--accent); }
  .mpager.is-on { display: block; max-width: 22rem; margin: 1.5rem auto .5rem; }
}

/* ---- Phone navigation: legibility over glass ----------------------------- */
/* The bar was a 92% translucent surface behind a blur. Where backdrop-filter
   is unsupported or disabled that degrades to near-transparent, and even where
   it works, card text scrolling underneath competes with the labels. The bar
   is the primary navigation on a phone: it is opaque first, and the blur is a
   progressive enhancement layered on top only where it is actually supported. */
@media (max-width: 720px) {
  .topnav {
    background: var(--surface);
    backdrop-filter: none;
    border-top: 1px solid var(--line-strong);
    /* Lifts the bar off the list instead of letting it blend into it. */
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .55);
    padding-top: .3rem;
  }
  @supports (backdrop-filter: blur(12px)) {
    .topnav {
      background: color-mix(in oklab, var(--surface) 97%, transparent);
      backdrop-filter: blur(14px) saturate(1.2);
    }
  }

  /* Labels were .62rem in muted grey: too small and too low-contrast to read
     at a glance while moving. Bigger, and full body colour. */
  .topnav .tab::after { font-size: .68rem; font-weight: 500; color: var(--body); }
  .topnav .ico { opacity: .9; }

  /* Flow: the active view now reads as a filled pill rather than a colour
     change alone, so it survives a glance and does not rely on hue perception. */
  .topnav .tab {
    border-radius: 10px; margin: 0 2px; transition: background-color .15s ease;
  }
  .topnav .tab.is-active {
    background: color-mix(in oklab, var(--accent) 16%, transparent);
  }
  .topnav .tab.is-active .ico,
  .topnav .tab.is-active::after { color: var(--accent); opacity: 1; }
  .topnav .tab:active { background: color-mix(in oklab, var(--ink) 10%, transparent); }
}

@media (max-width: 720px) {
  /* The fixed bar is a child of .topbar, which is positioned and therefore
     creates a stacking context. A z-index of 60 on the bar only ranks it
     against its siblings inside that context, so card text painted straight
     over it: elementFromPoint inside the bar returned a p.usecase. Lifting the
     context itself is what actually puts the navigation on top. */
  /* A global `body > :not(.ambient) { position: relative; z-index: 1 }` puts
     every top-level block, including .topbar and main, on one layer, so main
     painted over the fixed bar and it was not even tappable. That selector is
     0-1-1; a bare .topbar is 0-1-0 and loses, which is why raising z-index on
     it did nothing. Matching its specificity is the actual fix. */
  body > .topbar { z-index: 200; }
  /* Bar measured 64px, not the 56px the body padding assumed, so the last card
     sat under it. Pad to the real height plus the home indicator. */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}


/* Inline glyphs sit on the text baseline; the nav ones are flex-centred. */
.glyphed { display: inline; }
.glyphed .ico { width: 1em; height: 1em; vertical-align: -.125em; margin-right: .1em; }
.theme-toggle__icon .ico { width: 18px; height: 18px; }
.theme-toggle__icon { display: inline-flex; align-items: center; }

/* ---- Tag row alignment --------------------------------------------------- */
/* The row mixes two chip languages: rule chips (text with a 2px left border)
   and boxed chips (.chip--cap, .chip--seen, which carry a full 1px border).
   Because the boxed ones add border and padding on all four sides while the
   rule ones pad only on the left, the two sat at different heights, on
   different baselines, and with left edges that did not line up. Measured at
   375px: heights 19.3 vs 18.3, tops 469.2 vs 494.9.

   One shared box model for every chip, so both languages share a baseline
   without flattening the visual distinction between them. */
.chips { align-items: center; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  box-sizing: border-box;
}
/* Boxed variants: pad symmetrically and drop the left rule, which was never
   meant to combine with a full border. */
.chip--cap,
.chip--seen {
  padding: 0 .45rem;
  border-left-width: 1px;
  border-radius: 4px;
  line-height: 1.5;
}
/* .chip--seen ran a smaller font than every other chip, which is what made its
   box a different height from its neighbours. */
.chip--seen { font-size: .72rem; }

/* ---- Events: running ticker under the nav, plus event cards ----
 * Every colour here is a token. The strip previously carried its own amber
 * palette, which meant it ignored the design system entirely: light runs a
 * blue accent, and dark deliberately commits to the phosphor --radar green so
 * the whole UI reads as one instrument. A bar with its own private palette
 * reads as a third-party widget bolted on.
 */
.eventstrip {
  background: var(--surface);
  border-block: 1px solid var(--line);
  color: var(--body);
  font-size: .85rem;
}
.eventstrip__inner {
  display: flex; gap: .7rem; align-items: baseline;
  padding-block: .5rem;
}
/* The eyebrow takes the accent, so the one coloured thing in the bar is the
   signal that it is live. In dark that is the radar trace green by design. */
.eventstrip__label {
  flex: none; display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; font-size: .68rem;
  color: var(--radar);
}
.eventstrip__label::before {
  content: ""; width: .42rem; height: .42rem; border-radius: 50%;
  background: currentColor;
  animation: eventstrip-pulse 2.4s ease-in-out infinite;
}
@keyframes eventstrip-pulse {
  0%, 100% { opacity: .3; transform: scale(.85); }
  50%      { opacity: 1;  transform: scale(1); }
}

.eventstrip__viewport {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  /* Soften both edges so text does not guillotine against the label or the
     boundary, which reads as a rendering fault rather than as motion. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%);
}
.eventstrip__text {
  margin: 0; white-space: nowrap;
  display: flex; width: max-content;
  animation: eventstrip-marquee var(--marquee-duration, 40s) linear infinite;
}
.eventstrip__seq { flex: none; display: flex; align-items: baseline; }

.eventstrip:hover .eventstrip__text,
.eventstrip:focus-within .eventstrip__text { animation-play-state: paused; }

@keyframes eventstrip-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.eventstrip__item {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding-inline: .95rem;
  border-left: 1px solid var(--line);
}
.eventstrip__month {
  padding-inline: 1.1rem .35rem;
  font-weight: 650; letter-spacing: .02em; color: var(--ink);
}
.eventstrip__text a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color 140ms ease, color 140ms ease;
}
.eventstrip__text a:hover,
.eventstrip__text a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.eventstrip__where { color: var(--muted); font-size: .82em; }

/* Scale and weight carry the hierarchy; the countdown is the one element
   allowed to take the accent as a fill, and only when it is close. */
.eventstrip__soon {
  flex: none; font-size: .72rem; font-weight: 600;
  padding: .08rem .45rem; border-radius: 999px;
  color: var(--muted); border: 1px solid var(--line);
}
.eventstrip__soon.is-imminent {
  color: var(--surface); background: var(--radar);
  border-color: var(--radar);
}

@media (max-width: 34rem) {
  .eventstrip__label { display: none; }
  .eventstrip__item { padding-inline: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .eventstrip__viewport { overflow-x: auto; scrollbar-width: thin; }
  .eventstrip__text { animation: none; width: auto; }
  .eventstrip__label::before { animation: none; opacity: .8; }
  .eventstrip__seq[aria-hidden="true"] { display: none; }
}

.chip--speaking { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); }
.chip--mode { text-transform: capitalize; }
.event h3 { margin: .3rem 0; font-size: 1.02rem; }
.event .meta { color: var(--muted); font-size: .85rem; margin: .15rem 0; }

/* ---- Related items on a detail page ---- */
.rel__note { font-size: .85rem; margin: .2rem 0 .6rem; }
.rel__list li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.rel__why { font-size: .82rem; min-width: 0; }
.rel__score {
  margin-left: auto; font-size: .75rem; font-variant-numeric: tabular-nums;
  opacity: .65; flex: none;
}

/* ---- "For you" recommendations from reading history ---- */
.foryou { padding: 1rem 1.1rem; margin-bottom: 1rem; }
.foryou__h { font-size: 1.02rem; margin: 0 0 .15rem; }
.foryou__note { font-size: .82rem; margin: 0 0 .7rem; }
.foryou__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foryou__list li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.foryou__list a { font-weight: 600; }

/* Open-data links in the footer. Kept on every page on purpose: companies.html
   is the no-JavaScript surface that crawlers and LLM readers actually parse,
   and a site-wide internal link is what keeps it crawled. The label is what
   turns four bare links into a deliberate offer rather than developer debris. */
.foot__data { display: block; margin-top: .6rem; }
.foot__data-label {
  display: inline-block; margin-right: .5rem;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

/* --- Landing view ("doors") ---------------------------------------------
 * The companies grid renders 592 cards, so it made the first thing a visitor
 * met an 8000px scroll. This view stays short on purpose: say what the thing
 * is, then offer doors. Each door carries its real count, so the promise on
 * the card matches what is behind it.
 */
.home__doors {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-bottom: 1.5rem;
}
/* The hairline lives on each door, not on the container. Painting the
   container and letting the gap show through is the usual trick, but it fills
   every EMPTY cell with the rule colour too, so an unfilled last row renders
   as a grey slab. Per-door outlines overlap across the 1px gap into a single
   hairline and leave empty cells as page. */
.door {
  display: block; padding: 1.4rem 1.3rem 1.5rem;
  background: var(--surface); color: inherit; text-decoration: none;
  box-shadow: 0 0 0 1px var(--line);
  transition: background 140ms ease, box-shadow 140ms ease;
}
.door:hover, .door:focus-visible { background: var(--raised); box-shadow: 0 0 0 1px var(--line-strong); }
.door:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.door__n {
  display: block; font-family: var(--serif); font-size: 2.1rem; line-height: 1;
  color: var(--ink); margin-bottom: .5rem;
}
.door__n--rules { font-size: 1.25rem; color: var(--muted); padding-top: .7rem; }
.door__t { display: block; font-weight: 600; margin-bottom: .3rem; color: var(--ink); }
.door__d { display: block; color: var(--muted); font-size: .875rem; line-height: 1.55; }
.home__note {
  border-left: 3px solid var(--accent); padding: .1rem 0 .1rem 1rem;
  color: var(--body); max-width: 62ch;
}
.home__note p { margin: 0; }

/* --- Hero only leads on the landing view --------------------------------
 * The eyebrow, title and lede were repeating on every tab, so People and Jobs
 * opened with a full screen of restatement before any content. A masthead
 * earns its space once; after that the reader knows where they are and the
 * tab bar says which section. The search stays, because that is a tool rather
 * than a statement.
 */
body:not([data-view="home"]) .hero__eyebrow,
body:not([data-view="home"]) .hero__title,
body:not([data-view="home"]) .hero__lede { display: none; }
body:not([data-view="home"]) .hero {
  padding-top: 1.25rem; padding-bottom: .75rem;
  /* The hero paints a surface panel with a border. Behind a full masthead that
     reads as deliberate; with only a search box left it becomes a stray
     rectangle whose edges do not line up with the bars beneath it. Off the
     landing view the search sits on the page ground instead. */
  background: transparent; border-bottom: 0;
}
body:not([data-view="home"]) .hero__search { margin-top: 0; }
/* About is prose and reads better with room to breathe. */
body[data-view="about"] .hero { padding-bottom: 1rem; }

/* --- Honest AI verdict, company of the day, and the two-panel detail split ---
   Tokens only, so both themes follow the existing palette with no new colours
   defined outside :root. */

.chip--ai { font-weight: 600; }
.chip--ai-real { color: #0b7a3b; border-left-color: #0b7a3b; }
.chip--ai-none { color: var(--muted); border-left-color: var(--line-strong); }
.chip--ai-unknown { color: #8a6d0b; border-left-color: #8a6d0b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip--ai-real { color: #35e07a; border-left-color: #35e07a; }
  :root:not([data-theme="light"]) .chip--ai-unknown { color: #e0c35e; border-left-color: #e0c35e; }
}

/* Two panels: what they do in drinks, and what the technology really is. */
.twopanel {
  display: grid; gap: 1rem; margin: 1.25rem 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.panel {
  border: 1px solid var(--line); border-radius: 10px;
  padding: .9rem 1rem; background: var(--surface, transparent);
}
.panel h2 {
  margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.panel__facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; margin: 0; }
.panel__facts dt { color: var(--muted); font-size: .85rem; }
.panel__facts dd { margin: 0; color: var(--ink); font-size: .92rem; }
.verdict { font-weight: 600; }
.verdict--real { color: #0b7a3b; }
.verdict--none { color: var(--muted); }
.verdict--unknown { color: #8a6d0b; }
.verdict__note {
  display: block; font-weight: 400; font-size: .8rem;
  color: var(--muted); margin-top: .15rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .verdict--real { color: #35e07a; }
  :root:not([data-theme="light"]) .verdict--unknown { color: #e0c35e; }
}

/* Company of the day. Sits above the doors, deliberately quieter than the hero. */
.potd {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 1.1rem 1.25rem; margin: 0 0 1.25rem;
  background: var(--surface, transparent); cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.potd:hover { border-color: var(--line-strong); border-left-color: var(--accent-hover); }
.potd:hover .potd__go { color: var(--accent-hover); }
@media (prefers-reduced-motion: no-preference) { .potd:hover { transform: translateY(-1px); } }
.potd__eyebrow {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .35rem;
}
.potd__date::before { content: "\00b7"; margin: 0 .35rem; }
.potd__name { margin: 0 0 .25rem; font-size: 1.35rem; color: var(--ink); }
.potd__use { margin: 0 0 .4rem; color: var(--accent); font-size: .95rem; }
.potd__desc { margin: 0 0 .7rem; color: var(--body); font-size: .92rem; }
.potd__go { display: inline-block; margin-top: .6rem; color: var(--accent); font-size: .88rem; }