/* ============================================================
   _lenexa_page.css - The Turn Group
   ------------------------------------------------------------
   Lenexa, KS local service-area page (r39).
   Scoped under .lenexa-page so it never leaks to other pages.
   Loaded ALONGSIDE _local_city_page.css; everything below is
   intentionally a *visually distinct* layout from the Overland
   Park page so Google sees a completely different design rather
   than a copy-paste city-swap.
   White + grey backgrounds, brand gold accents, small radius,
   Inter only. No serifs anywhere.
   ============================================================ */

.lenexa-page {
  /* Pull palette/typography from _local_city_page.css (already
     scoped under .local-page). We only override layout pieces. */
  --lx-bg:        #ffffff;
  --lx-bg-soft:   #f4f6fb;
  --lx-bg-grid:   #eef1f7;
  --lx-line:      rgba(15, 23, 42, 0.12);
  --lx-line-2:    rgba(15, 23, 42, 0.06);
  --lx-ink:       #0b0f1a;
  --lx-text:      #1f2937;
  --lx-muted:     #4b5563;
  --lx-gold:      #c9a227;
  --lx-gold-2:    #e8c14b;
  --lx-gold-soft: rgba(201, 162, 39, 0.10);
  --lx-radius:    8px;
  --lx-radius-sm: 6px;
  color: var(--lx-text);
  background: var(--lx-bg);
}

/* ============================================================
   1. HERO  -  split layout: form on LEFT, copy + stat sidebar
   on RIGHT (OP is form on RIGHT). Decorative grid backdrop.
   ============================================================ */
.lx-hero {
  position: relative;
  padding: 32px 0 56px;
  background:
    radial-gradient(800px 320px at 12% 0%, var(--lx-gold-soft), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--lx-bg-soft) 100%);
  border-bottom: 1px solid var(--lx-line-2);
}
.lx-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lx-gold), var(--lx-gold-2));
  opacity: 0.6;
}
.lx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 960px) {
  .lx-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .lx-hero__form-col { order: 2; }
  .lx-hero__copy-col { order: 1; }
}

.lx-hero__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lx-gold);
  background: var(--lx-gold-soft);
  padding: 6px 12px;
  border-radius: 999px;
  margin: 0 0 16px;
}
.lx-hero__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.1;
  font-weight: 800;
  color: var(--lx-ink);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.lx-hero__title .accent {
  color: var(--lx-gold);
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(0deg, var(--lx-gold-soft) 35%, transparent 35%);
  padding: 0 4px;
}
.lx-hero__sub {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--lx-text);
  margin: 0 0 22px;
  max-width: 60ch;
}

/* Hero stat row - replaces OP's bullet list */
.lx-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
  list-style: none;
  padding: 0;
}
.lx-hero__stats li {
  background: #ffffff;
  border: 1px solid var(--lx-line);
  border-left: 3px solid var(--lx-gold);
  border-radius: var(--lx-radius-sm);
  padding: 14px 14px;
}
.lx-hero__stats strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--lx-ink);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.lx-hero__stats span {
  display: block;
  font-size: 0.82rem;
  color: var(--lx-muted);
  line-height: 1.35;
}
@media (max-width: 520px) {
  .lx-hero__stats { grid-template-columns: 1fr 1fr; }
  .lx-hero__stats li:last-child { grid-column: 1 / -1; }
}

.lx-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 18px;
}
.lx-hero__trustline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  color: var(--lx-muted);
  font-size: 0.92rem;
}
.lx-hero__trustline strong { color: var(--lx-ink); }
.lx-hero__trustline .stars {
  color: var(--lx-gold);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

/* ============================================================
   2. KPI STRIP  -  4 numeric KPIs across, different from OP's
   pill row.  Uses white cards with gold top accent.
   ============================================================ */
.lx-kpi {
  padding: 28px 0;
  background: #ffffff;
  border-top: 1px solid var(--lx-line-2);
  border-bottom: 1px solid var(--lx-line-2);
}
.lx-kpi__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 760px) {
  .lx-kpi__grid { grid-template-columns: 1fr 1fr; }
}
.lx-kpi__cell {
  position: relative;
  padding: 18px 16px 16px;
  text-align: center;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  background: #fff;
}
.lx-kpi__cell::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 3px;
  background: var(--lx-gold);
  border-radius: 0 0 3px 3px;
}
.lx-kpi__num {
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 800;
  color: var(--lx-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 6px;
}
.lx-kpi__lbl {
  font-size: 0.85rem;
  color: var(--lx-muted);
  line-height: 1.4;
  margin: 0;
}

/* ============================================================
   3. INTRO  -  single column centered, big lede.  OP used a
   two-col intro with sidebar snapshot; we go full-width here.
   ============================================================ */
.lx-intro {
  padding: 56px 0 40px;
  background: #ffffff;
}
.lx-intro__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
}
.lx-intro__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-gold);
  margin: 0 0 12px;
}
.lx-intro__h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 800;
  color: var(--lx-ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
}
.lx-intro__lede {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--lx-text);
  margin: 0 0 18px;
}
.lx-intro__body p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--lx-text);
  margin: 0 0 14px;
}

