/* lane-directory.css
   Directory lane components: search-forward listing hero, faceted filter
   rail, supplier result cards, windowed pagination, supplier profile as a
   company front page (identity block, contact form composed into the rail,
   capability and certification fact blocks, quiet provenance, integrated
   ad slot), plus categories, compare, and house-ad shared rules.
   Loaded via templates/base.html extra_head — not part of the manifest bundle. Rules here are unlayered and outrank layered components. Values use tokens
   from 01-settings.css. Media-query literals mirror --bp-sm (40rem) and
   --bp-lg (64rem), because custom properties are not valid in media-query
   conditions. */

/* ---- supplier_list: search-forward hero ---- */
.dir-search {
  display: flex;
}
.dir-search input {
  flex: 1;
  min-width: 0;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-family: inherit;
  color: inherit;
}
.dir-search input:focus-visible {
  border-color: var(--brand-300);
  outline: 3px solid rgb(255 255 255 / 0.65);
  outline-offset: 2px;
}
.dir-search-modes a { text-decoration: none; white-space: nowrap; }
.dir-stats {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: var(--space-2) var(--space-6);
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--hairline);
}
.dir-stats__item { display: flex; align-items: baseline; gap: var(--space-2); }
.dir-stats dt { color: var(--muted); font-size: var(--text-small); }
.dir-stats dd { margin: 0; font-weight: var(--weight-semibold); }

/* ---- supplier_list: faceted filter rail ---- */
.dir-ad-rail { margin-block: var(--space-6); }
.dir-ad-rail .house-ad { margin: 0; }
.dir-rail__panel {
  padding: 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--surface);
}
.dir-rail__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
}
.dir-rail__head::-webkit-details-marker { display: none; }
.dir-rail__head::after { width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); content: ""; transform: rotate(45deg); transition: transform var(--duration) var(--ease); }
.dir-rail__panel[open] > .dir-rail__head::after { transform: rotate(225deg); }
.dir-rail__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); }
.dir-rail__applied { color: var(--brand-700); font-size: var(--text-caption); font-weight: var(--weight-semibold); }
.dir-rail__count {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--text-small);
}
.dir-rail__clear {
  display: inline-block;
  margin: 0.75rem 0 0;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--brand-700);
}
.dir-rail__body { padding: 0; }
.dir-within { padding: var(--space-4) 0; border-block: 1px solid var(--hairline); }
.dir-within label { display: block; margin-bottom: var(--space-2); font-size: var(--text-small); font-weight: var(--weight-semibold); }
.dir-within > div { display: flex; gap: var(--space-2); }
.dir-within input { min-width: 0; width: 100%; min-height: 2.5rem; }
.dir-active { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.dir-facet { padding: var(--space-4) 0; border-bottom: 1px solid var(--hairline); }
.dir-facet + .dir-facet { margin-top: 0; }
.dir-facet__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.dir-facet__title::-webkit-details-marker { display: none; }
.dir-facet__title::after { content: "+"; color: var(--muted); font-size: 1rem; line-height: 1; }
.dir-facet[open] > .dir-facet__title::after { content: "\2212"; }
.dir-facet__option-count { margin-left: auto; color: var(--muted); font-family: var(--font-mono); font-size: var(--text-caption); font-weight: var(--weight-regular); }
.dir-facet:not([open]) > .dir-facet__title { margin-bottom: 0; }
.dir-facet__list { display: flex; flex-direction: column; }
.dir-facet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  min-height: 2.125rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--text-small);
  text-decoration: none;
}
.dir-facet__name { flex: 1 1 auto; }
.dir-facet__link:hover { background: var(--brand-50); color: var(--brand-700); }
.dir-facet__count {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

/* shared rail pieces still used by category and capability pages */
.facet-group { margin: var(--space-4) 0 var(--space-1); }
.filters--stack { flex-direction: column; align-items: stretch; gap: var(--space-1); }
.filters--stack .filter-link { text-align: left; }

/* ---- supplier_list: results head + sort dropdown ---- */
.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.results-head h2 { margin-bottom: 0; }
.results-range { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-small); }
.sort-form { display: flex; align-items: center; gap: var(--space-2); }
.sort-form__submit[hidden] { display: none; }

/* ---- supplier_list: supplier cards ---- */
.dir-results { display: grid; align-items: stretch; }
.dir-card {
  position: relative;
  display: grid;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}
.dir-card:hover { border-color: var(--brand-400); }
.dir-card__select { display: grid; place-items: start center; grid-column: 1; grid-row: 1 / span 3; width: var(--control-h); min-height: var(--control-h); margin-left: calc((var(--control-h) - 1.25rem) / -2); padding-top: var(--space-2); cursor: pointer; }
.dir-card__select input { width: 1rem; height: 1rem; accent-color: var(--brand-700); }
.dir-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  grid-column: 2;
  padding: 0;
}
.dir-card__logo-link { flex: 0 0 auto; }
.supplier-card__logo {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  padding: var(--space-1);
  border: var(--space-0) solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.supplier-card__logo--initials {
  display: grid;
  place-items: center;
  border: var(--space-0) solid var(--hairline);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
}
.dir-card__head-main { flex: 1 1 auto; min-width: 0; }
.dir-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}
.dir-card__identity { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-small); }
.dir-card__verification-note { color: var(--muted); }
.dir-card__main { grid-column: 2; }
.dir-card__title a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  color: var(--ink);
  text-decoration: none;
}
.dir-card__title a:hover { color: var(--brand-600); text-decoration: underline; }
.dir-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}
.dir-chip {
  padding: var(--space-1) var(--space-2);
  border: var(--space-0) solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}
.dir-card__none {
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}
.dir-card__evidence {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: var(--space-0) solid var(--hairline);
  color: var(--muted);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}
.dir-card__match {
  color: var(--brand-700);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}
.dir-card__foot {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.dir-card__foot .btn { justify-content: center; }
.dir-selection { position: fixed; inset: auto 0 0; z-index: var(--z-overlay); min-height: 4.5rem; padding: var(--space-3) 0; border-top: 1px solid var(--hairline); background: var(--brand-900); color: var(--surface); box-shadow: 0 -4px 12px rgb(19 33 28 / 0.12); }
.dir-selection .o-wrap { display: flex; align-items: center; gap: var(--space-4); }
.dir-selection__names { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-small); }
body.has-directory-selection { padding-bottom: var(--dir-selection-height, 4.5rem); }
.dir-card__shortlist { margin: 0; }

/* ---- supplier_list: windowed pagination ---- */
.dir-pagination { margin-top: var(--space-6); }
.dir-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.dir-pagination__item { display: flex; }
.dir-pagination a,
.dir-pagination span:not(.dir-pagination__gap) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-2);
  border: var(--space-0) solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
}
.dir-pagination a:hover { border-color: var(--brand-600); color: var(--brand-700); }
.dir-pagination [aria-current="page"] {
  border-color: var(--brand-600);
  background: var(--brand-600);
  color: var(--surface);
}
.dir-pagination [aria-disabled="true"] { color: var(--muted); opacity: 0.55; }
.dir-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  color: var(--muted);
}

