/* Homepage mission section */
.home-mission-section {
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}

.home-mission-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.home-mission-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.home-mission-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform var(--transition-normal);
}

.home-mission-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.home-mission-card:hover::before {
  transform: scaleX(1);
}

.home-mission-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--border-radius-full);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.home-mission-card h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-md);
}

.home-mission-card p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
  .home-mission-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Why list section */
.why-list__image {
  width: 100%;
  max-width: 400px;
  border-radius: 16px;
  margin: 0 auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.why-list__content h3 {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
}

.why-list__content p {
  margin-bottom: var(--space-lg);
}

/* Homepage listings grid */
.home-listings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.home-listing-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
  /* Seals the PRO badge into this card. Without a stacking context here the
     badge z-index escapes to the root and paints over anything outside the
     card - it was landing on top of the open Categories dropdown. */
  isolation: isolate;
}

.home-listing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
  color: inherit;
}

.home-listing-card__img {
  position: relative;
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-surface);
}

.home-listing-card__img img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: var(--border-radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(255,255,255,0.8);
  transition: transform var(--transition-slow);
}

.home-listing-card:hover .home-listing-card__img img {
  transform: scale(1.08);
}

.home-listing-card__badge {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  background: rgba(0, 0, 0, 0.85);
  color: var(--color-white);
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  padding: 0.2rem 0.6rem;
  border-radius: var(--border-radius-full);
  backdrop-filter: blur(4px);
}

.home-listing-card__body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.home-listing-card__body h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
  color: var(--color-heading);
}

.home-listing-card__body p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  flex: 1;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-listing-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
}

.home-listing-card__state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  min-width: 0;
}

.home-listing-card__state svg { flex-shrink: 0; }

.home-listing-card__date {
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .home-listings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .home-listings-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Homepage blog preview */
.home-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .home-blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.home-blog-card {
  background: var(--color-white);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.home-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.home-blog-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.home-blog-card__img {
  height: 140px;
  overflow: hidden;
}

.home-blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.5s ease;
}

.home-blog-card:hover .home-blog-card__img img {
  transform: scale(1.04);
}

.home-blog-card__body {
  padding: var(--space-md) var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.home-blog-card__date {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.home-blog-card__title {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-heading);
  line-height: 1.3;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.home-blog-card__excerpt {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.home-blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.65rem;
  color: var(--color-text-dim);
  margin-top: auto;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-blog-card__author {
  font-weight: 500;
}

.home-blog-card__read {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ============================================================
   PRICING — Editorial price ledger
   Massive "FREE" centerpiece + comparison + Roman inventory
   ============================================================ */
.pricing {
  background: var(--color-bg);
  padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.pricing__container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2rem);
}

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

/* Top header rule */
.pricing__rule {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  align-items: baseline;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-heading);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.pricing__num {
  font-family: var(--font-family-heading);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--color-heading);
  font-feature-settings: 'tnum';
}
.pricing__label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-heading);
  font-weight: 700;
  position: relative;
  padding-left: 1rem;
}
.pricing__label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-heading);
  transform: translateY(-50%);
}
.pricing__edition {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-dim);
  font-weight: 500;
  font-style: italic;
}
@media (max-width: 720px) {
  .pricing__rule { grid-template-columns: auto 1fr; }
  .pricing__edition { display: none; }
}

/* Intro: tag line + smaller $0/year price */
.pricing__intro {
  text-align: center;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.pricing__price-tag {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.pricing__amount {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  line-height: 1;
  font-feature-settings: 'tnum';
}

/* THE BIG FREE — display-size centerpiece */
.pricing__hero {
  text-align: center;
  margin: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(2rem, 4vw, 3rem);
  position: relative;
}
.pricing__free {
  display: block;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(7rem, 22vw, 17rem);
  line-height: 0.85;
  letter-spacing: -0.07em;
  color: var(--color-heading);
  margin: 0;
  position: relative;
  z-index: 1;
  user-select: none;
}
.pricing__free-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding: 0.55rem 1.4rem;
  border: 1.5px solid var(--color-heading);
  border-radius: 999px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--color-heading);
}
.pricing__free-stamp span:nth-child(even) {
  color: var(--color-border-light);
  font-weight: 300;
}

/* Comparison + Inventory split */
.pricing__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
  padding-top: 1.75rem;
  margin-bottom: 2rem;
}
@media (max-width: 720px) {
  .pricing__split { grid-template-columns: 1fr; }
}
.pricing__col {
  padding: 0 clamp(1rem, 2vw, 2rem);
}
.pricing__col:first-child {
  padding-left: 0;
  border-right: 1px solid var(--color-border);
}
.pricing__col:last-child { padding-right: 0; }
@media (max-width: 720px) {
  .pricing__col:first-child {
    border-right: none;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
  }
}
.pricing__col-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-bottom: 1rem;
}

.pricing__compare {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pricing__compare li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px dotted var(--color-border-light);
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.pricing__compare li:last-child { border-bottom: none; }
.pricing__compare-name { font-weight: 500; }
.pricing__compare-price {
  font-feature-settings: 'tnum';
  letter-spacing: 0.02em;
  color: var(--color-text-dim);
  font-weight: 500;
}
.pricing__compare-price s {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.pricing__compare-us {
  margin-top: 0.5rem;
  padding-top: 1rem !important;
  border-top: 1.5px solid var(--color-heading);
  border-bottom: none !important;
}
.pricing__compare-us .pricing__compare-name {
  color: var(--color-heading);
  font-weight: 700;
  font-size: 1rem;
}
.pricing__compare-us .pricing__compare-price {
  color: var(--color-heading);
  font-weight: 800;
  font-size: 1.4rem;
}

.pricing__perks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.pricing__perks-list li {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding-bottom: 0.85rem;
  border-bottom: 1px dotted var(--color-border-light);
}
.pricing__perks-list li:last-child { border-bottom: none; }
.pricing__perk-num {
  font-style: italic;
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  flex-shrink: 0;
  min-width: 1.6rem;
  font-feature-settings: 'tnum';
}

/* Footer with CTA */
.pricing__foot {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1.5px solid var(--color-heading);
}
.pricing__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 2rem;
  background: var(--color-heading);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: gap 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.pricing__cta:hover {
  gap: 0.85rem;
  background: #1f1f1f;
  color: #fff;
  transform: translateY(-1px);
}
.pricing__note {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  font-weight: 500;
  font-style: italic;
}

/* ============================================================
   DISCOVER — cinematic search-banner CTA
   Full-bleed grayscale photo + dark overlay + bold copy
   ============================================================ */
.discover {
  position: relative;
  min-height: clamp(300px, 38vh, 380px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
}
.discover__photo {
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/search-listings.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.18) brightness(0.95);
  z-index: -2;
}
.discover__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.4) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.45) 100%);
  z-index: -1;
}
.discover__container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2rem);
  position: relative;
  width: 100%;
  color: #ffffff;
  max-width: 720px;
  margin-right: auto;
  margin-left: 0;
  padding-left: clamp(1.5rem, 6vw, 5rem);
}
.discover__rule {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  margin-bottom: 1.5rem;
}
.discover__num {
  font-family: var(--font-family-heading);
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.65);
  font-feature-settings: 'tnum';
}
.discover__label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #ffffff;
  font-weight: 700;
}
.discover__title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 1rem;
  max-width: 16ch;
  text-wrap: balance;
}
.discover__title em {
  font-style: italic;
  font-weight: 800;
}
.discover__sub {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 480px;
  margin: 0 0 1.85rem;
}
.discover__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 2rem;
  background: #ffffff;
  color: #0a0a0a;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: gap 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.discover__cta:hover {
  background: #f4f4f5;
  gap: 0.85rem;
  transform: translateY(-1px);
  color: #0a0a0a;
}