/* ============================================================
   4. COMPARISON SPLIT  -  "Old way vs Turn Group way"
   Two columns side by side.  Brand new section type for Lenexa.
   ============================================================ */
.lx-compare {
  padding: 56px 0;
  background: var(--lx-bg-soft);
  border-top: 1px solid var(--lx-line-2);
  border-bottom: 1px solid var(--lx-line-2);
}
.lx-compare__head {
  text-align: center;
  margin: 0 auto 32px;
  max-width: 720px;
}
.lx-compare__h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  color: var(--lx-ink);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.lx-compare__sub {
  color: var(--lx-muted);
  font-size: 1rem;
  margin: 0;
}
.lx-compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 760px) {
  .lx-compare__grid { grid-template-columns: 1fr; }
}
.lx-compare__col {
  background: #fff;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  padding: 22px 22px 18px;
}
.lx-compare__col--bad { border-top: 3px solid #ef4444; }
.lx-compare__col--good {
  border-top: 3px solid var(--lx-gold);
  box-shadow: 0 4px 16px rgba(201, 162, 39, 0.12);
}
.lx-compare__h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lx-ink);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lx-compare__h3 .badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
}
.lx-compare__col--good .badge {
  background: var(--lx-gold-soft);
  color: #92700a;
}
.lx-compare__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lx-compare__list li {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--lx-text);
  padding: 8px 0 8px 26px;
  border-top: 1px solid var(--lx-line-2);
  position: relative;
}
.lx-compare__list li:first-child { border-top: 0; }
.lx-compare__list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 14px;
  width: 12px; height: 12px;
  border-radius: 2px;
}
.lx-compare__col--bad .lx-compare__list li::before {
  background: #ef4444;
  clip-path: polygon(20% 0, 100% 80%, 80% 100%, 0 20%);
}
.lx-compare__col--good .lx-compare__list li::before {
  background: var(--lx-gold);
  clip-path: polygon(0 50%, 40% 100%, 100% 10%, 80% 0, 40% 70%, 15% 40%);
}

/* ============================================================
   5. SERVICE STACK  -  vertical NUMBERED rows (NOT card grid
   like OP).  Each row: number / title / link block.
   ============================================================ */
.lx-svc {
  padding: 56px 0;
  background: #fff;
}
.lx-svc__head { text-align: center; margin-bottom: 32px; }
.lx-svc__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-gold);
  margin: 0 0 10px;
}
.lx-svc__h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 800;
  color: var(--lx-ink);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.lx-svc__sub {
  color: var(--lx-muted);
  max-width: 640px;
  margin: 0 auto;
  font-size: 1rem;
}

.lx-svc__list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  overflow: hidden;
  background: #fff;
}
@media (max-width: 720px) {
  .lx-svc__list { grid-template-columns: 1fr; }
}
.lx-svc__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  border-top: 1px solid var(--lx-line-2);
  border-right: 1px solid var(--lx-line-2);
  text-decoration: none;
  color: var(--lx-text);
  transition: background-color 0.15s ease;
}
@media (max-width: 720px) {
  .lx-svc__item { border-right: 0; }
}
.lx-svc__item:nth-child(-n+2) { border-top: 0; }
@media (max-width: 720px) {
  .lx-svc__item:nth-child(-n+2) { border-top: 1px solid var(--lx-line-2); }
  .lx-svc__item:first-child     { border-top: 0; }
}
.lx-svc__item:nth-child(2n) { border-right: 0; }
.lx-svc__item:hover,
.lx-svc__item:focus-visible {
  background: var(--lx-bg-soft);
  outline: none;
}
.lx-svc__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--lx-gold);
}
.lx-svc__num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--lx-gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--lx-gold-soft);
  border-radius: var(--lx-radius-sm);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lx-svc__body { min-width: 0; }
