/* ==========================================================================
   Go Denver Homes — Home Services Directory
   Additive stylesheet. Loads AFTER css/style.css and only on the directory,
   profile, ethics and application pages. Deliberately does not modify any
   existing selector, so the rest of the site is untouched.

   Uses the inherited Annie's Action AI tokens:
   --navy #14263F  --blue #1F78E8  --green #41C94A  --soft-white #F8FAFC
   --light-gray #EEF2F6  --medium-gray #D5DEE8  --dark-gray #667085
   --nearly-black #202632  --shadow-card  --shadow-card-hover  --max-width
   ========================================================================== */

/* The inherited style.css sets `.form-field input { width: 100% }`, which
   stretches checkboxes across the row and squeezes their label to nothing.
   Opt checkboxes out everywhere this stylesheet is loaded. */
.hs-filters input[type="checkbox"],
.hs-form input[type="checkbox"],
.hs-checkbox input[type="checkbox"] {
  width: auto !important;
  flex: 0 0 auto;
  min-width: 0;
}

/* ---------- toolbar / filters ---------- */
.hs-toolbar { margin: 0 0 28px; }

.hs-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--medium-gray, #D5DEE8);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-card, 0 8px 24px rgba(20,38,63,.08));
}
.hs-filters .form-field { margin: 0; }
.hs-filters label {
  display: block;
  font-weight: 600;
  font-size: .82rem;
  color: var(--navy, #14263F);
  margin-bottom: 6px;
}
/* Keep the checkbox label a flex row — .hs-filters label above would otherwise
   win on specificity and stack the box above its text. */
.hs-filters label.hs-checkbox {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 0;
  font-weight: 400;
  font-size: .88rem;
  color: var(--nearly-black, #202632);
}
.hs-filters label.hs-checkbox input { margin-top: 0; }
.hs-filters label.hs-checkbox span { min-width: 0; }
/* Normalise control heights so every label sits on the same baseline. */
.hs-filters select,
.hs-filters input[type="search"] { height: 44px; }
/* The availability toggle gets its own full-width row: the phrase is longer
   than a filter column and would otherwise overflow. */
.hs-toggle-field {
  grid-column: 1 / -1;
  border-top: 1px solid var(--light-gray, #EEF2F6);
  padding-top: 14px;
}
.hs-toggle-label { margin-bottom: 2px !important; }

.hs-count {
  margin: 14px 2px 0;
  font-size: .86rem;
  color: var(--dark-gray, #667085);
}

/* ---------- notices ---------- */
.hs-notice {
  background: #EAF3FE;
  border: 1px solid rgba(31,120,232,.28);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 24px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--navy, #14263F);
}
.hs-notice a { color: var(--blue, #1F78E8); font-weight: 600; }

.hs-sample-banner {
  background: #FDEDEC;
  border: 1px solid #E8998F;
  color: #B3261E;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: .88rem;
  margin: 20px 0 0;
}

/* ---------- directory grid ---------- */
.hs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
  margin: 0 0 8px;
}

.hs-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--medium-gray, #D5DEE8);
  border-radius: 18px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card, 0 8px 24px rgba(20,38,63,.08));
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.hs-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: var(--blue, #1F78E8);
  opacity: 0;
  transition: opacity .16s ease;
}
.hs-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover, 0 14px 32px rgba(20,38,63,.14));
  border-color: rgba(31,120,232,.4);
}
.hs-card:hover::before { opacity: 1; }
.hs-card.featured { border-color: var(--green, #41C94A); }
.hs-card.featured::before { background: var(--green, #41C94A); opacity: 1; }
.hs-card[hidden] { display: none; }

.hs-sample-flag {
  align-self: flex-start;
  background: #FDEDEC;
  color: #B3261E;
  border: 1px solid #E8998F;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.hs-card-head { display: flex; flex-direction: column; gap: 5px; }
.hs-card-head h2,
.hs-card-head h3 {
  font-size: 1.16rem;
  margin: 0;
  color: var(--navy, #14263F);
  line-height: 1.25;
}
.hs-cat {
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue, #1F78E8);
}

.hs-desc {
  margin: 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--dark-gray, #667085);
}

.hs-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .9rem;
  color: var(--nearly-black, #202632);
}
.hs-meta b {
  display: inline-block;
  min-width: 84px;
  font-weight: 600;
  color: var(--dark-gray, #667085);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hs-meta a { color: var(--blue, #1F78E8); text-decoration: none; }
.hs-meta a:hover { text-decoration: underline; }

.hs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-tag {
  background: var(--light-gray, #EEF2F6);
  color: var(--navy, #14263F);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: .76rem;
  font-weight: 600;
}
.hs-tag-urgent { background: #FDEDEC; color: #B3261E; }

.hs-card-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--light-gray, #EEF2F6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.hs-badge {
  background: #E9FAEA;
  color: #1F7A28;
  border: 1px solid rgba(65,201,74,.4);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
}
.hs-profile-link {
  font-size: .88rem;
  font-weight: 600;
  color: var(--blue, #1F78E8);
  text-decoration: none;
  white-space: nowrap;
}
.hs-profile-link:hover { text-decoration: underline; }

.hs-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--dark-gray, #667085);
}
.hs-empty h3 { color: var(--navy, #14263F); margin: 0 0 8px; }

/* ---------- disclaimer ---------- */
.hs-disclaimer-wrap { max-width: 880px; }
.hs-disclaimer {
  background: var(--light-gray, #EEF2F6);
  border-left: 4px solid var(--navy, #14263F);
  border-radius: 0 12px 12px 0;
  padding: 20px 22px;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--dark-gray, #667085);
}
.hs-disclaimer p { margin: 0 0 12px; }
.hs-disclaimer p:last-child { margin-bottom: 0; }
.hs-disclaimer strong { color: var(--navy, #14263F); }
.hs-disclaimer a { color: var(--blue, #1F78E8); }
.hs-disclaimer-short { border-left-width: 3px; padding: 12px 16px; font-size: .85rem; }

/* ---------- breadcrumb ---------- */
.hs-breadcrumb {
  background: var(--soft-white, #F8FAFC);
  border-bottom: 1px solid var(--light-gray, #EEF2F6);
  padding: 14px 0;
  font-size: .85rem;
  color: var(--dark-gray, #667085);
}
.hs-breadcrumb a { color: var(--blue, #1F78E8); text-decoration: none; }
.hs-breadcrumb a:hover { text-decoration: underline; }
.hs-breadcrumb span { margin: 0 6px; }
.hs-breadcrumb .current { color: var(--navy, #14263F); font-weight: 600; }

/* ---------- profile page ---------- */
.hs-profile { padding: 44px 0 72px; }
.hs-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 40px;
  align-items: start;
}
.hs-profile-head { display: flex; gap: 20px; align-items: center; margin: 0 0 20px; }
.hs-avatar {
  flex: 0 0 auto;
  width: 68px; height: 68px;
  border-radius: 18px;
  background: var(--navy, #14263F);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.4rem; letter-spacing: .02em;
}
.hs-profile-head h1 { margin: .1em 0 .15em; }
.hs-profile-area { margin: 0; color: var(--dark-gray, #667085); font-size: .95rem; }
.hs-profile-blurb {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--nearly-black, #202632);
  margin: 0 0 18px;
}

.hs-aeo-panel {
  background: var(--navy, #14263F);
  color: var(--light-gray, #EEF2F6);
  border-radius: 18px;
  padding: 26px;
  margin: 26px 0;
}
.hs-aeo-panel .eyebrow { color: var(--green, #41C94A); }
.hs-aeo-note { font-size: .86rem; color: #9FB1C9; margin: 0 0 16px; line-height: 1.6; }
.hs-facts { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hs-facts > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.hs-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hs-facts dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #9FB1C9;
  font-weight: 600;
}
.hs-facts dd { margin: 0; font-size: .93rem; color: #fff; }
.hs-facts dd em { color: #C9D6E8; font-style: normal; font-size: .84rem; }
.hs-facts a { color: #7FD48C; }

.hs-profile-side { position: sticky; top: 104px; }
.hs-contact-card {
  background: #fff;
  border: 1px solid var(--medium-gray, #D5DEE8);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow-card, 0 8px 24px rgba(20,38,63,.08));
}
.hs-contact-card h2 { font-size: 1.2rem; margin: 12px 0 8px; color: var(--navy, #14263F); }
.hs-contact-note { font-size: .84rem; color: var(--dark-gray, #667085); line-height: 1.55; margin: 0 0 16px; }
.hs-contact-card .btn { margin-bottom: 10px; }
.hs-inquiry { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--light-gray, #EEF2F6); }

/* ---------- code of ethics ---------- */
.hs-ethics-wrap { max-width: 860px; }
.hs-ethics { list-style: none; counter-reset: none; padding: 0; margin: 0; }
.hs-ethics-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--medium-gray, #D5DEE8);
}
.hs-ethics-item:last-child { border-bottom: 0; }
.hs-ethics-num {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #EAF3FE;
  color: var(--blue, #1F78E8);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hs-ethics-item h2 { font-size: 1.16rem; margin: 6px 0 6px; color: var(--navy, #14263F); }
.hs-ethics-item p { margin: 0; color: var(--dark-gray, #667085); line-height: 1.65; font-size: .95rem; }
.hs-report-line { margin: 20px 0 0; font-size: .92rem; color: var(--dark-gray, #667085); }

/* ---------- application form ---------- */
.hs-form-wrap { max-width: 760px; }
.hs-form-intro { margin: 0 0 28px; }
.hs-form-intro h2 { font-size: 1.3rem; color: var(--navy, #14263F); margin: 0 0 12px; }
.hs-check-list { margin: 0; padding-left: 20px; color: var(--dark-gray, #667085); line-height: 1.7; font-size: .94rem; }
.hs-check-list li { margin-bottom: 7px; }
.hs-check-list a { color: var(--blue, #1F78E8); }

.hs-form fieldset {
  border: 1px solid var(--medium-gray, #D5DEE8);
  border-radius: 18px;
  padding: 24px;
  margin: 0 0 22px;
  background: #fff;
}
.hs-form legend {
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 700;
  color: var(--navy, #14263F);
  font-size: 1.05rem;
  padding: 0 10px;
}
.hs-fieldset-note {
  font-size: .87rem;
  color: var(--dark-gray, #667085);
  line-height: 1.6;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--light-gray, #EEF2F6);
  border-radius: 10px;
}
.hs-form .form-field { margin-bottom: 18px; }
.hs-form .form-field:last-child { margin-bottom: 0; }
.hs-form label { display: block; font-weight: 600; font-size: .9rem; color: var(--navy, #14263F); margin-bottom: 6px; }
.hs-form .req { color: #B3261E; }
.form-hint { font-size: .82rem; color: var(--dark-gray, #667085); margin: 6px 0 0; line-height: 1.55; }
.form-error { color: #B3261E; font-size: .85rem; margin: 6px 0 0; font-weight: 600; }
.form-error-block {
  background: #FDEDEC;
  border: 1px solid #E8998F;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 22px;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: #E8998F; background: #FFFBFB; }

.hs-checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px 16px;
  margin-top: 4px;
}
.hs-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-weight: 400 !important;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--nearly-black, #202632);
  cursor: pointer;
  margin-bottom: 0 !important;
}
.hs-checkbox input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--blue, #1F78E8); }
.hs-checkbox a { color: var(--blue, #1F78E8); }

.hs-agree { background: var(--soft-white, #F8FAFC); }
.hs-agree .form-field { margin-bottom: 20px; }

.hs-form-foot { font-size: .84rem; color: var(--dark-gray, #667085); line-height: 1.6; margin: 16px 0 0; }

/* honeypot — off-screen, never display:none (some bots skip hidden fields) */
.hs-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-success {
  background: #E9FAEA;
  border: 1px solid rgba(65,201,74,.45);
  border-radius: 18px;
  padding: 30px;
}
.form-success h2 { color: #1F7A28; margin: 0 0 10px; }
.form-success p { color: var(--nearly-black, #202632); line-height: 1.65; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hs-profile-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hs-profile-side { position: static; }
}
@media (max-width: 620px) {
  .hs-grid { grid-template-columns: 1fr; }
  .hs-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .hs-meta b { min-width: 0; display: block; }
  .hs-form fieldset { padding: 18px; }
  .hs-ethics-item { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
}

/* ==========================================================================
   Service-area pages (/service-areas, /service-areas/<city>,
   /service-areas/<trade>/<city>)
   ========================================================================== */

.sa-intro {
  max-width: 780px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--nearly-black, #202632);
  margin: 0 0 26px;
}
.sa-intro p { margin: 0; }

/* ZIP chips — the thing a homeowner scans for */
.sa-zips {
  background: #fff;
  border: 1px solid var(--medium-gray, #D5DEE8);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 0 0 32px;
  box-shadow: var(--shadow-card, 0 8px 24px rgba(20,38,63,.08));
}
.sa-zips-label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dark-gray, #667085);
  margin-bottom: 10px;
}
.sa-zips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.sa-zips li {
  background: #EAF3FE;
  color: #14263F;
  border: 1px solid rgba(31,120,232,.22);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: .88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sa-h2 { font-size: 1.5rem; margin: 0 0 18px; color: var(--navy, #14263F); }
.sa-empty { margin-top: 4px; }
.sa-sample-note { font-size: .88rem; color: var(--dark-gray, #667085); margin: 16px 0 0; }
.sa-sample-note a { color: var(--blue, #1F78E8); font-weight: 600; }

/* link grids (other trades / nearby cities) */
.sa-linkgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 22px;
}
.sa-linkgrid li { margin: 0; }
.sa-linkgrid a {
  display: block;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--medium-gray, #D5DEE8);
  border-radius: 10px;
  color: var(--navy, #14263F);
  text-decoration: none;
  font-size: .93rem;
  transition: border-color .15s, transform .15s;
}
.sa-linkgrid a:hover { border-color: var(--blue, #1F78E8); transform: translateY(-1px); }

.sa-other-trades {
  margin: 22px 0 0; font-size: .9rem; line-height: 1.7; color: var(--dark-gray, #667085);
}
.sa-other-trades strong { color: var(--navy, #14263F); }

/* FAQ */
.sa-faq { margin: 0; }
.sa-faq dt {
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 700; color: var(--navy, #14263F);
  margin: 20px 0 6px; font-size: 1.02rem;
}
.sa-faq dt:first-child { margin-top: 0; }
.sa-faq dd {
  margin: 0 0 4px; color: var(--dark-gray, #667085); line-height: 1.65; font-size: .95rem;
}

/* index page */
.sa-jump {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0 0 34px; font-size: .9rem;
}
.sa-jump span { color: var(--dark-gray, #667085); font-weight: 600; }
.sa-jump a {
  background: #fff; border: 1px solid var(--medium-gray, #D5DEE8); border-radius: 999px;
  padding: 5px 13px; color: var(--navy, #14263F); text-decoration: none; font-weight: 600;
}
.sa-jump a:hover { border-color: var(--blue, #1F78E8); color: var(--blue, #1F78E8); }

.sa-county { margin: 0 0 40px; scroll-margin-top: 100px; }
.sa-county h2 {
  font-size: 1.35rem; color: var(--navy, #14263F);
  padding-bottom: 10px; border-bottom: 2px solid var(--medium-gray, #D5DEE8); margin: 0 0 18px;
}
.sa-count {
  display: inline-block; background: var(--light-gray, #EEF2F6); color: var(--dark-gray, #667085);
  border-radius: 999px; padding: 2px 10px; font-size: .8rem; margin-left: 8px; vertical-align: middle;
}
.sa-city-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.sa-city-card {
  background: #fff; border: 1px solid var(--medium-gray, #D5DEE8); border-radius: 14px; padding: 16px 18px;
}
.sa-city-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.sa-city-card h3 a { color: var(--navy, #14263F); text-decoration: none; }
.sa-city-card h3 a:hover { color: var(--blue, #1F78E8); }
.sa-city-zips {
  margin: 0 0 8px; font-size: .82rem; color: var(--dark-gray, #667085);
  font-variant-numeric: tabular-nums;
}
.sa-city-links { margin: 0; font-size: .84rem; line-height: 1.6; }
.sa-city-links a { color: var(--blue, #1F78E8); text-decoration: none; }
.sa-city-links a:hover { text-decoration: underline; }

.sa-note-body { max-width: 780px; line-height: 1.7; color: var(--dark-gray, #667085); margin: 0 0 20px; }

@media (max-width: 620px) {
  .sa-linkgrid, .sa-city-grid { grid-template-columns: 1fr; }
  .sa-zips { padding: 14px; }
}

.sa-permit {
  margin: 14px 0 0; font-size: .92rem; line-height: 1.6;
  color: var(--dark-gray, #667085);
  padding: 12px 16px; background: var(--light-gray, #EEF2F6); border-radius: 10px;
  max-width: 780px;
}
.sa-permit strong { color: var(--navy, #14263F); }

.sa-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 34px;
}
.sa-joblist, .sa-asklist { margin: 0; padding-left: 20px; color: var(--dark-gray, #667085); line-height: 1.7; }
.sa-joblist li, .sa-asklist li { margin-bottom: 9px; }
.sa-asklist li { color: var(--nearly-black, #202632); }
.sa-ask-note { font-size: .86rem; color: var(--dark-gray, #667085); margin: 14px 0 0; line-height: 1.6; }
@media (max-width: 620px) { .sa-detail-grid { grid-template-columns: 1fr; gap: 26px; } }

/* the detail block continues the section above it — don't double the padding */
.sa-detail { padding-top: 0; }

.hs-arealink { margin: 14px 2px 0; font-size: .92rem; }
.hs-arealink a { color: var(--blue, #1F78E8); font-weight: 600; text-decoration: none; }
.hs-arealink a:hover { text-decoration: underline; }