.site-pro {
  --site-width: 78rem;
  --site-gutter: clamp(1rem, 4vw, 3rem);
  --canvas: #f6f2e9;
  --paper: #fffdf7;
  --ink: #222b2b;
  --muted: #525a50;
  --line: #cfc5b5;
  --teal: #a23c2b;
  --teal-soft: #efe7dc;
  --focus: #a23c2b;
  --radius: 8px;
  --olive: #465444;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.site-pro-header { border-bottom: 1px solid var(--line); }

.site-pro-nav,
.site-pro-main,
.site-pro-footer {
  width: min(100%, var(--site-width));
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.site-pro-nav,
.site-pro-nav nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.site-pro-nav {
  justify-content: space-between;
  gap: .35rem 1rem;
  padding-block: .8rem;
}

.site-pro-nav nav { gap: .2rem clamp(.3rem, 2vw, 1.35rem); }
.site-pro-nav .brand { min-height: 44px; }
.site-pro-nav .brand strong { letter-spacing: -.045em; }
.site-pro-nav .brand strong span { color: var(--teal); }
.site-pro-nav .brand-mark { width: 40px; height: 40px; }

.site-pro-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-inline: .14rem;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}

.site-pro-link:hover,
.site-pro-link[aria-current="page"] {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: .34em;
}

.site-pro-main { padding-block: clamp(1.5rem, 6vw, 4.7rem) clamp(2.2rem, 6vw, 4.5rem); }

.directory-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
  align-items: end;
  gap: 1.35rem clamp(1.5rem, 6vw, 5rem);
  margin-bottom: clamp(1.3rem, 4vw, 2.6rem);
}

.site-pro h1,
.site-pro h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em;
}

.directory-intro h1 { font-size: clamp(2.75rem, 7.5vw, 6.35rem); line-height: .97; }
.directory-intro .eyebrow { color: var(--teal); }
.directory-lede { margin-top: .85rem; max-width: 43ch; font-size: clamp(1rem, 2vw, 1.19rem); }

.directory-coverage {
  padding: .15rem 0 .15rem 1rem;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: .94rem;
}

.directory-coverage .eyebrow { color: var(--olive); }

.site-pro .pro-search {
  padding: clamp(1rem, 3vw, 1.75rem);
  border-radius: var(--radius);
}

.site-pro .pro-form { gap: .75rem clamp(.65rem, 2vw, 1rem); }
.site-pro .pro-field { color: var(--ink); }

.site-pro .pro-field input,
.site-pro .pro-field select {
  min-height: 48px;
  padding-inline: .75rem;
  border-color: #8d8274;
  border-radius: 4px;
  background: var(--paper);
  font-size: 1rem;
}

.site-pro .button { border-radius: 5px; }
.site-pro .button-primary:hover { border-color: #7e2c21; background: #7e2c21; }
.site-pro .button-secondary { border-color: #8d8274; color: var(--ink); }
.site-pro .button-secondary:hover { border-color: var(--teal); color: var(--teal); }
.site-pro .button-quiet { color: var(--olive); }
.site-pro .pro-pilots { margin-top: .75rem; }
.site-pro .pro-pilots .button:hover { background: #e7ded0; }
.site-pro .pro-group-heading { padding-top: .45rem; }
.site-pro .pro-card { border-radius: var(--radius); }
.site-pro .pro-card h3 { font-weight: 700; }
.site-pro .pro-card .chip { background: var(--teal-soft); color: var(--olive); }
.site-pro .empty-state { border: 1px solid var(--line); background: #efe9dc; }

.site-pro-main .pro-fallback {
  padding-block-start: 1.15rem;
  border-top: 1px solid var(--line);
}

.site-pro-main .pro-fallback > p { max-width: 70ch; margin-top: .5rem; color: var(--muted); }
.site-pro-main .pro-fallback > .actions { margin-top: .6rem; }

.directory-next {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  margin-top: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #edeadd;
}

.directory-next p { margin-top: .45rem; color: var(--muted); }

.site-pro-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem 1.2rem;
  padding-block: .65rem 1rem;
  border-top: 1px solid var(--line);
  font-size: .89rem;
}

.site-pro-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.site-pro-footer a:first-child { font-weight: 750; }

@media (max-width: 640px) {
  .directory-intro { grid-template-columns: minmax(0, 1fr); }
  .site-pro-nav nav { width: 100%; column-gap: .85rem; }
}