.lx-svc__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--lx-ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.lx-svc__item:hover .lx-svc__title { color: var(--lx-gold); }
.lx-svc__desc {
  font-size: 0.9rem;
  color: var(--lx-muted);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   6. HQ SPOTLIGHT  -  feature block highlighting Lenexa's
   Fortune 500 employers / Lenexa City Center context.
   ============================================================ */
.lx-spot {
  padding: 56px 0;
  background: var(--lx-bg-soft);
  border-top: 1px solid var(--lx-line-2);
  border-bottom: 1px solid var(--lx-line-2);
}
.lx-spot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
@media (max-width: 860px) { .lx-spot__grid { grid-template-columns: 1fr; } }
.lx-spot__h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  color: var(--lx-ink);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.lx-spot__h2 .accent { color: var(--lx-gold); }
.lx-spot__body p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--lx-text);
  margin: 0 0 12px;
}
.lx-spot__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.lx-spot__chips li {
  background: #fff;
  border: 1px solid var(--lx-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.86rem;
  color: var(--lx-ink);
  font-weight: 500;
}
.lx-spot__panel {
  background: #fff;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  padding: 22px 22px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.05);
}
.lx-spot__panel h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--lx-ink);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lx-spot__panel h3::before {
  content: "";
  display: inline-block;
  width: 8px; height: 18px;
  background: var(--lx-gold);
  border-radius: 2px;
}
.lx-spot__emp {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lx-spot__emp li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--lx-line-2);
  font-size: 0.94rem;
}
.lx-spot__emp li:first-child { border-top: 0; }
.lx-spot__emp strong { color: var(--lx-ink); font-weight: 600; }
.lx-spot__emp span { color: var(--lx-muted); }

/* ============================================================
   7. DELIVERABLES CHECKLIST  -  "what you actually get" - a
   two-column checklist with check icons.  Different from OP's
   six why-us cards.
   ============================================================ */
.lx-deliver {
  padding: 56px 0;
  background: #fff;
}
.lx-deliver__head { text-align: center; margin-bottom: 28px; }
.lx-deliver__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-gold);
  margin: 0 0 8px;
}
.lx-deliver__h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  color: var(--lx-ink);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.lx-deliver__sub {
  color: var(--lx-muted);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1rem;
}
.lx-deliver__list {
  list-style: none;
  padding: 0;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  max-width: 980px;
}
@media (max-width: 760px) {
  .lx-deliver__list { grid-template-columns: 1fr; gap: 10px; }
}
.lx-deliver__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--lx-text);
  padding: 4px 0;
}
.lx-deliver__list li::before {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--lx-gold);
  background-image: linear-gradient(135deg, var(--lx-gold), var(--lx-gold-2));
  position: relative;
}
.lx-deliver__list li {
  position: relative;
}
.lx-deliver__list li::after {
  content: "";
  position: absolute;
  left: 6px; top: 9px;
  width: 10px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ============================================================
   8. COMPARE TABLE  -  6-row "vs other agencies" table.
   ============================================================ */
.lx-vs {
  padding: 56px 0;
  background: var(--lx-bg-soft);
  border-top: 1px solid var(--lx-line-2);
}
.lx-vs__head { text-align: center; margin-bottom: 24px; }
.lx-vs__h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  color: var(--lx-ink);
  letter-spacing: -0.02em;
  margin: 0;
}
.lx-vs__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  overflow: hidden;
  font-size: 0.95rem;
}
.lx-vs__table th,
.lx-vs__table td {
  padding: 14px 16px;
  text-align: left;
  border-top: 1px solid var(--lx-line-2);
  vertical-align: top;
}
.lx-vs__table thead th {
  background: var(--lx-ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-top: 0;
}
.lx-vs__table thead th.lx-vs__us {
  background: var(--lx-gold);
  color: #0b0f1a;
}
.lx-vs__table tbody th {
  font-weight: 600;
  color: var(--lx-ink);
  background: #fafbfd;
  width: 28%;
}
.lx-vs__table td.lx-vs__them { color: var(--lx-muted); }
.lx-vs__table td.lx-vs__us {
  color: var(--lx-ink);
  font-weight: 600;
  background: rgba(201,162,39,0.04);
}
@media (max-width: 640px) {
  .lx-vs__table { font-size: 0.88rem; }
  .lx-vs__table th, .lx-vs__table td { padding: 10px 12px; }
}

/* ============================================================
   9. TESTIMONIAL  -  big single quote, gold left bar.
   ============================================================ */
.lx-quote {
  padding: 56px 0;
  background: #fff;
}
.lx-quote__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 32px;
  background: #ffffff;
  border: 1px solid var(--lx-line);
  border-left: 6px solid var(--lx-gold);
  border-radius: var(--lx-radius);
  box-shadow: 0 4px 18px rgba(15,23,42,0.05);
}
.lx-quote__mark {
  display: block;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--lx-gold);
  font-weight: 800;
  margin: 0 0 6px;
}
.lx-quote__text {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--lx-ink);
  font-weight: 500;
  margin: 0 0 18px;
}
.lx-quote__attr {
  font-size: 0.95rem;
  color: var(--lx-muted);
}
.lx-quote__attr strong { color: var(--lx-ink); }