/* ---- supplier_detail: layout ---- */
.supplier-layout { grid-template-columns: minmax(0, 1fr) calc(var(--space-9) * 3 + var(--space-3)); align-items: start; }
.supplier-layout > .o-stack { grid-column: 1; }
.supplier-layout > .supplier-facts { grid-column: 2; }
/* supplier detail renders single-column: no rail, 900px column, 48px below the nav */
.supplier-layout.supplier-layout--single { grid-template-columns: minmax(0, 1fr); max-width: 56.25rem; margin-top: var(--space-5); }
.supplier-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* ---- supplier_detail: identity block ---- */
.supplier-profile__hero { border-bottom: var(--space-0) solid var(--hairline); }
.supplier-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.supplier-identity__main { min-width: 0; }
.supplier-profile__logo { margin: 0; }
.supplier-profile__logo img {
  display: block;
  width: 7.5rem;
  height: 7.5rem;
  object-fit: contain;
  padding: var(--space-2);
  border: var(--space-0) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
.supplier-profile__initials {
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  border: var(--space-0) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--weight-bold);
}
.supplier-profile__location {
  margin-bottom: var(--space-2);
  color: var(--brand-700);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.supplier-profile__name { max-width: var(--measure); margin-bottom: var(--space-3); }
.supplier-profile__trust-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--text-small);
}
.supplier-profile__summary { max-width: var(--measure); }
.supplier-profile__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--wrap-max);
  margin: var(--space-5) 0 0;
  border-block: var(--space-0) solid var(--hairline);
}
.supplier-profile__fact { padding: var(--space-4); border-right: var(--space-0) solid var(--hairline); }
.supplier-profile__fact:first-child { padding-left: 0; }
.supplier-profile__fact:last-child { border-right: 0; }
.supplier-profile__fact dt {
  margin-bottom: var(--space-1);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.supplier-profile__fact dd { margin: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.supplier-profile__fact dd a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: var(--brand-700);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.supplier-profile__fact dd a:hover { text-decoration: underline; }
.supplier-profile__actions { margin-top: var(--space-5); }
.supplier-profile__actions .btn { min-height: var(--control-h); }
.supplier-profile__actions .btn--primary { min-height: 3rem; padding-inline: 1.5rem; }
.supplier-profile__services { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; }
.supplier-profile__services .supplier-capability { text-decoration: none; }
.supplier-profile__action-form { margin: 0; }
.supplier-profile-nav { position: sticky; top: var(--header-h); z-index: var(--z-sticky); border-block: 1px solid var(--hairline); background: var(--surface); }
.supplier-profile-nav .o-wrap { display: flex; align-items: center; gap: var(--space-5); overflow-x: auto; }
.supplier-profile-nav a { flex: 0 0 auto; padding: var(--space-3) 0 calc(var(--space-3) - 3px); border-bottom: 3px solid transparent; color: var(--ink); font-size: var(--text-small); font-weight: var(--weight-semibold); text-decoration: none; }
.supplier-profile-nav a:hover, .supplier-profile-nav a:focus-visible { border-bottom-color: var(--brand-700); color: var(--brand-700); }

/* ---- supplier_detail: contact form composed into the rail ---- */
.supplier-contact {
  padding: var(--space-5);
  border: var(--space-0) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.supplier-contact h2 { margin-bottom: var(--space-2); }
.supplier-contact__direct { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.supplier-contact__direct div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-3); }
.supplier-contact__direct dt { color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-semibold); }
.supplier-contact__direct dd { margin: 0; overflow-wrap: anywhere; }
.supplier-contact__direct a { font-weight: var(--weight-semibold); }
.supplier-contact__form-heading { margin: var(--space-5) 0 var(--space-2); padding-top: var(--space-4); border-top: var(--space-0) solid var(--hairline); }
.supplier-contact__note { margin: 0; color: var(--muted); font-size: var(--text-small); }
.supplier-contact .alert { margin-top: var(--space-3); }
.supplier-contact__form { margin-top: var(--space-4); }
.supplier-contact__form .form-field { margin-bottom: var(--space-3); }
.supplier-contact__form .form-field__label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}
.supplier-contact__form .form-actions { margin-top: var(--space-3); }
.supplier-contact__form .form-actions .btn { width: 100%; min-height: var(--control-h); }
.dir-browse .form-actions .btn { min-height: var(--control-h); }

/* ---- supplier_detail: provenance, quiet but visible ---- */
.fact-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.fact-list dt { font-weight: var(--weight-semibold); color: var(--muted); }
.fact-list dd { margin: 0; }
.fact-list__value--url { overflow-wrap: anywhere; }
.supplier-provenance { box-shadow: none; }
.supplier-provenance .card__body { padding-top: var(--space-4); }
.supplier-provenance__note { color: var(--muted); font-size: var(--text-caption); line-height: var(--leading-body); }
.supplier-provenance__claim {
  padding-top: var(--space-3);
  border-top: var(--space-0) solid var(--hairline);
  font-size: var(--text-small);
}
.supplier-contact__form .form-field__control[aria-invalid="true"] { border-color: var(--danger); }

/* ---- supplier_detail: fact sections ---- */
.supplier-section > h2 {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--space-0) solid var(--ink);
}
.supplier-company-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.supplier-company-details div { padding-bottom: var(--space-3); border-bottom: var(--space-0) solid var(--hairline); }
.supplier-company-details dt { color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-semibold); }
.supplier-company-details dd { margin: var(--space-1) 0 0; font-weight: var(--weight-semibold); }
.supplier-facility {
  padding: var(--space-5);
  border: var(--space-0) solid var(--hairline);
  border-left: var(--space-1) solid var(--brand-600);
  background: var(--surface);
}
/* last facility card: drop its utility margin so the 48px stack gap is the only rhythm */
.supplier-section > .supplier-facility:last-child { margin-bottom: 0; }
.supplier-facility__header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.supplier-facility__name { margin: 0; }
.supplier-facility__address { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-small); }
.supplier-facility__contact { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-small); }
.supplier-facility__capabilities { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--space-0) solid var(--hairline); }
.supplier-capability,
.supplier-capabilities__item {
  padding: var(--space-2) var(--space-3);
  border: var(--space-0) solid var(--hairline);
  background: var(--paper);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}
.supplier-capabilities__scope {
  color: var(--muted);
  font-weight: var(--weight-regular);
}
.supplier-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.supplier-certification { box-shadow: none; }
.supplier-certification .card__header { border-top: var(--space-1) solid var(--brand-600); }
.product-list li { padding-block: var(--space-2); border-bottom: var(--space-0) solid var(--hairline); }
.product-list li:last-child { border-bottom: 0; }

@media (min-width: 40.01rem) { .dir-rail { position: sticky; top: calc(var(--header-h) + 1rem); z-index: 1; max-height: calc(100vh - var(--header-h) - var(--space-6)); overflow: auto; background: var(--surface); } }

/* ---- numeric figures ---- */
.directory-count,
.stat strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.stat strong { font-size: var(--text-h1); }

/* ---- home + categories ---- */
/* Section rhythm: first section after the hero is flush (hero bottom
   padding is the header-to-content gap); sections space each other. */
.home-section + .home-section { margin-top: var(--space-7); }
.home-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); max-width: var(--measure); }
.home-section__head p { color: var(--muted); }
.trust-strip { background: var(--surface); border: var(--space-0) solid var(--hairline); border-radius: var(--radius); padding: var(--space-6); }
.trust-strip .stats { margin-top: var(--space-5); }
.category-tree, .category-tree ul { list-style: none; padding-left: 0; margin: 0; }
.category-tree ul { padding-left: var(--space-5); border-left: var(--space-0) solid var(--hairline); margin-left: var(--space-2); }
.category-tree li { margin-top: var(--space-2); }
.category-node__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--space-0) solid var(--hairline); }
.category-tree > li:last-child > .category-node__row { border-bottom: 0; }
.category-directory { margin-top: 1.5rem; }
.category-tree--index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.category-tree--index > li { min-width: 0; margin: 0; padding-top: 0.75rem; border-top: 3px solid var(--ink); }
.category-tree--index > li > .category-node__row { padding: 0 0 0.75rem; border-bottom: 1px solid var(--hairline); }
.category-tree--index > li > .category-node__row .category-node__link { font: 600 1.125rem/1.5rem var(--font-serif); }
.category-tree--index > li > .category-node__children { margin-top: 0.5rem; margin-left: 0; padding-left: 0; border-left: 0; }
.category-tree--index > li > .category-node__children .category-node__row { padding-inline: 0; }
.category-node__row:hover { background: var(--brand-50); }
.category-node__link { font-weight: var(--weight-semibold); color: var(--ink); }
.category-node__link:hover { color: var(--brand-600); }
.category-node__children { list-style: none; margin: 0 0 0 var(--space-5); padding: 0 0 0 var(--space-5); border-left: var(--space-0) solid var(--hairline); }
.category-node__children .category-node__row { padding: var(--space-2) var(--space-4); border-bottom: 0; }
.category-node__children .category-node__link { font-weight: var(--weight-medium); font-size: var(--text-small); }

/* mobile: sections and cards shrink proportionally */
@media (max-width: 40rem) {
  .category-tree--index { grid-template-columns: 1fr; gap: 1.5rem; }
  .home-section + .home-section { margin-top: var(--space-6); }
  .trust-strip { padding: var(--space-5); }
}

.category-index {
  column-count: 3;
  column-gap: var(--space-6);
  margin-top: var(--space-6);
}

.category-index__group {
  break-inside: avoid;
  margin-bottom: var(--space-3);
}

.category-index__letter {
  font-size: var(--text-h3);
  border-bottom: 2px solid var(--ink);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
}

.category-index__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-index__links li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  min-height: var(--control-h);
  padding: 0;
  font-size: var(--text-small);
}

.category-index__links a {
  color: var(--ink);
  text-decoration: none;
  padding-inline: 4px;
  margin-inline: -4px;
  border-radius: 2px;
}

.category-index__links a:hover {
  color: var(--brand-700);
  text-decoration: underline;
  background: var(--brand-50);
}

.category-index__links .u-muted {
  background: var(--muted-bg);
  border-radius: 999px;
  font-size: var(--text-caption);
  margin-left: var(--space-1);
  padding: 0 6px;
}

.category-index__letter {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-3);
}

.category-index__letter:first-child,
.category-index__group:first-child .category-index__letter { border-top: 0; }

@media (max-width: 48rem) { .category-index { column-count: 2; column-gap: var(--space-7); } }
@media (max-width: 30rem) { .category-index { column-count: 1; } }

/* Category-page search form inside the hero */
.dir-cat-search {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  max-width: 28rem;
  height: var(--control-h);
}

.dir-cat-search input {
  flex: 1;
  min-width: 0;
  min-height: var(--control-h);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  height: 100%;
  padding: 0 var(--space-3);
}

.dir-cat-search input:focus {
  border-color: var(--brand-700);
  box-shadow: 0 0 0 3px var(--brand-100);
  outline: 0;
}

.dir-cat-search .btn {
  height: 100%;
  min-height: var(--control-h);
}

