/* ==========================================================================
   Bilsan Business Solutions — network.css
   Global network: dotted world map (markers, popover), type filters, contact
   cards (component contact-card), the card page, the "Our offices" section of
   the contact page and the home "around the world" band.
   Loaded after site.css by the pages that show a map or a contact card.

    1. Tokens                 5. Contact card
    2. JS-only controls       6. Join panel
    3. World map & markers    7. Card page
    4. Popover & filters      8. Home band & contact offices
   ========================================================================== */

/* ------------------------------------------------------------- 1. Tokens */
:root {
  --net-branch: var(--c-brand);
  --net-agent: #2B2F36;
  --net-partner: var(--c-grey);
  --net-partner-ink: color-mix(in srgb, var(--c-grey) 68%, #000000);
  --net-land: #D6D1CE;
  --net-land-band: #D9D4D1;
  --net-ring: var(--c-surface);
}
:root[data-theme="dark"] {
  --net-agent: #D9D6D3;
  --net-partner: color-mix(in srgb, var(--c-grey) 82%, #FFFFFF);
  --net-partner-ink: color-mix(in srgb, var(--c-grey) 62%, #FFFFFF);
  --net-land: #3E444B;
  --net-land-band: #33383E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --net-agent: #D9D6D3;
    --net-partner: color-mix(in srgb, var(--c-grey) 82%, #FFFFFF);
    --net-partner-ink: color-mix(in srgb, var(--c-grey) 62%, #FFFFFF);
    --net-land: #3E444B;
    --net-land-band: #33383E;
  }
}

/* Type colour scopes (markers, cards, filters, legend) */
.net-marker--hq, .net-marker--branch,
.net-card--hq, .net-card--branch,
.net-filter--branch, .net-legend__item--hq, .net-legend__item--branch,
.net-type--hq, .net-type--branch { --marker: var(--net-branch); --marker-ink: var(--c-brand-text); }
.net-marker--agent, .net-card--agent, .net-filter--agent, .net-legend__item--agent, .net-type--agent { --marker: var(--net-agent); --marker-ink: var(--c-ink); }
.net-marker--partner, .net-card--partner, .net-filter--partner, .net-legend__item--partner, .net-type--partner { --marker: var(--net-partner); --marker-ink: var(--net-partner-ink); }

/* ---------------------------------------------------- 2. JS-only controls */
html:not(.js) .net-js { display: none !important; }

/* ------------------------------------------------- 3. World map & markers */
.net-map { position: relative; margin: 0; }
.net-map__canvas { position: relative; width: 100%; }
.net-map__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
.net-map__land { fill: none; stroke: var(--net-land); stroke-linecap: round; }
/* A regional (zoomed) window fades out at its edges instead of cutting the land off. */
.net-map.is-zoomed:not(.net-map--mini) .net-map__svg {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
.net-map__markers { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.net-marker { position: absolute; z-index: 1; width: 0; height: 0; }
.net-marker--hq { z-index: 3; }
.net-marker.is-active { z-index: 4; }
.net-marker__pin {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  color: var(--marker);
}
a.net-marker__pin { cursor: pointer; }
.net-marker__pin:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 50%; }
.net-marker__dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--marker);
  box-shadow: 0 0 0 3px var(--net-ring), 0 2px 6px rgba(21, 23, 28, .28);
  transition: transform .2s var(--ease);
}
.net-marker--hq .net-marker__dot { width: 16px; height: 16px; }
.net-marker__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--marker) 26%, transparent);
  opacity: 0;
  transform: scale(.5);
}
.net-marker--hq .net-marker__halo,
.net-marker.is-focus .net-marker__halo { animation: net-pulse 2.6s cubic-bezier(.2, .6, .35, 1) infinite; }
.net-marker.is-active .net-marker__halo { animation: none; opacity: 1; transform: scale(1.15); }
@keyframes net-pulse {
  0% { opacity: .95; transform: scale(.4); }
  75%, 100% { opacity: 0; transform: scale(1.75); }
}
.net-marker__pin:hover .net-marker__dot,
.net-marker__pin:focus-visible .net-marker__dot,
.net-marker.is-active .net-marker__dot,
.net-marker.is-linked .net-marker__dot { transform: scale(1.3); }
.net-marker.is-linked .net-marker__halo { animation: none; opacity: 1; transform: scale(1.1); }
.net-marker.is-approximate .net-marker__dot { background: var(--net-ring); border: 2px dashed var(--marker); }

.net-marker__label {
  position: absolute;
  left: 13px;
  top: 0;
  padding: .05rem .45rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  box-shadow: var(--shadow-1);
  color: var(--c-ink);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
}
.net-marker--hq .net-marker__label { left: 15px; }
.net-marker.is-flipped .net-marker__label { left: auto; right: 13px; }
.net-marker.is-flipped.net-marker--hq .net-marker__label { right: 15px; }
@media (max-width: 767.98px) {
  .net-map--full .net-marker__label,
  .net-map--band .net-marker__label { display: none; }
}

