.founder-story-wrapper {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-text));
}

/* .founder-story-wrapper .page-width {
  padding-inline: 0 5rem;
} */

/* Single centered column (matches live: eyebrow, heading, paragraph, button) */
.founder-story-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

/* Force center alignment for all founder content regardless of block settings */
.founder-story-container,
.founder-story-container .group,
.founder-story-container .block-heading,
.founder-story-container .heading,
.founder-story-container .subheading,
.founder-story-container .rich-text,
.founder-story-container .rich-text * {
  text-align: center;
}

/* Eyebrow — consistent with the featured-collection eyebrow:
   12px / 500 / 0.16em / uppercase. */
.founder-story-container .subheading {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--color-light-text));
}

/* Heading — consistent with the featured-collection title:
   20px / 500 / 0.2em / uppercase. The heading renders as .block-heading.title2;
   the global section-title style forces 50px/700, so override with !important. */
.founder-story-container .block-heading,
.founder-story-container .heading {
  margin: 0;
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase !important;
  line-height: 1.3;
  color: rgb(var(--color-text));
}

/* Body copy — centered, wide column. Font size matches the footer
   "ABOUT QUEEN COSMETICS" paragraph (16px / 1.7) for consistency. */
.founder-story-container .rich-text,
.founder-story-container .rich-text p,
.founder-story-container p {
  max-width: 80rem;
  margin: 0 auto;
  font-size: 16px;
  /* balance the lines so the centered paragraph wraps evenly */
  text-wrap: balance;
  color: rgb(var(--color-text));
  line-height: 1.3;
}

/* Button uses the global .qc-btn--secondary (white -> transparent swipe).
   Only a small top-margin tweak here; all colour/swipe behaviour is global. */
.founder-story-container .qc-btn {
  margin-top: 4px;
  letter-spacing: 0.2em;
}

.founder-story-container .button {
  border-radius: 40px;
  padding: 11px 25px;
  font-size: 20px;
  line-height: 1.65;
  text-transform: capitalize;
  letter-spacing: normal;
}

@media (max-width: 959px) {
  .founder-story-container {
    gap: 14px;
  }
  .founder-story-container .heading {
    font-size: 24px;
  }
  .founder-story-container .block-heading,
  .founder-story-container .heading {
    font-size: 26px !important;
  }
  .founder-story-wrapper .page-width {
    padding-inline: 0 1.5rem;
  }
  .founder-story-container .button {
    padding: 9px 25px;
    font-size: 17px;
  }
}