/* Geo tier — /bedrijven, /bedrijven/<provincie>, /bedrijven/<provincie>/<stad>.
   templates/pages/geo_{hub,province,city}.html.

   These are index/hub pages, not product pages: their job is to be scannable and
   to expose links. So the visual weight sits on the lists, not on decoration.
   Reuses .btn / .buybox / .mono-tag / .sec-label / .badge from base.css + theme.css. */

.geo { --g: var(--blue); --g-deep: var(--blue-deep); --g-tint: var(--blue-tint); }

/* ── head ───────────────────────────────────────────────────────────────── */
.geo-head-sec { padding-top: clamp(1rem, 3vh, 1.8rem); padding-bottom: 0; }
/* Title and text left, the place's outline right (Erik 2026-09-21). The figure
   is a fixed square so every gemeente page has the same hero height; below
   phone width it drops under the text, smaller. */
.geo-head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(13rem, 26vw, 18rem);
  gap: 2rem clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.geo-head-text { min-width: 0; }
.geo-outline { margin: 0; width: clamp(11rem, 22vw, 15rem); justify-self: center; }
.geo-outline svg { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.geo-outline-ctx { fill: var(--g-tint); stroke: var(--g); stroke-width: .35; stroke-opacity: .5;
  vector-effect: non-scaling-stroke; }
.geo-outline-focus { fill: var(--g); fill-opacity: .16; stroke: var(--g-deep); stroke-width: 1.4;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* On a gemeente page the province is the base (its own outline, as on the
   province page) and the gemeente is the lit part: a solid fill and a firm stroke. */
.geo-outline-base { fill: var(--g); fill-opacity: .16; stroke: var(--g-deep); stroke-width: 1.4;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.geo-outline-focus--part { fill: var(--g-deep); fill-opacity: .85; stroke: var(--g-deep); stroke-width: 1.6; }
@media (max-width: 52rem) { .geo-head { grid-template-columns: 1fr; }
  .geo-outline { width: 9rem; margin-top: .2rem; } }
.geo-head-sec h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.12; margin-top: .5rem; }
.geo-lead { margin-top: .9rem; font-size: 1.05rem; line-height: 1.6; color: var(--ink-60); max-width: 44rem; }

.geo-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; margin-top: 1.4rem; }
.geo-count b { font-size: 2.1rem; line-height: 1; color: var(--g-deep); font-variant-numeric: tabular-nums; }
.geo-count span { font-size: .95rem; color: var(--ink); }
.geo-count i { font-style: normal; font-family: var(--jbmono); font-size: .72rem; color: var(--ink-40); }

/* The second line of the hero: the vestigingen count under the bedrijven count.
   Smaller than the headline on purpose — it is the other measure of the same
   register, not a second claim. */
.geo-second { margin-top: .55rem; font-size: .95rem; color: var(--ink); line-height: 1.5;
  font-variant-numeric: tabular-nums; }
/* The layer line: our matched-website count, under the official headline. It is
   the page's own claim, so it gets the brand tint and a rule rather than the
   grey of a footnote — strength, not apology (Erik 2026-09-17). */
.geo-layers { margin-top: .9rem; padding-left: .9rem; border-left: 3px solid var(--blue);
  font-size: .95rem; color: var(--ink); line-height: 1.5; font-variant-numeric: tabular-nums;
  max-width: 44rem; }
.geo-layers b { color: var(--blue-deep); font-weight: 600; }
.geo-layers-foot { margin-top: .45rem; font-size: .8rem; color: var(--ink-40); line-height: 1.5;
  max-width: 44rem; }

/* Combo pages: the parent gemeente's two measures on one line. */
.geo-parent { margin-top: .55rem; font-size: .9rem; color: var(--ink-60); line-height: 1.5;
  font-variant-numeric: tabular-nums; }

/* search/filter bar */
.geo-filter { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; max-width: 42rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .5rem .5rem .5rem 1rem; }
.geo-filter .q-icon { font-family: var(--jbmono); color: var(--g); font-size: 1.1rem; }
.geo-filter input[type="search"] { flex: 1; border: 0; outline: 0; font: inherit; font-size: .92rem;
  background: transparent; color: var(--ink); min-width: 0; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.geo-body-sec { padding-top: clamp(1.4rem, 3vh, 2rem); }
.geo-cols { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.6rem; align-items: start; }
.geo-main { min-width: 0; }
.geo-aside { position: sticky; top: 5.5rem; }
.geo-aside-foot { margin-top: .8rem; font-size: .74rem; color: var(--ink-40); line-height: 1.5; }

.geo-h2 { font-size: 1.2rem; margin: 2.2rem 0 .9rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.geo-h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.geo-src { margin-top: .8rem; font-size: .8rem; line-height: 1.55; color: var(--ink-40); }
/* Directly under a list heading: whose count the list is, and when we measured
   it. Our own figures live here now that the hero is the register's. */
.geo-h2-sub { margin: -.4rem 0 .9rem; font-size: .88rem; line-height: 1.55; color: var(--ink-60); }
.geo-note { margin-top: 1.6rem; font-size: .87rem; line-height: 1.65; color: var(--ink-60);
  background: var(--bg-soft); border-radius: var(--radius); padding: 1rem 1.2rem; }
.geo-note b { color: var(--ink); }

/* ── company list — the mesh into /domein/ ──────────────────────────────── */
.geo-companies { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.geo-companies a, .geo-companies .co-row--flat { display: block; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: .7rem .9rem; text-decoration: none; color: inherit; }
.geo-companies a { transition: border-color .12s ease, transform .12s ease; }
.geo-companies a:hover { border-color: var(--g); transform: translateY(-1px); }
.geo-companies b { display: block; font-size: .92rem; }
.geo-companies span { font-size: .78rem; color: var(--ink-60); }
.geo-companies .co-row--flat b { font-weight: 600; }
@media (max-width: 52rem) { .geo-companies { grid-template-columns: 1fr; } }

/* ── place list (province page + hub) ───────────────────────────────────── */
.geo-places { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.geo-places a, .geo-place-flat { display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: .7rem 1rem; text-decoration: none; color: inherit; }
.geo-places a:hover { border-color: var(--g); }
.geo-places b { font-size: .95rem; }
.geo-places span { font-size: .8rem; color: var(--ink-60); text-align: right; }
/* below the indexing gate: present, but visibly not a link */
.geo-place-flat { background: var(--bg-soft); border-style: dashed; }
.geo-place-flat b { color: var(--ink-60); font-weight: 600; }

/* ── province grid (hub) ────────────────────────────────────────────────── */
.geo-provgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.geo-prov { display: block; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: .85rem 1rem; text-decoration: none; color: inherit; }
a.geo-prov:hover { border-color: var(--g); }
.geo-prov b { display: block; font-size: .93rem; }
.geo-prov span { font-size: .76rem; color: var(--ink-60); }
@media (max-width: 62rem) { .geo-provgrid { grid-template-columns: 1fr 1fr; } }

/* ── tag chips (sector / techniek / nabij) ──────────────────────────────── */
.geo-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.geo-tag { font-size: .85rem; color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 99px; padding: .38rem .85rem; text-decoration: none;
  transition: border-color .12s ease, color .12s ease; }
.geo-tag:hover { border-color: var(--g); color: var(--g-deep); }
.geo-tag i { font-style: normal; font-family: var(--jbmono); font-size: .72rem;
  color: var(--ink-40); margin-left: .3rem; }

/* ── stats ──────────────────────────────────────────────────────────────── */
/* auto-fit rather than a fixed four: the strip carries a CBS tile *and* our own,
   so its length depends on whether the row has a CBS figure at all. */
.geo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .7rem; }
.geo-stats > div { background: var(--bg-soft); border-radius: 10px; padding: .85rem 1rem; }
.geo-stats dt { font-size: .78rem; color: var(--ink-60); }
/* "van onze set" — which population a tile is computed on, next to its label. */
.geo-stats dt span { font-size: .7rem; color: var(--ink-40); }
.geo-stats dd { font-size: 1.15rem; font-weight: 600; margin-top: .2rem;
  font-variant-numeric: tabular-nums; }
@media (max-width: 52rem) { .geo-stats { grid-template-columns: 1fr 1fr; } }

@media (max-width: 62rem) {
  .geo-cols { grid-template-columns: 1fr; gap: 1.8rem; }
  .geo-aside { position: static; }
}

/* ════════════════════════════════════════════════════════════════════════════
   The atlas — /bedrijven hero.

   Register: instrument, not infographic. A measuring surface you sweep across,
   with the figures beneath recalculating. So: thin strokes, mono numerals,
   restrained motion, no illustration. Reads as precision, which is the same
   promise the copy makes.
   ════════════════════════════════════════════════════════════════════════════ */

.geo-atlas {
  --geo-nodata-bg: #eef1f5;
  --geo-nodata-line: #d8dee7;
  position: relative;
  padding-top: clamp(1.2rem, 3vh, 2rem);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 22% 0%, #fbfdff 0%, rgba(251,253,255,0) 62%),
    linear-gradient(#fff, var(--bg-soft));
}
/* faint measuring grid — atmosphere without illustration */
.geo-atlas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: .35;
  mask-image: radial-gradient(85% 65% at 50% 35%, #000 0%, transparent 78%);
}
.geo-atlas > .wrap { position: relative; }

.geo-atlas-head { max-width: 46rem; }
.geo-atlas-head h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06;
  letter-spacing: -.02em; margin-top: .5rem; }
.geo-atlas-head h1 em { font-style: normal; color: var(--g-deep); }

/* Map left, readout right, adjacent rather than pushed to opposite edges — with
   the panel type scaled up so it carries its own half of the composition instead
   of leaving a void. */
.geo-atlas-grid { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; margin-top: 1.6rem; }

/* ── map ────────────────────────────────────────────────────────────────── */
.geo-mapfig { margin: 0; }
.geo-map { width: 100%; height: auto; display: block; overflow: visible; }

.geo-shape { stroke: #fff; stroke-width: 2.2; transition: fill .16s ease; }
/* one source of truth for the ramp; SVG paths take `fill`, the HTML legend
   swatches take `background` — the first version only set fill and the legend
   rendered blank. */
/* The choropleth's five buckets. The class is built from the bucket number in
   both geo-map.js (`"geo-step-" + m.step`) and the templates
   (`geo-step-{{ p.step }}`), so it never appears literally. Not dead. */
.geo-step-1 { --step: #eaf2fe; }
.geo-step-2 { --step: #c3dafb; }
.geo-step-3 { --step: #8ab6f4; }
.geo-step-4 { --step: #4a8bec; }
.geo-step-5 { --step: #0d4cb8; }
path.geo-shape[class*="geo-step-"] { fill: var(--step); }
.geo-legend i[class*="geo-step-"] { background: var(--step); }
/* hatched, not tinted: a flat neutral is only 1.1 contrast from step 1, so
   "unknown" would read as "low" */
.geo-shape--nodata { fill: url(#geoNoData); }

.geo-region { cursor: pointer; }
.geo-region:focus { outline: none; }
.geo-region .geo-shape { transition: fill .16s ease, stroke .16s ease, stroke-width .16s ease; }
.geo-region.is-active .geo-shape,
.geo-region:focus-visible .geo-shape { stroke: var(--navy, #0b2545); stroke-width: 4; }
.geo-region--nodata { cursor: default; }

/* city dots — area tracks the count (r ∝ √n), white ring so overlaps stay legible */
.geo-dot { cursor: pointer; }
.geo-dot:focus { outline: none; }
.geo-dot-mark { fill: var(--navy, #0b2545); stroke: #fff; stroke-width: 3.5;
  transition: r .16s ease, fill .16s ease; }
.geo-dot-hit { fill: transparent; }
.geo-dot.is-active .geo-dot-mark,
.geo-dot:focus-visible .geo-dot-mark { fill: var(--amber); stroke-width: 3.5; }

/* one orchestrated reveal on load, staggered west→east; nothing after that */
.geo-map.is-live .geo-region,
.geo-map.is-live .geo-dot { animation: geo-in .5s cubic-bezier(.2,.8,.2,1) both; }
.geo-map.is-live .geo-region:nth-child(n) { animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes geo-in { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .geo-map.is-live .geo-region, .geo-map.is-live .geo-dot { animation: none; }
  .geo-shape, .geo-dot-mark { transition: none; }
}

/* ── identity panel ─────────────────────────────────────────────────────── */
.geo-ident-kicker { font-family: var(--jbmono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-40); }
.geo-ident-name { font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.02;
  letter-spacing: -.02em; margin: .3rem 0 .6rem; }
.geo-ident-hint { font-size: .95rem; color: var(--ink-60); line-height: 1.6; max-width: 26rem;
  margin-bottom: 1.1rem; }

.geo-legendbox { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .4rem; }
.geo-legend-label { font-family: var(--jbmono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-40); }
.geo-legend { display: flex; align-items: center; gap: .2rem; }
/* Author `display` outranks the UA [hidden] rule, so the count and share legends
   both rendered until this override existed. Same trap as elsewhere in this repo:
   any element with an author display needs its own [hidden] escape hatch. */
.geo-legend[hidden] { display: none; }
.geo-legend i { width: 1.8rem; height: .5rem; display: block; }
.geo-legend i:first-of-type { border-radius: 3px 0 0 3px; }
.geo-legend i:last-of-type { border-radius: 0 3px 3px 0; }
.geo-legend b { font-family: var(--jbmono); font-size: .64rem; font-weight: 400;
  color: var(--ink-40); }
.geo-legend b:first-child { margin-right: .35rem; }
.geo-legend b:last-child { margin-left: .35rem; }
.geo-legend-nodata { display: flex; align-items: center; gap: .4rem;
  font-family: var(--jbmono); font-size: .64rem; color: var(--ink-40); }
.geo-legend-nodata i { width: 1.8rem; height: .5rem; border-radius: 3px;
  background: repeating-linear-gradient(45deg, var(--geo-nodata-line) 0 2px,
                                        var(--geo-nodata-bg) 2px 5px); }

/* ── the figures, under the map ─────────────────────────────────────────── */
/* Exactly three, then stacked. The cells are white over a `--line` background,
   so the gaps are the dividers — which means a half-filled row shows up as a
   grey block. auto-fit did that at tablet width. */
.geo-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: 2.4rem; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.geo-figures > div { background: #fff; padding: 1.1rem 1.3rem; }
.geo-figures dt { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--ink-60); }
.geo-figures dd { margin-top: .3rem; font-family: var(--jbmono); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.1; color: var(--g-deep);
  font-variant-numeric: tabular-nums; }
.geo-sub { font-family: var(--jbmono); font-size: .62rem; color: var(--ink-40);
  letter-spacing: .04em; }
.geo-figures-foot { margin-top: .8rem; font-size: .78rem; color: var(--ink-40); line-height: 1.55; }

@media (max-width: 62rem) {
  .geo-atlas-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .geo-mapfig { max-width: 20rem; margin: 0 auto; }
  .geo-figures { grid-template-columns: 1fr; }
}

/* ── metric switcher ────────────────────────────────────────────────────────
   Hidden until the script attaches: a control that does nothing is worse than no
   control, and "bedrijven" is a meaningful default for the no-JS render.
   Class-gated rather than [hidden], because an author `display` beats the UA
   [hidden] rule — a trap this codebase has hit before. */
.geo-switch { display: none; }
.geo-switch.is-live { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.6rem; }
/* one row per group, label in a fixed gutter so the chip columns line up */
.geo-switch-row { display: flex; align-items: baseline; gap: .9rem; }
.geo-switch-label { flex: none; width: 9.5rem; text-align: right;
  font-family: var(--jbmono); font-size: .62rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-40); }
.geo-switch-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
@media (max-width: 52rem) {
  .geo-switch-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .geo-switch-label { width: auto; text-align: left; }
}
.geo-chip { font: inherit; font-size: .84rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 99px; padding: .35rem .85rem; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease; }
.geo-chip:hover:not(:disabled) { border-color: var(--g); color: var(--g-deep); }
.geo-chip.is-on { background: var(--navy, #0b2545); border-color: transparent; color: #fff; }
.geo-chip:disabled { color: var(--ink-40); background: var(--bg-soft); cursor: not-allowed;
  border-style: dashed; }

.geo-metricline { font-size: .92rem; line-height: 1.5; color: var(--g-deep);
  font-weight: 600; margin-bottom: .5rem; }
.geo-metricline[hidden] { display: none; }

/* ── denominator line ───────────────────────────────────────────────────────
   Sits directly under every headline count. Deliberately not a footnote: the
   number and what it is a number *of* have to be read together. */
.geo-denom { margin-top: .45rem; font-size: .84rem; color: var(--ink-40); line-height: 1.5; }

.geo-h3 { font-size: .95rem; margin: 1.6rem 0 .5rem; }

/* CBS context block. Its own tint so it never reads as one of our own counts. */
.geo-stats--cbs { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.geo-stats--cbs > div { background: #fff; border: 1px solid var(--line); }
.geo-stats dd span { font-size: .72rem; font-weight: 400; color: var(--ink-40); }
.geo-stat-word { font-size: .92rem !important; font-weight: 600; }

/* CBS vestigingen per SBI-sectie — a bar list, not a chart: eight rows, read as
   a ranking, and the number stays legible next to the bar. */
.geo-bars { list-style: none; display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; }
.geo-bars li { display: grid; grid-template-columns: minmax(0, 14rem) 1fr auto;
  align-items: center; gap: .7rem; }
.geo-bar-label { font-size: .82rem; color: var(--ink-60); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.geo-bar { display: block; height: .5rem; background: var(--bg-soft); border-radius: 99px; }
.geo-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ink-40); }
.geo-bar-n { font-family: var(--jbmono); font-size: .76rem; color: var(--ink);
  font-variant-numeric: tabular-nums; }
/* Narrow: label and number on one line, bar underneath. Letting the bar simply
   span both columns pushed the number below it, where it read as the caption of
   the *next* row. */
@media (max-width: 44rem) {
  .geo-bars li { grid-template-columns: minmax(0, 1fr) auto; row-gap: .25rem; }
  .geo-bar-label { grid-area: 1 / 1 / 2 / 2; }
  .geo-bar-n { grid-area: 1 / 2 / 2 / 3; }
  .geo-bars .geo-bar { grid-area: 2 / 1 / 3 / 3; }
}

/* A chip that goes one level deeper (branche x gemeente) rather than sideways to
   the national branche page — marked, because the two are different destinations. */
.geo-tag--deep { border-color: var(--g); color: var(--g-deep); }
.geo-tag--deep::after { content: "›"; margin-left: .35rem; color: var(--g); }

/* ── homepage atlas ─────────────────────────────────────────────────────────
   Mid-page link block into the geo tier. The map is the same SSR SVG the hub
   uses; the text columns are what actually carries crawl and click. */
/* Four columns of exactly the same width, the map being the first of them
   (Erik, 2026-09-22). It used to be a 16rem map beside a nested two-column
   block whose first column was `max-content`, so the three text columns were
   each a different width and nothing lined up. One grid, `1fr` four times, and
   the gemeenten span the last two — their inner column gap matches the grid gap,
   so the seam between them reads the same as every other seam. */
.home-geo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem 2.4rem; align-items: start; margin-top: 1.8rem; }
.home-geo-map { margin: 0; }
.home-geo-map svg { width: 100%; height: auto; display: block; }
.home-geo-map .geo-shape { stroke: #fff; stroke-width: 2.2; fill: var(--step, #eaf2fe);
  transition: fill .16s ease; }
.home-geo-region:hover .geo-shape { fill: var(--blue, #0d4cb8); }
.home-geo-col--wide { grid-column: span 2; }
.home-geo-col h3 { font-family: var(--jbmono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-40); font-weight: 400; margin-bottom: .6rem; }
.home-geo-col ul { list-style: none; display: flex; flex-direction: column; gap: .12rem; }
/* the 24 gemeenten flow across the two columns they span, so the block ends
   level with the map instead of trailing a screen of white space under it */
.home-geo-col ul.home-geo-two { display: block; columns: 2; column-gap: 2.4rem; }
.home-geo-col ul.home-geo-two li { break-inside: avoid; }
/* The branche block under the atlas is one full-width column of twelve, not a
   quarter-width one: it flows in four so it ends level instead of running a
   screen deep. */
.home-branche-cols ul.home-geo-two { columns: 4; }
@media (max-width: 62rem) { .home-branche-cols ul.home-geo-two { columns: 2; } }
@media (max-width: 40rem) { .home-branche-cols ul.home-geo-two { columns: 1; } }
.home-geo-col a { font-size: .88rem; color: var(--ink-60); text-decoration: none; }
.home-geo-col a:hover { color: var(--blue); }
/* Tablet: the map drops to its own row above two equal text columns, because a
   quarter of a tablet is too narrow for "Bedrijven in Noord-Brabant". */
@media (max-width: 62rem) {
  .home-geo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-geo-map { grid-column: 1 / -1; max-width: 15rem; }
  .home-geo-col--wide { grid-column: auto; }
  .home-geo-col ul.home-geo-two { columns: 1; }
}
@media (max-width: 40rem) {
  .home-geo-grid { grid-template-columns: 1fr; }
}