/* ═══════════════════════════════════════════════════════════
   Fakturette — SEO landing pages, charcoal & steel-blue.
   Loads after charcoal.css and reuses its tokens.

   Also carries a small grid/utility shim so these pages no longer
   pull Bootstrap and Font Awesome off a CDN. Only the classes the
   template actually uses are implemented.
   ═══════════════════════════════════════════════════════════ */

/* ─── grid + utility shim (replaces Bootstrap) ─────────── */
.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--pad);
}
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--gap);
}
.row > [class*="col-"] { grid-column: span 12; }
.g-4 { row-gap: clamp(1.25rem, 2.5vw, 2rem); }
.align-items-center { align-items: center; }
.text-center { text-align: center; }
.mt-3 { margin-top: 1rem; }
.me-1 { margin-right: .3rem; }
.d-none { display: none; }

@media (min-width: 768px) {
  .col-md-6 { grid-column: span 6; }
}
@media (min-width: 992px) {
  .col-lg-4 { grid-column: span 4; }
  .col-lg-5 { grid-column: span 5; }
  .col-lg-6 { grid-column: span 6; }
  .col-lg-7 { grid-column: span 7; }
  .d-lg-block { display: block; }
}

/* ─── icons become typographic marks, no icon font ─────── */
.fas { font-style: normal; font-family: var(--mono); color: var(--accent); }
.fa-check::before,
.fa-check-circle::before { content: "\2713"; }   /* ✓ — carries meaning in lists */
.fa-times-circle::before { content: "\2715"; }
.fa-exclamation-triangle::before { content: "!"; }
.fa-gift::before { content: "\2731"; }
/* purely decorative glyphs are dropped rather than substituted */
.feature-icon .fas,
.profession-icon .fas,
.local-badge .fas,
.submit-btn .fas,
.btn .fas { display: none; }

/* ─── page furniture ───────────────────────────────────── */
.breadcrumb-nav {
  border-bottom: 1px solid var(--rule);
  padding-block: 1rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.breadcrumb-nav a { color: var(--muted); text-decoration: none; transition: color .18s ease; }
.breadcrumb-nav a:hover { color: var(--accent); }

.section-padding { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-bg { background: var(--bg-2); border-block: 1px solid var(--rule); }

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-variation-settings: "wdth" 106;
  letter-spacing: -.022em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

/* ─── hero ─────────────────────────────────────────────── */
.hero-landing {
  padding-block: clamp(3rem, 6.5vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.hero-landing .row { align-items: center; }
.hero-landing h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  font-variation-settings: "wdth" 110;
  line-height: 1;
  letter-spacing: -.032em;
  margin: 0 0 1.35rem;
}
.hero-landing .lead {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  color: var(--muted);
  max-width: 52ch;
  margin: 0 0 2rem;
}
.profession-icon { display: none; }

.local-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: .35rem .7rem;
  margin-bottom: 1.25rem;
}

/* the landing hero keeps a single CTA, like the home page */
.email-form { margin: 0; }
.email-input-group { display: flex; justify-content: flex-start !important; }
.submit-btn {
  display: inline-block;
  padding: 1.05rem 2rem;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.submit-btn:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* ─── pain / solution columns ──────────────────────────── */
.pain-point-card,
.solution-card {
  padding: 1.1rem 0 1.1rem 1.1rem;
  border-left: 2px solid var(--rule-2);
  margin-bottom: .9rem;
  color: var(--muted);
  font-size: var(--t-small);
}
.solution-card { border-left-color: var(--accent); color: var(--fg); }
.pain-point-card strong,
.solution-card strong { color: var(--fg); font-weight: 600; }

/* ─── feature list ─────────────────────────────────────── */
.feature-grid { display: contents; }
.feature-item {
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.feature-item h3 {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  font-size: 1.12rem !important;
  font-variation-settings: "wdth" 100;
  letter-spacing: -.012em;
  margin: 0 0 .45rem !important;
  color: var(--fg);
}
.feature-item p { color: var(--muted); font-size: var(--t-small); margin: 0; }
.feature-icon { display: none; }

/* ─── local section, FAQ, related links ────────────────── */
.local-section { color: var(--muted); }
.local-section strong { color: var(--fg); }

.faq-list { border-top: 1px solid var(--rule-2); margin-top: 1.5rem; }
.faq-item { padding-block: 1.4rem; border-bottom: 1px solid var(--rule); }
.faq-item h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  font-variation-settings: "wdth" 100;
  letter-spacing: -.014em;
  margin: 0 0 .5rem;
}
.faq-answer, .faq-item p { color: var(--muted); font-size: var(--t-small); margin: 0; max-width: 68ch; }

.other-professions,
.other-cities {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--muted);
}
.other-professions a,
.other-cities a { color: var(--muted); text-decoration: none; transition: color .18s ease; }
.other-professions a:hover,
.other-cities a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }

/* ─── closing CTA + footer ─────────────────────────────── */
.cta-landing {
  background: var(--bg-2);
  border-block: 1px solid var(--rule);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.cta-landing .section-title { margin-bottom: 1rem; }
.cta-landing p { color: var(--muted); }

.footer-landing {
  border-top: 1px solid var(--rule);
  padding-block: 2.25rem;
  font-size: 1.0625rem;
  color: var(--muted);
}
.footer-landing a { color: var(--muted); text-decoration: none; }
.footer-landing a:hover { color: var(--accent); }

/* the footer's contact trigger */
.btn.btn-outline-light,
.btn-sm {
  display: inline-block;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  background: transparent;
  color: var(--muted);
  padding: .6rem 1.1rem;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.btn.btn-outline-light:hover,
.btn-sm:hover { color: var(--accent); border-color: var(--accent); }