/* ==========================================================================
   Top Lawyer Match — design system v1.0
   Authored CSS. No utility framework. Tokens first, then components.

   LOCKED brand layers (do not reassign):
     TOP      = Gold          — recognition / selection / verified achievement
     LAWYER   = Ivory         — attorney identity / professional info / directory
     MATCH    = Midnight Navy — personalization / compatibility / decision intelligence
     INTERACTION = Indigo     — buttons / links / interactive controls

   Navy (--color-ink) is reserved for Match surfaces and authority chrome.
   Do not use navy as a generic dark-section treatment unrelated to Match.
   Typography (approved): Source Serif 4 + Plus Jakarta Sans (self-hosted).
   ========================================================================== */

/* 1. TOKENS ================================================================ */

:root {
  color-scheme: light;
  /* Colour — semantic brand layers */
  --color-ink:        #111827;  /* MATCH / midnight navy — Match panels + authority */
  --color-ink-raised: #1c2436;  /* hover on ink grounds */
  --color-ink-rule:   #2b3446;  /* rule on ink grounds */
  --color-ink-rule-2: #232c3d;  /* row rule on ink grounds */
  --color-indigo:     #3F46A5;  /* INTERACTION ONLY */
  --color-indigo-dark:#2c3279;  /* indigo hover/active */
  --color-gold:       #C6A15B;  /* TOP / recognition ONLY */
  --color-gold-ink:   #7A5E20;  /* gold-family text on light grounds — AA on white & ivory */
  --color-gold-wash:  #FDFAF3;  /* recognition chip ground */
  --color-ivory:      #F8F6F1;  /* page canvas — attorney content */
  --color-white:      #FFFFFF;  /* lifted subsection */
  --color-slate:      #667085;  /* labels, sources, metadata */
  --color-slate-on-ink: #8E96A6;
  --color-body:       #4A5265;  /* body copy on light */
  --color-body-strong:#2C3444;
  --color-body-on-ink:#C7CBD4;
  --color-rule:       #E6E2D8;  /* row rule on light grounds */
  --color-rule-strong:#DDD8CD;  /* section edge on light grounds */
  --color-field:      #C9C3B6;  /* form underline */
  --color-placeholder:#8A8372;  /* AA on white */
  --color-error:      #8A2F2F;
  --color-success:    #1F5C3D;
  --color-skeleton:   #E9E5DC;

  /* Type */
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --size-display:   78px;  /* attorney name, desktop */
  --size-section:   32px;  /* section headings */
  --size-figure:    44px;  /* representative-experience figures */
  --size-quote:     22px;  /* review quotes */
  --size-fact:      28px;  /* quick-fact numerals */
  --size-lead:      21px;
  --size-body:      17px;
  --size-meta:      15px;
  --size-small:     14px;
  --size-label:     12px;  /* caps label, .14em tracking */

  --leading-tight: 1.15;
  --leading-body: 1.65;
  --tracking-label: .14em;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 18px;
  --space-5: 26px; --space-6: 32px; --space-7: 44px; --space-8: 56px;

  --section-pad-y: 50px;
  --section-pad-x: 56px;
  --page-max: 1280px;
  --measure: 72ch;

  /* Rules, radii, focus */
  --rule-section: 1px solid var(--color-ink);
  --rule-row: 1px solid var(--color-rule);
  --rule-edge: 1px solid var(--color-rule-strong);
  --radius-control: 6px;
  --radius-surface: 8px;
  --radius-chip: 99px;
  --focus-ring: 3px solid var(--color-indigo);
  --focus-offset: 2px;

  --tap-min: 44px;
}

/* 2. BASE ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--color-indigo); text-decoration: none; }
a:hover { color: var(--color-indigo-dark); text-decoration: underline; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}
/* Deliberate exception to the gold-is-recognition rule: on ink grounds the
   indigo focus ring fails contrast, and gold is the only token that clears AA
   against #111827. Focus indication is an accessibility requirement, not
   decoration — gold is used nowhere else on these surfaces. */
.match-register :focus-visible,
.site-masthead :focus-visible,
.consultation :focus-visible { outline-color: var(--color-gold); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--color-ink); color: #fff; padding: 12px 18px;
}
.skip-link:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 3. SHARED PRIMITIVES ===================================================== */