/* ============================================================
   SEARCH PAGE — results layout
   Hero with embedded form, scored result grid, empty state.
   Loaded by all pages (search.js wires its own DOMContentLoaded).
   ============================================================ */

.search-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg);
  border: 1.5px solid var(--color-heading);
  border-radius: 4px;
  padding: 0.45rem 0.55rem 0.45rem 0.95rem;
  max-width: 540px;
  margin: 1.25rem auto 0;
  transition: box-shadow 0.15s ease;
}
.search-form:focus-within {
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}
.search-form__icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.search-form input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px; /* prevent iOS zoom on focus */
  color: var(--color-heading);
  padding: 0.55rem 0;
  min-width: 0;
}
.search-form input::placeholder {
  color: var(--color-text-dim);
  font-style: italic;
}
.search-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--color-heading);
  color: #ffffff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.search-form__btn:hover {
  background: #1f1f1f;
  transform: translateX(1px);
}

.search-section {
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
}
.search-meta {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 0.85rem;
  border-bottom: 1.5px solid var(--color-heading);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
}
.search-meta__count strong {
  color: var(--color-heading);
  font-weight: 800;
}

.search-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 640px) {
  .search-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .search-grid { grid-template-columns: repeat(3, 1fr); }
}

.search-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
  /* Seals the PRO badge into this card. Without a stacking context here the
     badge z-index escapes to the root and paints over anything outside the
     card - it was landing on top of the open Categories dropdown. */
  isolation: isolate;
}
.search-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-light);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
  color: inherit;
}
.search-card__img {
  position: relative;
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}
.search-card__img img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  padding: 6px;
}
.search-card__badge {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  background: var(--color-heading);
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
/* Pro treatment. Search previously gave Pro listings no visual signal at all,
   so the upgrade bundled with every ad tier was invisible on the page with the
   highest buying intent. Same edge + pill as .dir-card--pro. */
.search-card--pro {
  border-color: #0a0a0a;
}
.search-card--pro:hover {
  border-color: #0a0a0a;
  box-shadow: 0 12px 28px rgba(10, 10, 10, 0.14);
}
.search-card__pro {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
}

.search-card__body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.search-card__name {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  margin: 0 0 0.45rem;
  line-height: 1.25;
}
.search-card__desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-card__meta {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: 0.72rem;
  color: var(--color-text-dim);
}
.search-card__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-heading);
  font-weight: 600;
}

/* Empty-state panel — deliberate "placeholder" feel, not a broken page.
   Diagonal-stripe background hints "nothing here yet" without being noisy. */
.search-empty {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.search-empty__inner {
  text-align: center;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--color-bg-surface);
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 18px,
      rgba(10, 10, 10, 0.025) 18px,
      rgba(10, 10, 10, 0.025) 19px
    );
  border: 1px dashed var(--color-border-light);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.search-empty__kicker {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-text-dim);
  margin-bottom: 1rem;
  padding: 0.3rem 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}
.search-empty__title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--color-heading);
  margin: 0 0 0.65rem;
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.search-empty__sub {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 auto 1.5rem;
}
.search-empty__sub a {
  color: var(--color-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.search-empty__actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   PAGE HERO — canonical tight hero used on Directory, Blog,
   About, and Contact. White bg, hairline kicker, big headline,
   muted sub. No backgrounds, no gradients, no decoration.
   ============================================================ */
.page-hero {
  background: var(--color-bg);
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.page-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-bottom: 0.85rem;
}
.page-hero__kicker::before,
.page-hero__kicker::after {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--color-border-light);
}
.page-hero__title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin: 0 0 0.6rem;
  line-height: 1.15;
  text-wrap: balance;
}
.page-hero__sub {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Blog page */

/* Blog main content area */
.blog-main {
  padding: var(--space-2xl) 0;
}

/* Featured post */
.blog-featured {
  margin-bottom: var(--space-2xl);
}

.blog-featured__inner {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.blog-featured__inner:hover {
  border-color: var(--color-border-light);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.blog-featured__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--color-accent-light);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem var(--space-lg);
}

.blog-featured__body {
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
}

.blog-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  margin-bottom: var(--space-md);
}

.blog-featured__date {
  color: var(--color-accent);
  font-weight: 600;
}

.blog-featured__dot {
  color: var(--color-text-dim);
}

.blog-featured__title {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: var(--font-size-3xl);
  color: var(--color-heading);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-md);
}

.blog-featured__excerpt {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
  max-width: 72ch;
}

.blog-featured__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.blog-featured__author {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.blog-featured__cta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent);
  transition: gap var(--transition-fast);
}

.blog-featured__inner:hover .blog-featured__cta {
  gap: 0.7rem;
}

/* Featured image */
.blog-featured__image {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.blog-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  border-radius: 0;
}

.blog-featured__inner:hover .blog-featured__image img {
  transform: scale(1.03);
}

@media (min-width: 768px) {
  .blog-featured__inner {
    flex-direction: row !important;
  }

  .blog-featured__image {
    width: 340px;
    height: auto;
    min-height: 220px;
    flex-shrink: 0;
  }
}

/* "All Posts" section header */
.blog-section-header {
  margin-bottom: var(--space-lg);
}

.blog-section-header__title {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: var(--font-size-2xl);
  color: var(--color-heading);
}

/* Blog posts grid */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .blog-featured__title {
    font-size: var(--font-size-3xl);
  }

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

@media (min-width: 1024px) {
  .blog-featured__title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
  }

  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Empty state */
.blog-empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--color-text-muted);
}

/* Blog post detail */

/* ── Hero ── */
.bp-hero {
  background: linear-gradient(135deg, #0a0a0a 0%, var(--color-primary-light) 100%);
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.bp-hero__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10, 10, 10, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  animation: bpGridDrift 25s linear infinite;
}

@keyframes bpGridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 32px 32px; }
}

.bp-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.bp-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  margin-bottom: var(--space-xl);
  transition: color 0.2s;
}

/* Hover brightens toward white. It must NOT use --color-accent: that token is
   pure black (#0a0a0a), the same colour .bp-hero's gradient starts on, so
   hovering made the link vanish into its own background. */
.bp-hero__back:hover {
  color: #ffffff;
}

.bp-hero__title {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.18;
  color: #ffffff;
  margin-bottom: var(--space-xl);
  letter-spacing: -0.01em;
}

.bp-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.bp-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
}

.bp-hero__meta-item svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.bp-hero__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: inline-block;
}

/* ── Reading body ── */
/* Featured image */
.bp-featured-image {
  margin-top: -2rem;
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-xl);
}

.bp-featured-image img {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: block;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  aspect-ratio: 16/9;
  object-fit: cover;
}

