/* ============================================================
   brokers.css — page-scoped redesign for /brokers/
   Loaded AFTER main.css (source-order wins). Scoped to .brokers-page.
   Fixes the "long article in one wide column" feel:
   tight reading measure, real section rhythm, framed client builds,
   card-based audience block, full-bleed CTA, copper accents (no gold).
   ============================================================ */

.brokers-page {
  --measure: 720px;      /* prose reading column */
  --feature: 960px;      /* framed screenshots / feature width */
  --ink: #1b1a19;
  --ink-soft: #3a3836;
  --line: rgba(27,26,25,0.10);
  --band: #faf7f4;       /* soft warm band behind feature sections */
}

/* ---------- HERO ---------- */
.brokers-page .client-hero { min-height: 620px; }
.brokers-page .client-hero__bg { filter: brightness(0.64); }
.brokers-page .client-hero__overlay {
  background:
    linear-gradient(100deg, rgba(20,8,15,0.82) 0%, rgba(20,8,15,0.44) 46%, rgba(20,8,15,0.12) 100%),
    linear-gradient(to bottom, rgba(20,8,15,0.10) 0%, rgba(20,8,15,0.30) 55%, rgba(20,8,15,0.60) 100%);
}
.brokers-page .client-hero__eyebrow {
  color: #E7A981;               /* light copper, not gold */
  letter-spacing: 0.26em;
  font-size: 12.5px;
}
.brokers-page .client-hero__title {
  font-weight: 600;
  font-size: clamp(38px, 6vw, 68px);
  letter-spacing: -0.012em;
  line-height: 1.04;
  text-shadow: 0 2px 34px rgba(0,0,0,0.28);
  max-width: 15ch;
}
.brokers-page .client-hero__sub {
  font-size: 18.5px;
  line-height: 1.6;
  max-width: 660px;
  color: rgba(255,255,255,0.92);
}

/* ---------- BIGNUM STRIP ---------- */
.brokers-page .pm-bignum-strip {
  background: linear-gradient(120deg, #6B214B 0%, #431029 100%);
  padding: 62px 0;
  margin: 0 0 8px;
}
.brokers-page .pm-bignum-strip .container { max-width: 1120px; }
.brokers-page .pm-bignum-grid { gap: 28px; }
.brokers-page .pm-bignum-grid > div { position: relative; padding-top: 6px; }
.brokers-page .pm-bignum-grid__num {
  font-family: var(--font-editorial);
  font-size: clamp(52px, 6vw, 68px);
  font-weight: 600;
  color: #ffffff;                /* was gold */
  line-height: 0.98;
}
.brokers-page .pm-bignum-grid__num::after {
  content: ""; display: block; width: 40px; height: 3px;
  background: #E7A981; border-radius: 2px; margin: 16px auto 0;
}
.brokers-page .pm-bignum-grid__lbl {
  font-size: 12px; letter-spacing: 0.12em; line-height: 1.5;
  margin-top: 14px; opacity: 0.82; max-width: 22ch; margin-inline: auto;
}

/* ---------- MAIN LAYOUT + READING MEASURE ---------- */
.brokers-page .client-main { padding: 40px 24px 32px; }
.brokers-page .client-main .container { max-width: 1120px; }

/* the centered reading column: prose, headings, lede, CTA text */
.brokers-page .client-intro,
.brokers-page .client-section > h2,
.brokers-page .client-section > h3,
.brokers-page .client-section > p,
.brokers-page .client-section > ul,
.brokers-page .client-section > ol,
.brokers-page .bp-caseheader,
.brokers-page .pm-divider-cta__inner,
.brokers-page .post-faq__heading,
.brokers-page .post-faq__intro {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- INTRO / LEDE ---------- */
.brokers-page .client-intro { margin-bottom: 40px; }
.brokers-page .client-intro__lede {
  font-family: var(--font-editorial);
  font-style: normal;            /* kill the italic */
  font-weight: 500;
  font-size: clamp(22px, 2.7vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: var(--measure);
  margin: 0 auto 26px;
}
.brokers-page .client-intro p {
  font-size: 17.5px; line-height: 1.75; color: var(--ink-soft);
}

/* ---------- SECTIONS + HEADINGS (no gold hairline) ---------- */
.brokers-page .client-section {
  margin: 0; padding: 46px 0; scroll-margin-top: 120px;
}
.brokers-page .client-section h2 {
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: clamp(29px, 3.6vw, 43px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  border-top: none;              /* was 2px gold */
  padding-top: 0;
  margin: 0 auto 22px;
}
.brokers-page .client-section h2::before {
  content: ""; display: block; width: 46px; height: 3px;
  background: var(--copper); border-radius: 2px; margin-bottom: 22px;
}
.brokers-page .client-section > p,
.brokers-page .client-section > li {
  font-size: 17px; line-height: 1.78; color: var(--ink-soft);
  margin-bottom: 18px;
}
.brokers-page .client-section strong { color: var(--ink); font-weight: 600; }
.brokers-page .client-section a { color: var(--burgundy); text-underline-offset: 3px; }

/* ---------- FULL-BLEED MOOD IMAGE ---------- */
.brokers-page .img-band {
  height: clamp(280px, 42vh, 460px);
  margin: 40px 0;
}
.brokers-page .img-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(107,33,75,0.16), rgba(0,0,0,0));
  pointer-events: none;
}

/* ---------- FRAMED CLIENT SCREENSHOTS ---------- */
.brokers-page .bp-shot {
  max-width: var(--feature);
  margin: 26px auto 30px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -34px rgba(30,10,22,0.55), 0 4px 14px -8px rgba(0,0,0,0.12);
  background: #fff;
}
.brokers-page .bp-shot img { display: block; width: 100%; height: auto; }

/* ---------- AUDIENCE CARDS (who this page is for) ---------- */
.brokers-page .bp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 30px auto 8px;
  max-width: var(--feature);
}
.brokers-page .bp-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px;
  position: relative;
}
.brokers-page .bp-card__k {
  font-family: var(--font-editorial);
  font-size: 30px; font-weight: 600; color: var(--copper);
  line-height: 1; margin-bottom: 14px;
}
.brokers-page .bp-card__t {
  font-family: var(--font-primary); font-weight: 600;
  font-size: 17px; color: var(--ink); margin: 0 0 10px;
}
.brokers-page .bp-card p {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0;
}