.label {
  font-size: var(--size-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-slate);
}
.label--on-ink { color: var(--color-slate-on-ink); }
.label--gold { color: var(--color-gold-ink); }

.section { padding: var(--section-pad-y) var(--section-pad-x); }
.section--white { background: var(--color-white); border-top: var(--rule-edge); }
.section--ivory { background: var(--color-ivory); border-top: var(--rule-edge); }

/* A section opens with a strong rule; rows inside use the light rule. */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  padding-bottom: var(--space-3);
  border-bottom: var(--rule-section);
}
.section-head h2 { font-size: var(--size-section); }
.section-note { font-size: var(--size-meta); color: var(--color-slate); }

.source { font-size: var(--size-small); color: var(--color-slate); }

/* Buttons — one primary per view. Gold primary ONLY on ink grounds. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min);
  padding: 16px 28px;
  border-radius: var(--radius-control);
  font-size: var(--size-body); font-weight: 700;
  text-decoration: none; text-align: center;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-indigo); color: #fff; }
.btn--primary:hover { background: var(--color-indigo-dark); color: #fff; }
.btn--primary:active { background: #242a68; }
.btn--secondary { border: 1.5px solid var(--color-ink); color: var(--color-ink); }
.btn--secondary:hover { background: #EFECE4; color: var(--color-ink); }
/* Retired. Gold is recognition only: it never appears on a button, a divider,
   or any product chrome. See docs/BADGE-SEMANTICS.md, invariant 1. */