.bp-body {
  background: var(--color-background, #ffffff);
  padding: var(--space-2xl) 0 var(--space-3xl);
}

/* 2-column grid: article on the left, sticky sidebar on the right.
   Article stays bounded around 700px for readable line-length; sidebar
   is fixed-width 300px to fit the 300x250 ad rectangle exactly. */
.bp-body__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  align-items: start;
}
.bp-article {
  max-width: 720px;
  min-width: 0;
}
.bp-aside { min-width: 0; }
.bp-aside__sticky {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bp-aside__label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a3a3a3;
  font-weight: 700;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #e7e5e4;
}

/* Stack on narrower screens — sidebar drops below the article */
@media (max-width: 880px) {
  .bp-body__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .bp-aside__sticky { position: static; }
  .bp-article { max-width: 720px; margin: 0 auto; }
}

.bp-content {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--color-text, #374151);
}

.bp-content h2 {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: var(--font-size-2xl);
  color: var(--color-heading, #111827);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
  line-height: 1.25;
}

.bp-content h3 {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: var(--font-size-xl);
  color: var(--color-heading, #111827);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  line-height: 1.3;
}

.bp-content h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading, #111827);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.bp-content p {
  margin-bottom: var(--space-lg);
}

.bp-content ul,
.bp-content ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-xl);
}

.bp-content li {
  margin-bottom: var(--space-sm);
  list-style: disc;
}

.bp-content ol li {
  list-style: decimal;
}

.bp-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.bp-content a:hover {
  color: var(--color-accent);
}

.bp-content strong {
  color: var(--color-heading, #111827);
  font-weight: var(--font-weight-semibold);
}

.bp-content blockquote {
  border-left: 3px solid var(--color-accent);
  margin: var(--space-xl) 0;
  padding: var(--space-md) var(--space-xl);
  background: rgba(10, 10, 10, 0.05);
  border-radius: 0 var(--border-radius-md, 8px) var(--border-radius-md, 8px) 0;
  color: var(--color-text-muted);
  font-style: italic;
}

.bp-content code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
  background: rgba(10, 10, 10, 0.08);
  border: 1px solid rgba(10, 10, 10, 0.15);
  border-radius: 4px;
  padding: 1px 6px;
}

.bp-content pre {
  background: #0a0a0a;
  border-radius: var(--border-radius-md, 8px);
  padding: var(--space-lg);
  overflow-x: auto;
  margin-bottom: var(--space-lg);
}

.bp-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-border);
  font-size: 0.9em;
}

.bp-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-md, 8px);
  margin: var(--space-xl) 0;
}

/* Ad slot */
.bp-ad {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border, #e5e7eb);
  display: flex;
  justify-content: center;
}

/* ── CTA section ── */
.bp-cta {
  background: linear-gradient(135deg, #0a0a0a 0%, var(--color-primary-light) 100%);
  position: relative;
  overflow: hidden;
  /* Slim band — was --space-3xl which made it tower-tall. */
  padding: var(--space-xl) 0;
  text-align: center;
}

.bp-cta__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.bp-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.bp-cta__label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  /* Was var(--color-accent) — that's a dark colored accent that vanished
     against the near-black gradient. Pure white reads cleanly. */
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--space-sm);
  opacity: 0.8;
}

.bp-cta__heading {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  color: #ffffff;
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.bp-cta__body {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  margin-bottom: var(--space-md);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.bp-cta__btn {
  font-size: var(--font-size-base);
  padding: 14px 32px;
}

/* ── Back link ── */
.bp-back-wrap {
  padding: var(--space-xl) 0 var(--space-2xl);
  border-top: 1px solid var(--color-border, #e5e7eb);
}

.bp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.bp-back-link:hover {
  color: var(--color-accent);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .bp-hero {
    padding: var(--space-2xl) 0 var(--space-xl);
  }

  .bp-hero__title {
    font-size: 1.75rem;
  }

  .bp-content {
    font-size: 1rem;
    line-height: 1.75;
  }
}

/* ============================================================
   LEGAL HERO — black counterpart to .page-hero. Same width,
   same padding rhythm, same typography scale, just dark.
   Shared by Policy, Privacy, Terms (all use layouts/legal.njk).
   ============================================================ */
.legal-hero {
  background: #0a0a0a;
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid #1f1f1f;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.legal-hero__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.legal-hero__inner {
  position: relative;
  z-index: 1;
}
.legal-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 0;
  border-radius: 0;
  margin-bottom: 0.85rem;
}
.legal-hero__badge::before,
.legal-hero__badge::after {
  content: '';
  width: 18px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}
.legal-hero__title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 0.6rem;
  line-height: 1.15;
  text-wrap: balance;
}
.legal-hero__updated {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  margin: 0;
}

/* Legal Content Layout */
.legal-content {
  padding: 48px 0 64px;
}
.legal-content__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Table of Contents */
.legal-toc {
  position: sticky;
  top: 100px;
  align-self: start;
}
.legal-toc__title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-dim);
  font-weight: 600;
  margin-bottom: 16px;
}
.legal-toc__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 2px solid var(--color-border);
  padding-left: 16px;
}
.legal-toc__link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  transition: all 0.2s;
  padding: 2px 0;
}
.legal-toc__link:hover { color: var(--color-heading); }
.legal-toc__link.is-active {
  color: var(--color-accent);
  font-weight: 500;
}

/* Legal Body */
.legal-body h2 {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-heading);
}
.legal-body h2:first-child,
.legal-body .legal-intro + h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.legal-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-heading);
}
.legal-body p {
  margin-bottom: 1rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}
.legal-body ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.legal-body li {
  margin-bottom: 0.5rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  list-style: disc;
}
.legal-body a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 10, 10, 0.3);
}
.legal-body a:hover { border-color: var(--color-accent); }

/* Legal Intro */
.legal-intro {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 2rem;
}
.legal-intro p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 0;
}

/* Legal Card */
.legal-card {
  display: flex;
  gap: 20px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 1.5rem;
}
.legal-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Legal Steps */
.legal-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 1.5rem;
}
.legal-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 24px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.legal-step__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Legal Grid */
.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 1.5rem;
}
.legal-grid__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.legal-grid__item svg { color: var(--color-accent); flex-shrink: 0; }

/* Legal Callout */
.legal-callout {
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  background: rgba(10, 10, 10, 0.04);
  border: 1px solid rgba(10, 10, 10, 0.12);
}
.legal-callout svg { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
.legal-callout p { margin-bottom: 0; }
.legal-callout ul { margin-bottom: 0; }
.legal-callout--info { background: rgba(10, 10, 10, 0.04); border-color: rgba(10, 10, 10, 0.12); }
.legal-callout--info svg { color: var(--color-accent); }
.legal-callout--warning { background: rgba(245,158,11,0.04); border-color: rgba(245,158,11,0.12); }
.legal-callout--warning svg { color: #f59e0b; }

/* Mobile */
@media (max-width: 768px) {
  .legal-content__inner { grid-template-columns: 1fr; }
  .legal-toc { display: none; }
  .legal-hero__title { font-size: 1.75rem; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-card { flex-direction: column; }
}

@media (max-width: 480px) {
  .legal-hero { padding: 36px 0 32px; }
  .legal-hero__title { font-size: 1.5rem; }
  .legal-content { padding: 32px 0 48px; }
  .legal-body h2 { font-size: 1.25rem; }
}

/* ========================
   CONTACT PAGE
   ======================== */

/* ─── № 01 — REACH US — three channel cards ─── */
.ctc-channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .ctc-channels { grid-template-columns: repeat(3, 1fr); }
}
.ctc-channel {
  background: var(--color-bg);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}
.ctc-channel--link:hover {
  background: var(--color-bg-alt);
  color: inherit;
}
.ctc-channel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.ctc-channel__num {
  font-family: var(--font-family-heading);
  font-size: 0.85rem;
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
}
.ctc-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-alt);
  color: var(--color-heading);
}
.ctc-channel--link:hover .ctc-channel__icon {
  background: var(--color-heading);
  color: #ffffff;
  border-color: var(--color-heading);
}
.ctc-channel__label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
}
.ctc-channel__value {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  line-height: 1.15;
  word-break: break-word;
}
.ctc-channel__note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: 0.4rem;
}