/* ============================================================
   10. FAQ  -  2-column accordion grid for desktop (OP was a
   single column).
   ============================================================ */
.lx-faq {
  padding: 56px 0;
  background: var(--lx-bg-soft);
  border-top: 1px solid var(--lx-line-2);
}
.lx-faq__head { text-align: center; margin-bottom: 28px; }
.lx-faq__h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  color: var(--lx-ink);
  letter-spacing: -0.02em;
  margin: 0;
}
.lx-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
@media (max-width: 760px) {
  .lx-faq__grid { grid-template-columns: 1fr; }
}
.lx-faq__item {
  background: #fff;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius-sm);
  padding: 0;
}
.lx-faq__item[open] {
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
  border-color: rgba(201,162,39,0.4);
}
.lx-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 16px 44px 16px 18px;
  font-weight: 600;
  color: var(--lx-ink);
  font-size: 1rem;
  position: relative;
  line-height: 1.4;
}
.lx-faq__q::-webkit-details-marker { display: none; }
.lx-faq__q::after {
  content: "+";
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--lx-gold);
  font-weight: 800;
  line-height: 1;
}
.lx-faq__item[open] .lx-faq__q::after { content: "−"; }
.lx-faq__a {
  padding: 0 18px 16px;
  color: var(--lx-text);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   11. COVERAGE ZONES  -  map-style grid of Lenexa districts
   (OP used chip pills).
   ============================================================ */
.lx-zones {
  padding: 56px 0;
  background: #fff;
}
.lx-zones__head { text-align: center; margin-bottom: 24px; }
.lx-zones__h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  color: var(--lx-ink);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.lx-zones__sub {
  color: var(--lx-muted);
  margin: 0 auto;
  max-width: 640px;
  font-size: 1rem;
}
.lx-zones__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
@media (max-width: 860px) { .lx-zones__grid { grid-template-columns: repeat(2, 1fr); } }
.lx-zones__cell {
  background: var(--lx-bg-soft);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius-sm);
  padding: 16px 14px;
}
.lx-zones__cell strong {
  display: block;
  color: var(--lx-ink);
  font-weight: 700;
  font-size: 0.96rem;
  margin: 0 0 4px;
}
.lx-zones__cell span {
  color: var(--lx-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.lx-zones__sister {
  margin-top: 32px;
  text-align: center;
}
.lx-zones__sister p {
  color: var(--lx-muted);
  font-size: 0.95rem;
  margin: 0 0 10px;
}
.lx-zones__sister__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  list-style: none;
  padding: 0; margin: 0;
}
.lx-zones__sister__list a {
  display: inline-block;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--lx-line);
  border-radius: 999px;
  color: var(--lx-ink);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
}
.lx-zones__sister__list a:hover,
.lx-zones__sister__list a:focus-visible {
  background: var(--lx-gold-soft);
  border-color: var(--lx-gold);
  color: var(--lx-ink);
  outline: none;
}

/* ============================================================
   12. FINAL CTA  -  light gold gradient (OP used dark ink).
   ============================================================ */
.lx-cta {
  padding: 56px 0;
  background:
    linear-gradient(180deg, var(--lx-gold-soft) 0%, #fff 100%);
  border-top: 1px solid var(--lx-line-2);
  text-align: center;
}
.lx-cta__h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 800;
  color: var(--lx-ink);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  max-width: 720px;
  margin-inline: auto;
  line-height: 1.2;
}
.lx-cta__sub {
  color: var(--lx-text);
  font-size: 1.05rem;
  margin: 0 auto 22px;
  max-width: 620px;
  line-height: 1.6;
}
.lx-cta__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.lx-cta__line {
  margin: 22px 0 0;
  color: var(--lx-muted);
  font-size: 0.92rem;
}
.lx-cta__line strong { color: var(--lx-ink); }