.dir-cat-stat {
  background: var(--paper);
  border-radius: 999px;
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  margin: 0 2px;
  padding: 1px 8px;
}

/* A–Z jump bar */
.cat-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  background: var(--surface);
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
}

.cat-jump::-webkit-scrollbar { display: none; }

.cat-jump__link {
  align-items: center;
  color: var(--ink);
  display: flex;
  border: 1px solid transparent;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  height: 1.75rem;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0 4px;
  text-decoration: none;
}

.cat-jump__link:hover {
  background: var(--brand-50);
  color: var(--brand-700);
  border-color: var(--brand-300);
}

.cat-jump__link:focus-visible {
  border-color: var(--brand-300);
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* Category footer cross-links */
.cat-footer {
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: 48px;
  padding: 24px 0;
}

.cat-footer__link {
  color: var(--brand-700);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.cat-footer__link:hover {
  text-decoration: underline;
}

@media (max-width: 30rem) {
  .cat-footer { justify-content: center; }
}

.category-index {
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

/* ---- compare: sticky first column, decision cards, persistent contact ---- */
.table--sticky-col th:first-child,
.table--sticky-col td:first-child {
  position: sticky;
  left: 0;
  z-index: var(--z-sticky);
  background: var(--surface);
  box-shadow: var(--space-0) 0 0 var(--hairline);
}

/* decision summary cards: hidden on wide screens, shown below --bp-sm */
.compare-cards { display: none; }
.compare-scroll-hint { display: none; color: var(--muted); font-size: var(--text-small); }
.compare-scroll:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.compare-matrix th, .compare-matrix td { min-width: 12rem; vertical-align: top; }
.compare-matrix th:first-child { min-width: 9rem; }
.compare-matrix thead th { font-family: var(--font-sans); font-size: var(--text-small); }
.compare-matrix tbody th { color: var(--muted); font-size: var(--text-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.compare-matrix td form { margin-top: var(--space-2); }

/* persistent contact bar: stays visible while the comparison scrolls */
.compare-actions {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  background: var(--surface);
  border-top: var(--space-0) solid var(--hairline);
}

@media (max-width: 40rem) {
  .compare-scroll {
    display: none;
  }
  .compare-cards { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
  .compare-scroll-hint { display: none; }
}

/* ---- mobile readability pass: phone tap targets, type floor, calm reflow ----
   Additive, small-screen only; desktop density unchanged. */
@media (max-width: 40rem) {
  /* search-forward hero stacks and holds 360px width */
  .dir-stats { gap: var(--space-2) var(--space-4); }

  /* tap targets: interactive elements meet the control-height token */
  .filter-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h);
  }
  .filters--stack .filter-link { justify-content: flex-start; }

  .category-node__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h);
  }
  .category-node__children {
    margin-left: var(--space-2);
    padding-left: var(--space-3);
  }
  .category-node__row { padding-inline: var(--space-2); }

  .results-head .btn,
  .card__footer .btn,
  .compare-actions .btn,
  .sort-form select {
    min-height: var(--control-h);
  }

  /* type floor at the 640px breakpoint: nothing below the small token */
  .hero .eyebrow,
  .card .badge,
  .compare-cards .badge,
  .filter-link {
    font-size: var(--text-small);
  }
  .dir-chip,
  .dir-card__fact {
    font-size: var(--text-small);
  }

  /* supplier cards: full-width actions, tighter padding */
  .dir-card { grid-template-columns: 1.25rem minmax(0, 1fr); padding: var(--space-4); }
  .dir-card__head { grid-column: 2; padding: 0; }
  .dir-card__main { grid-column: 2; }
  .dir-card__foot { grid-column: 2; grid-row: auto; margin-top: var(--space-4); }
  .supplier-card__logo,
  .supplier-card__logo--initials { width: 3rem; height: 3rem; }
  .dir-card__foot .btn { flex: 1 1 100%; min-height: var(--control-h); }
  .dir-card__foot .dir-card__shortlist { flex: 1 1 100%; }
  .dir-card__shortlist .btn { width: 100%; }
  .dir-selection .o-wrap { flex-wrap: wrap; gap: var(--space-2); }
  .dir-selection__names { order: 4; flex-basis: 100%; }

  /* pagination: touch-friendly page buttons */
  .dir-pagination a,
  .dir-pagination span:not(.dir-pagination__gap) { min-width: 2.75rem; min-height: 2.75rem; }

  /* decision facts: stack cramped rows, wrap long values */
  .fact-list { grid-template-columns: 1fr; }
  .fact-list dd {
    margin-bottom: var(--space-2);
    overflow-wrap: anywhere;
  }

  /* supplier profile: identity stacks, two-column facts, full-width actions */
  .supplier-identity { grid-template-columns: 1fr; }
  .supplier-profile__logo img,
  .supplier-profile__initials { width: 5.5rem; height: 5.5rem; }
  .supplier-profile__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-profile__fact { padding: var(--space-3) 0; border-right: 0; border-bottom: var(--space-0) solid var(--hairline); }
  .supplier-profile__fact:nth-child(odd) { padding-right: var(--space-3); border-right: var(--space-0) solid var(--hairline); }
  .supplier-profile__fact:nth-child(even) { padding-left: var(--space-3); }
  .supplier-profile__fact:nth-last-child(-n + 2) { border-bottom: 0; }
  .supplier-profile__actions { display: grid; grid-template-columns: 1fr; }
  .supplier-profile__actions .btn,
  .supplier-profile__actions form,
  .supplier-profile__actions form .btn { width: 100%; }
  .supplier-facility { padding: var(--space-4); }
  .supplier-capabilities { grid-template-columns: 1fr; }
  .supplier-contact { padding: var(--space-4); }

  /* card tables: long values wrap instead of forcing overflow */
  .card .table td { overflow-wrap: anywhere; }
}

/* ---- featured_products: letter tile placeholder for cards without media ---- */
.card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--space-8);
  background: var(--brand-50);
  border-bottom: 1px solid var(--hairline);
  color: var(--brand-700);
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h3);
}

/* ---- house ad slots: quiet ruled placeholders linking to advertise ----
   The listing slot spans the results grid after row six; the detail
   slot sits at the foot of the listing-status column. */

.supplier-facts .house-ad {
  margin-top: var(--space-5);
}

.house-ad__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

.house-ad__card {
  display: block;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: var(--space-1) solid var(--ink);
  border-bottom: var(--space-0) solid var(--hairline);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.house-ad__card:hover,
.house-ad__card:focus-visible {
  background: var(--brand-50);
}

.house-ad__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--ink);
}

.house-ad__body {
  margin: var(--space-2) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--muted);
}