/* ─── № 02 — SEND A MESSAGE — form + info sidebar ─── */
.ctc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .ctc-grid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
}

/* Form panel — clean editorial card, scoped form-input overrides */
.ctc-form-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-heading);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.ctc-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .ctc-form-row { grid-template-columns: 1fr 1fr; }
}
.ctc-form-panel .form-group { margin-bottom: var(--space-md); }
.ctc-form-panel .form-group:last-of-type { margin-bottom: var(--space-lg); }
.ctc-form-panel label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.ctc-form-panel .form-input,
.ctc-form-panel .form-textarea,
.ctc-form-panel .form-select {
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: 16px; /* prevent iOS zoom-on-focus */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ctc-form-panel .form-input:focus,
.ctc-form-panel .form-textarea:focus,
.ctc-form-panel .form-select:focus {
  outline: none;
  border-color: var(--color-heading);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}
.contact-submit-btn {
  width: 100%;
  border-radius: 4px;
}

/* Info sidebar — direct lines + socials + good to know */
.ctc-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 100px;
}
.ctc-info__block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 1.1rem 1.25rem 1.25rem;
}
.ctc-info__head {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-heading);
  margin-bottom: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}
.ctc-info__list { margin: 0; }
.ctc-info__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--color-border);
}
.ctc-info__row:last-child { border-bottom: none; }
.ctc-info__row dt {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0;
}
.ctc-info__row dd {
  font-size: 0.88rem;
  color: var(--color-heading);
  margin: 0;
  text-align: right;
  font-weight: 600;
}
.ctc-info__row dd a {
  color: var(--color-heading);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-light);
  transition: text-decoration-color 0.15s ease;
}
.ctc-info__row dd a:hover { text-decoration-color: var(--color-heading); }

.ctc-info__socials {
  display: flex;
  gap: 0.5rem;
}
.ctc-info__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-heading);
  background: var(--color-bg);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ctc-info__socials a:hover {
  background: var(--color-heading);
  color: #ffffff;
  border-color: var(--color-heading);
}

.ctc-info__notes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ctc-info__notes li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text);
}
.ctc-info__notes li:last-child { border-bottom: none; }
.ctc-info__notes-num {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
}

/* On smaller viewports the sticky sidebar feels weird — release it */
@media (max-width: 1023px) {
  .ctc-info { position: static; }
}

/* ============================================================
   FAQ PAGE — editorial chapter, mirrors about/contact treatment
   ============================================================ */

/* ─── № 01 — Quick Answers — three numbered framed cards ─── */
.faq-quick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .faq-quick { grid-template-columns: repeat(3, 1fr); }
}
.faq-quick__item {
  background: var(--color-bg);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.faq-quick__num {
  font-family: var(--font-family-heading);
  font-size: 0.85rem;
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
}
.faq-quick__item h3 {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0;
  line-height: 1.2;
}
.faq-quick__item p {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── № 02 — All Questions — accordion + sidebar ─── */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
}
.faq-grid__main { min-width: 0; }

/* Accordion overrides — flatten the global styles to match the editorial
   aesthetic (square hairline borders, no shadows, no rounded corners). */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}
.faq-accordion .accordion__item {
  background: var(--color-bg);
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.faq-accordion .accordion__trigger {
  padding: 1.1rem 0;
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}
.faq-accordion .accordion__trigger:hover {
  background: transparent;
  color: var(--color-text);
}
.faq-accordion .accordion__icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-dim);
}
.faq-accordion .accordion__content-inner {
  padding: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 64ch;
}

/* Sidebar — two editorial blocks (white + invert) */
.faq-aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 100px;
}
@media (max-width: 1023px) {
  .faq-aside { position: static; }
}
.faq-aside__block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 1.25rem 1.4rem 1.4rem;
}
.faq-aside__block--invert {
  background: var(--color-heading);
  border-color: var(--color-heading);
  color: #ffffff;
}
.faq-aside__head {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-heading);
  margin-bottom: 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
}
.faq-aside__block--invert .faq-aside__head {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.15);
}
.faq-aside__block p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}
.faq-aside__block--invert p {
  color: rgba(255, 255, 255, 0.75);
}

/* ========================
   DIRECTORY PAGE
   ======================== */

/* Hero with integrated filters */
/* Directory hero — Option 3 cream paper */
.dir-hero {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.dir-hero__bg { display: none; }

.dir-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: var(--space-xl);
}

.dir-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.dir-hero__label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}

.dir-hero__title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
  text-wrap: balance;
}

.dir-hero__sub {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

/* Filters — light card sitting directly above the listing grid */
.dir-filters {
  position: relative;
  /* Hosts the Categories / State dropdowns, which open down over the grid.
     At z-index 1 the cards below could paint over the open menu, because
     this element is a stacking context and traps .ljs__menu's own z-index
     inside it. 60 clears card content and stays under the nav (100), the
     docked order bar and every modal. */
  z-index: 60;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: var(--space-xl);
}

.dir-filters__row {
  display: flex;
  gap: var(--space-sm);
  flex: 1;
  flex-wrap: wrap;
}

.dir-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 0; /* let it shrink on phones; no horizontal scroll */
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--color-text-muted);
  transition: border-color 0.2s ease;
}
.dir-filter-group:focus-within {
  border-color: var(--color-accent);
}

.dir-select {
  flex: 1;
  padding: 10px 4px;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* iOS Safari zooms the whole page when a focused form control sits under
   16px, and it does not zoom back out. Small screens only, so desktop
   type is untouched. */
@media (max-width: 768px) {
  .dir-select { font-size: 16px; }
}

.dir-select option {
  background: var(--color-bg-card);
  color: var(--color-text);
}

.dir-select:focus { outline: none; }

.dir-filters__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  font-weight: 500;
}

/* Phones — stack the filter row above the count */
@media (max-width: 640px) {
  .dir-filters {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-sm) var(--space-md);
  }
  .dir-filters__row {
    flex-direction: column;
    width: 100%;
  }
  .dir-filter-group { flex: 1 1 auto; }
  .dir-filters__count { text-align: center; }
}

/* Directory section */
.dir-section {
  padding: var(--space-2xl) 0 var(--space-3xl);
  background: var(--color-bg-surface);
}