.net-map__hint { margin: .85rem 0 0; font-size: .85rem; color: var(--c-muted); text-align: center; }

/* Mini map (card page): zoomed window, clipped */
.net-map--mini .net-map__canvas { overflow: hidden; border-radius: var(--radius-md); background: var(--c-bg-alt); }
.net-map--mini .net-marker--hq .net-marker__dot,
.net-map--mini .net-marker.is-focus .net-marker__dot { width: 18px; height: 18px; }

/* Legend (home band) */
.net-map__legend { margin-top: .9rem; }
.net-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .85rem; font-weight: 700; color: var(--c-text); }
.net-legend__item { display: inline-flex; align-items: center; gap: .45rem; }
.net-legend__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--marker); box-shadow: 0 0 0 2px var(--net-ring); }
.net-legend__item--hq .net-legend__dot { width: 13px; height: 13px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--marker) 24%, transparent); }

/* --------------------------------------------------- 4. Popover & filters */
.net-pop {
  --net-pop-shift: 0px;
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 20px;
  width: 18rem;
  max-width: calc(100vw - 2rem);
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-3);
  color: var(--c-text);
  font-size: .9rem;
  line-height: 1.55;
  text-align: start;
  white-space: normal;
  transform: translateX(calc(-50% + var(--net-pop-shift)));
}
.net-pop.is-below { top: 20px; bottom: auto; }
.net-pop.is-docked { position: relative; left: auto; top: auto; bottom: auto; width: auto; max-width: none; margin-top: .9rem; transform: none; box-shadow: var(--shadow-2); }
.net-pop__close { position: absolute; inset-block-start: .35rem; inset-inline-end: .35rem; min-width: 34px; height: 34px; }
.net-pop__type { display: block; margin: 0 0 .2rem; padding-inline-end: 2rem; }
.net-pop__name { margin: 0; padding-inline-end: 2rem; font-size: 1rem; font-weight: 800; line-height: 1.4; color: var(--c-ink); }
.net-pop__place { display: flex; align-items: center; gap: .3rem; margin: .15rem 0 0; color: var(--c-muted); font-weight: 600; }
.net-pop__approx { margin: .35rem 0 0; font-size: .8rem; color: var(--c-muted); }
.net-pop__links { display: grid; gap: .35rem; margin: .75rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--c-line); list-style: none; }
.net-pop__links a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--c-ink-2); overflow-wrap: anywhere; }
.net-pop__links a:hover { color: var(--c-brand-text); }
.net-pop__links .icon { color: var(--c-brand-text); }
.net-pop__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: .85rem; }
.net-pop__actions .link-arrow { font-size: .88rem; }

.net-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.net-filters__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.net-filter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 42px;
  padding: .4rem .55rem .4rem .95rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-ink-2);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
:root[dir="rtl"] .net-filter { padding: .4rem .95rem .4rem .55rem; }
.net-filter:hover { border-color: var(--c-ink-2); color: var(--c-ink); }
.net-filter.is-active { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-bg); }
.net-filter__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--marker); box-shadow: 0 0 0 2px var(--c-surface); }
.net-filter.is-active .net-filter__dot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-bg) 50%, transparent); }
.net-filter--agent.is-active .net-filter__dot { background: var(--c-bg); }
.net-filter__count {
  min-width: 1.7rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--c-bg-alt);
  color: var(--c-ink-2);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.net-filter.is-active .net-filter__count { background: color-mix(in srgb, var(--c-bg) 18%, transparent); color: inherit; }
.net-toolbar__status { margin: 0; font-size: .88rem; font-weight: 600; color: var(--c-muted); }

/* Mobile: the whole world is narrow, so the land dots get heavier. */
@media (max-width: 767.98px) {
  .net-map--full:not(.is-zoomed) .net-map__land,
  .net-map--band:not(.is-zoomed) .net-map__land { stroke-width: 5.4; }
}
@media (max-width: 479.98px) {
  .net-map--full:not(.is-zoomed) .net-map__land,
  .net-map--band:not(.is-zoomed) .net-map__land { stroke-width: 6.2; }
}

/* ------------------------------------------------------ 5. Contact card */
/* /network directory: map + cards stacked; side by side (sticky map) on wide screens. */
.net-directory { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 1200px) {
  .net-directory { grid-template-columns: minmax(0, 1fr) minmax(0, 24.5rem); align-items: start; }
  .net-directory__map { position: sticky; top: calc(var(--header-h-condensed) + 1.25rem); z-index: 2; }
  .net-directory .net-grid { grid-template-columns: minmax(0, 1fr); }
}
.net-directory__list { display: grid; gap: 1rem; min-width: 0; }