/* ---------- CLIENT-BUILD FEATURE BANDS ---------- */
.brokers-page .client-section--case {
  position: relative; z-index: 0; padding: 62px 0;
}
.brokers-page .client-section--case::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  background: var(--band);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  z-index: -1;
}
.brokers-page .bp-caseheader { margin-bottom: 24px; }
.brokers-page .bp-caseeyebrow {
  display: block; font-family: var(--font-primary); font-size: 12px;
  font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 14px;
}
.brokers-page .client-section--case h2 { margin-top: 0; }
.brokers-page .client-section--case h2::before { display: none; }
.brokers-page .bp-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: var(--measure); margin: 18px auto 0;
}
.brokers-page .bp-meta span,
.brokers-page .bp-meta a {
  font-family: var(--font-primary); font-size: 12.5px; letter-spacing: 0.02em;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
}
.brokers-page .bp-meta a { color: var(--burgundy); font-weight: 600; }
.brokers-page .bp-meta a:hover { border-color: var(--burgundy); }

/* ---------- SERVICES GRID ---------- */
.brokers-page .pm-services-grid {
  max-width: var(--feature); margin: 30px auto; gap: 18px;
}
.brokers-page .pm-services-card {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--copper);
  border-radius: 12px; padding: 24px 24px;
}
.brokers-page .pm-services-card h3 { color: var(--burgundy); font-size: 17px; }

/* platform rel-index chips (kill legacy gold on .rel-k) */
.brokers-page .rel-index { max-width: var(--feature); margin: 22px auto 0; }
.brokers-page .rel-k { color: var(--copper); }
.brokers-page .related-card__cat { color: var(--burgundy); }

/* ---------- FULL-BLEED CTA BAND ---------- */
.brokers-page .pm-divider-cta {
  position: relative; z-index: 0;
  background: none; border-radius: 0;
  padding: 66px 24px; margin: 30px 0;
}
.brokers-page .pm-divider-cta::before {
  content: ""; position: absolute; inset: 0 50% 0 50%;
  width: 100vw; transform: translateX(-50%);
  background: linear-gradient(120deg, #6B214B 0%, #431029 100%);
  z-index: -1;
}
.brokers-page .pm-divider-cta__inner { text-align: center; }
.brokers-page .pm-divider-cta h2 { color: #fff; margin: 0 0 12px; }
.brokers-page .pm-divider-cta h2::before { display: none; }
.brokers-page .pm-divider-cta p {
  color: rgba(255,255,255,0.88); margin: 0 auto 24px; max-width: 52ch; font-size: 17px;
}
.brokers-page .pm-divider-cta .btn-primary { background: #fff; color: var(--burgundy); border: none; }
.brokers-page .pm-divider-cta .btn-primary:hover { background: #f3e7ee; }

/* ---------- FAQ ---------- */
.brokers-page .client-faq-wrap { max-width: 860px; margin: 8px auto; padding: 24px 0; }
.brokers-page .post-faq__heading { text-align: left; }
.brokers-page .post-faq__item {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 12px; padding: 4px 22px;
}
.brokers-page .post-faq__q { font-weight: 600; color: var(--ink); }

/* ---------- LEAD FORM ---------- */
.brokers-page #broker-lead { max-width: 720px; margin: 0 auto; }
.brokers-page .contact-form .form-input,
.brokers-page .contact-form .form-select,
.brokers-page .contact-form .form-textarea {
  border-radius: 10px; border: 1px solid var(--line); padding: 13px 14px; font-size: 15px;
}
.brokers-page .contact-form .form-input:focus,
.brokers-page .contact-form .form-select:focus,
.brokers-page .contact-form .form-textarea:focus {
  outline: none; border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(107,33,75,0.12);
}

/* ---------- RELATED ---------- */
.brokers-page .client-related { max-width: var(--feature); margin: 10px auto 0; }

/* ---------- REVEAL MOTION (uses main.js .reveal → .visible) ---------- */
.brokers-page .reveal { transition-duration: 0.7s; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .brokers-page .bp-cards { grid-template-columns: 1fr; }
  .brokers-page .client-main { padding: 28px 18px 24px; }
  .brokers-page .client-section { padding: 34px 0; }
  .brokers-page .client-section--case { padding: 44px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brokers-page .reveal { transition: none; }
}