/* Card grid */
/* Every cell is the same size, always — and that size is the ad creative's
   own 6:5 shape (600x500 uploaded, 300x250 nominal).
   Rows used to size to their own content, so a row holding the sponsored card
   came out taller than a row of plain listings and the grid looked ragged.
   The first attempt fixed that with a flat `min-height: 300px`, which was
   wrong: a fixed pixel floor against fluid columns produces a different cell
   ratio at every width, and `object-fit: cover` then sliced the sponsored
   artwork (28% of its height gone at one column).
   aspect-ratio ties the cell to the creative instead of to a magic number, so
   the columns can be any width and the ad still lands pixel-perfect. Equal
   columns + equal ratio = every card identical, at every breakpoint, for free. */
.dir-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.dir-grid > * {
  aspect-ratio: 6 / 5;
  /* Grid items default to min-width/min-height:auto, which refuses to shrink
     below the content's intrinsic minimum. The sponsored cell contains a slot
     whose base rules pin 300x250, so without this the ad card bottomed out at
     336x280 and broke uniformity on every narrow column. */
  min-width: 0;
  min-height: 0;
}

/* Cap the single column. Card height is derived from width (6:5), so a
   full-bleed 524px card came out 437px tall — a quarter of it empty under a
   three-line description. Holding the column to 420px keeps the card a sane
   350px and centres it. */
@media (max-width: 639px) {
  .dir-grid {
    max-width: 420px;
    margin-inline: auto;
  }
}

@media (min-width: 640px) {
  .dir-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dir-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* In-feed "Sponsored" card — same grid cell footprint as a regular
   dir-card, but houses a 300x250 ad slot. Tagged with a small Sponsored
   pill so visitors can tell it apart from real listings. */
.dir-card--ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border: 1px dashed #d4d4d4;
  border-radius: 12px;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  /* No min-height. It used to be 280px, from when grid rows were sized by
     their content and the 300x250 slot needed a guaranteed floor. The cell is
     driven by aspect-ratio now, and that floor overrode it — on any column
     narrower than 336px the ad card refused to shrink and stood taller than
     every listing card beside it. */
}
.dir-card--ad:hover {
  background: #fff;
  border-color: #0a0a0a;
}
.dir-card__sponsored {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #737373;
  font-weight: 700;
  background: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  border: 1px solid #d4d4d4;
}

/* Individual card — vertical grid card */
.dir-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  /* Padding scales with the card, for the same reason the logo does — a flat
     24px is a lot of a 315px-wide cell and almost nothing in a 500px one. */
  padding: clamp(0.9rem, 5cqw, 1.5rem);
  /* Makes cqw units above resolve against this card's own width. The column
     sets the width, so nothing here can feed back into it. */
  container-type: inline-size;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  /* Seals the PRO badge into this card. Without a stacking context here the
     badge z-index escapes to the root and paints over anything outside the
     card - it was landing on top of the open Categories dropdown. */
  isolation: isolate;
}

.dir-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.dir-card:hover {
  border-color: var(--color-border-light);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
  color: inherit;
}

.dir-card:hover::before {
  transform: scaleX(1);
}

/* Logo thumbnail.
   Sized against the card's own width, not a fixed 72px. Card height is now
   derived from column width (6:5), so the narrowest column — right after a
   breakpoint adds a third column — produces the shortest card. A fixed 72px
   logo plus fixed padding ate that card whole and squeezed the description
   down to a single line. Scaling the logo with the card keeps the same
   proportions at every width. */
.dir-card__logo {
  width: clamp(48px, 17cqw, 72px);
  height: clamp(48px, 17cqw, 72px);
  border-radius: 12px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  padding: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.dir-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* Info */
.dir-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dir-card__category {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.dir-card__name {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: var(--font-size-lg);
  color: var(--color-heading);
  margin-bottom: 4px;
  line-height: 1.3;
}

/* No fixed line count. The cell height now varies with column width, so any
   hard clamp is wrong somewhere: 2 lines left a dead band in a tall card, 5
   lines overflowed a short one. Instead the description takes whatever space
   is left between the name and the meta row and simply cuts there, with a
   short fade so the cut reads as deliberate rather than chopped.
   `flex: 1 1 0` + `min-height: 0` is what lets it shrink below its content
   height — without min-height:0 a flex item refuses to, and the meta row gets
   pushed out of the card. */
.dir-card__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  margin-bottom: var(--space-md);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.1em), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - 1.1em), transparent 100%);
}

.dir-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: 0.7rem;
  color: var(--color-text-dim);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

/* The client renderer (directory-filter.js) used to emit `.dir-card__state`,
   which had no CSS at all — so the pin icon and the state name were two plain
   inline boxes that wrapped onto separate lines in a narrow card, stacking the
   icon above the text. Both class names are matched now so the server-rendered
   and client-rendered cards can never drift apart again. */
.dir-card__location,
.dir-card__state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-accent);
  font-weight: 500;
  white-space: nowrap;      /* icon and label stay on one line */
  min-width: 0;
}

.dir-card__location svg,
.dir-card__state svg {
  flex-shrink: 0;           /* the pin never squashes */
}

/* Pinned right regardless of whether anything sits on the left. */
.dir-card__date {
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Arrow — hidden in grid, visible on mobile list */
.dir-card__arrow {
  display: none;
}

/* Load more */
.dir-load-more {
  text-align: center;
  margin-top: var(--space-2xl);
}

.dir-load-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.7rem 2rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.dir-load-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.1);
}

/* Responsive */
@media (max-width: 640px) {
  .dir-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .dir-card__arrow {
    display: none;
  }

  .dir-card__logo {
    width: 52px;
    height: 52px;
  }
}

/* ========================
   ABOUT PAGE
   ======================== */

/* ============================================================
   AI-POWERED PAGE — editorial engineering note
   Same B&W identity as the rest of the site. № numbered sections,
   hairline rules, framed loop diagrams, tabular numerics.
   ============================================================ */

.aip-section {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--color-bg);
}
.aip-section--alt {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.aip-section__intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 64ch;
  margin: 0 0 var(--space-2xl);
}

/* Numbered section header — mirrors the homepage № 01/02/03 pattern */
.aip-rule {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.4rem);
  border-bottom: 1.5px solid var(--color-heading);
  padding-bottom: 0.85rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
}
.aip-rule__num {
  color: var(--color-heading);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.aip-rule__label { color: var(--color-heading); }
.aip-rule__byline {
  justify-self: end;
  color: var(--color-text-dim);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: none;
  font-size: 0.78rem;
  font-style: italic;
}
@media (max-width: 640px) {
  .aip-rule { grid-template-columns: auto 1fr; gap: 0.85rem; }
  .aip-rule__byline { display: none; }
}

/* Oversized editorial headline (same energy as .mission__headline) */
.aip-headline {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-heading);
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  text-wrap: balance;
}
.aip-headline em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Three-column editorial copy */
.aip-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-border);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.aip-col {
  padding: 0 clamp(1rem, 2vw, 1.75rem);
  position: relative;
}
.aip-col:first-child { padding-left: 0; }
.aip-col:last-child  { padding-right: 0; }
.aip-col + .aip-col { border-left: 1px solid var(--color-border); }
.aip-col__label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.aip-col p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 880px) {
  .aip-cols { grid-template-columns: 1fr; }
  .aip-col {
    padding: 1.25rem 0;
    border-left: none !important;
  }
  .aip-col + .aip-col { border-top: 1px solid var(--color-border); }
}

