/* Top Lawyer Match — public content pages (Homepage 1A system)
   Firm pages, search, compare, saved, how matching works, practice areas,
   methodology and the generic "coming soon" page.

   Loaded from those views only, after consumer-flow.css, and reuses its
   primitives: .flow-shell, .btn-solid / .btn-outline, .lawyer-card,
   .chip-licence, .results1a__crumbs, .home1a-browse__grid.
   Invariants: no border radii, no shadows, ink #111827, indigo for
   interaction only, gold for TLM Selected recognition only
   (docs/BADGE-SEMANTICS.md, locked). 48px desktop / 18px mobile gutters. */

.pg {
  padding: 0 0 64px;
  color: var(--brand-ink, #111827);
  font-family: var(--brand-font-ui);
  font-size: 16px;
  line-height: 1.55;
}
.pg h1, .pg h2, .pg h3 {
  margin: 0;
  font-family: var(--brand-font-display);
  font-weight: 600;
  color: var(--brand-ink, #111827);
}
.pg p { margin: 0; }
.pg a { color: var(--brand-indigo, #3F46A5); }
.pg a:hover { text-decoration: underline; }
.pg a.btn-solid, .pg a.btn-solid:hover { color: #fff; text-decoration: none; }
.pg a.btn-outline, .pg a.btn-outline:hover { color: var(--brand-ink, #111827); text-decoration: none; }
.pg button { font-family: var(--brand-font-ui); }
.pg :focus-visible { outline: 3px solid var(--brand-indigo, #3F46A5); outline-offset: 2px; border-radius: 0; }

/* ----------------------------------------------------------------- head --- */

.pg-head {
  background: #fff;
  border-bottom: 1px solid var(--brand-rule, #E6E2D8);
  padding: 26px 48px 30px;
}
.pg-head .results1a__crumbs { margin-bottom: 14px; }
.pg-head .results1a__crumbs [aria-current] { color: var(--brand-ink, #111827); }
.pg-eyebrow {
  margin: 0 0 10px !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-label, #6B6455);
}
.pg-title {
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.pg-lead {
  margin-top: 14px !important;
  max-width: 68ch;
  color: var(--brand-body, #4A5265);
  font-size: 17.5px;
  line-height: 1.55;
}
.pg-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 16px;
  color: var(--brand-body, #4A5265);
  font-size: 14.5px;
}
.pg-head__meta strong { color: var(--brand-ink, #111827); font-weight: 700; }
.pg-head__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pg-head__actions .btn-solid,
.pg-head__actions .btn-outline { height: 48px; text-decoration: none; }

/* ----------------------------------------------------------------- body --- */

.pg-body { padding: 8px 48px 0; }
.pg-section { padding-top: 34px; }
.pg-section + .pg-section { margin-top: 6px; }
.pg-section__title { font-size: 26px; line-height: 1.2; margin-bottom: 6px !important; }
.pg-section__rubric { color: var(--brand-body, #4A5265); font-size: 14.5px; max-width: 72ch; }
.pg-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink, #111827);
}

/* Long-form copy: how matching works, methodology. */
.pg-prose { max-width: 72ch; }
.pg-prose h2 { font-size: 28px; line-height: 1.18; margin: 44px 0 12px; }
.pg-prose h2:first-child { margin-top: 34px; }
.pg-prose h3 { font-size: 20px; line-height: 1.25; margin: 26px 0 8px; }
.pg-prose p { margin: 0 0 14px; color: var(--brand-body, #4A5265); font-size: 16.5px; line-height: 1.65; }
.pg-prose p strong { color: var(--brand-ink, #111827); }
.pg-prose ul, .pg-prose ol { margin: 0 0 16px; padding-left: 20px; color: var(--brand-body, #4A5265); font-size: 16px; line-height: 1.6; }
.pg-prose li + li { margin-top: 6px; }
.pg-prose li strong { color: var(--brand-ink, #111827); }

/* Fixed-copy statement. A rule on the left, never a badge or a container
   that could read as recognition. */
.pg-statement {
  margin: 22px 0 !important;
  padding: 14px 18px;
  border-left: 3px solid var(--brand-ink, #111827);
  background: #fff;
  color: var(--brand-ink, #111827) !important;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.45 !important;
}

/* Numbered steps, same rhythm as the homepage then-strip. */
.pg-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--brand-rule, #E6E2D8);
  border: 1px solid var(--brand-rule, #E6E2D8);
}
.pg-steps > li { background: #fff; padding: 22px 22px 24px; }
.pg-steps__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--brand-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--brand-ink, #111827);
}
.pg-steps__title { display: block; margin-bottom: 6px; font-family: var(--brand-font-display); font-size: 20px; line-height: 1.25; font-weight: 600; color: var(--brand-ink, #111827); }
.pg-steps__body { color: var(--brand-body, #4A5265); font-size: 14.5px; line-height: 1.55; }

/* Definition table: label / explanation rows. */
.pg-defs { margin: 6px 0 18px; border-top: 1px solid var(--brand-rule, #E6E2D8); }
.pg-defs__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--brand-rule, #E6E2D8);
}
.pg-defs__term { font-weight: 700; color: var(--brand-ink, #111827); font-size: 15px; }
.pg-defs__desc { color: var(--brand-body, #4A5265); font-size: 15px; line-height: 1.55; }
.pg-defs__desc .chip-licence { margin: 0 0 6px; }

/* ---------------------------------------------------------------- empty --- */

.pg-empty {
  max-width: 720px;
  margin-top: 30px;
  padding: 28px 30px 30px;
  background: #fff;
  border: 1px solid var(--brand-rule-strong, #DDD8CD);
}
.pg-empty__title { font-size: 26px; line-height: 1.2; margin-bottom: 8px !important; }
.pg-empty__body { color: var(--brand-body, #4A5265); font-size: 15.5px; line-height: 1.55; max-width: 60ch; }
.pg-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.pg-empty__actions .btn-solid,
.pg-empty__actions .btn-outline { height: 48px; }

/* ------------------------------------------------------------ firm page --- */

.pg-firm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
.pg-firm__about { max-width: 68ch; color: var(--brand-ink, #111827); font-size: 16.5px; line-height: 1.6; }
.pg-firm__aside {
  margin-top: 34px;
  background: #fff;
  border: 1px solid var(--brand-rule, #E6E2D8);
  padding: 20px 22px;
}
.pg-firm__aside + .pg-firm__aside { margin-top: 16px; }
.pg-offices { margin: 0; padding: 0; list-style: none; }
.pg-offices li { padding: 12px 0; border-top: 1px solid var(--brand-rule, #E6E2D8); font-size: 14.5px; line-height: 1.5; color: var(--brand-body, #4A5265); }
.pg-offices li:first-child { border-top: 0; padding-top: 4px; }
.pg-offices__name { display: block; color: var(--brand-ink, #111827); font-weight: 700; }
.pg-offices__tag { margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-label, #6B6455); }
.pg-website { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }

/* Attorney rows on the firm page and Saved reuse .lawyer-card. */
.pg-cards { border-top: 1px solid var(--brand-rule, #E6E2D8); margin-top: 14px; }
.pg-cards .lawyer-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.pg-cards .lawyer-card__practices { margin: 6px 0 0; color: var(--brand-ink, #111827); font-size: 14px; }
.pg-cards .lawyer-card__secondary form { margin: 0; }
.pg-cards .lawyer-card__secondary .action-toggle { color: var(--brand-indigo, #3F46A5); }

/* --------------------------------------------------------------- search --- */

.pg-tabs {
  display: flex;
  gap: 0;
  margin: 22px 0 0;
  border-bottom: 1px solid var(--brand-rule-strong, #DDD8CD);
}
.pg-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  color: var(--brand-body, #4A5265) !important;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none !important;
}
.pg-tabs a:first-child { padding-left: 0; }
.pg-tabs a[aria-current] { color: var(--brand-ink, #111827) !important; border-bottom-color: var(--brand-ink, #111827); }
.pg-tabs a:hover { color: var(--brand-ink, #111827) !important; }

.pg-search { max-width: 860px; }
.pg-search .issue-form { margin-top: 26px; }
.pg-search .issue-form__hint { margin: 10px 0 0; color: var(--brand-body, #4A5265); font-size: 13.5px; }
.pg-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.pg-search select.issue-form__where {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, #111827 50%), linear-gradient(135deg, #111827 50%, transparent 50%);
  background-position: calc(100% - 12px) 45%, calc(100% - 7px) 45%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.pg-search__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.pg-search__note { margin-top: 16px !important; color: var(--brand-body, #4A5265); font-size: 13.5px; }

.pg .name-search__results {
  max-width: 860px;
  margin: 26px 0 0;
  background: #fff;
  border: 1px solid var(--brand-rule-strong, #DDD8CD);
}
.pg .name-search__results > li + li { border-top: 1px solid var(--brand-rule, #E6E2D8); }
.pg .name-search__row {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  padding: 14px 18px;
  color: var(--brand-ink, #111827);
  text-decoration: none;
}
.pg .name-search__row:hover { background: var(--brand-ivory, #F8F6F1); text-decoration: none; }
.pg .name-search__row:hover .ns-name { text-decoration: underline; }
.ns-thumb {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #E7E3DA;
}
.ns-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-initials { font-family: var(--brand-font-display); font-size: 18px; font-weight: 600; color: var(--brand-label, #6B6455); }
.ns-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ns-primary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ns-name { font-family: var(--brand-font-display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--brand-ink, #111827); }
.ns-meta { color: var(--brand-body, #4A5265); font-size: 13.5px; }
.ns-kind {
  padding: 3px 8px;
  border: 1px solid var(--brand-rule-strong, #DDD8CD);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-label, #6B6455);
  white-space: nowrap;
}
.pg .name-search__empty { padding: 22px 20px; color: var(--brand-body, #4A5265); font-size: 15px; }
.ns-count { margin-top: 18px !important; color: var(--brand-body, #4A5265); font-size: 13.5px; }

/* -------------------------------------------------------------- compare --- */

.cmp-scroll { margin-top: 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--brand-rule-strong, #DDD8CD); background: #fff; }
.cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
}
.cmp th, .cmp td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--brand-rule, #E6E2D8);
  text-align: left;
  vertical-align: top;
}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { background: #fff; border-bottom: 1.5px solid var(--brand-ink, #111827); vertical-align: bottom; }
.cmp thead th:first-child { width: 190px; }
.cmp tbody th {
  width: 190px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-label, #6B6455);
}
.cmp td { color: var(--brand-ink, #111827); }
.cmp td + td, .cmp th + th { border-left: 1px solid var(--brand-rule, #E6E2D8); }
.cmp__name { display: block; font-family: var(--brand-font-display); font-size: 21px; font-weight: 600; line-height: 1.2; }
.cmp__name a { color: var(--brand-ink, #111827); text-decoration: none; }
.cmp__name a:hover { text-decoration: underline; }
.cmp__firm { display: block; margin-top: 3px; color: var(--brand-body, #4A5265); font-size: 13.5px; font-weight: 500; }
.cmp__remove { margin-top: 8px; }
.cmp__remove button {
  border: 0;
  background: transparent;
  padding: 4px 0;
  color: var(--brand-indigo, #3F46A5);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cmp__unknown { color: var(--brand-label, #6B6455); }
.cmp__group th {
  background: var(--brand-ivory, #F8F6F1);
  color: var(--brand-ink, #111827) !important;
}
.cmp__said { display: block; margin-top: 2px; color: var(--brand-body, #4A5265); font-size: 13px; }
.cmp__status { font-weight: 700; }
.cmp__status--miss { color: var(--brand-label, #6B6455); }
.cmp td .chip-licence { margin: 0; }
.cmp__selected { margin: 0; }
.cmp-note { margin-top: 14px !important; color: var(--brand-label, #6B6455); font-size: 13px; max-width: 78ch; }
.cmp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cmp-actions form { margin: 0; }
.cmp-actions .btn-solid, .cmp-actions .btn-outline { height: 48px; }

/* ------------------------------------------------------- practice areas --- */

.pg-areas { margin-top: 30px; }
.pg-areas + .pg-areas { margin-top: 34px; }
.pg-areas__group { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink, #111827); }
.pg-areas .home1a-browse__item--static { cursor: default; }
.pg-areas .home1a-browse__item--static .home1a-browse__name { color: var(--brand-body, #4A5265); }
.pg-areas__soon { display: block; margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-label, #6B6455); }

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

@media (max-width: 980px) {
  .pg-head { padding: 22px 18px 24px; }
  .pg-body { padding: 4px 18px 0; }
  .pg-firm__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pg-steps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .pg-title { font-size: 31px; line-height: 1.1; }
  .pg-lead { font-size: 15.5px; }
  .pg-section__title { font-size: 22px; }
  .pg-prose h2 { font-size: 23px; margin-top: 34px; }
  .pg-prose p { font-size: 15.5px; }
  .pg-defs__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pg-empty { padding: 22px 18px 24px; }
  .pg-empty__title { font-size: 22px; }
  .pg-empty__actions .btn-solid,
  .pg-empty__actions .btn-outline,
  .pg-head__actions .btn-solid,
  .pg-head__actions .btn-outline { width: 100%; }
  .pg-search__row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pg-search__row .btn-solid { width: 100%; }
  .pg .name-search__row { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 12px 14px; align-items: start; }
  .ns-thumb { width: 48px; height: 48px; }
  .ns-kind { grid-column: 2; justify-self: start; }
  .ns-name { font-size: 18px; }
  .pg-tabs a { padding: 0 10px; font-size: 14px; }
  .cmp-actions .btn-solid, .cmp-actions .btn-outline, .cmp-actions form { width: 100%; }
  .cmp-actions form .btn-outline { width: 100%; }
}

/* .pg a sets interaction colour; names on cards stay ink, as in the directory. */
.pg .lawyer-card__name a { color: var(--brand-ink, #111827); text-decoration: none; }
.pg .lawyer-card__name a:hover { text-decoration: underline; }
.pg .lawyer-card__focus { margin-top: 8px; }
.pg .lawyer-card__actions .btn-solid { text-decoration: none; }
.pg-defs__note { display: block; margin-top: 8px; }
.pg-prose ul { list-style: disc; }
.pg-prose ol { list-style: decimal; }
.pg-prose .chip-licence,
.pg .cmp .chip-licence {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--brand-body, #4A5265);
  flex-wrap: wrap;
}
.pg-prose .chip-licence--attested { color: var(--brand-label, #6B6455); }
.pg input, .pg select, .pg textarea { font-family: var(--brand-font-ui); }
.pg-search select.issue-form__where { font-size: 17px; color: var(--brand-ink, #111827); }

/* Practice-area grid: hairlines per cell so a short last row leaves no
   filled gap. */
.pg-areas .home1a-browse__grid {
  gap: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--brand-rule, #E6E2D8);
  border-left: 1px solid var(--brand-rule, #E6E2D8);
}
.pg-areas .home1a-browse__grid > li {
  border-right: 1px solid var(--brand-rule, #E6E2D8);
  border-bottom: 1px solid var(--brand-rule, #E6E2D8);
  background: #fff;
}
.cmp { table-layout: fixed; }
@media (max-width: 720px) {
  .cmp { min-width: 600px; font-size: 14px; }
  .cmp thead th:first-child, .cmp tbody th { width: 112px; }
  .cmp th, .cmp td { padding: 12px 12px; }
  .cmp tbody th { font-size: 11px; }
  .cmp__name { font-size: 18px; }
}