.house-ad__cta {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

/* ---- measured Directory refinement: Thomas-inspired geometry in IBM Plex ---- */
.dir-hero .o-wrap { max-width: 90rem; }
.supplier-profile__hero .o-wrap,
.supplier-profile-nav .o-wrap,
#overview.o-wrap { max-width: 56.25rem; }

.dir-hero { padding: 1.5rem 0; }
.dir-hero--results { padding: 1rem 0; }
.dir-hero__intro { max-width: 48rem; }
.dir-hero__intro .eyebrow { margin-bottom: 0.375rem; }
.dir-hero__title { margin: 0; font: 600 2.25rem/2.625rem var(--font-sans); letter-spacing: -0.02em; }
.dir-hero__lede { max-width: 44rem; margin-top: 0.375rem; font: 400 1rem/1.5rem var(--font-sans); }
.dir-search-panel { width: 100%; max-width: 64rem; margin-top: 1rem; overflow: hidden; background: var(--brand-900); color: var(--surface); }
.dir-search-modes { display: flex; align-items: stretch; gap: 0; height: 2.75rem; margin: 0; overflow-x: auto; border-bottom: 1px solid rgb(255 255 255 / 0.25); }
.dir-search-modes a { display: grid; place-items: center; flex: 0 0 auto; min-width: 0; padding: 0 1rem; border-bottom: 3px solid transparent; color: var(--surface); font: 600 0.875rem/1.25rem var(--font-sans); }
.dir-search-modes a:hover,
.dir-search-modes a:focus-visible { background: rgb(255 255 255 / 0.08); }
.dir-search-modes a:focus-visible { outline: 2px solid var(--surface); outline-offset: -4px; }
.dir-search-modes a.is-active { border-bottom-color: var(--brand-300); background: var(--brand-800); }
.dir-search { width: 100%; max-width: none; margin: 0; padding: 0.75rem; gap: 0.5rem; }
.dir-search input { min-height: var(--control-h); height: auto; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font: 400 1rem/1.5rem var(--font-sans); }
.dir-search .btn { flex: 0 0 6.5rem; width: 6.5rem; min-height: var(--control-h); padding: 0 0.75rem; border-color: var(--brand-500); border-radius: var(--radius-sm); background: var(--brand-500); }
.dir-search .btn:hover { border-color: var(--brand-600); background: var(--brand-600); }
.dir-search .btn:focus-visible { outline: 3px solid rgb(255 255 255 / 0.75); outline-offset: 2px; }
.dir-popular { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1rem; font: 400 0.875rem/1.25rem var(--font-sans); }
.dir-popular > div { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0; }
.dir-popular a { display: flex; align-items: center; min-height: 2rem; padding: 0; border-radius: 0; background: transparent; color: var(--brand-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-underline-offset: 0.2em; }
.dir-popular a:hover { background: transparent; color: var(--brand-800); }
.dir-stats { margin-top: 1rem; }
.dir-category-hero { padding: 2rem 0; border-bottom: 1px solid var(--hairline); }
.dir-category-hero h1 { margin: 0.25rem 0 0.75rem; font: 600 2rem/2.375rem var(--font-sans); letter-spacing: -0.015em; }
.dir-category-hero > .o-wrap > p:not(.results-range) { max-width: 56.25rem; font: 400 1rem/1.5625rem var(--font-sans); }
.dir-category-search { max-width: 56.25rem; margin-top: 1.5rem; padding: 0; }

.directory-layout { display: block; min-width: 0; max-width: 80rem; padding-top: 1.25rem; }
.directory-layout--no-ad { display: grid; min-width: 0; max-width: 80rem; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: start; padding-top: 1.25rem; }
.directory-layout > section { min-width: 0; }
.dir-filter-toolbar { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.75rem; overflow-x: auto; scrollbar-width: thin; }
.dir-filter-trigger { display: inline-flex; align-items: center; flex: 0 0 auto; height: 2.25rem; padding: 0 0.875rem; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 0.8125rem/1rem var(--font-sans); cursor: pointer; }
.dir-filter-trigger:hover,
.dir-filter-trigger:focus-visible { border-color: var(--brand-600); color: var(--brand-700); }
.dir-filter-trigger:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.dir-filter-trigger__status { color: var(--brand-700); font-size: 0.6875rem; }
.dir-filter-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.4); }
.dir-filter-dialog { position: fixed; inset: 0 0 0 auto; z-index: 41; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(27rem, 100vw); height: 100dvh; border-left: 1px solid var(--hairline); background: var(--surface); box-shadow: -0.5rem 0 1.5rem rgb(0 0 0 / 0.12); }
.dir-filter-dialog[hidden],
.dir-filter-backdrop[hidden] { display: none; }
.dir-filter-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--hairline); }
.dir-filter-dialog__header h2 { margin: 0; font: 600 1.25rem/1.625rem var(--font-sans); }
.dir-filter-dialog__header .directory-count { color: var(--muted); font: 400 0.8125rem/1.125rem var(--font-sans); }
.dir-filter-dialog__close { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.dir-filter-dialog__close:hover,
.dir-filter-dialog__close:focus-visible { border-color: var(--brand-600); color: var(--brand-700); }
.dir-filter-dialog__body { min-height: 0; padding: 0 1rem; overflow-y: auto; }
.dir-filter-dialog__actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem; border-top: 1px solid var(--hairline); background: var(--surface); }
.dir-filter-dialog__actions .btn { min-width: 8rem; }
body.has-filter-dialog { overflow: hidden; }
.dir-rail__head { min-height: 2.5rem; padding: 0 0 0.75rem; border-bottom: 1px solid var(--hairline); }
.dir-rail__panel[open] > .dir-rail__head { border-bottom-color: var(--brand-500); color: var(--brand-700); }
.dir-rail__title { font: 600 1rem/1.5rem var(--font-sans); }
.dir-filter-actions { position: sticky; bottom: 0; z-index: 1; padding-top: 1rem; background: var(--surface); }
.dir-filter-actions .btn { width: 100%; }
.dir-within { padding: 1rem 0; }
.dir-within input { height: 2.5rem; min-height: 2.5rem; }
.dir-active { gap: 0.5rem; margin: 0 0 1rem; }
.dir-active .filter-link { min-height: 1.75rem; padding: 0.25rem 0.625rem; border-radius: 0.875rem; font-size: 0.75rem; line-height: 1rem; }
.dir-facet { padding: 0.875rem 0; }
.dir-facet__title { margin-bottom: 0.375rem; color: var(--ink); font: 600 0.8125rem/1.125rem var(--font-sans); letter-spacing: 0; text-transform: none; }
.dir-facet:not([open]) > .dir-facet__title { margin-bottom: 0; }
.dir-facet__list { gap: 0; }
.dir-facet__link { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) max-content; align-items: start; min-height: 2.25rem; padding: 0.5rem 0; border-radius: 2px; font: 400 0.875rem/1.25rem var(--font-sans); cursor: pointer; }
.dir-facet__link input { flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; margin: 0 0.125rem 0 0; accent-color: var(--brand-700); }
.dir-facet__link:hover { background: transparent; color: var(--brand-700); }
.dir-facet__link:focus-within { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.dir-facet__link:has(input:checked) { background: var(--paper); color: var(--brand-800); font-weight: 600; }
.dir-facet__count { text-align: right; font: 400 0.75rem/1rem var(--font-mono); font-variant-numeric: tabular-nums; }

.results-head { min-height: 3.5rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--hairline); }
.results-head h2 { font: 600 1.375rem/1.75rem var(--font-sans); }
.results-range { font: 400 0.875rem/1.25rem var(--font-sans); }
.sort-form select { width: 10rem; min-height: 2.5rem; }
.dir-results { gap: 0.75rem; }
.dir-card { min-height: 0; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0 1rem; padding: 1rem; border: 1px solid var(--hairline); border-radius: 2px; }
.supplier-card__logo { width: 4rem; height: 4rem; padding: 0.25rem; border: 1px solid var(--hairline); border-radius: 2px; }
.dir-card__title { font: 600 1.25rem/1.625rem var(--font-sans); }
.dir-card__title a { min-height: 0; }
.dir-card__identity { margin-top: 0.5rem; font: 400 0.8125rem/1.125rem var(--font-sans); }
.dir-card__chips { gap: 0.5rem; margin-top: 0.75rem; }
.dir-chip { padding: 0.1875rem 0.5rem; border: 1px solid var(--hairline); border-radius: 2px; background: var(--paper); font: 500 0.75rem/1rem var(--font-sans); }
.dir-card__desc { margin-top: 0.75rem; color: var(--ink); font: 400 0.875rem/1.375rem var(--font-sans); -webkit-line-clamp: 2; }
.dir-card__evidence { gap: 0.5rem 1rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); font: 400 0.8125rem/1.125rem var(--font-sans); }
.dir-card__head,
.dir-card__main,
.dir-card__foot { grid-column: 2; }
.dir-card__foot { grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.dir-card__foot .btn { width: auto; min-height: 2.25rem; border-radius: 2px; font-size: 0.875rem; }
.dir-card__website { border-color: transparent; background: transparent; color: var(--brand-700); text-decoration: underline; }
.dir-selection { min-height: 4.5rem; padding: 0.75rem 0; }

.supplier-profile__hero { padding: 2rem 0 1.5rem; }
.supplier-identity { gap: 1.5rem; }
.supplier-profile__logo img,
.supplier-profile__initials { width: 6rem; height: 6rem; padding: 0.5rem; border: 1px solid var(--hairline); border-radius: 2px; }
.supplier-profile__location { margin-bottom: 0.5rem; font-size: 0.8125rem; line-height: 1.125rem; }
.supplier-profile__name { margin-bottom: 1rem; font: 600 2.25rem/2.625rem var(--font-sans); letter-spacing: -0.02em; }
.supplier-profile__trust-line { margin-bottom: 1rem; }
.supplier-profile__summary { max-width: 47.5rem; font: 400 1rem/1.5625rem var(--font-sans); }
.supplier-profile__facts { margin-top: 1.5rem; }
.supplier-profile__fact { padding: 1rem; }
.supplier-profile__actions { margin-top: 1.5rem; }
.supplier-profile-nav { height: 3rem; }
.supplier-profile-nav .o-wrap { height: 100%; gap: 1.25rem; }
.supplier-profile-nav a { height: 100%; padding: 0.75rem 0 calc(0.75rem - 3px); font: 600 0.875rem/1.25rem var(--font-sans); }
.supplier-layout { grid-template-columns: minmax(0, 1fr) 18.75rem; gap: 1.5rem; }
.supplier-section { padding-top: 0; }
.supplier-section > h2 { margin-bottom: 1.5rem; padding-bottom: 0.75rem; font: 600 1.5rem/1.875rem var(--font-serif); }
#overview,
#capabilities-heading,
#products-heading,
#certifications-heading,
#facilities-heading,
#catalogs-heading,
#contact {
  scroll-margin-top: calc(var(--header-h) + 4rem);
}
.supplier-contact { padding: 1rem; border: 1px solid var(--hairline); border-radius: 2px; box-shadow: none; }
.supplier-contact h2 { font: 600 1.5rem/1.875rem var(--font-serif); }
.supplier-contact__form .form-field { margin-bottom: 0.75rem; }
.supplier-contact__form .form-field__control { min-height: 2.5rem; }
.supplier-facility { padding: 1rem; border: 1px solid var(--hairline); border-left: 3px solid var(--brand-600); }