/* The four loops — process cards in 2×2 grid */
.aip-loops {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .aip-loops { grid-template-columns: 1fr 1fr; }
}
.aip-loop {
  background: var(--color-bg);
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.aip-loop__num {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
}
.aip-loop__name {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin: 0;
  line-height: 1;
}
.aip-loop__flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem;
  align-items: center;
  background: var(--color-bg-alt);
  padding: 0.7rem 0.85rem;
  border-radius: 4px;
  font-size: 0.8rem;
}
.aip-loop__flow-from {
  color: var(--color-text-muted);
  font-weight: 500;
}
.aip-loop__flow-arrow {
  color: var(--color-heading);
  flex-shrink: 0;
}
.aip-loop__flow-to {
  color: var(--color-heading);
  font-weight: 700;
  text-align: right;
}
.aip-loop__body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* Stats ledger — three big numerics with hairline dividers */
.aip-stats-section {
  background: var(--color-bg);
  padding: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.aip-stats {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .aip-stats { grid-template-columns: repeat(3, 1fr); }
}
.aip-stat {
  padding: clamp(1.75rem, 4vw, 2.5rem) 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.aip-stat:last-child { border-bottom: none; }
@media (min-width: 640px) {
  .aip-stat {
    border-bottom: none;
    border-right: 1px solid var(--color-border);
  }
  .aip-stat:last-child { border-right: none; }
}
.aip-stat__num {
  display: block;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  letter-spacing: -0.04em;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.aip-stat__label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-top: 0.7rem;
}

/* The boundaries — paired do/don't lists */
.aip-bound-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 768px) {
  .aip-bound-grid { grid-template-columns: 1fr 1fr; }
}
.aip-bound-col {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.aip-bound-col__label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-heading);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1.5px solid var(--color-heading);
}
.aip-bound-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.aip-bound-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.45;
}
.aip-bound-list li:last-child { border-bottom: none; }
.aip-bound-list__mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  border-radius: 4px;
  font-family: var(--font-family-heading);
  margin-top: 1px;
}
.aip-bound-list--do .aip-bound-list__mark {
  background: var(--color-heading);
  color: #ffffff;
}
.aip-bound-list--dont .aip-bound-list__mark {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Final CTA — centered, tight */
.aip-cta {
  text-align: center;
}
.aip-cta__title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.65rem, 3.5vw, 2.4rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-heading);
  margin: 0 0 0.75rem;
  text-wrap: balance;
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}
.aip-cta__sub {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto 1.5rem;
}
.aip-cta__actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   ABOUT PAGE — editorial monograph
   Numbered chapter sections (№ 01–05), hairline rules,
   varied per-chapter visual treatments to create rhythm.
   ============================================================ */

/* Section base */
.abt-section {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--color-bg);
}
.abt-section--alt {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* № rule header — same family as homepage .mission__header / .pricing__rule */
.abt-rule {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.4rem);
  border-bottom: 1.5px solid var(--color-heading);
  padding-bottom: 0.85rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
}
.abt-rule__num {
  color: var(--color-heading);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.abt-rule__label { color: var(--color-heading); }
.abt-rule__byline {
  justify-self: end;
  color: var(--color-text-dim);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: none;
  font-size: 0.78rem;
  font-style: italic;
}
@media (max-width: 640px) {
  .abt-rule { grid-template-columns: auto 1fr; gap: 0.85rem; }
  .abt-rule__byline { display: none; }
}

/* Editorial headline (mirrors .mission__headline) */
.abt-headline {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-heading);
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  text-wrap: balance;
}
.abt-headline em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* ─── № 01 — MISSION: 3-col with Roman numerals & vertical hairlines ─── */
.abt-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-border);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.abt-col {
  padding: 0 clamp(1rem, 2vw, 1.75rem);
  position: relative;
}
.abt-col:first-child { padding-left: 0; }
.abt-col:last-child  { padding-right: 0; }
.abt-col + .abt-col { border-left: 1px solid var(--color-border); }
.abt-col__num {
  display: block;
  font-family: var(--font-family-heading);
  font-size: 0.85rem;
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-dim);
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.abt-col__label {
  display: block;
  font-family: var(--font-family-heading);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: 0.7rem;
  line-height: 1.1;
}
.abt-col p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 880px) {
  .abt-cols { grid-template-columns: 1fr; }
  .abt-col {
    padding: 1.5rem 0;
    border-left: none !important;
  }
  .abt-col + .abt-col { border-top: 1px solid var(--color-border); }
}

/* ─── № 02 — ROOTS: asymmetric split (copy + ledger sidebar) ─── */
.abt-roots {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 768px) {
  .abt-roots { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
}
.abt-roots__copy .abt-headline { margin-bottom: 1.25rem; }
.abt-roots__lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
}

.abt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.abt-list li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.85rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text);
}
.abt-list__num {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
}

/* Ledger sidebar — pricing-style stat list */
.abt-ledger {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-heading);
  padding: 1.25rem 1.4rem 0;
  position: sticky;
  top: 100px;
}
.abt-ledger__head {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-text-muted);
  margin-bottom: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}
.abt-ledger__list { margin: 0; }
.abt-ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--color-border);
}
.abt-ledger__row dt {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin: 0;
}
.abt-ledger__row dd {
  font-family: var(--font-family-heading);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.abt-ledger__row--feature {
  background: var(--color-heading);
  margin: 0.5rem -1.4rem 0;
  padding: 0.85rem 1.4rem;
  border-bottom: none;
  border-top: 1.5px solid var(--color-heading);
}
.abt-ledger__row--feature dt {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
}
.abt-ledger__row--feature dd {
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* ─── № 03 — PHILOSOPHY: 3 framed value cards ─── */
.abt-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .abt-values { grid-template-columns: repeat(3, 1fr); }
}
.abt-value {
  background: var(--color-bg);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
}
.abt-value__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-heading);
  background: var(--color-bg-alt);
}
.abt-value__num {
  font-family: var(--font-family-heading);
  font-size: 0.85rem;
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
}
.abt-value__name {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin: 0;
  line-height: 1.1;
}
.abt-value p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── № 04 — COMMITMENT: vertical manifesto list ─── */
.abt-manifesto {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.abt-manifesto__item {
  display: grid;
  grid-template-columns: clamp(56px, 8vw, 100px) 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.25rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}
.abt-manifesto__num {
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-dim);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: right;
}
.abt-manifesto__body { min-width: 0; }
.abt-manifesto__body h3 {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin: 0 0 0.4rem;
  line-height: 1.15;
}
.abt-manifesto__body p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 60ch;
}

/* ─── № 05 — PROMISE: 3 compact numbered promises ─── */
.abt-promises {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .abt-promises { grid-template-columns: repeat(3, 1fr); }
}
.abt-promise {
  background: var(--color-bg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.abt-promise__num {
  font-family: var(--font-family-heading);
  font-size: 0.8rem;
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
}
.abt-promise h4 {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0;
  line-height: 1.15;
}
.abt-promise p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── CTA close ─── */
.abt-cta { text-align: center; }
.abt-cta__title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.65rem, 3.5vw, 2.4rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-heading);
  margin: 0 auto 0.75rem;
  text-wrap: balance;
  max-width: 26ch;
}
.abt-cta__sub {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto 1.5rem;
}
.abt-cta__actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Section label (keep for other sections) */
.about-section-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-sm);
}