.btn--ghost-ink { border: 1px solid #3A4256; color: #fff; font-weight: 600; }
.btn--ghost-ink:hover { background: var(--color-ink-raised); color: #fff; }
.btn--text {
  min-height: var(--tap-min); padding: 12px 4px;
  color: var(--color-indigo); font-weight: 600; font-size: var(--size-meta);
}
.btn--text:hover { text-decoration: underline; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: #E2DED4; color: var(--color-slate); border-color: transparent;
  cursor: not-allowed; pointer-events: none;
}
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: #fff; animation: tlm-spin .7s linear infinite;
}
@keyframes tlm-spin { to { transform: rotate(360deg); } }

/* Toggle actions (Save / Compare) — pressed state is textual, not colour-only */
.action-toggle {
  min-height: var(--tap-min);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 6px;
  font-size: var(--size-meta); font-weight: 600; color: var(--color-indigo);
}
.action-toggle:hover { text-decoration: underline; }
.action-toggle[aria-pressed="true"] { color: var(--color-ink); }
.action-toggle[aria-pressed="true"]::before { content: "✓"; font-weight: 700; }

/* Recognition — the only ornament in the system */
.recognition-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--color-gold); border-radius: var(--radius-chip);
  background: var(--color-gold-wash);
}
.recognition-chip__dot,
.verified-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-gold); flex: none; }
.recognition-chip__text {
  font-size: var(--size-label); font-weight: 800;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-gold-ink);
}
.recognition-seal {
  width: 78px; height: 78px; flex: none; border-radius: 50%;
  background: var(--color-ink); border: 2px solid var(--color-gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff;
}
.recognition-seal__top,
.recognition-seal__bottom { font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.recognition-seal__top { color: var(--color-gold); }
.recognition-seal__bottom { color: #9AA1B1; }
.recognition-seal__year { font-family: var(--font-display); font-size: 19px; line-height: 1; }

/* Skeletons */
.is-skeleton { color: transparent !important; background: var(--color-skeleton); border-radius: 2px; }
.is-skeleton * { visibility: hidden; }

/* 4. PAGE SHELL ============================================================ */

.attorney-profile { max-width: var(--page-max); margin: 0 auto; background: var(--color-ivory); }

.site-masthead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: 14px var(--section-pad-x);
  background: var(--color-ink); color: #fff;
}
.site-masthead__brand { display: flex; align-items: center; gap: 11px; font-size: var(--size-meta); font-weight: 800; color: #fff; }
.site-masthead__mark { width: 22px; height: 22px; border-radius: 5px; background: var(--color-gold); }
.site-masthead__nav { display: flex; align-items: center; gap: var(--space-5); }
.site-masthead__nav a { color: var(--color-body-on-ink); font-size: var(--size-meta); }
.site-masthead__nav a:hover { color: #fff; }

/* 5. HERO ================================================================== */

.attorney-hero {
  display: grid; grid-template-columns: minmax(0,1fr) 380px;
  gap: var(--space-8); align-items: start;
  padding: 52px var(--section-pad-x) var(--space-7);
}
.attorney-hero__recognition { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.attorney-hero__context { font-size: var(--size-small); color: var(--color-slate); }
.attorney-hero__name {
  font-size: var(--size-display); line-height: .97; letter-spacing: -.022em;
  margin: 0 0 var(--space-3);
}
.attorney-hero__meta { font-size: var(--size-lead); line-height: 1.5; color: var(--color-body-strong); max-width: 38ch; }
.attorney-hero__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.attorney-portrait { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border: 1px solid #D3CDC0; display: block; background: var(--color-skeleton); }
.attorney-hero__seal-note {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--rule-section);
  font-size: var(--size-small); line-height: 1.55; color: var(--color-body);
}

/* Quick facts — numerals between two rules. Never boxed. */
.attorney-quick-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  margin: var(--space-6) 0;
  border-top: var(--rule-section); border-bottom: var(--rule-edge);
}
.attorney-quick-facts li { padding: var(--space-4) 0; }
.attorney-quick-facts .value { font-size: var(--size-fact); font-weight: 800; letter-spacing: -.02em; }
.attorney-quick-facts .caption { font-size: var(--size-small); color: var(--color-slate); margin-top: 3px; }
/* Mobile priority is fixed: rating / years licensed / free consult.
   Median reply time is deliberately NOT here — it sits by the sticky CTA. */
.attorney-quick-facts li[data-desktop-only] { display: block; }

/* 6. MATCH REGISTER — the signature component ============================== */

.match-register {
  padding: var(--space-7) var(--section-pad-x) var(--section-pad-y);
  background: var(--color-ink); color: #fff;
}
.match-register__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-ink-rule);
}
.match-register__head h2 { font-size: 40px; line-height: 1.05; margin-bottom: var(--space-2); }
.match-register__sub { font-size: 16px; color: var(--color-body-on-ink); max-width: 70ch; }
.match-register__count { font-size: var(--size-small); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-gold); }

.match-factor {
  display: grid; grid-template-columns: 52px minmax(0,1fr) minmax(0,1fr) 176px;
  gap: 0 30px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--color-ink-rule-2);
}
.match-factor__index { font-family: var(--font-display); font-size: 27px; line-height: 1.1; color: var(--color-slate-on-ink); }
.match-factor__said { font-size: 18px; line-height: 1.45; color: #E6E8EE; }
.match-factor__record { font-size: 18px; line-height: 1.45; color: #fff; }
.match-factor__verdict { text-align: right; }
/* Status is carried by WORDS, never by colour alone, and never in gold —
   gold means recognition. A non-aligning factor is simply stated louder. */
.match-factor__status { font-size: var(--size-small); color: var(--color-slate-on-ink); }
.match-factor[data-alignment="consider"] .match-factor__status { color: #fff; font-weight: 700; }
.match-factor[data-alignment="consider"] { border-left: 3px solid var(--color-slate-on-ink); padding-left: 17px; margin-left: -20px; }
.match-factor__source { font-size: 13px; color: var(--color-slate-on-ink); margin-top: 4px; }
.match-factor__details { margin-top: 10px; font-size: var(--size-meta); line-height: 1.55; color: var(--color-body-on-ink); }
/* Neutral, not gold: gold is recognition only, and this is an interaction. */
.match-factor__toggle { font-size: var(--size-small); color: #E6E8EE; font-weight: 600; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; }
.match-factor__toggle:hover { color: #fff; }
.match-factor__toggle:hover { text-decoration: underline; }
[hidden] { display: none !important; }

.match-register__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-5);
}
.match-register__disclosure { font-size: var(--size-meta); line-height: 1.6; color: #9AA1B1; max-width: 66ch; }
.match-register__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* 7. RECOGNITION PANEL ===================================================== */

.recognition-panel { background: var(--color-white); border-bottom: var(--rule-edge); }
.recognition-panel__body { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: var(--space-7); padding-top: var(--space-5); }
.recognition-panel__list li + li { margin-top: 0; }
.recognition-panel__tab {
  width: 100%; text-align: left; min-height: var(--tap-min);
  padding: 14px 0 14px 16px; border-left: 3px solid var(--color-rule);
}
.recognition-panel__tab:hover { border-left-color: var(--color-indigo); }
.recognition-panel__tab[aria-selected="true"] { border-left-color: var(--color-gold); background: var(--color-gold-wash); }
.recognition-panel__tab .name { display: block; font-size: var(--size-body); font-weight: 700; }
.recognition-panel__tab .kind { display: block; font-size: var(--size-small); color: var(--color-slate); margin-top: 2px; }
.recognition-detail h3 { font-size: 28px; line-height: 1.2; margin-bottom: 10px; }
.recognition-detail p { font-size: var(--size-body); line-height: var(--leading-body); color: var(--color-body); max-width: 76ch; margin-bottom: var(--space-4); }
.recognition-criteria li {
  display: grid; grid-template-columns: 16px minmax(0,1fr); gap: var(--space-3);
  padding: 10px 0; border-top: var(--rule-row);
  font-size: 16px; line-height: 1.55; color: var(--color-body-strong);
}
.recognition-criteria .verified-dot { width: 8px; height: 8px; margin-top: 8px; }
.recognition-detail__provenance { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--rule-row); font-size: var(--size-meta); color: var(--color-slate); }

/* 8. WHY CLIENTS CHOOSE + PRACTICE AREAS =================================== */

.two-column { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-8); }
.why-clients__lead { font-family: var(--font-display); font-size: var(--size-lead); line-height: 1.6; color: var(--color-body-strong); margin-bottom: var(--space-3); }
.why-clients p + p { font-size: var(--size-body); line-height: 1.7; color: var(--color-body); }

.practice-areas__head { padding-bottom: var(--space-3); border-bottom: var(--rule-section); }
.practice-areas li {
  display: grid; grid-template-columns: minmax(0,1fr) 62px; gap: var(--space-4);
  align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--rule-row);
}
.practice-areas .name { font-size: 19px; font-weight: 700; }
.practice-areas .plain { font-size: 16px; line-height: 1.5; color: var(--color-body); margin-top: 2px; }
.practice-areas .share { font-size: 19px; font-weight: 700; color: var(--color-indigo); text-align: right; }

/* 9. REPRESENTATIVE EXPERIENCE ============================================= */
/* One module, many proof types. The figure is whatever the practice area
   makes meaningful: a recovery, a disposition, a count, a status. */

.representative-experience__item {
  display: grid; grid-template-columns: 180px minmax(0,1fr) 230px;
  gap: var(--space-6); align-items: baseline;
  padding: var(--space-5) 0; border-bottom: var(--rule-row);
}
.representative-experience__figure {
  font-family: var(--font-display); font-size: var(--size-figure); font-weight: 500;
  line-height: 1; letter-spacing: -.02em;
}
.representative-experience__kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-indigo); margin-bottom: 6px;
}
.representative-experience__body { font-size: var(--size-body); line-height: 1.6; color: var(--color-body-strong); max-width: 64ch; }
.representative-experience__disclaimer { font-size: var(--size-small); color: var(--color-slate); margin-top: var(--space-3); }