/* Supplier document rows — catalogs, line cards, brochures. Each row
   carries title + metadata on the left and one action on the right.
   The section and nav link render only when supplier_documents exists. */
.supplier-documents {
  list-style: none;
  margin: 0;
  padding: 0;
}

.supplier-document {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
}

.supplier-document + .supplier-document {
  margin-top: 0.75rem;
}

.supplier-document__main {
  min-width: 0;
}

.supplier-document__title {
  margin: 0;
  font: 600 1rem/1.5rem var(--font-sans);
  overflow-wrap: anywhere;
}

.supplier-document__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  margin: 0.375rem 0 0;
  color: var(--muted);
  font: 400 0.8125rem/1.25rem var(--font-sans);
}

.supplier-document__type {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.supplier-document__action {
  flex: 0 0 auto;
}

@media (max-width: 40rem) {
  .supplier-document { align-items: flex-start; flex-direction: column; }
  .supplier-document__action { width: 100%; }
}
.supplier-capability,
.supplier-capabilities__item { padding: 0.5rem 0.75rem; border: 1px solid var(--hairline); font-size: 0.875rem; }
.supplier-capability,
.supplier-capabilities__item { background: var(--brand-50); color: var(--brand-700); border-color: transparent; }
.supplier-profile__claim { color: var(--brand-700); font-weight: var(--weight-semibold); }
.compare-matrix th,
.compare-matrix td { min-width: 13.75rem; padding: 1rem; }
.compare-matrix th:first-child { min-width: 12rem; }
.compare-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }

@media (max-width: 80rem) {
  .directory-layout--no-ad { grid-template-columns: 15rem minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .directory-layout--no-ad { grid-template-columns: 1fr; }
  .dir-rail { position: static; max-height: none; overflow: visible; }
}

@media (max-width: 64rem) {
  .supplier-layout {
    grid-template-columns: 1fr;
  }

  .supplier-layout > .o-stack,
  .supplier-layout > .supplier-facts {
    grid-column: 1;
  }

  .supplier-facts {
    max-width: 30rem;
    order: 2;
    width: 100%;
  }
}

@media (max-width: 48rem) {
  .dir-hero { padding: 1.25rem 0; }
  .dir-hero__title { font-size: 2rem; line-height: 2.375rem; }
  .dir-hero__lede { font-size: 1rem; line-height: 1.5rem; }
  .dir-search-panel { margin-top: 0.75rem; }
  .dir-search-modes a { flex: 0 0 auto; min-width: max-content; padding-inline: 1rem; }
  .dir-search { padding: 0.75rem; }
  .dir-popular { margin-top: 1rem; }
  .directory-layout { padding-top: 1rem; }
  .supplier-profile__name { font-size: 2rem; line-height: 2.375rem; }
}

@media (max-width: 40rem) {
  .dir-hero { padding: 1rem 0; }
  .dir-hero__title { font-size: 1.75rem; line-height: 2.125rem; }
  .dir-hero .o-wrap { min-width: 0; }
  .dir-hero__lede { width: auto; max-width: 100%; white-space: normal; overflow-wrap: break-word; }
  .dir-search-modes { width: 100%; max-width: 100%; overscroll-behavior-inline: contain; }
  .dir-search-modes a { min-width: max-content; padding-inline: 0.875rem; }
  .dir-search-modes { scrollbar-width: none; }
  .dir-search-modes::-webkit-scrollbar { display: none; }
  .dir-search { flex-direction: column; padding: 0.75rem; }
  .dir-search input { flex: none; width: 100%; }
  .dir-search .btn { flex: none; width: 100%; min-height: 3.125rem; }
  .dir-popular { display: block; }
  .dir-popular > div { margin-top: 0.375rem; }
  .dir-stats { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.5rem 1rem; }
  .results-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sort-form,
  .sort-form select { width: 100%; }
  .dir-card { grid-template-columns: 1.25rem minmax(0, 1fr); padding: 1rem; }
  .dir-card__select { grid-column: 1; grid-row: 1; }
  .dir-card__head { grid-column: 2; grid-row: 1; padding: 0; }
  .dir-card__head,
  .dir-card__head-main,
  .dir-card__main,
  .dir-card__foot { min-width: 0; max-width: 100%; }
  .dir-card__main { grid-column: 2; grid-row: 2; }
  .dir-card__foot { grid-column: 2; grid-row: 3; margin-top: 1rem; }
  .supplier-card__logo,
  .supplier-card__logo--initials { width: 3rem; height: 3rem; }
  .dir-card__foot .btn,
  .dir-card__foot .dir-card__shortlist { width: 100%; }
  .dir-card__title,
  .dir-card__desc { overflow-wrap: anywhere; }
}

/* ============================================================
   Directory landing (Thomasnet-measured geometry, 777 tokens)
   Search-first hero, example pills, proof strip, 2-col category
   grid, platform cards. Results machinery only renders once a
   search/filter exists, so these rules apply only to the clean
   landing state.
   ============================================================ */

.dir-landing {
  padding-block: var(--space-8) var(--space-6);
  text-align: center;
}

.dir-landing__title {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.1;
  margin: var(--space-3) auto 0;
  max-width: 37.5rem;
}

.dir-landing__lede {
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
  margin: var(--space-3) auto 0;
  max-width: 38rem;
}

.dir-landing-search {
  margin: 45px auto 0;
  max-width: 644px;
  scroll-margin-top: calc(var(--space-8) + var(--space-4));
}

.dir-landing-search__controls {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--muted);
  border-radius: 2px;
  box-shadow: var(--shadow);
  display: flex;
  gap: var(--space-2);
  height: 72px;
  padding: 0 var(--space-2) 0 var(--space-5);
}

.dir-landing-search__icon {
  color: var(--muted);
  font-size: var(--text-h3);
  line-height: 1;
}

.dir-landing-search__controls input {
  border: 0;
  box-shadow: none;
  flex: 1;
  font-size: 1.0625rem;
  min-width: 0;
}

.dir-landing-search__controls input:focus {
  outline: 0;
}

.dir-landing-search__controls:focus-within {
  border-color: var(--brand-700);
  box-shadow: 0 0 0 3px var(--brand-100);
}

.dir-landing-search__controls .btn {
  border-radius: 2px;
  min-height: var(--control-h);
  padding-inline: var(--space-5);
}

.dir-landing__examples {
  display: grid;
  gap: 9px;
  margin: 28px auto 0;
  max-width: 40.375rem; /* 646px — Thomasnet example rows */
}

.dir-landing__example {
  align-items: center;
  background: var(--muted-bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  display: flex;
  font-size: var(--text-small);
  gap: var(--space-2);
  min-height: 43px;
  padding: 0 var(--space-4);
  text-decoration: none;
}

.dir-landing__example:hover {
  border-color: var(--brand-500);
  color: var(--brand-800);
}

.dir-landing__example span {
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1;
}

/* Proof strip — four-count band under the hero */
.dir-proof {
  background: var(--ink);
  color: var(--surface);
}

.dir-proof__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.dir-proof__grid div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
}

.dir-proof__grid strong {
  font-family: var(--font-mono);
  font-size: var(--text-h3);
}

.dir-proof__grid span {
  color: var(--hairline);
  font-size: var(--text-caption);
}

/* Directory-owned section heading treatment. The homepage uses private
   .section-intro rules from lane-home.css, which is not loaded here. */
.dir-section-intro {
  margin-inline: auto;
  max-width: 40.375rem;
}

.dir-section-intro h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  margin: 0;
}

.dir-section-intro > p:last-child {
  color: var(--muted);
  line-height: var(--leading-body);
  margin: var(--space-3) 0 0;
}

/* Category discovery grid — Thomasnet 310px/309px, 27px gap */
.dir-landing-categories {
  padding-block: var(--space-7);
}

.dir-landing-categories__cols {
  display: grid;
  grid-template-columns: 310px 309px;
  column-gap: 27px;
  justify-content: center;
  margin-top: var(--space-7);
  row-gap: var(--space-6);
}

.dir-landing-category {
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--surface);
}
.dir-landing-category:hover { border-color: var(--brand-400); background: var(--brand-50); }
.dir-landing-category__heading {
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-h3);
  line-height: 1.2;
  margin: 0 0 12px;
  min-height: 33px;
  padding-bottom: var(--space-2);
}
.dir-landing-category__count { margin: 0; font-size: var(--text-caption); }

.dir-landing-category__heading a {
  color: var(--ink);
  text-decoration: none;
}

.dir-landing-category__heading a:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

.dir-landing-category__link {
  color: var(--ink);
  display: block;
  font-size: var(--text-small);
  min-height: 20px;
  margin-bottom: 19px;
  text-decoration: none;
}

.dir-landing-category__link:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

/* Platform cards — Thomasnet 191px x3, 37px gap */
.dir-landing-platform {
  padding-block: var(--space-7);
}

.dir-landing-platform__grid {
  display: grid;
  gap: 37px;
  grid-template-columns: repeat(3, 191px);
  justify-content: center;
  margin-top: var(--space-7);
}