/* ========================
   Mobile — 480px and below
   ======================== */
@media (max-width: 480px) {
  /* Directory filters stack vertically */
  .dir-filters__row { flex-direction: column; }
  .dir-filter-group { min-width: 0; width: 100%; }
  .dir-hero__title { font-size: 1.5rem; }
  .dir-hero__sub { font-size: 0.9rem; }

  /* Contact */
  .contact-hero__title { font-size: 1.5rem; }
  .contact-form-panel { padding: var(--space-lg); }

  /* Pricing */
  .home-pricing__number { font-size: 2.5rem; }
  .home-pricing__card-inner { padding: var(--space-lg); }

  /* Blog */
  .blog-featured__title { font-size: 1.25rem; }

  /* About */
  .about-cta p { font-size: var(--font-size-base); }

  /* General hero titles */
  .page-hero__title,
  .legal-hero__title,
  .services-hero__title,
  .faq-hero__title,
  .blog-hero__title { font-size: 1.5rem; }
}

/* ============================================================
   PRO LISTING — visual treatment + PRO badge
   Black border + 2px black top rule + black PRO pill. Editorial register.
   NOTE: there is no gold here. An earlier version used a gold medallion; it
   was replaced with the site accent (#0a0a0a) and the customer-facing copy
   describing a "gold border" was corrected to match on 2026-08-21.
   Applied wherever a listing card renders.
   ============================================================ */

/* Historical note: this was once a circular gold seal with a star accent and
   a slight rotation, notary-stamp style. It is now the flat black pill defined
   below. Kept as a note so the removed design is not reintroduced by someone
   reading old copy that still mentions gold. */
/* ── PRO badge — one treatment everywhere ──────────────────────────────
   This was a 52px gold medallion: radial gradient, two inset bevel rings,
   a drop shadow, a ★ glyph, text-shadow, and rotate(-10deg). On a site
   whose design system calls #0a0a0a "the ONE accent" it read as a sticker
   pasted onto the card rather than part of it — and at 60px rendered it
   swallowed the corner of every Pro card.

   Premium now reads the way the rest of the site reads emphasis: inversion.
   Same compact pill as .mp-card__pill, so it belongs to the same family. */
.dir-card__pro,
.home-listing-card__pro,
.search-card__pro,
.lp-pro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0.3rem 0.5rem;
  border-radius: 2px;
  border: 0;
  background: #0a0a0a;
  color: #fff;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  text-indent: 0;
  transform: none;
  box-shadow: none;
  text-shadow: none;
  user-select: none;
  vertical-align: middle;
}

/* The ★ went with the medallion. */
.dir-card__pro::before,
.home-listing-card__pro::before,
.search-card__pro::before,
.lp-pro-badge::before {
  content: none;
}

/* On a photo the pill needs to hold its own edge. */
.dir-card__pro,
.home-listing-card__pro,
.search-card__pro {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

/* ── Directory card (dir-card) ── */
/* Pro cards keep a distinguishing edge — they sort first, so they should
   look deliberate — but in the site's own accent rather than gold. */
.dir-card--pro {
  border-color: #0a0a0a;
}
.dir-card--pro::before {
  background: #0a0a0a;
  transform: scaleX(1);
  height: 2px;
}
.dir-card--pro:hover {
  border-color: #0a0a0a;
  box-shadow: 0 12px 28px rgba(10, 10, 10, 0.14);
}
.dir-card__pro {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}

/* ── Homepage recent-listings card (home-listing-card) ── */
.home-listing-card--pro {
  border-color: #0a0a0a !important;
}
.home-listing-card--pro:hover {
  border-color: #0a0a0a !important;
  box-shadow: 0 10px 24px rgba(10, 10, 10, 0.14);
}
.home-listing-card__img {
  position: relative;
}
.home-listing-card__pro {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

/* ── Listing detail hero (lp-hero) ── */
.lp-hero__kicker .lp-pro-badge {
  margin-left: 0.55rem;
  vertical-align: middle;
}
.lp-hero__name--pro::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: #0a0a0a;
  margin-top: 0.85rem;
}

/* ──────────────────────────────────────────────────────────────
   HUB PAGES — category, state, and browse-index landing pages.
   Shared by category-hub, state-hub, categories-index, states-index.
   ────────────────────────────────────────────────────────────── */
.hub-section {
  padding: var(--space-2xl) 0 var(--space-3xl);
  background: var(--color-bg-surface);
}

/* Fact-driven intro copy — the anti-thin-content block */
.hub-intro {
  max-width: 760px;
  margin: 0 0 var(--space-2xl);
}
.hub-intro p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}
.hub-intro a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
  transition: border-color 120ms ease;
}
.hub-intro a:hover { border-color: var(--color-accent); }

.hub-empty {
  font-size: 1rem;
  color: var(--color-text-muted);
  padding: var(--space-2xl) 0;
}
.hub-empty a { color: var(--color-accent); font-weight: 600; text-decoration: none; }

/* Related / sideways link blocks */
.hub-related {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}
.hub-related__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-weight: 700;
  margin: 0 0 var(--space-lg);
}

/* Chip list — dense lateral links */
.hub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hub-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.hub-chip:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
  color: var(--color-accent);
}
.hub-chip span {
  font-size: 0.7rem;
  color: var(--color-text-dim);
  font-weight: 700;
}

/* Big browse cards — used on /directory/categories/ and /directory/states/ */
.hub-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 560px) {
  .hub-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .hub-cards { grid-template-columns: repeat(3, 1fr); }
}
.hub-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.hub-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}
.hub-card__name {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
}
.hub-card__count {
  font-size: 0.74rem;
  color: var(--color-text-dim);
  font-weight: 600;
  white-space: nowrap;
}

/* Listing detail — funnel context line under the description */
.lp-prose__context {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.lp-prose__context a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
  transition: border-color 120ms ease;
}
.lp-prose__context a:hover { border-color: var(--color-accent); }

/* Listing detail — related businesses (outside the re-hydrated article) */
.lp-related {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-2xl) 0 var(--space-3xl);
}
.lp-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.lp-related__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.lp-related__all {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}
.lp-related__all:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────
   PILLAR GUIDE PAGES
   ────────────────────────────────────────────────────────────── */
.guide-section {
  padding: var(--space-2xl) 0 var(--space-3xl);
  background: var(--color-bg-surface);
}
.guide-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 960px) {
  .guide-container { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* Long-form prose */
.guide-prose {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 760px;
}
.guide-prose > p,
.guide-prose > ul,
.guide-prose > ol {
  font-size: 1.02rem;
  line-height: 1.78;
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}
.guide-prose h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-2xl) 0 var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  line-height: 1.25;
}
.guide-prose h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin: var(--space-xl) 0 var(--space-sm);
}
.guide-prose ul,
.guide-prose ol { padding-left: 1.3rem; }
.guide-prose li { margin-bottom: 0.5rem; line-height: 1.7; }
.guide-prose a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
  transition: border-color 120ms ease;
}
.guide-prose a:hover { border-color: var(--color-accent); }
.guide-prose strong { font-weight: 700; }