/* 10. REVIEWS ============================================================== */

.client-reviews { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: var(--space-8); }
.client-reviews__score { font-size: 58px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.client-reviews__meta { font-size: 16px; line-height: 1.55; color: var(--color-body); margin-top: var(--space-2); }
.review { padding: var(--space-5) 0; border-top: var(--rule-row); }
.review__quote { font-family: var(--font-display); font-size: var(--size-quote); line-height: 1.55; margin-bottom: 10px; }
.review__byline { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--size-meta); color: var(--color-body); }
.review__name { font-weight: 700; color: var(--color-ink); }
.review__verified { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gold-ink); }
.review__verified .verified-dot { width: 9px; height: 9px; }

/* 11. PROFESSIONAL RECORD ================================================== */

.professional-record__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--space-8); }
.professional-record__row {
  display: grid; grid-template-columns: 170px minmax(0,1fr); gap: var(--space-4);
  align-items: baseline; padding: 13px 0; border-bottom: var(--rule-row);
}
.professional-record__row dt { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-slate); }
.professional-record__row dd { margin: 0; font-size: var(--size-body); line-height: 1.5; }

/* 12. QUESTIONS ============================================================ */

.questions { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: var(--space-8); }
.question { border-top: var(--rule-row); }
.question__toggle {
  width: 100%; text-align: left; min-height: var(--tap-min);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5);
  padding: 20px 0;
}
.question__q { font-size: 20px; font-weight: 700; }
.question__sign { font-size: 24px; color: var(--color-indigo); line-height: 1; }
.question__toggle[aria-expanded="true"] .question__sign::before { content: "–"; }
.question__toggle[aria-expanded="false"] .question__sign::before { content: "+"; }
.question__answer { padding-bottom: 20px; }
.question__answer p { font-size: var(--size-body); line-height: 1.7; color: var(--color-body); max-width: 82ch; }
.question__provenance { font-size: 13px; color: var(--color-slate); margin-top: 10px; }