.dir-platform-card {
  border: 1px solid var(--hairline);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 257px;
  padding: var(--space-4);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.dir-platform-card:hover {
  border-color: var(--brand-500);
  color: var(--ink);
  transform: translateY(-2px);
}

.dir-platform-card__label {
  color: var(--brand-700);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dir-platform-card h3 {
  font-size: var(--text-h3);
  line-height: 1.15;
  margin: var(--space-3) 0;
}

.dir-platform-card p {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.45;
  margin: 0;
  max-width: 24ch;
}

.dir-platform-card__link {
  border-top: 1px solid var(--hairline);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  margin-top: auto;
  padding-top: var(--space-4);
}

/* Closing CTA */
.dir-landing-cta {
  padding-block: var(--space-7);
}

.dir-landing-cta__inner {
  align-items: center;
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
}

.dir-landing-cta__inner h2 {
  font-size: var(--text-h2);
  margin: var(--space-2) 0 0;
  max-width: 40rem;
}

.dir-landing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.dir-landing-search__controls .btn,
.dir-landing-cta .btn {
  font-size: var(--text-small);
  line-height: 1;
}

.dir-landing__example:focus-visible,
.dir-landing-category__heading a:focus-visible,
.dir-landing-category__link:focus-visible,
.dir-platform-card:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 3px;
}

@media (min-width: 48rem) {
  .dir-proof__grid { grid-template-columns: repeat(4, 1fr); }
  .dir-proof__grid div + div { border-left: 1px solid var(--muted-fg); }
  .dir-section-intro {
    align-items: end;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr 1fr;
  }
  .dir-section-intro > p:last-child { margin-top: 0; }
}

@media (min-width: 64rem) {
  .dir-landing-search,
  .dir-landing-search__panel { max-width: 760px; }
  .dir-landing__examples { max-width: 762px; }
  .dir-section-intro { max-width: 1280px; }
  .dir-landing-categories__cols {
    column-gap: 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: auto;
    max-width: 1280px;
  }
  .dir-landing-platform__grid {
    gap: 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: auto;
    max-width: 1280px;
  }
}

@media (min-width: 30rem) and (max-width: 63.99rem) {
  .dir-landing-categories__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-landing-platform__grid {
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 39.99rem) {
  .dir-proof__grid div:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
  .dir-section-intro h2 { font-size: 1.75rem; }
  .dir-landing-categories__cols { row-gap: var(--space-5); }
  .dir-landing-category__link { margin-bottom: var(--space-3); }
  .dir-platform-card { padding: var(--space-4); }
  .dir-platform-card__link { padding-top: var(--space-3); }
  .dir-landing-cta__inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 29.99rem) {
  .dir-landing-search__controls {
    align-items: stretch;
    border-radius: var(--radius);
    flex-direction: column;
    height: auto;
    padding: var(--space-2);
  }
  .dir-landing-search__controls .btn { min-height: var(--control-h); }
  .dir-landing-search__icon { display: none; }
  .dir-landing-categories__cols { grid-template-columns: minmax(0, 1fr); }
  .dir-landing-platform__grid { grid-template-columns: minmax(0, 1fr); }
  .dir-platform-card { min-height: 0; }
}

.dir-showcase { padding: var(--space-7) 0; }
.dir-showcase .o-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.dir-showcase__item { display: flex; align-items: stretch; gap: var(--space-4); min-width: 0; padding: var(--space-5); border: 1px solid var(--hairline); border-top: 3px solid var(--brand-700); background: var(--surface); }
.dir-showcase__item--reverse { flex-direction: row; }
.dir-showcase__copy { width: 100%; }
.dir-showcase__num {
  align-self: flex-start;
  color: var(--brand-700);
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
}
.dir-showcase__badge { background: var(--brand-50); border-radius: 9999px; color: var(--brand-700); display: inline-block; font-size: var(--text-caption); font-weight: var(--weight-semibold); padding: 4px 16px; text-transform: uppercase; }
.dir-showcase__copy h3 { font-size: 2rem; line-height: 40px; margin: var(--space-3) 0; }
.dir-showcase__list { list-style: initial; padding-left: 20px; }
.dir-showcase__list li { margin: 4px 0; }
.dir-showcase__copy .btn { margin-top: var(--space-4); }
.dir-network { background: var(--brand-900); padding: var(--space-7) 0; color: #fff; }
.dir-network .dir-section-intro--center { display: block; text-align: center; }
.dir-network .dir-section-intro h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.dir-network .dir-section-intro > p { color: rgb(255 255 255 / 0.78); }
.dir-network .eyebrow { color: rgb(255 255 255 / 0.6); }
.dir-network__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); list-style: none; margin: var(--space-7) 0 0; padding: 0; }
.dir-network__grid > li { min-width: 0; }
.dir-network__tile { border: 1px solid rgb(255 255 255 / 0.25); border-radius: 2px; display: flex; flex-direction: column; height: 100%; padding: var(--space-5); text-decoration: none; color: #fff; }
.dir-network__tile:hover { background: rgb(255 255 255 / 0.1); }
.dir-network__tile-label { color: rgb(255 255 255 / 0.7); font-size: var(--text-small); }
.dir-network__tile h3 { color: #fff; font-size: var(--text-h3); margin: var(--space-1) 0; }
.dir-network__tile p { color: rgb(255 255 255 / 0.75); margin: var(--space-1) 0 var(--space-3); }
.dir-network__tile-cta {
  align-self: flex-start;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 2px;
  color: #fff;
  margin-top: auto;
  padding: var(--space-2) var(--space-3);
}
.dir-network__tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
  background: rgb(255 255 255 / 0.1);
}
@media (max-width: 39.99rem) {
  .dir-showcase__item, .dir-showcase__item--reverse { flex-direction: column; }
  .dir-showcase .o-wrap { grid-template-columns: 1fr; }
  .dir-network__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Directory landing polish (Thomasnet v2026 anatomy, 777 tokens)
   Dark brand-900 hero seal, advertising chip, chip-style examples,
   light trust band, 4rem section rhythm. Appended 2026-08-16.
   ============================================================ */

/* --- Dark hero seal --- */
.dir-landing {
  background: var(--brand-900);
  padding-block: 0;
}
.dir-landing .o-wrap {
  padding-block: calc(var(--space-7) + var(--space-2));
}
.dir-landing__title {
  color: #fff;
}
.dir-landing__lede {
  color: rgb(255 255 255 / 0.82);
}
.dir-landing__title,
.dir-landing__lede {
  margin-inline: auto;
  max-width: 42rem;
}
.dir-landing-search {
  background: var(--brand-900);
  margin-top: var(--space-4);
}
.dir-landing-search__panel {
  margin: 0 auto;
  max-width: 644px;
}
.dir-landing__stats {
  color: rgb(255 255 255 / 0.75);
  font-size: var(--text-small);
  margin: var(--space-4) auto 0;
  text-align: center;
}
.dir-landing__stats a {
  color: #fff;
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.dir-landing__stats a:hover { text-decoration: underline; }
.dir-landing-search__controls {
  border-color: transparent;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
  height: 52px;
}
.dir-landing-search__controls .btn {
  background: var(--brand-700);
  min-height: var(--control-h);
}
.dir-landing-search__controls .btn:hover {
  background: var(--brand-600);
}

/* --- Chip-style examples (inline wrap pills on dark) --- */
.dir-landing__examples {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
  max-width: 52rem;
}
.dir-landing__example {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.28);
  color: #fff;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-4);
}
.dir-landing__example:hover {
  background: #fff;
  border-color: #fff;
  color: var(--brand-900);
}
.dir-landing__example span {
  color: rgb(255 255 255 / 0.8);
}
.dir-landing__example:hover span {
  color: var(--brand-700);
}

/* --- Light trust band (proof strip over brand-50) --- */
.dir-proof {
  background: var(--brand-50);
  color: var(--ink);
  padding-block: var(--space-7);
  text-align: center;
}
.dir-proof__title {
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  line-height: 1.15;
  margin: 0 auto var(--space-6);
  max-width: 40rem;
}
.dir-proof__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-inline: auto;
  max-width: var(--wrap-max);
}
.dir-proof__grid div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
}
.dir-proof__grid strong {
  font-family: var(--font-mono);
  font-size: var(--text-h3);
}
.dir-proof__grid span {
  color: var(--muted);
  font-size: var(--text-caption);
}
.dir-proof__cta {
  display: inline-flex;
  margin-top: var(--space-6);
}

/* --- 4rem section rhythm --- */
.dir-landing-categories,
.dir-landing-platform {
  padding-block: var(--space-7);
}
.dir-landing-cta {
  background: var(--brand-900);
  padding-block: var(--space-7);
}
.dir-landing-cta__inner h2 { color: #fff; }
.dir-landing-cta .eyebrow { color: rgb(255 255 255 / 0.6); }
.dir-landing-cta .btn--primary { border-color: var(--surface); background: var(--surface); color: var(--brand-900); }
.dir-landing-cta .btn--secondary { border-color: rgb(255 255 255 / 0.4); background: transparent; color: #fff; }
.dir-landing-cta .btn--secondary:hover { background: rgb(255 255 255 / 0.1); border-color: #fff; }

/* --- Divider grid for the stat columns: one hairline per boundary --- */
.dir-proof__grid div + div {
  border-left: 1px solid var(--hairline);
}

/* ============================================================
   Browse index family contract (categories, capabilities,
   certifications, locations). One title + eyebrow + spacing
   contract per family: H1 36px, eyebrow "Supplier directory",
   section H2 22px — sizes match the search-results family.
   ============================================================ */
.dir-browse {
  padding: var(--space-8) 0 var(--space-7);
}

.dir-browse .eyebrow {
  margin-bottom: 0.375rem;
}

.dir-browse h1 {
  margin: 0;
  font-size: 2.25rem; /* 36px — search-family H1 size */
  line-height: 2.625rem;
  letter-spacing: -0.02em;
}

.dir-browse h1 + p {
  margin-top: 0.375rem;
}

.dir-results-heading {
  font-size: 1.375rem; /* 22px — search-results H2 size */
  line-height: 1.75rem;
}

@media (max-width: 48rem) {
  .dir-browse h1 { font-size: 2rem; line-height: 2.375rem; }
}

@media (max-width: 40rem) {
  .dir-browse h1 { font-size: 1.75rem; line-height: 2.125rem; }
}

/* Taxonomy kind selector — Browse index state. One pill row for the
   four taxonomy dimensions; active kind carries the brand underline.
   44px row height matches the search-mode strip contract. */
.dir-browse-kinds {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.dir-browse-kinds::-webkit-scrollbar { display: none; }

.dir-browse-kind {
  display: grid;
  place-items: center;
  min-height: var(--control-h);
  padding: 0 1rem;
  border-bottom: 3px solid transparent;
  color: var(--ink);
  font: 600 0.875rem/1.25rem var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
}

.dir-browse-kind:hover,
.dir-browse-kind:focus-visible {
  color: var(--brand-700);
}

.dir-browse-kind:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: -4px;
  border-radius: var(--radius-sm);
}

.dir-browse-kind.is-active {
  border-bottom-color: var(--brand-600);
  color: var(--brand-700);
}

@media (max-width: 40rem) {
  .dir-browse-kind { flex: 0 0 auto; min-width: max-content; padding-inline: 0.875rem; }
}

/* Location areas inside a country card — compact region list. */
.dir-location-areas {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--hairline);
}

.dir-location-areas li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  min-height: var(--control-h);
  font-size: var(--text-small);
}

.dir-location-areas a {
  color: var(--ink);
  text-decoration: none;
}

.dir-location-areas a:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

.dir-location-areas .u-muted {
  background: var(--muted-bg);
  border-radius: 999px;
  font-size: var(--text-caption);
  padding: 0 6px;
}

/* ---- supplier detail: conversion, discovery, owner states (2026-08) ---- */
.supplier-profile__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.supplier-profile__steps li {
  color: var(--muted);
  font: 600 0.8125rem/1.25rem var(--font-sans);
}
.supplier-profile__steps li::before {
  content: counter(step);
  counter-increment: step;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 0.75rem;
}
.supplier-capabilities__item a,
.supplier-facility__name a { color: var(--brand-700); text-decoration: none; }
.supplier-capabilities__item a:hover,
.supplier-facility__name a:hover { text-decoration: underline; }
.supplier-empty {
  padding: 1.25rem;
  border: 1px dashed var(--hairline);
  border-radius: 2px;
  background: var(--paper);
}
.supplier-empty__title { margin: 0 0 0.25rem; font: 600 1rem/1.5rem var(--font-sans); }
.supplier-empty__body { margin: 0; color: var(--muted); font: 400 0.875rem/1.375rem var(--font-sans); }
.supplier-contact__alt { margin: 1rem 0 0; font-size: 0.875rem; }
.supplier-upsell {
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--brand-600);
  background: var(--surface);
}
.supplier-upsell__body { margin: 0 0 1rem; color: var(--muted); font-size: 0.9375rem; }
.supplier-similar { list-style: none; margin: 0; padding: 0; }
.supplier-similar__item + .supplier-similar__item { border-top: 1px solid var(--hairline); }
.supplier-similar__link {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.875rem 0;
  color: inherit;
  text-decoration: none;
}
.supplier-similar__link:hover .supplier-similar__name { color: var(--brand-700); text-decoration: underline; }
.supplier-similar__name { font-weight: 600; }
.supplier-similar__loc { color: var(--muted); font-size: 0.8125rem; }
.supplier-profile__initials { font-family: var(--font-serif); font-size: 2.5rem; }

/* ---- supplier detail: front-end haul 2 (2026-08) ---- */
.supplier-profile__hero {
  padding: 1.5rem 0 2rem;
  border: 0;
  background: var(--paper);
}
.supplier-hero__panel {
  padding: 2.5rem;
  background: var(--brand-900);
  color: var(--surface);
}
.supplier-profile__initials { background: var(--surface); }
.supplier-profile__name {
  max-width: 44rem;
  margin: 0;
  color: var(--surface);
  font: 500 clamp(2.25rem, 5vw, 3.25rem)/1.08 var(--font-serif);
  letter-spacing: -0.025em;
}
.supplier-profile__location {
  margin-bottom: 0.625rem;
  color: var(--brand-100);
}
.supplier-profile__primary-capability {
  margin: 0.875rem 0 0;
  color: var(--brand-100);
  font: 500 1rem/1.5rem var(--font-sans);
}
.supplier-profile__primary-capability a { color: inherit; text-decoration: none; }
.supplier-profile__primary-capability a:hover { text-decoration: underline; }
.supplier-profile__hero .supplier-profile__actions { margin-top: 1.5rem; }
.supplier-profile__hero .supplier-profile__actions .btn--primary {
  border-color: var(--surface);
  background: var(--surface);
  color: var(--brand-900);
}
.supplier-profile__hero .supplier-profile__links {
  margin: 1.25rem 0 0;
  color: var(--brand-100);
}
.supplier-profile__hero .supplier-profile__links a { color: var(--surface); }
.supplier-profile__hero .supplier-profile__logo img,
.supplier-profile__hero .supplier-profile__initials {
  width: 6rem;
  height: 6rem;
  border: 0;
}
.supplier-profile__summary {
  max-width: 60ch;
  font: 400 0.9375rem/1.5rem var(--font-sans);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.supplier-profile__summary.is-open { -webkit-line-clamp: unset; }
.supplier-profile__meta { color: var(--muted); font-weight: var(--weight-regular); }
.supplier-profile__readmore {
  display: block;
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-700);
  font: 600 0.875rem/1.25rem var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.supplier-contact {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.supplier-contact__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.supplier-contact__form .form-field:nth-child(3),
.supplier-contact__form .form-field:nth-child(4),
.supplier-contact__form .form-actions { grid-column: 1 / -1; }
.supplier-capabilities {
  display: block;
  padding: 0;
  border-block: 1px solid var(--hairline);
  border-inline: 0;
  background: transparent;
}
.supplier-capabilities__item {
  display: flex;
  align-items: center;
  min-height: 2.125rem;
  padding: 0.375rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.supplier-capabilities__item + .supplier-capabilities__item { border-top: 1px solid var(--hairline); }
.supplier-capabilities__item:hover { transform: none; box-shadow: none; }
.supplier-similar__main { min-width: 0; }
.supplier-similar__monogram {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--surface);
  color: var(--brand-700);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.8125rem;
}
.supplier-similar__arrow { color: var(--muted); }
.supplier-provenance {
  border: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--hairline);
  background: transparent;
}
.supplier-provenance .card__header { padding: 0; }
.supplier-provenance .card__body { padding: 0.5rem 0 0; }
.supplier-provenance h3 {
  margin: 0;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.supplier-layout .house-ad { margin-top: 0; }
.supplier-layout .house-ad__card {
  border-top: 3px solid var(--ink);
  border-bottom: 0;
  padding: 1.5rem 0 0.5rem;
  background: transparent;
}
@media (max-width: 48rem) {
  .supplier-profile__name { font-size: 2rem; line-height: 2.375rem; }
}
@media (max-width: 40rem) {
  .supplier-profile__hero { padding: 1rem 0 1.5rem; }
  .supplier-hero__panel { padding: 1.5rem; }
  .supplier-identity { grid-template-columns: 1fr; gap: 1.25rem; }
  .supplier-profile__hero .supplier-profile__actions .btn { width: 100%; }
  .supplier-contact__form { grid-template-columns: 1fr; }
  .supplier-profile__summary { -webkit-line-clamp: 3; }
}

/* ---- supplier detail: front-end haul 3 (2026-08) ---- */
.supplier-profile__hero { position: relative; overflow: hidden; }
.supplier-profile__hero::before {
  content: none;
}
.supplier-profile__hero .o-wrap { position: relative; }
.supplier-company-details {
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--surface);
}
.supplier-company-details div:last-child { border-bottom: 0; padding-bottom: 0; }
.supplier-similar__more { margin: 1rem 0 0; font: 600 0.875rem/1.25rem var(--font-sans); }
.supplier-similar__more a { color: var(--brand-700); }
@media (max-width: 40rem) {
  .supplier-profile__hero::before { display: none; }
  .supplier-company-details { padding: 1rem; }
}

/* ---- supplier detail: core close + motion (2026-08) ---- */
.supplier-facility {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.625rem 0;
  border: 0;
  border-block: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}
.supplier-facility__label {
  color: var(--muted);
  font: 600 0.75rem/1rem var(--font-sans);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.supplier-facility__address {
  margin: 0;
  color: var(--ink);
  font: 500 0.9375rem/1.4375rem var(--font-sans);
}
.supplier-facility__actions { display: flex; align-items: center; gap: 1rem; }
.supplier-similar__link {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(8rem, 0.65fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.625rem 0;
}
.supplier-similar__cat,
.supplier-similar__loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-capability { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.supplier-capabilities__item a:focus-visible,
.supplier-facility__name a:focus-visible,
.supplier-similar__link:focus-visible,
.supplier-context__cta:focus-visible,
.supplier-sticky-cta:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 2px;
}
.supplier-profile__actions .btn:active,
.supplier-contact__form .btn:active,
.supplier-context__cta:active,
.supplier-sticky-cta:active { transform: translateY(1px); }
.supplier-contact__form .form-field__control:focus {
  border-color: var(--brand-700);
  outline: none;
  box-shadow: 0 0 0 2px rgb(20 92 67 / 0.15);
}
.supplier-sticky-cta {
  display: inline-flex;
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.supplier-sticky-cta.is-visible { visibility: visible; opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (max-width: 40rem) {
  .supplier-facility { grid-template-columns: 1fr auto; gap: 0.375rem 1rem; }
  .supplier-facility__label { grid-column: 1 / -1; }
  .supplier-similar__link { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; }
  .supplier-similar__cat,
  .supplier-similar__loc { grid-column: 1; }
  .supplier-similar__arrow { grid-column: 2; grid-row: 1 / 4; }
}

/* ---- categories index: filter, sticky A–Z bar, counts, tabs (2026-08) ---- */
.dir-cat-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--surface);
  font: 400 0.9375rem/1.25rem var(--font-sans);
}
.dir-cat-search input[type="search"]:focus {
  border-color: var(--brand-700);
  outline: none;
  box-shadow: 0 0 0 2px rgb(20 92 67 / 0.15);
}
.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.cat-tabs a {
  color: var(--brand-700);
  font: 600 0.875rem/1.25rem var(--font-sans);
  text-decoration: none;
}
.cat-tabs a:hover { text-decoration: underline; }
.cat-jump {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-5) 0 0;
  padding: var(--space-2) 0;
  border-block: 1px solid var(--hairline);
  background: var(--surface);
}
.cat-jump__link {
  display: grid;
  place-items: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 var(--space-2);
  border-radius: 2px;
  color: var(--muted);
  font: 600 0.8125rem/1rem var(--font-sans);
  text-decoration: none;
}
.cat-jump__link:hover { color: var(--brand-700); background: var(--brand-50); }
.cat-jump__link.is-active { color: var(--surface); background: var(--brand-700); }
.category-index__letter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  scroll-margin-top: calc(var(--header-h) + 3.5rem);
}
.category-index__count { color: var(--muted); font: 600 0.8125rem/1rem var(--font-sans); }

/* ---- capability detail: stat strip, card structure, desc clamp, dup tag (2026-08) ---- */
.cap-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
  gap: var(--space-6);
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0;
  border-block: 1px solid var(--hairline);
}
.cap-stats div { display: grid; gap: var(--space-1); }
.cap-stats dt {
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.cap-stats dd { margin: 0; font: 600 1.75rem/2rem var(--font-sans); }
.cap-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cap-card__loc { color: var(--muted); font-size: var(--text-small); white-space: nowrap; }
.cap-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cap-card__desc.is-open { -webkit-line-clamp: unset; }
.cap-card__more {
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-700);
  font: 600 0.8125rem/1.25rem var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cap-card__dup {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--muted-bg);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
}
@media (max-width: 40rem) {
  .cap-stats { gap: var(--space-4); }
  .cap-card__header { align-items: flex-start; flex-direction: column; }
}

/* ---- supplier_detail: Thomas profile composition ---- */
.supplier-profile__hero {
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
}
.supplier-profile__hero .o-wrap {
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--surface);
}
.supplier-identity {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.supplier-profile__logo img,
.supplier-profile__initials {
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.375rem;
  border-radius: 3px;
}
.supplier-profile__location { margin-bottom: 0.25rem; }
.supplier-profile__name { margin-bottom: 0.75rem; }
.supplier-profile__actions,
.supplier-profile__services { margin-top: 1rem; }
.supplier-layout.supplier-layout--single { margin-top: 1rem; }
.supplier-layout--single > .o-stack { gap: 1rem; }
.supplier-layout--single .supplier-section,
.supplier-layout--single .supplier-provenance {
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--surface);
}
.supplier-layout--single .supplier-section > h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline);
  font: 600 1.3125rem/1.75rem var(--font-sans);
}
.supplier-description h3 {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font: 600 1rem/1.5rem var(--font-sans);
}
.supplier-description .supplier-profile__summary { max-width: 60ch; }

