/* ==========================================================
   home-strategy.css — compact secondary "Business Strategy
   Session" introduction on the homepage.
   Loaded by index.html only, so the global .btn styling used
   by the rest of the site is untouched.
   ========================================================== */

.strategy-promo {
  padding: var(--space-lg) 0;
  background-color: var(--color-grey-light);
  border-top: 1px solid var(--color-grey-mid);
  border-bottom: 1px solid var(--color-grey-mid);
}

.strategy-promo-inner {
  max-width: 720px;
  text-align: center;
}

.strategy-promo-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.strategy-promo-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

/* deliberately an outlined secondary button — the finance
   calls to action stay the prominent ones on this page */
.strategy-promo-btn {
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
}

.strategy-promo-btn:hover {
  background: var(--color-navy);
  color: var(--color-white);
  opacity: 1;
}

.strategy-promo-note {
  margin-top: var(--space-md);
  margin-bottom: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-grey-text);
}

/* the label is long — let it wrap rather than overflow, matching
   the treatment used on the strategy page itself */
@media (max-width: 600px) {
  .strategy-promo-btn {
    display: flex;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    justify-content: center;
    text-align: center;
    padding-left: 1.25em;
    padding-right: 1.25em;
  }
}