/* 13. CONSULTATION ========================================================= */

.consultation {
  display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: var(--space-8);
  padding: 52px var(--section-pad-x); background: var(--color-ink); color: #fff;
}
.consultation h2 { font-size: 38px; margin-bottom: var(--space-3); }
.consultation__lead { font-size: 18px; line-height: 1.6; color: var(--color-body-on-ink); max-width: 52ch; margin-bottom: var(--space-6); }
.consultation__office { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--space-7); }
.consultation__office div { padding: var(--space-3) 0; border-top: 1px solid var(--color-ink-rule); }
.consultation__office dt { margin-bottom: 4px; }
.consultation__office dd { margin: 0; font-size: 16px; line-height: 1.5; }
.consultation__disclaimer { margin-top: var(--space-5); font-size: var(--size-small); line-height: 1.6; color: var(--color-slate-on-ink); max-width: 62ch; }

/* The form is one of only two places a box is earned: it holds inputs. */
.consultation-panel { background: var(--color-white); color: var(--color-ink); padding: 28px; border-radius: var(--radius-surface); }
.consultation-panel h3 { font-family: var(--font-ui); font-size: 21px; font-weight: 800; margin-bottom: 3px; }
.consultation-panel__note { font-size: var(--size-meta); color: var(--color-body); margin-bottom: var(--space-4); }

.field { margin-bottom: var(--space-4); }
.field label {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-slate); margin-bottom: 6px;
}
.field input, .field textarea {
  width: 100%; min-height: var(--tap-min);
  padding: 8px 0 9px; border: 0; border-bottom: 1.5px solid var(--color-field);
  background: transparent; font: inherit; font-size: var(--size-body); color: var(--color-ink);
  border-radius: 0;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-placeholder); }
.field input:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--color-indigo); }
.field input:focus-visible, .field textarea:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.field.is-invalid label { color: var(--color-error); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--color-error); border-bottom-width: 2px; }
.field__error { display: none; font-size: var(--size-small); color: var(--color-error); margin-top: 6px; }
.field.is-invalid .field__error { display: block; }

.form-footnote { font-size: var(--size-small); color: var(--color-slate); text-align: center; margin-top: var(--space-3); }
.form-success {
  border-left: 3px solid var(--color-success); padding: var(--space-3) var(--space-4);
  font-size: 16px; line-height: 1.55; color: var(--color-ink); background: #F1F5F2;
}

/* 14. STICKY CTAs ========================================================== */

.sticky-cta {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--color-white); border-top: var(--rule-edge);
}
.sticky-cta__meta { padding: 9px var(--space-4) 0; font-size: 13px; color: var(--color-slate); }
.sticky-cta__actions { display: flex; gap: 10px; padding: 10px var(--space-4) 18px; }
.sticky-cta__actions .btn--primary { flex: 1; }
.sticky-cta__actions .btn--secondary { width: 80px; padding: 16px 0; }
.sticky-cta--desktop { display: none; }

/* 15. RESPONSIVE =========================================================== */

@media (max-width: 1199px) {
  :root { --section-pad-x: 40px; --size-display: 62px; }
  .attorney-hero { grid-template-columns: minmax(0,1fr) 300px; gap: var(--space-7); }
  /* Source column folds into the record cell rather than disappearing. */
  .match-factor { grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr); gap: 0 22px; }
  .match-factor__verdict { grid-column: 2 / -1; text-align: left; margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
  .match-factor__source { margin-top: 0; }
  .questions, .client-reviews, .recognition-panel__body { grid-template-columns: 260px minmax(0,1fr); }
  .consultation { grid-template-columns: minmax(0,1fr) 360px; }
}