/* ---- supplier_detail: facts strip ---- */
.supplier-facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  border-top: 2px solid var(--brand-50);
  background: color-mix(in srgb, var(--brand-50) 4%, transparent);
}
.supplier-facts__tile {
  padding: 1.5rem 1.5rem 1.25rem;
  min-width: 0;
}
.supplier-facts__tile + .supplier-facts__tile {
  border-left: 1px solid var(--hairline);
}
.supplier-facts__tile dt {
  margin-bottom: 0.5rem;
  font: 600 0.75rem/1rem var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.supplier-facts__tile dd {
  font: 600 1.5rem/1.875rem var(--font-serif);
  overflow-wrap: anywhere;
}

/* ---- supplier_detail: action buttons + quiet link row ---- */
.supplier-profile__actions {
  margin-top: 1.5rem;
}
.supplier-profile__actions .btn + .btn {
  margin-left: 0.75rem;
}
.supplier-profile__links {
  margin-top: 1rem;
  font: 400 0.875rem/1.25rem var(--font-sans);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
}
.supplier-profile__links a {
  color: var(--brand-700);
  text-decoration: none;
}
.supplier-profile__links a:hover {
  text-decoration: underline;
}
.supplier-profile__links [aria-hidden="true"] {
  display: none;
}
.supplier-compare__count[hidden] {
  display: none;
}

/* ---- supplier_detail: contact form section ---- */
.supplier-contact__sub {
  margin-bottom: 1rem;
  color: var(--muted);
}
.supplier-contact__form {
  max-width: 40rem;
}
.supplier-contact__steps {
  margin-top: 1rem;
  font: 400 0.8125rem/1.125rem var(--font-sans);
  color: var(--muted);
}

/* ---- supplier_detail: certifications single-row list ---- */
.supplier-certifications {
  list-style: none;
  margin: 0;
  padding: 0;
}
.supplier-certifications__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hairline);
}
.supplier-certifications__item:last-child {
  border-bottom: 0;
}
.supplier-certifications__name {
  font: 600 1rem/1.375rem var(--font-sans);
}
.supplier-certifications__meta {
  font: 400 0.875rem/1.25rem var(--font-sans);
  color: var(--muted);
}
.supplier-certifications__item .badge {
  margin-left: auto;
}