/* =========================================================
   LENEXA - Problems We Solve (r43)
   Visual: numbered alternating zigzag, big numerals,
   gold diagonal band tying problem to outcome.
   Distinct from Shawnee, OP, Olathe.
   ========================================================= */
.lenexa-page .lx-solve {
  position: relative;
  padding: 80px 0 88px;
  background:
    linear-gradient(180deg, var(--lx-bg-soft) 0%, #ffffff 100%);
  border-top: 1px solid var(--lx-line-2);
  border-bottom: 1px solid var(--lx-line-2);
  overflow: hidden;
}
.lenexa-page .lx-solve::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 22px,
      rgba(15,23,42,.025) 22px 23px
    );
  pointer-events: none;
}
.lenexa-page .lx-solve__wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  z-index: 1;
}
.lenexa-page .lx-solve__head {
  text-align: left;
  max-width: 780px;
  margin: 0 0 44px;
  border-left: 4px solid var(--lx-gold);
  padding-left: 18px;
}
.lenexa-page .lx-solve__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lx-gold);
  margin: 0 0 8px;
}
.lenexa-page .lx-solve__title {
  font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.15rem);
  font-weight: 800;
  color: var(--lx-ink);
  line-height: 1.16;
  margin: 0 0 10px;
}
.lenexa-page .lx-solve__lede {
  font-size: 1.05rem;
  color: var(--lx-text);
  line-height: 1.65;
  margin: 0;
  max-width: 720px;
}
.lenexa-page .lx-solve__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.lenexa-page .lx-pz {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: #ffffff;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.06);
  overflow: hidden;
}
.lenexa-page .lx-pz__num {
  position: relative;
  background: linear-gradient(135deg, var(--lx-ink) 0%, #1a2333 100%);
  color: var(--lx-gold-2);
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem);
  line-height: 1;
  padding: 22px 22px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  letter-spacing: -0.02em;
}
.lenexa-page .lx-pz__num::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(135deg, var(--lx-ink) 0%, #1a2333 100%);
  transform: skewX(-12deg);
  display: none;
}
.lenexa-page .lx-pz__numlabel {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232,193,75,0.85);
  margin-bottom: 4px;
}
.lenexa-page .lx-pz__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lenexa-page .lx-pz__problem {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--lx-ink);
  line-height: 1.4;
  margin: 0;
}
.lenexa-page .lx-pz__problem strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #991b1b;
  margin-bottom: 4px;
}
.lenexa-page .lx-pz__arrow {
  height: 1px;
  background: linear-gradient(90deg, var(--lx-gold) 0%, var(--lx-gold-2) 70%, transparent 100%);
  position: relative;
  margin: 2px 0;
}
.lenexa-page .lx-pz__arrow::after {
  content: "";
  position: absolute;
  right: 18%;
  top: -4px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--lx-gold);
  border-right: 2px solid var(--lx-gold);
  transform: rotate(45deg);
}
.lenexa-page .lx-pz__fix {
  font-size: 0.95rem;
  color: var(--lx-text);
  line-height: 1.65;
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid var(--lx-gold);
}
.lenexa-page .lx-pz__fix strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lx-gold);
  margin-bottom: 4px;
}
.lenexa-page .lx-solve__foot {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: var(--lx-ink);
  border-radius: var(--lx-radius);
  color: #ffffff;
}
.lenexa-page .lx-solve__footmsg {
  font-size: 1rem;
  color: rgba(255,255,255,.9);
  margin: 0;
}
.lenexa-page .lx-solve__footbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(90deg, var(--lx-gold), var(--lx-gold-2));
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--lx-gold);
}
.lenexa-page .lx-solve__footbtn:hover {
  filter: brightness(1.05);
}

@media (min-width: 780px) {
  .lenexa-page .lx-pz {
    grid-template-columns: 200px 1fr;
  }
  .lenexa-page .lx-pz:nth-child(even) {
    grid-template-columns: 1fr 200px;
  }
  .lenexa-page .lx-pz:nth-child(even) .lx-pz__num {
    order: 2;
    background: linear-gradient(135deg, #1a2333 0%, var(--lx-ink) 100%);
  }
  .lenexa-page .lx-pz:nth-child(even) .lx-pz__body {
    order: 1;
  }
}