@media (max-width: 899px) {
  :root { --section-pad-x: 28px; --section-pad-y: 40px; --size-display: 52px; --size-figure: 36px; }
  .attorney-hero { grid-template-columns: minmax(0,1fr); }
  .attorney-hero__portrait { max-width: 300px; }
  .two-column, .questions, .client-reviews, .recognition-panel__body,
  .professional-record__grid, .consultation, .consultation__office { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }
  .representative-experience__item { grid-template-columns: 130px minmax(0,1fr); }
  .representative-experience__item .source { grid-column: 2; }
  .site-masthead__nav a:not(.btn) { display: none; }
}

@media (max-width: 639px) {
  :root { --section-pad-x: 20px; --section-pad-y: 32px; --size-display: 40px; --size-section: 26px; }
  .attorney-hero { padding: 24px var(--section-pad-x); }
  .attorney-hero__portrait { max-width: 132px; float: left; margin: 0 16px 12px 0; }
  /* Fixed mobile quick-fact priority: rating, years licensed, free consult. */
  .attorney-quick-facts { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .attorney-quick-facts li[data-desktop-only] { display: none; }
  .attorney-quick-facts .value { font-size: 21px; }
  .attorney-hero__actions .btn { width: 100%; }
  .match-register__head h2 { font-size: 26px; }
  /* Evidence is stacked, never dropped. */
  .match-factor { grid-template-columns: 34px minmax(0,1fr); gap: 0 12px; padding-left: 0; margin-left: 0; }
  .match-factor[data-alignment="consider"] { padding-left: 12px; margin-left: -12px; }
  .match-factor__record, .match-factor__verdict { grid-column: 2; }
  .match-factor__said, .match-factor__record { font-size: 16px; }
  .match-factor__record { margin-top: 8px; }
  .representative-experience__item { grid-template-columns: minmax(0,1fr); gap: var(--space-2); }
  .client-reviews__score { font-size: 44px; }
  .professional-record__row { grid-template-columns: 120px minmax(0,1fr); gap: var(--space-3); }
  .consultation-panel { padding: 20px; }
}

/* Desktop keeps a persistent consultation route in the hero; the sticky bar
   is mobile-only so the page never carries two competing primary actions. */
@media (min-width: 640px) {
  .sticky-cta { display: none; }
}

/* 16. PRINT ================================================================ */

@media print {
  .sticky-cta, .site-masthead__nav, .match-factor__toggle { display: none; }
  body { background: #fff; }
  .match-register, .consultation { background: #fff; color: #000; }
  .match-factor__record, .match-register__head h2, .consultation h2 { color: #000; }
  .question__answer { display: block !important; }
}


/* Locked Match statuses: Aligns / Different / Information unavailable */
.match-factor[data-alignment="different"] .match-factor__status,
.match-factor[data-alignment="unavailable"] .match-factor__status { color: #fff; font-weight: 700; }
.match-factor[data-alignment="different"],
.match-factor[data-alignment="unavailable"] { border-left: 3px solid var(--color-slate-on-ink); padding-left: 17px; margin-left: -20px; }
@media (max-width: 639px) {
  .match-factor[data-alignment="different"],
  .match-factor[data-alignment="unavailable"] { padding-left: 12px; margin-left: -12px; }
}

/* Phase 1 helpers — replace former inline styles from the export */
.section-inline-heading {
  font-size: var(--size-section);
  margin-bottom: var(--space-3);
}
.why-clients .section-inline-heading { margin-bottom: var(--space-4); }
.section-head--tight { margin-bottom: var(--space-1); }
.questions__intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body);
}
.consultation__phone { color: #fff; }
.verified-dot--inline {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 6px;
}

/* Staging home */
.staging-home {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--section-pad-x);
}
.staging-home h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-section);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}
.staging-home p { color: var(--color-body); line-height: var(--leading-body); margin: 0 0 var(--space-4); }
.staging-home__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.staging-banner {
  background: var(--color-ink);
  color: var(--color-body-on-ink);
  padding: 10px var(--section-pad-x);
  font-size: var(--size-small);
}
.staging-banner a { color: var(--color-gold); }

/* Brand lockup */
.tlm-mark { display: block; flex: none; }
.site-masthead__brand .tlm-wordmark,
.home-masthead__brand .tlm-wordmark,
.results-masthead__brand .tlm-wordmark,
.match-shell__brand .tlm-wordmark { color: #fff; }
.site-masthead__brand { text-decoration: none; }
.site-masthead__brand:hover { text-decoration: none; color: #fff; }

/* Badge semantics */
.badge--verified {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 0;
  background: transparent;
  color: var(--color-indigo);
  font-size: 13px;
  font-weight: 700;
}
.badge--verified .badge__check { flex: none; color: var(--color-indigo); }
.badge--verified .badge__title { letter-spacing: 0.02em; }
.badge--verified .badge__detail {
  font-weight: 600;
  color: var(--color-slate);
  font-size: 12px;
}
.tag--enhanced {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 9px;
  border: 1px dotted var(--brand-paid-rule, #A9A293);
  background: #F1EFE9;
  color: var(--brand-paid-ink, #6B6455);
  font-size: 12px;
  font-weight: 600;
}
.recognition-seal-fig { margin: 0; }
.recognition-seal-fig__link { display: inline-block; line-height: 0; }
.recognition-seal-fig__link img {
  width: 160px;
  height: 160px;
  display: block;
}
.recognition-seal-fig__caption {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-slate);
  max-width: 22ch;
  line-height: 1.4;
}
.verify-page { max-width: 40rem; padding: var(--space-7) 0; }
.verify-page__code { font-size: 15px; color: var(--color-body); }
.verify-page__code code {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.verify-page__lock {
  font-weight: 700;
  color: var(--color-ink);
}
.verify-page__seal { margin: var(--space-5) 0; }

/* ---- Global site footer ------------------------------------------------
   Ink ground, matching the masthead: the footer is authority chrome, so navy
   is correct here. No gold — nothing in the footer is recognition.
   ------------------------------------------------------------------------ */

.site-footer {
  background: var(--color-ink);
  color: var(--color-body-on-ink);
  padding: var(--space-8) var(--section-pad-x) var(--space-5);
  font-family: var(--font-ui);
}
.site-footer :focus-visible { outline-color: var(--color-gold); }

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
  max-width: var(--page-max);
  margin: 0 auto;
  padding-bottom: var(--space-7);
}

.site-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.site-footer__brand-link:hover { text-decoration: none; }
.site-footer__brand-link .tlm-wordmark { color: #fff; }

.site-footer__tagline {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.4;
  color: #fff;
  margin-top: var(--space-4);
  max-width: 26ch;
}
.site-footer__note {
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--color-slate-on-ink);
  margin-top: var(--space-3);
  max-width: 34ch;
}

.site-footer__heading {
  font-family: var(--font-ui);
  font-size: var(--size-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-slate-on-ink);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-ink-rule);
}
.site-footer__col ul { margin: 0; }
.site-footer__col li { margin: 0; }
.site-footer__col a {
  display: block;
  padding: 7px 0;
  font-size: var(--size-meta);
  line-height: 1.45;
  color: var(--color-body-on-ink);
  text-decoration: none;
}
.site-footer__col a:hover { color: #fff; text-decoration: underline; }

.site-footer__cta { margin-top: var(--space-4); }

/* Legal notice — sits between the links and the credit bar. */
.site-footer__legal {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-ink-rule);
}
.site-footer__disclaimer {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-slate-on-ink);
  max-width: 104ch;
}
.site-footer__disclaimer strong { color: var(--color-body-on-ink); }

.site-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  max-width: var(--page-max);
  margin: 0 auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-ink-rule);
}
.site-footer__copy {
  font-size: 13px;
  color: var(--color-slate-on-ink);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.site-footer__links a {
  font-size: 13px;
  color: var(--color-body-on-ink);
  text-decoration: none;
}
.site-footer__links a:hover { color: #fff; text-decoration: underline; }

.site-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-slate-on-ink);
  text-decoration: none;
  border: 1px solid var(--color-ink-rule);
  border-radius: 20px;
  padding: 6px 14px;
  transition: color .2s ease, border-color .2s ease;
}
.site-footer__badge:hover {
  color: #fff;
  border-color: var(--color-slate-on-ink);
  text-decoration: none;
}

@media (max-width: 1099px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 639px) {
  .site-footer { padding: var(--space-7) 20px var(--space-5); }
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .site-footer__col a { padding: 9px 0; }
  .site-footer__bar { justify-content: flex-start; }
  .site-footer__cta { width: 100%; }
}