:root{
  --demo-paper:#f1f2ee; --demo-ink:#0f1e18; --demo-slate:#46584f; --demo-rule:#d6dcd5;
  --demo-accent:#1f5b45; --demo-signal:#b5842f; --demo-panel:#ffffff;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--demo-paper); color:var(--demo-ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;letter-spacing:-.02em}
a{color:var(--demo-accent)}

.demo-bar{
  position:sticky; top:0; z-index:40; background:rgba(241,242,238,.94);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--demo-rule);
}
.demo-bar__inner{
  max-width:1280px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.demo-mark{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.demo-mark__dot{
  width:26px;height:26px;border-radius:7px;background:var(--demo-accent);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;flex:none;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
}
.demo-mark__text{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-mark__text small{display:block;font-weight:400;font-size:12px;color:var(--demo-slate)}
.demo-tabs{display:flex;gap:6px;flex-wrap:wrap}
.demo-tab{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:7px 13px;border-radius:999px;border:1px solid var(--demo-rule);
  background:var(--demo-panel);color:var(--demo-slate);
}
.demo-tab:hover{border-color:var(--demo-accent);color:var(--demo-accent)}
.demo-tab[aria-current="true"]{background:var(--demo-accent);border-color:var(--demo-accent);color:#fff}
.demo-tag{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--demo-signal);border:1px solid rgba(181,132,47,.4);border-radius:999px;padding:4px 9px;white-space:nowrap;
}
.demo-note{
  max-width:1280px;margin:0 auto;padding:12px 20px 0;
  font-size:13.5px;color:var(--demo-slate);
}
.demo-stage{max-width:1280px;margin:0 auto;padding:18px 20px 40px}
.demo-hint{
  max-width:560px;margin:18px auto 0;padding:14px 16px;background:var(--demo-panel);
  border:1px solid var(--demo-rule);border-left:3px solid var(--demo-signal);border-radius:10px;
  font-size:14px;color:var(--demo-slate);
}
.demo-hint strong{color:var(--demo-ink);display:block;margin-bottom:4px;font-size:13px;letter-spacing:.02em}
.demo-hint code{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:rgba(31,91,69,.1);border:1px solid rgba(31,91,69,.2);border-radius:5px;padding:2px 7px;color:var(--demo-ink);
}
.demo-foot{
  max-width:1280px;margin:0 auto;padding:22px 20px 48px;border-top:1px solid var(--demo-rule);
  font-size:13px;color:var(--demo-slate);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;
}
.demo-foot a{font-weight:600;text-decoration:none}
.demo-foot a:hover{text-decoration:underline}
@media (max-width:640px){
  .demo-mark__text small{display:none}
  .demo-stage{padding:14px 12px 32px}
  .demo-note{padding:10px 12px 0}
}

/* ==========================================================================
   NACDS Member Intelligence Hub
   Premium association aesthetic: restrained, data-rich, highly scannable.
   Scoped under .nhub so it cannot leak into the surrounding theme.
   ========================================================================== */

.nhub {
	--nhub-navy:      #0b2c4d;
	--nhub-navy-soft: #14406c;
	--nhub-blue:      #1a6fb5;
	--nhub-blue-weak: #e8f1fa;
	--nhub-accent:    #b8842b;
	--nhub-ink:       #16202b;
	--nhub-ink-2:     #45566a;
	--nhub-ink-3:     #6b7c91;
	--nhub-line:      #dfe5ec;
	--nhub-line-2:    #eef2f6;
	--nhub-surface:   #ffffff;
	--nhub-canvas:    #f6f8fb;
	--nhub-good:      #1d6f42;
	--nhub-warn:      #9a5b00;
	--nhub-bad:       #b32d2e;
	--nhub-radius:    10px;
	--nhub-radius-sm: 8px;

	/* Interactive surfaces — textboxes, selects, the search box, secondary
	   buttons and chips — share one fill, one border and one radius, so the
	   page reads as one set of controls rather than several. Fixed values
	   rather than theme-adopted ones: these are the association's, and a host
	   theme has no say in them. */
	--nhub-field-bg:      rgba(1, 39, 76, .2);
	--nhub-field-border:  rgba(1, 39, 76, .4);
	--nhub-field-radius:  8px;
	--nhub-field-ink:     #01274c;

	/* The discovery icons. Fixed, like the control colours: a set of icons that
	   changed colour with the host theme would stop being a set. */
	--nhub-icon:          #064f99;
	--nhub-shadow:    0 1px 2px rgba(16, 32, 48, .06), 0 8px 24px rgba(16, 32, 48, .05);

	/* Typography travels through tokens so the hub can adopt the surrounding
	   theme's fonts and sizes at runtime instead of imposing its own. The values
	   here are only the fallback for a page with no theme to inherit from. */
	--nhub-font:           "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--nhub-font-heading:   var(--nhub-font);
	--nhub-font-size:      16px;
	--nhub-line-height:    1.55;
	--nhub-heading-weight: 650;
	--nhub-heading-spacing: -.015em;

	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding-block: 8px;
	padding-inline: 20px;
	color: var(--nhub-ink);
	font-family: var(--nhub-font);
	font-size: var(--nhub-font-size);
	line-height: var(--nhub-line-height);
	-webkit-font-smoothing: antialiased;
}

/* Inside a theme's content area the theme already supplies the column width and
   the side padding. Keeping our own on top of it indents the hub out of
   alignment with everything else on the page. */
.nhub.is-theme-matched {
	max-width: none;
	padding-inline: 0;
}

/* One exception: at phone width a theme's content area is often flush to the
   screen edge, and text that touches the bezel is unreadable whoever's fault
   it is. */
@media (max-width: 600px) {
	.nhub.is-theme-matched { padding-inline: 16px; }
}

.nhub *,
.nhub *::before,
.nhub *::after { box-sizing: inherit; }

.nhub :focus-visible {
	outline: 3px solid var(--nhub-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.nhub h1, .nhub h2, .nhub h3, .nhub h4 {
	margin: 0;
	color: var(--nhub-navy);
	font-family: var(--nhub-font-heading);
	font-weight: var(--nhub-heading-weight);
	letter-spacing: var(--nhub-heading-spacing);
	line-height: 1.2;
}

.nhub p { margin: 0; }

.nhub .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.nhub-eyebrow {
	margin: 0 0 6px;
	color: var(--nhub-ink-3);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- buttons */

.nhub-btn {
	font-family: var(--nhub-font);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--nhub-field-radius);
	background: none;
	color: inherit;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nhub-btn--primary { background: var(--nhub-navy); color: #fff; }
.nhub-btn--primary:hover { background: var(--nhub-navy-soft); }
.nhub-btn--primary[disabled] { opacity: .6; cursor: not-allowed; }

/* Secondary actions take the shared control fill. The primary button keeps
   its solid navy: if every button looked the same, the one the member is
   meant to press would stop announcing itself. */
.nhub-btn--quiet { border-color: var(--nhub-field-border); background: var(--nhub-field-bg); color: var(--nhub-field-ink); }
.nhub-btn--quiet:hover { border-color: var(--nhub-field-ink); background: #fff; }

.nhub-btn--ghost { border-color: var(--nhub-field-border); background: var(--nhub-field-bg); color: var(--nhub-field-ink); }
.nhub-btn--ghost:hover { border-color: var(--nhub-field-ink); background: #fff; }

.nhub-btn--link {
	min-height: 0; padding: 0;
	color: var(--nhub-blue);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------- gate */

.nhub-gate {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding-block: 48px;
}

.nhub-gate__panel {
	width: 100%;
	max-width: 460px;
	padding: 40px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
	box-shadow: var(--nhub-shadow);
}

.nhub-gate__title { margin-bottom: 10px; font-size: 30px; }
.nhub-gate__lede { margin-bottom: 28px; color: var(--nhub-ink-2); font-size: 15px; }

.nhub-gate__foot {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--nhub-line-2);
	color: var(--nhub-ink-3);
	font-size: 13px;
}

.nhub-field { margin-bottom: 18px; }

.nhub-field label {
	display: block;
	margin-bottom: 6px;
	color: var(--nhub-ink);
	font-size: 13.5px;
	font-weight: 600;
}

.nhub-field input {
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 15px;
}

.nhub-field input::placeholder { color: var(--nhub-ink-2); }
.nhub-field input:focus { border-color: var(--nhub-field-ink); background: #fff; }

.nhub-form .nhub-btn--primary { width: 100%; }

.nhub-alert {
	margin: 0 0 16px;
	padding: 11px 14px;
	border: 1px solid #f0c9c9;
	border-left: 3px solid var(--nhub-bad);
	border-radius: var(--nhub-radius-sm);
	background: #fdf3f3;
	color: #7f2223;
	font-size: 14px;
}

/* ----------------------------------------------------------------- topbar */

.nhub-topbar {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 0 12px;
	border-bottom: 1px solid var(--nhub-line);
}

.nhub-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }

.nhub-brandmark {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 9px;
	background: var(--nhub-navy);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
}

.nhub-brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.nhub-brand__text strong { color: var(--nhub-navy); font-size: 15.5px; letter-spacing: .01em; }
.nhub-brand__text small { color: var(--nhub-ink-3); font-size: 12px; }

.nhub-nav { display: flex; gap: 4px; }

.nhub-nav__btn {
	min-height: 40px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--nhub-ink-2);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.nhub-nav__btn:hover { background: var(--nhub-line-2); color: var(--nhub-navy); }
.nhub-nav__btn.is-active { background: var(--nhub-navy); color: #fff; }

.nhub-notice {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-left: 3px solid var(--nhub-warn);
	border-radius: var(--nhub-radius-sm);
	background: #fff8ec;
	color: #6b4400;
	font-size: 13.5px;
}

/* ------------------------------------------------------------------- hero */

/* ---------------------------------------------------------------- masthead

   Everything a member can act on — the search box, the headline figures, the
   discovery shortcuts, the membership-type pills and the filter bar — sits
   above the fold on an ordinary laptop, and the list of companies begins
   exactly at it. The page still scrolls; what scrolls is the results, which
   is the only part that should.

   At narrower widths the three columns fall back to one, in reading order:
   what this is, then the numbers, then the shortcuts.
   ------------------------------------------------------------------------ */

.nhub-masthead {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	padding: 18px 0 4px;
}

@media (min-width: 900px) {
	.nhub-masthead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 28px; }
	.nhub-masthead--rail { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) 232px; }

	/* Three tracks, fixed. auto-fit spreads the tiles to fill whatever width
	   the column happens to have, which lands on two or four across and leaves
	   the last one stranded on a row of its own. Both class names are needed:
	   .nhub-metrics carries the auto-fit rule and is declared later in this
	   file, so a single class here would lose to it. */
	.nhub-metrics.nhub-masthead__figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.nhub-masthead__intro { min-width: 0; }
.nhub-masthead__figures { min-width: 0; align-self: start; }

.nhub-masthead__rail {
	align-self: start;
	border-left: 1px solid var(--nhub-line);
	padding-left: 20px;
}

@media (max-width: 899px) {
	.nhub-masthead__rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--nhub-line); padding-top: 16px; }
}

.nhub-hero { padding: 0; }

.nhub-hero__title { max-width: 16ch; font-size: clamp(26px, 2.9vw, 38px); }

.nhub-hero__lede {
	max-width: 46ch;
	margin-top: 8px;
	color: var(--nhub-ink-2);
	font-size: 15.5px;
}

.nhub-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 720px;
	margin-top: 16px;
	padding: 4px 6px 4px 14px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
}

.nhub-search:focus-within { border-color: var(--nhub-field-ink); background: #fff; }
.nhub-search__icon { flex: none; width: 19px; height: 19px; color: var(--nhub-field-ink); opacity: .7; }

.nhub-search input {
	flex: 1;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 15.5px;
}

.nhub-search input::placeholder { color: var(--nhub-ink-2); }
.nhub-search input:focus { outline: none; }
.nhub-search input::-webkit-search-cancel-button { display: none; }

.nhub-search__clear {
	flex: none;
	min-height: 34px;
	padding: 6px 12px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: #fff;
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.nhub-hero__actions { margin-top: 12px; }

/* --------------------------------------------------------- suggestions */

.nhub-suggest {
	max-width: 720px;
	margin-top: 14px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
	box-shadow: var(--nhub-shadow);
	overflow: hidden;
}

.nhub-suggest__group { padding: 10px 0; border-top: 1px solid var(--nhub-line-2); }
.nhub-suggest__group:first-child { border-top: 0; }

.nhub-suggest__label {
	padding: 4px 16px 8px;
	color: var(--nhub-ink-3);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nhub-suggest__item {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 9px 16px;
	border: 0;
	background: none;
	color: var(--nhub-ink);
	font: inherit;
	font-size: 14.5px;
	text-align: left;
	cursor: pointer;
}

.nhub-suggest__item:hover,
.nhub-suggest__item:focus { background: var(--nhub-blue-weak); }
.nhub-suggest__item span { color: var(--nhub-ink-3); font-size: 13px; }
.nhub-suggest__empty { padding: 18px 16px; color: var(--nhub-ink-3); font-size: 14.5px; }

/* ---------------------------------------------------------------- metrics */

.nhub-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 10px;
	margin-top: 0;
}

/* Outside the masthead — on a page that puts the figures below the heading —
   they keep a little air above them. */
.nhub-view .nhub-metrics,
.nhub-dir__body > .nhub-metrics { margin-top: 20px; }

.nhub-metric {
	min-height: 76px;
	padding: 12px 14px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-surface);
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease;
}

.nhub-metric:hover { border-color: var(--nhub-blue); transform: translateY(-1px); }
.nhub-metric[disabled] { cursor: default; }
.nhub-metric[disabled]:hover { border-color: var(--nhub-line); transform: none; }

.nhub-metric b {
	display: block;
	color: var(--nhub-navy);
	font-size: 25px;
	font-weight: 680;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.nhub-metric span {
	display: block;
	margin-top: 2px;
	color: var(--nhub-ink-3);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.3;
}

/* --------------------------------------------------------------- sections */

.nhub-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin: 26px 0 14px;
}

.nhub-section-head h2 { font-size: 20px; }
.nhub-section-head--results { margin: 16px 0 12px; }

.nhub-count {
	color: var(--nhub-ink-2);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------------------------- tabs */

.nhub-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}

.nhub-tab {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.nhub-tab:hover { border-color: var(--nhub-field-ink); background: #fff; }

.nhub-tab.is-active {
	border-color: var(--nhub-navy);
	background: var(--nhub-navy);
	color: #fff;
}

.nhub-tab small { color: inherit; font-size: 12.5px; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- quick discovery */

/* A rail of shortcuts rather than a grid of cards. The cards took a whole band
   of the screen to say four short things; as a list beside the figures they
   cost one column and no vertical space at all. */
.nhub-quick {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (max-width: 899px) {
	.nhub-quick { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); column-gap: 20px; }
}

.nhub-quick__item {
	display: grid;
	grid-template-columns: 26px 1fr;
	align-items: start;
	column-gap: 10px;
	row-gap: 0;
	padding: 11px 2px;
	border: 0;
	border-top: 1px solid var(--nhub-line-2);
	border-radius: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.nhub-quick__item:first-child { border-top: 0; }
.nhub-quick__item:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* The icon spans both rows so it sits beside the pair of lines rather than
   hanging off the first one. */
.nhub-quick__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: block;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--nhub-icon);
}

.nhub-quick__icon svg { display: block; width: 100%; height: 100%; }

.nhub-quick__item strong { grid-column: 2; color: var(--nhub-blue); font-size: 15.5px; line-height: 1.3; }
.nhub-quick__item small { grid-column: 2; margin-top: 1px; color: var(--nhub-ink-3); font-size: 13px; line-height: 1.35; }

/* ------------------------------------------------------------ browse panel */

.nhub-panel-target {
	margin-top: 18px;
	padding: 22px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-canvas);
}

.nhub-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.nhub-pill {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--nhub-line);
	border-radius: 999px;
	background: var(--nhub-surface);
	color: var(--nhub-ink);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.nhub-pill:hover { border-color: var(--nhub-blue); background: var(--nhub-blue-weak); }
.nhub-pill b { color: var(--nhub-ink-3); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- spotlight */

.nhub-spotlight[hidden] { display: none; }

.nhub-spotlight {
	position: relative;
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin-top: 34px;
	padding: 30px;
	border: 1px solid var(--nhub-navy);
	border-radius: var(--nhub-radius);
	background: linear-gradient(180deg, #0b2c4d 0%, #123f68 100%);
	color: #fff;
}

.nhub-spotlight__main { padding-right: 44px; flex: 1 1 340px; }
.nhub-spotlight .nhub-eyebrow { color: rgba(255, 255, 255, .66); }
.nhub-spotlight h2 { color: #fff; font-size: 27px; }

.nhub-spotlight p {
	max-width: 68ch;
	margin-top: 10px;
	color: rgba(255, 255, 255, .82);
	font-size: 15px;
}

.nhub-spotlight .nhub-tags span {
	border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.nhub-spotlight__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.nhub-spotlight__close:hover { border-color: var(--nhub-field-ink); background: #fff; }

/* The spotlight is a dark panel, and the shared control fill is a pale tint
   meant for white backgrounds — on navy it renders as dark-on-dark and the
   button all but disappears. Inside the spotlight the same button inverts. */
.nhub-spotlight .nhub-spotlight__close {
	border-color: rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.nhub-spotlight .nhub-spotlight__close:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .28);
	color: #fff;
}

.nhub-spotlight__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.nhub-spotlight .nhub-btn--primary { background: #fff; color: var(--nhub-navy); }
.nhub-spotlight .nhub-btn--primary:hover { background: #e9eff5; }

.nhub-spotlight .nhub-btn--quiet {
	border-color: rgba(255, 255, 255, .4);
	background: transparent;
	color: #fff;
}

.nhub-spotlight .nhub-btn--quiet:hover { background: rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- filters */

.nhub-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-canvas);
}

.nhub-select { display: flex; flex: 1 1 180px; flex-direction: column; gap: 4px; min-width: 150px; }

.nhub-select > span {
	color: var(--nhub-ink-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.nhub-select select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
}

.nhub-select select:focus { border-color: var(--nhub-field-ink); }

.nhub-filters .nhub-btn { flex: 0 0 auto; }

/* ------------------------------------------------------------------ chips */

.nhub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nhub-chips:empty { margin-top: 0; }

.nhub-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 6px 8px 6px 14px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.nhub-chip::after {
	content: "×";
	display: grid;
	place-items: center;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: rgba(11, 44, 77, .1);
	font-size: 15px;
	line-height: 1;
}

.nhub-chip:hover::after { background: rgba(11, 44, 77, .22); }

/* ------------------------------------------------------------------ cards */

.nhub-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 14px;
	margin-top: 18px;
	min-height: 80px;
}

.nhub-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.nhub-card:hover { border-color: var(--nhub-blue); box-shadow: var(--nhub-shadow); }

.nhub-card__top { display: flex; align-items: flex-start; gap: 12px; }

.nhub-card__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px; height: 44px;
	border-radius: 9px;
	background: var(--nhub-blue-weak);
	color: var(--nhub-navy);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
}

.nhub-cards--people .nhub-card__avatar { border-radius: 50%; }

.nhub-card__name {
	margin: 0;
	color: var(--nhub-navy);
	font-size: 16.5px;
	font-weight: 650;
	line-height: 1.3;
}

.nhub-card__role { margin-top: 3px; color: var(--nhub-ink-2); font-size: 13.5px; line-height: 1.4; }

.nhub-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 14px;
	color: var(--nhub-ink-3);
	font-size: 13px;
}

.nhub-card__meta b { color: var(--nhub-ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.nhub-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--nhub-line-2);
	font-size: 13.5px;
}

.nhub-card__cta { color: var(--nhub-blue); font-weight: 600; }

.nhub-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--nhub-line-2);
	color: var(--nhub-ink-2);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nhub-badge--chain     { background: #e4eefa; color: #10426f; }
.nhub-badge--associate { background: #eaf3ec; color: #1d6f42; }
.nhub-badge--intl      { background: #f6eede; color: #7a5312; }

.nhub-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.nhub-tags span {
	padding: 4px 10px;
	border: 1px solid var(--nhub-line);
	border-radius: 999px;
	color: var(--nhub-ink-2);
	font-size: 12.5px;
}

/* ------------------------------------------------------- states & paging */

.nhub-empty {
	grid-column: 1 / -1;
	padding: 44px 24px;
	border: 1px dashed var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-canvas);
	color: var(--nhub-ink-2);
	text-align: center;
}

.nhub-empty strong { display: block; margin-bottom: 6px; color: var(--nhub-navy); font-size: 17px; }

.nhub-skeleton {
	min-height: 150px;
	border: 1px solid var(--nhub-line-2);
	border-radius: var(--nhub-radius);
	background: linear-gradient(100deg, #f2f5f9 30%, #e9eef4 50%, #f2f5f9 70%);
	background-size: 260% 100%;
	animation: nhub-shimmer 1.3s linear infinite;
}

@keyframes nhub-shimmer {
	from { background-position: 140% 0; }
	to   { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nhub-skeleton { animation: none; }
	.nhub * { transition: none !important; }
}

.nhub-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 22px;
}

.nhub-pager button {
	min-width: 44px;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius-sm);
	background: var(--nhub-surface);
	color: var(--nhub-ink-2);
	font: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.nhub-pager button:hover:not([disabled]) { border-color: var(--nhub-blue); color: var(--nhub-navy); }
.nhub-pager button[aria-current="true"] { border-color: var(--nhub-navy); background: var(--nhub-navy); color: #fff; }
.nhub-pager button[disabled] { opacity: .45; cursor: not-allowed; }
.nhub-pager .nhub-pager__info { margin-left: auto; color: var(--nhub-ink-3); font-size: 13.5px; }

/* ----------------------------------------------------------------- modal */

.nhub-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; }
.nhub-modal[hidden] { display: none; }
.nhub-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 27, 43, .55); }

.nhub-modal__card {
	position: relative;
	width: min(860px, 100%);
	max-height: 88vh;
	padding: 34px;
	border-radius: 14px;
	background: var(--nhub-surface);
	box-shadow: 0 24px 60px rgba(11, 27, 43, .3);
	overflow-y: auto;
}

.nhub-modal__close {
	position: absolute;
	top: 14px; right: 14px;
	width: 40px; height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--nhub-line-2);
	color: var(--nhub-ink-2);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.nhub-modal__close:hover { background: var(--nhub-line); color: var(--nhub-navy); }

.nhub-profile__head { padding-right: 44px; }
.nhub-profile__head h2 { font-size: 27px; }
.nhub-profile__sub { margin-top: 6px; color: var(--nhub-ink-2); font-size: 15.5px; }

.nhub-profile__desc { margin-top: 18px; color: var(--nhub-ink-2); font-size: 15px; line-height: 1.65; }

.nhub-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-top: 22px;
	padding: 18px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-canvas);
}

.nhub-fact dt { color: var(--nhub-ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nhub-fact dd { margin: 4px 0 0; color: var(--nhub-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.nhub-fact a { color: var(--nhub-blue); word-break: break-word; }

.nhub-subhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 28px 0 12px;
}

.nhub-subhead h3 { font-size: 17px; }

.nhub-people-list { display: flex; flex-direction: column; border: 1px solid var(--nhub-line); border-radius: var(--nhub-radius); overflow: hidden; }

.nhub-people-list button {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	min-height: 56px;
	padding: 14px 18px;
	border: 0;
	border-top: 1px solid var(--nhub-line-2);
	background: var(--nhub-surface);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.nhub-people-list button:first-child { border-top: 0; }
.nhub-people-list button:hover { background: var(--nhub-blue-weak); }
.nhub-people-list strong { color: var(--nhub-navy); font-size: 15px; font-weight: 640; }
.nhub-people-list span { color: var(--nhub-ink-2); font-size: 13.5px; }
.nhub-people-list em { margin-left: auto; color: var(--nhub-blue); font-size: 13px; font-style: normal; font-weight: 600; }

/* -------------------------------------------------------------- insights */

.nhub-grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 14px;
	margin-top: 18px;
}

.nhub-panel {
	padding: 22px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
}

.nhub-panel h3 { font-size: 16px; }
.nhub-panel__note { margin-top: 4px; color: var(--nhub-ink-3); font-size: 12.5px; }

.nhub-bars { display: flex; align-items: flex-end; gap: 10px; height: 200px; margin-top: 20px; }

.nhub-bars__col { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.nhub-bars__fill { width: 100%; max-width: 56px; border-radius: 5px 5px 0 0; background: var(--nhub-navy); }
.nhub-bars__col:last-child .nhub-bars__fill { background: var(--nhub-accent); }
.nhub-bars__value { color: var(--nhub-ink); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.nhub-bars__label { color: var(--nhub-ink-3); font-size: 12px; }

.nhub-meters { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

.nhub-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
.nhub-meter__head b { color: var(--nhub-ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }

.nhub-meter__track { height: 10px; margin-top: 6px; border-radius: 999px; background: var(--nhub-line-2); overflow: hidden; }
.nhub-meter__fill { height: 100%; border-radius: 999px; background: var(--nhub-blue); }
.nhub-meter__fill--2 { background: var(--nhub-navy); }
.nhub-meter__fill--3 { background: var(--nhub-accent); }
.nhub-meter__fill--4 { background: #4e8fa8; }

.nhub-meter { border: 0; padding: 0; background: none; font: inherit; text-align: left; width: 100%; cursor: pointer; }
.nhub-meter:hover .nhub-meter__head { color: var(--nhub-navy); }

.nhub-list { margin: 16px 0 0; padding: 0; list-style: none; }

.nhub-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--nhub-line-2);
	font-size: 14.5px;
}

.nhub-list li:first-child { border-top: 0; }
.nhub-list b { color: var(--nhub-ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }

.nhub-list button {
	border: 0;
	background: none;
	color: var(--nhub-navy);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
}

.nhub-list button:hover { text-decoration-color: currentColor; }

.nhub-table-alt { margin-top: 14px; font-size: 13.5px; }
.nhub-table-alt summary { color: var(--nhub-ink-3); cursor: pointer; }
.nhub-table-alt table { width: 100%; margin-top: 10px; border-collapse: collapse; }
.nhub-table-alt th, .nhub-table-alt td { padding: 6px 8px; border-bottom: 1px solid var(--nhub-line-2); text-align: left; }
.nhub-table-alt th { color: var(--nhub-ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

.nhub-foot {
	margin: 44px 0 20px;
	padding-top: 18px;
	border-top: 1px solid var(--nhub-line);
	color: var(--nhub-ink-3);
	font-size: 12.5px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 860px) {
	.nhub { padding-inline: 16px; }
	.nhub-topbar { flex-wrap: wrap; }
	.nhub-brand { flex: 1 1 100%; }
	.nhub-nav { flex: 1 1 auto; overflow-x: auto; }
	.nhub-hero { padding-top: 30px; }
	.nhub-section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.nhub-spotlight { padding: 24px; }
	.nhub-modal__card { padding: 24px 20px; max-height: 92vh; }
	.nhub-bars { height: 170px; }
}

@media (max-width: 520px) {
	.nhub-metrics { grid-template-columns: repeat(2, 1fr); }
	.nhub-metric b { font-size: 25px; }
	.nhub-cards { grid-template-columns: 1fr; }
	.nhub-select { flex-basis: 100%; }
}

@media print {
	.nhub-topbar, .nhub-quick, .nhub-filters, .nhub-pager, .nhub-hero__actions { display: none; }
}

/* ==========================================================================
   Membership-type directories  [nacds_member_directory] and its aliases
   Built on the same tokens as the hub, so a directory page and the hub page
   next to it are recognisably the same piece of software.
   ========================================================================== */

.nhub-dir { padding-block: 4px; }

.nhub-dir__gate {
	display: flex;
	justify-content: center;
	padding-block: 24px;
}

.nhub-dir__head { margin-bottom: 20px; }

.nhub-dir__title {
	margin-top: 4px;
	font-size: clamp(24px, 3vw, 34px);
}

.nhub-dir__lede {
	margin-top: 8px;
	max-width: 62ch;
	color: var(--nhub-ink-2);
}

.nhub-dir__head .nhub-search { margin-top: 18px; }

.nhub-dir__metrics { margin-bottom: 20px; }

.nhub-dir__tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--nhub-line);
}

.nhub-dir__tab {
	appearance: none;
	border: 0;
	background: none;
	padding: 10px 16px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--nhub-ink-2);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.nhub-dir__tab:hover { color: var(--nhub-navy); }

.nhub-dir__tab.is-active {
	color: var(--nhub-navy);
	border-bottom-color: var(--nhub-blue);
}

/* The table layout, for pages that want the dense list rather than cards.
   Tables do not wrap, so this one scrolls inside its own box instead of
   pushing the whole page sideways on a phone. */
.nhub-dir__tablewrap {
	overflow-x: auto;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
	-webkit-overflow-scrolling: touch;
}

.nhub-dir__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .94em;
}

.nhub-dir__table th,
.nhub-dir__table td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--nhub-line-2);
}

.nhub-dir__table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--nhub-canvas);
	color: var(--nhub-navy);
	font-weight: 650;
	white-space: nowrap;
}

.nhub-dir__table tbody tr:last-child td { border-bottom: 0; }
.nhub-dir__table tbody tr:hover { background: var(--nhub-blue-weak); }
.nhub-dir__table td a { color: var(--nhub-blue); }

.nhub-dir__insights { margin-top: 40px; }
.nhub-dir__insights .nhub-section-head { margin-bottom: 16px; }

/* ==========================================================================
   Standalone sign-in  [nacds_member_login]
   ========================================================================== */

.nhub-signin {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-block: 24px;
}

.nhub-signin--left { align-items: flex-start; }

.nhub-signin .nhub-gate__panel {
	width: 100%;
	max-width: 420px;
}

.nhub-signin__done {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
	box-shadow: var(--nhub-shadow);
}

.nhub-signin__status {
	margin: 0;
	color: var(--nhub-ink-2);
	font-weight: 600;
}

.nhub-alert--standalone {
	max-width: 62ch;
	margin: 16px auto;
}

@media (max-width: 640px) {
	.nhub-dir__tabs { overflow-x: auto; }
	.nhub-signin { align-items: stretch; }
}

/* ==========================================================================
   Portfolio demo skin — forest & brass
   The plugin carries its whole palette in custom properties, so a deployment
   in another association's colours is a stylesheet, not a fork. This is that
   stylesheet: nothing in the plugin itself changes.
   ========================================================================== */

.nhub {
  --nhub-navy:       #12392c;
  --nhub-navy-soft:  #1b4a3a;
  --nhub-blue:       #1f5b45;
  --nhub-blue-weak:  #e4ede8;
  --nhub-accent:     #b5842f;
  --nhub-ink:        #10211b;
  --nhub-ink-2:      #3e5249;
  --nhub-ink-3:      #6a7d73;
  --nhub-line:       #d8dfd9;
  --nhub-line-2:     #ebf0ec;
  --nhub-surface:    #ffffff;
  --nhub-canvas:     #f3f6f3;
  --nhub-good:       #1f5b45;

  --nhub-field-bg:      rgba(15, 58, 44, .18);
  --nhub-field-border:  rgba(15, 58, 44, .40);
  --nhub-field-ink:     #0f3a2c;
  --nhub-icon:          #1f5b45;
}

/* The four-way meter ramp: forest, deep forest, brass, sage — one family, four
   steps, rather than four unrelated hues. */
.nhub-meter__fill--4 { background: #6e9c84; }

/* Membership badges follow the same family. */
.nhub-badge--chain     { background: #e4ede8; color: #12392c; }
.nhub-badge--associate { background: #eef0e4; color: #4a5a1f; }
.nhub-badge--intl      { background: #f6eede; color: #7a5312; }