.net-section__map {
  padding: clamp(.75rem, 3vw, 2.25rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(40rem 18rem at 60% 30%, var(--hero-glow), transparent 70%),
    var(--c-surface);
}

.net-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.net-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.net-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.net-card[hidden] { display: none !important; }
.net-card::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  width: 3.5rem;
  height: 3px;
  border-start-start-radius: var(--radius-lg);
  background: var(--marker);
  transition: width .35s var(--ease);
}
.net-card:hover,
.net-card:focus-within { border-color: var(--c-line-strong); box-shadow: var(--shadow-2); }
.net-card:hover::before,
.net-card.is-highlight::before { width: calc(100% + 2px); border-start-end-radius: var(--radius-lg); }
.net-card.is-highlight { border-color: color-mix(in srgb, var(--marker) 60%, var(--c-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marker) 16%, transparent), var(--shadow-2); }

.net-card__head { display: flex; align-items: flex-start; gap: 1rem; }
.net-card__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 1px solid color-mix(in srgb, var(--marker) 24%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--marker) 10%, var(--c-surface));
  color: var(--marker-ink);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
}
.net-card__mark--logo { padding: 6px; border-color: var(--c-line); background: #FFFFFF; }
.net-card__mark--logo img { width: 100%; height: 100%; object-fit: contain; }
.net-card__titles { min-width: 0; }
.net-card__badge { margin: 0 0 .3rem; line-height: 1.2; }
.net-type { display: inline-flex; align-items: center; gap: .4rem; color: var(--marker-ink); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
:root[dir="rtl"] .net-type { font-size: .84rem; letter-spacing: 0; text-transform: none; }
.net-type__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--marker); flex-shrink: 0; }
/* Operating company above the location name (e.g. "Byte Via Business Solutions"). */
.net-card__company { margin: 0 0 .1rem; color: var(--c-ink-2); font-size: .82rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.net-card__badge { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
/* Primary office of the brand serving the domain. */
.net-card__primary {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.5;
}
.net-card--primary { border-color: color-mix(in srgb, var(--c-brand) 38%, var(--c-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 10%, transparent); }
.net-card--primary::before { width: calc(100% + 2px); border-start-end-radius: var(--radius-lg); }
.net-card__name { margin: 0 0 .25rem; font-size: 1.2rem; line-height: 1.35; overflow-wrap: anywhere; }
.net-card__name a { color: var(--c-ink); }
.net-card__name a:hover { color: var(--c-brand-text); }
.net-card__place { display: flex; align-items: flex-start; gap: .35rem; margin: 0; color: var(--c-muted); font-size: .9rem; font-weight: 600; }
/* Pin on the first line when a long "city, country" wraps. */
.net-card__place .icon { flex-shrink: 0; margin-top: .3em; margin-top: calc((1lh - 16px) / 2); color: var(--marker-ink); }
.net-card__desc { margin: 0; font-size: .93rem; line-height: 1.75; }

.net-card__facts { display: grid; gap: .8rem; margin: 0; }
.net-fact dt { display: flex; align-items: center; gap: .45rem; margin-bottom: .15rem; color: var(--c-muted); font-size: .8rem; font-weight: 800; }
.net-fact dd { margin: 0; padding-inline-start: 1.6rem; color: var(--c-ink-2); font-weight: 600; overflow-wrap: anywhere; }
.net-fact__sub { display: block; color: var(--c-muted); font-size: .88rem; font-weight: 500; }

.net-card__channels { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.net-channel {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 52px;
  padding: .5rem .75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  color: var(--c-ink-2);
  transition: border-color .18s ease, background-color .18s ease;
}
.net-channel:hover { border-color: color-mix(in srgb, var(--c-brand) 45%, var(--c-line)); background: var(--c-brand-soft); color: var(--c-ink); }
.net-channel__icon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--c-brand-soft); color: var(--c-brand-text); }
.net-channel:hover .net-channel__icon { background: var(--c-brand); color: #FFFFFF; }
.net-channel__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.35; }
.net-channel__label { color: var(--c-muted); font-size: .75rem; font-weight: 800; }
.net-channel__value { max-width: 100%; color: var(--c-ink); font-weight: 700; overflow-wrap: anywhere; }

.net-card__label { margin: 0 0 .5rem; color: var(--c-muted); font-size: .8rem; font-weight: 800; }
.net-card__chip { position: relative; z-index: 1; }

.net-card__open { flex-shrink: 0; margin-inline-start: auto; border-color: var(--c-line); color: var(--c-ink-2); }
.net-card__open:hover { border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand-text); }

.net-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--c-line); }
/* Three actions (save · share · QR) do not fit one row of a directory card in any
   language: "Save contact" takes the full row and the two secondary actions share
   the next one, instead of a lone QR button wrapping under the others. */
