/* ================================================================
   Why work with us: the Bridgepointe proof block.
   Used on the home page, the assessment page, the cost estimate and
   the top EOL guides. Self-contained so it renders the same whether
   the page loads design-system.css or styles.css.
   why-us--navy sits on dark bands, why-us--light on light ones.
   ================================================================ */

.why-us { padding: 88px 0; font-family: 'DM Sans', sans-serif; }
.why-us--navy { background: #003B5C; color: #fff; }
.why-us--light { background: #F0F4F8; color: #1A2332; border-top: 1px solid #E4E4E4; }

.why-us__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.why-us__eyebrow { display: inline-block; margin: 0 0 16px; padding: 3px 11px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.why-us--navy .why-us__eyebrow { background: #E5F5FD; color: #0E6B96; }
.why-us--light .why-us__eyebrow { background: #E6F9ED; color: #1A7A3C; }
.why-us__title { margin: 0; font-family: 'Barlow Semi Condensed', sans-serif; font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1.15; }
.why-us--navy .why-us__title { color: #fff; }
.why-us--light .why-us__title { color: #003B5C; }
.why-us__logo { display: block; flex-shrink: 0; width: 210px; max-width: 100%; height: auto; margin-bottom: 6px; }

.why-us__lead { max-width: 780px; margin: 20px 0 0; font-size: 16px; line-height: 1.8; }
.why-us--navy .why-us__lead { color: rgba(255,255,255,.78); }
.why-us--light .why-us__lead { color: #5A6478; }
.why-us__lead a, .why-us__proof a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.why-us--navy .why-us__lead a, .why-us--navy .why-us__proof a { color: #8fe3a8; }
.why-us--light .why-us__lead a, .why-us--light .why-us__proof a { color: #003B5C; }

.why-us__clients-label { margin: 32px 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.why-us--navy .why-us__clients-label { color: rgba(255,255,255,.62); }
.why-us--light .why-us__clients-label { color: #5A6478; }
.why-us__clients { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.why-us__clients li { margin: 0; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; }
.why-us--navy .why-us__clients li { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; }
.why-us--light .why-us__clients li { border: 1px solid #DCE3EA; background: #fff; color: #003B5C; }

.why-us__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.why-us__card { border-radius: 12px; padding: 24px 20px; }
.why-us--navy .why-us__card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); }
.why-us--light .why-us__card { background: #fff; border: 1px solid #E4E4E4; box-shadow: 0 1px 4px rgba(0,59,92,.07); }
.why-us__card h3 { margin: 0 0 8px; font-family: 'Barlow', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; }
.why-us--navy .why-us__card h3 { color: #fff; }
.why-us--light .why-us__card h3 { color: #003B5C; }
.why-us__card p { margin: 0; font-size: 14px; line-height: 1.65; }
.why-us--navy .why-us__card p { color: rgba(255,255,255,.72); }
.why-us--light .why-us__card p { color: #5A6478; }

.why-us__proof { max-width: 880px; margin: 28px 0 0; font-size: 15px; line-height: 1.7; }
.why-us--navy .why-us__proof { color: rgba(255,255,255,.78); }
.why-us--light .why-us__proof { color: #5A6478; }
.why-us--navy .why-us__proof strong { color: #fff; }
.why-us--light .why-us__proof strong { color: #1A2332; }
.why-us__nowrap { white-space: nowrap; }
.why-us__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

@media (max-width: 1024px) {
  .why-us__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .why-us { padding: 56px 0; }
  .why-us__heading { flex-direction: column; align-items: flex-start; gap: 20px; }
  .why-us__logo { width: 170px; margin-bottom: 0; }
  .why-us__grid { grid-template-columns: 1fr; }
  .why-us__clients li { padding: 7px 11px; font-size: 12px; }
}

/* One-line proof under lead forms. --dark sits on the navy options-form card. */
.why-us-strip { margin: 16px 0 0; font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.6; color: #5A6478; }
.why-us-strip strong { color: #003B5C; font-weight: 700; }
.why-us-strip--dark { color: rgba(255,255,255,.72); }
.why-us-strip--dark strong { color: #fff; }