/* FAQ accordion */
.guide-faq { margin: 0 0 var(--space-lg); }
.guide-faq__item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 0.6rem;
  background: var(--color-bg-surface);
  overflow: hidden;
}
.guide-faq__item summary {
  cursor: pointer;
  padding: 0.9rem 1.1rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.guide-faq__item summary::-webkit-details-marker { display: none; }
.guide-faq__item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--color-text-dim);
  font-weight: 400;
  line-height: 1;
}
.guide-faq__item[open] summary::after { content: '\2212'; }
.guide-faq__a { padding: 0 1.1rem 1rem; }
.guide-faq__a p { margin: 0; font-size: 0.96rem; line-height: 1.7; color: var(--color-text-muted); }

/* Funnel CTA at the foot of each guide */
.guide-cta {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-accent);
  border-radius: 12px;
  text-align: center;
}
.guide-cta__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}
.guide-cta p { color: rgba(255,255,255,0.8); margin: 0 0 var(--space-lg); font-size: 0.98rem; }
.guide-cta__btns { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.guide-cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.guide-cta .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* Sticky sidebar */
.guide-aside__card { position: sticky; top: 90px; }
.guide-aside__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-weight: 700;
  margin: 0 0 0.75rem;
}
.guide-aside__title:not(:first-child) { margin-top: var(--space-xl); }
.guide-aside__links { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0; }
.guide-aside__links a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  transition: border-color 120ms ease, transform 120ms ease;
}
.guide-aside__links a:hover { border-color: var(--color-accent); transform: translateX(2px); }

/* Guides index cards */
.guide-index-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 720px) {
  .guide-index-grid { grid-template-columns: repeat(3, 1fr); }
}
.guide-index-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.guide-index-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 10px 24px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}
.guide-index-card__kicker {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-weight: 700;
}
.guide-index-card__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.guide-index-card__desc { font-size: 0.9rem; line-height: 1.6; color: var(--color-text-muted); margin: 0; flex-grow: 1; }
.guide-index-card__cta { font-size: 0.85rem; font-weight: 700; color: var(--color-accent); margin-top: 0.25rem; }

/* Blog — related articles ("Keep reading") */
.bp-related {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-2xl) 0;
}
.bp-related__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
}
.bp-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 720px) {
  .bp-related__grid { grid-template-columns: repeat(3, 1fr); }
}
.bp-related__card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.bp-related__card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}
.bp-related__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-surface);
}
.bp-related__img img { width: 100%; height: 100%; object-fit: cover; }
.bp-related__date {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-weight: 600;
  padding: var(--space-md) var(--space-md) 0;
}
.bp-related__name {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0.4rem var(--space-md) 0;
}
.bp-related__excerpt {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0.5rem var(--space-md) var(--space-md);
}
.bp-related__more {
  margin: var(--space-lg) 0 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.bp-related__more a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.bp-related__more a:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────
   PAGINATION — shared by the directory pager (JS-rendered into
   #directory-pagination) AND the blog pager (build-time Eleventy
   pagination). Global so every .dir-pagination renders identically.
   ────────────────────────────────────────────────────────────── */
.dir-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2.75rem 0 0;
}
.dir-pagination:empty { display: none; }
.dir-pagination__btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0a0a0a;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.dir-pagination__btn:hover:not(:disabled):not([aria-current]) { border-color: #0a0a0a; }
.dir-pagination__btn[aria-current="page"] {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #fff;
  cursor: default;
}
.dir-pagination__btn:disabled { opacity: 0.4; cursor: default; }
.dir-pagination__nav {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dir-pagination__ellipsis {
  min-width: 22px;
  text-align: center;
  color: #a3a3a3;
  font-weight: 700;
  user-select: none;
}
@media (max-width: 480px) {
  .dir-pagination__btn { min-width: 36px; height: 36px; padding: 0 9px; font-size: 0.8rem; }
  .dir-pagination__nav { padding: 0 10px; }
}


/* ─── Sponsored card inside the directory grid ─────────────────────────────
   A paid rectangle that sits in the listing grid itself rather than in a
   sidebar. It occupies a full grid cell edge to edge: the creative IS the
   card. It used to sit as a fixed 300 × 250 box floating inside the card's
   padding, which left a dead border of surface colour on all four sides and
   made the ad look like it had been dropped in by accident.

   Filling the cell also means the advertiser gets the whole cell they paid
   for, at whatever size the grid happens to be. */
.dir-card--ad {
  cursor: default;
  position: relative;
  padding: 0;
  gap: 0;
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
  background: var(--color-bg-surface);
  /* Solid, not dashed — dashed reads as an empty placeholder, and this cell
     is full-bleed artwork now. */
  border-style: solid;
}

/* .dir-card has a hover lift and an ::before accent sweep meant for a
   clickable listing. Neither belongs on an ad card. */
.dir-card--ad::before { display: none; }
.dir-card--ad:hover { transform: none; box-shadow: none; border-color: var(--color-border); }

/* Disclosure rides on top of the creative instead of taking a row above it,
   so nothing is pushed out of the cell. Light chip with dark text reads on
   both dark and light artwork. */
.dir-card__adlabel {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  color: #0a0a0a;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 0.55rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(10, 10, 10, 0.16);
}

/* The rotator paints its own small "Ad" badge inside the creative. With the
   Sponsored chip above it that is the same disclosure twice, six pixels
   apart. Keep one. */
.dir-card--ad .ad-slot__label { display: none; }

/* Base .ad-slot--medium-rectangle pins a fixed 300 × 250 and adds vertical
   padding. In the grid the cell decides the size, so unpin all of it and let
   the slot stretch to whatever height the row settles on. */
.dir-card--ad .ad-slot {
  flex: 1;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
}

/* Three classes deliberately: ads.css sets a hard
   `.ad-slot--medium-rectangle .ad-slot__inner { height: 250px }`, which is the
   same specificity as a two-class override and loads after pages.css, so it
   won and left the creative 28px short of the cell. */
/* ads.css has a mobile block that pins this to `max-width: 300px` with its own
   `aspect-ratio: 300/250` and auto margins — correct for a standalone slot on a
   phone, wrong inside a grid cell that is already the right shape. This
   override previously set width/height but never countered max-width, so below
   640px the creative sat at 300px inside a 524px card: letterboxed with white
   bars and cropped through the wordmark. Every property that block sets has to
   be answered here, not just some of them. */
.dir-card--ad .ad-slot--medium-rectangle .ad-slot__inner {
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  align-self: stretch;
  flex: 1;
  display: flex;
}

.dir-card--ad .ad-slot--medium-rectangle .ad-slot__ad-link {
  width: 100%;
  height: 100%;
  align-self: stretch;
  flex: 1;
  display: block;
}

/* object-fit: cover fills the cell with no letterboxing. The cell tracks the
   row height set by the listing cards beside it, so the aspect drift from the
   creative's native 6:5 is small — but center the crop so anything trimmed
   comes off the edges rather than the middle, where the message lives. */
.dir-card--ad .ad-slot--medium-rectangle .ad-slot__ad-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
}

/* The unsold placeholder and the sold-but-undesigned holding card fill the
   cell too, so an empty slot is the same shape as a full one. */
.dir-card--ad .ad-slot__placeholder,
.dir-card--ad .ad-slot__reserved {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  max-width: none;
}