.net-card__actions:has(> :nth-child(3)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.net-card__actions:has(> :nth-child(3)) > :first-child { grid-column: 1 / -1; }
.net-card__actions .icon { width: 1.1em; height: 1.1em; }
.net-card__status { margin: -.5rem 0 0; color: var(--c-muted); font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; }
.net-card__status:empty { display: none; }
.net-card__status.is-success { color: var(--stage-signed); }

.net-card__qr { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-surface-2); }
.net-card__qr[hidden] { display: none; }
.net-card__qr-caption { flex: 1 1 10rem; margin: 0; color: var(--c-text); font-size: .88rem; }
.net-qr { display: grid; place-items: center; flex-shrink: 0; width: 136px; aspect-ratio: 1; padding: 8px; border-radius: var(--radius-sm); background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(21, 23, 28, .08); }
.net-qr svg,
.net-qr img { display: block; width: 100%; height: 100%; }
.net-qr--lg { width: min(220px, 100%); padding: 12px; }
.net-qr.is-loading { background: linear-gradient(110deg, #F2EFED 30%, #FFFFFF 50%, #F2EFED 70%) 0 0 / 200% 100%; }

/* Large variant (card page) */
.net-card--large { gap: 1.4rem; padding: clamp(1.4rem, 3.2vw, 2.4rem); }
.net-card--large .net-card__mark { width: 76px; height: 76px; font-size: 1.45rem; border-radius: var(--radius-lg); }
.net-card--large .net-card__name { font-size: var(--fs-h3); }
.net-card--large .net-card__channels { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.net-card--large .net-card__actions .btn { --bs-btn-padding-y: .62rem; --bs-btn-font-size: .92rem; }

/* ----------------------------------------------------- 6. Join panel */
.net-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--c-line);
  border-inline-start: 3px solid var(--c-brand);
  border-radius: var(--radius-lg);
  background: var(--c-bg-alt);
}
.net-join__text { flex: 1 1 26rem; max-width: 46rem; }
.net-join__text .kicker { margin-bottom: .6rem; }
.net-join__title { margin-bottom: .5rem; font-size: var(--fs-h3); }
.net-join__lead { margin: 0; }
.net-join__actions { flex-shrink: 0; }

/* ------------------------------------------------------- 7. Card page */
.net-profile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: clamp(1.5rem, 4vw, 3rem); }
.net-profile__aside { display: grid; gap: 1.25rem; }
@media (min-width: 992px) {
  .net-profile__aside { position: sticky; top: calc(var(--header-h-condensed) + 1.5rem); }
}
@media (max-width: 991.98px) {
  .net-profile { grid-template-columns: minmax(0, 1fr); }
}
.net-panel { padding: clamp(1.1rem, 2.4vw, 1.5rem); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.net-panel__title { margin: 0 0 .9rem; color: var(--c-muted); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
:root[dir="rtl"] .net-panel__title { font-size: .9rem; letter-spacing: 0; text-transform: none; }
.net-panel--qr { display: grid; justify-items: center; gap: .9rem; text-align: center; }
.net-panel--qr .net-panel__title { justify-self: stretch; text-align: start; }
.net-panel__qr { display: grid; place-items: center; }
.net-panel__text { max-width: 30ch; margin: 0; font-size: .9rem; }
.net-others { margin-top: clamp(3rem, 6vw, 4.5rem); }
.net-back { margin-top: 2rem; }

/* ---------------------------------- 8. Home band & contact offices */
.net-band__map { max-width: 60rem; margin: .5rem auto 0; }
.net-band .net-map__land { stroke: var(--net-land-band); }
.net-band__places { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.net-band__place {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-ink-2);
  font-size: .88rem;
  font-weight: 700;
}
.net-band__place:hover { border-color: var(--marker); color: var(--c-ink); }
.net-band__place .net-type__dot { width: 8px; height: 8px; }
.net-band__place small { color: var(--c-muted); font-size: .8rem; font-weight: 600; }

.ct-offices .net-grid { margin-top: .25rem; }

@media (prefers-reduced-motion: reduce) {
  .net-marker__halo { animation: none !important; }
  .net-marker--hq .net-marker__halo,
  .net-marker.is-focus .net-marker__halo { opacity: .55; transform: scale(1.15); }
  .net-card,
  .net-card::before,
  .net-marker__dot { transition: none; }
}

@media print {
  .net-card__actions,
  .net-card__qr,
  .net-toolbar,
  .net-pop,
  .net-join { display: none !important; }
  .net-card { break-inside: avoid; }
}