/* ---- supplier_detail: facility address actions ---- */
.supplier-facility__address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.supplier-facility__address-text {
  min-width: 0;
}
.supplier-facility__directions,
.supplier-facility__copy {
  font: 400 0.875rem/1.25rem var(--font-sans);
  color: var(--brand-50);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.125rem 0.5rem;
  cursor: pointer;
  text-decoration: none;
}
.supplier-facility__directions:hover,
.supplier-facility__copy:hover {
  text-decoration: underline;
}
.supplier-facility__map {
  display: block;
  margin-top: 0.75rem;
  max-width: 600px;
}
.supplier-facility__map img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 2px;
}

/* ---- supplier_detail: similar supplier category line ---- */
.supplier-similar__cat {
  display: block;
  font: 400 0.8125rem/1.125rem var(--font-sans);
  color: var(--muted);
}

/* ---- supplier_detail: provenance claim CTA ---- */
.supplier-provenance__claim {
  margin-top: 1rem;
}

/* ---- supplier_detail: mobile ---- */
@media (max-width: 40rem) {
  .supplier-profile__hero .o-wrap,
  .supplier-layout--single .supplier-section,
  .supplier-layout--single .supplier-provenance { padding: 1rem; }
  .supplier-identity { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .supplier-profile__logo img,
  .supplier-profile__initials { width: 3.5rem; height: 3.5rem; }
  .supplier-facts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .supplier-facts__tile:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .supplier-facts__tile:nth-child(4) {
    border-top: 1px solid var(--hairline);
  }
  .supplier-profile__actions {
    display: grid;
    gap: 0.75rem;
  }
  .supplier-profile__actions .btn {
    margin-left: 0;
    width: 100%;
  }
  .supplier-similar__monogram {
    display: none;
  }
}