/* Challenges page-only section and responsive styles. Shared foundations live in global.css. */

.prefooter--challenges .prefooter-photo {
  left: 0px;
  right: 0px;
  top: -110px;
  width: 1440px;
  height: 960px;
  margin-inline: auto;
  justify-self: stretch;
  translate: none;
  filter: none;
}

.prefooter--challenges::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 348px, rgba(0, 0, 0, 0.56) 548.92px, rgba(0, 0, 0, 0.8) 820px), rgba(0, 0, 0, 0.25);
}

.prefooter--challenges .prefooter-copy {
  color: var(--color-border);
}

.challenges-hero-media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 57.744%, rgba(0, 0, 0, 0.24) 70.421%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(128.500848767deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.364) 37.732%, rgba(0, 0, 0, 0) 54.555%);
}

.challenges-hero-intro {
  margin-top: 396px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.challenges-hero-intro p {
  max-width: 508px;
  letter-spacing: -0.18px;
}

.challenges-reality {
  padding: 80px 0px 78.984375px;
  background: var(--color-surface);
}

.challenges-reality-content {
  width: 801px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.challenges-reality-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.challenges-reality-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-accent);
  white-space: nowrap;
}

.challenges-reality-eyebrow::before {
  content: "";
  flex: 0 0 40px;
  height: 1px;
  background: var(--color-accent);
}

.challenges-reality-header h2 {
  max-width: 638px;
  color: var(--color-brand-hover);
}

.challenges-reality-copy {
  width: 716px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--color-text-secondary);
  letter-spacing: -0.18px;
}

.pressure-effects {
  padding-block: 100px;
  background: var(--color-background);
}

.pressure-effects-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 47.59375px;
}

.pressure-effects-header {
  width: 760px;
  max-width: 100%;
  max-width: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.pressure-effects-heading {
  width: 100%;
  width: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pressure-effects-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-accent);
  white-space: nowrap;
}

.pressure-effects-eyebrow::before {
  content: "";
  flex: 0 0 40px;
  height: 1px;
  background: var(--color-accent);
}

.pressure-effects-heading h2 {
  width: 692px;
  max-width: 100%;
  max-width: stretch;
  color: var(--color-brand-hover);
}

.pressure-effects-description {
  width: 100%;
  width: stretch;
  color: var(--color-text-secondary);
  letter-spacing: -0.18px;
}

.pressure-effects-cards {
  width: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  align-items: stretch;
  gap: 24px;
  padding: 0px;
  list-style: none;
}

.pressure-effect-card {
  flex: 1 1 0px;
  min-width: 0px;
  min-height: 203px;
  padding: 32px 24px;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.pressure-effect-card h3 {
  color: var(--color-brand-hover);
}

.pressure-effect-card p {
  color: var(--color-text-secondary);
  letter-spacing: -0.18px;
}

.pressure-effects:has(.pressure-effects-cards:empty) {
  display: none;
}

.old-patterns {
  background: var(--color-surface);
}

.old-patterns .from-reaction-table {
  width: stretch;
}

.old-patterns .from-reaction-table tbody .from-reaction-row-grid {
  letter-spacing: -0.18px;
}

@media (min-width: 1400px) {
  .old-patterns .from-reaction-content {
    gap: 47.796875px;
  }
}

.question-cta {
  position: relative;
  isolation: isolate;
  height: 820px;
  padding-top: 100px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: var(--color-surface);
  background: var(--color-surface-dark);
}

.question-cta-image,
.question-cta-shade {
  position: absolute;
  inset: 0px;
}

.question-cta-image {
  left: 0px;
  right: 0px;
  width: 1440px;
  height: 959.728px;
  max-width: none;
  margin: -0.41px auto 0px;
}

.question-cta-shade {
  background: linear-gradient(180deg, rgba(5, 12, 42, 0.7) 0px, rgba(5, 12, 42, 0.53) 382.407px, rgba(5, 12, 42, 0) 820px);
}

.question-cta-content {
  position: relative;
  flex: 0 1 848px;
  width: 848px;
  min-width: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15.796875px;
  text-align: center;
}

.question-cta-heading {
  width: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.question-cta-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.question-cta-eyebrow::before {
  content: "";
  flex: 0 0 40px;
  width: 40px;
  height: 1px;
  background: var(--color-surface);
}

.question-cta-heading h2 {
  width: stretch;
}

.question-cta-copy {
  width: stretch;
  display: flex;
  flex-direction: column;
  gap: 11.796875px;
  letter-spacing: -0.18px;
}

.closing-quote {
  padding: 100px 0px 99.578125px;
  background: var(--color-surface);
}

.closing-quote-inner {
  display: flex;
  flex-direction: column;
  gap: 9.59375px;
}

.closing-quote-header {
  width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.closing-quote-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-accent);
  white-space: nowrap;
}

.closing-quote-eyebrow::before {
  content: "";
  flex: 0 0 40px;
  width: 40px;
  height: 1px;
  background: var(--color-accent);
}

.closing-quote-header h2 {
  width: 560px;
  color: var(--color-brand-hover);
  overflow-wrap: anywhere;
}

.closing-quote-copy {
  width: 494px;
  margin-left: 754px;
  display: flex;
  flex-direction: column;
  gap: 11.40625px;
  color: var(--color-text-secondary);
  letter-spacing: -0.18px;
}

.challenges-leadership-challenge {
  background: var(--color-surface-dark);
}

.challenges-leadership-challenge .challenge-header h2 {
  color: var(--color-surface);
}

.challenges-leadership-challenge .challenge-copy {
  max-width: none;
  color: var(--color-border);
  letter-spacing: -0.18px;
}

@media (min-width: 1400px) {
  .challenges-leadership-challenge .challenge-image {
    width: 948.64px;
    height: auto;
    max-width: none;
    margin-left: -300.3616px;
    margin-top: -0.316px;
    object-position: 0px 0px;
  }
}

.challenges-stretched .card-carousel {
  margin-top: 7.59375px;
}

@media (min-width: 1441px) {
  .prefooter--challenges .prefooter-photo {
    inset: 0px;
    width: -moz-available;
    width: stretch;
    height: 100%;
    height: stretch;
    margin: 0px;
    object-fit: cover;
    object-position: center 12%;
  }

  .question-cta-image {
    width: -moz-available;
    width: stretch;
    height: auto;
    top: auto;
    bottom: -140px;
    margin-top: 0px;
  }
}

@media (max-width: 1399px) {
  .prefooter--challenges .prefooter-photo {
    top: -106.875px;
    width: 1399px;
    height: 932.667px;
  }

  .prefooter--challenges::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 322.537px, rgba(0, 0, 0, 0.56) 508.756px, rgba(0, 0, 0, 0.8) 760px), rgba(0, 0, 0, 0.25);
  }

  .closing-quote { padding-block: 88px; }
  .closing-quote-header,
  .closing-quote-header h2 { width: 520px; }
  .closing-quote-copy { width: 460px; margin-left: auto; }
  .question-cta { height: 760px; padding-top: 88px; }
  .question-cta-image { width: 100%; width: stretch; height: 100%; height: stretch; margin-top: 0px; object-fit: cover; object-position: center top; }
  .question-cta-shade { background: linear-gradient(180deg, rgba(5, 12, 42, 0.7) 0px, rgba(5, 12, 42, 0.53) 354.426px, rgba(5, 12, 42, 0) 760px); }
  .question-cta-content { flex-basis: 760px; width: 760px; gap: 16px; }
  .question-cta-copy { gap: 12px; }
  .challenges-reality { padding-block: 72px; }
  .pressure-effects { padding-block: 72px; }
  .pressure-effects-inner { gap: 40px; }
  .pressure-effects-cards { gap: 20px; }
  .pressure-effect-card { min-height: 190px; padding: 28px 22px; }
  .challenges-hero-intro { margin-top: 348px; gap: 28px; }
}

@media (max-width: 1199px) {
  .prefooter--challenges .prefooter-photo { top: -91.594px; width: 1199px; height: 799.333px; }
  .closing-quote { padding-block: 72px; }
  .closing-quote-inner { gap: 24px; }
  .closing-quote-header,
  .closing-quote-header h2 { width: 500px; }
  .closing-quote-copy { width: 440px; }
  .question-cta { height: 720px; padding-top: 72px; }
  .question-cta-shade { background: linear-gradient(180deg, rgba(5, 12, 42, 0.7) 0px, rgba(5, 12, 42, 0.53) 335.772px, rgba(5, 12, 42, 0) 720px); }
  .question-cta-content { flex-basis: 720px; width: 720px; }
  .challenges-reality { padding-block: 64px; }
  .pressure-effects { padding-block: 64px; }
  .pressure-effects-inner { gap: 36px; }
  .pressure-effect-card { min-height: 180px; padding: 24px 20px; }
  .challenges-hero-intro { margin-top: 340px; gap: 24px; }
}

@media (min-width: 901px) and (max-width: 1399px) and (max-height: 650px) {
  .challenges-hero-intro { margin-top: 340px; }
}

@media (max-width: 900px) {
  .challenges-hero-media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(5, 12, 42, 0.15) 250px, var(--color-surface-dark) 380px), linear-gradient(128.500848767deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 54.555%, rgba(0, 0, 0, 0) 100%); }
  .prefooter--challenges .prefooter-photo { top: 0px; width: 1140px; height: 760px; }
  .closing-quote { padding-block: 64px; }
  .closing-quote-inner { gap: 32px; }
  .closing-quote-header,
  .closing-quote-header h2,
  .closing-quote-copy { width: 620px; }
  .closing-quote-copy { margin-left: 0px; }
  .question-cta { height: 680px; padding-top: 64px; }
  .question-cta-shade { background: linear-gradient(180deg, rgba(5, 12, 42, 0.7) 0px, rgba(5, 12, 42, 0.53) 317.118px, rgba(5, 12, 42, 0) 680px); }
  .question-cta-content { width: auto; margin-inline: 40px; }
  .challenges-reality { padding-block: 56px; }
  .pressure-effects { padding-block: 56px; }
  .pressure-effects-inner { gap: 32px; }
  .pressure-effects-cards { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .pressure-effect-card { flex-basis: 300px; min-height: 170px; }
  .challenges-hero-intro { margin-top: 28px; }
}

@media (max-width: 767px) {
  .challenges-hero-media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(5, 12, 42, 0.15) 205px, var(--color-surface-dark) 320px), linear-gradient(128.500848767deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 54.555%, rgba(0, 0, 0, 0) 100%); }
  .prefooter--challenges .prefooter-photo { width: 1080px; height: 720px; }
  .prefooter--challenges::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 180px, rgba(0, 0, 0, 0.56) 380px, rgba(0, 0, 0, 0.8) 680px), rgba(0, 0, 0, 0.15); }
  .closing-quote { padding-block: 48px; }
  .closing-quote-inner { gap: 28px; }
  .closing-quote-header,
  .closing-quote-header h2,
  .closing-quote-copy { width: auto; align-self: stretch; }
  .closing-quote-header { gap: 10px; }
  .closing-quote-copy { gap: 10px; }
  .question-cta { height: 640px; padding-top: 48px; }
  .question-cta-shade { background: linear-gradient(180deg, rgba(5, 12, 42, 0.7) 0px, rgba(5, 12, 42, 0.53) 298.464px, rgba(5, 12, 42, 0) 640px); }
  .question-cta-content { margin-inline: 24px; gap: 14px; }
  .question-cta-heading { gap: 10px; }
  .question-cta-eyebrow { gap: 14px; }
  .question-cta-copy { gap: 10px; }
  .challenges-reality { padding-block: 48px; }
  .challenges-reality-content { gap: 14px; }
  .pressure-effects { padding-block: 48px; }
  .pressure-effects-inner { gap: 28px; }
  .pressure-effects-header { gap: 14px; }
  .pressure-effects-cards { grid-template-columns: minmax(0px, 1fr); gap: 16px; }
  .pressure-effect-card { flex: none; min-height: 0px; }
  .challenges-hero-intro { margin-top: 24px; gap: 20px; }
}

@media (max-width: 479px) {
  .challenges-hero-media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(5, 12, 42, 0.2) 175px, var(--color-surface-dark) 280px), linear-gradient(128.500848767deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 54.555%, rgba(0, 0, 0, 0) 100%); }
  .prefooter--challenges .prefooter-photo { width: 1020px; height: 680px; }
  .prefooter--challenges::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 288.585px, rgba(0, 0, 0, 0.56) 455.202px, rgba(0, 0, 0, 0.8) 680px), rgba(0, 0, 0, 0.25); }
  .closing-quote { padding-block: 40px; }
  .closing-quote-inner { gap: 24px; }
  .closing-quote-eyebrow { gap: 12px; white-space: normal; }
  .closing-quote-eyebrow::before { flex-basis: 32px; width: 32px; }
  .question-cta { height: 600px; padding-top: 40px; }
  .question-cta-shade { background: linear-gradient(180deg, rgba(5, 12, 42, 0.7) 0px, rgba(5, 12, 42, 0.53) 279.81px, rgba(5, 12, 42, 0) 600px); }
  .question-cta-content { margin-inline: 16px; gap: 12px; }
  .question-cta-eyebrow { gap: 12px; }
  .question-cta-eyebrow::before { flex-basis: 32px; width: 32px; }
  .challenges-reality { padding-block: 40px; }
  .challenges-reality-copy { gap: 10px; }
  .challenges-reality-eyebrow { gap: 12px; white-space: normal; }
  .challenges-reality-eyebrow::before { flex-basis: 32px; }
  .pressure-effects { padding-block: 40px; }
  .pressure-effects-inner { gap: 24px; }
  .pressure-effects-header { gap: 12px; }
  .pressure-effects-heading { gap: 10px; }
  .pressure-effects-eyebrow { gap: 12px; white-space: normal; }
  .pressure-effects-eyebrow::before { flex-basis: 32px; }
  .pressure-effects-cards { gap: 12px; }
  .pressure-effect-card { padding: 20px 18px; gap: 10px; }
  .challenges-hero-intro { margin-top: 20px; }
}

/* Stacked narrative sections use the complete inner-container measure. */
@media (max-width: 899px) {
  .challenges-hero .change-transition-hero-title-block,
  .challenges-hero .change-transition-hero-title-block h1,
  .challenges-hero-intro,
  .challenges-hero-intro p,
  .challenges-leadership-challenge .challenge-content,
  .challenges-leadership-challenge .challenge-text,
  .challenges-leadership-challenge .challenge-header,
  .challenges-leadership-challenge .challenge-header h2,
  .challenges-leadership-challenge .challenge-copy,
  .closing-quote-header,
  .closing-quote-header h2,
  .closing-quote-copy {
    width: stretch;
    max-width: none;
  }
}

@media (max-width: 375px) {
  .prefooter--challenges .prefooter-photo { width: 960px; height: 640px; }
  .prefooter--challenges::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 271.61px, rgba(0, 0, 0, 0.56) 428.426px, rgba(0, 0, 0, 0.8) 640px), rgba(0, 0, 0, 0.25); }
  .pressure-effect-card { padding: 18px 16px; }
}

/* Screenshot follow-up: keep the Challenges section label and heading balanced on small tablets. */
@media (min-width: 376px) and (max-width: 479px) {
  .challenges-stretched .leadership-test-eyebrow {
    align-items: center;
    gap: 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .challenges-stretched .leadership-test-eyebrow::before {
    flex: 0 0 32px;
    width: 32px;
  }

  .challenges-stretched .leadership-test-heading h2 {
    font-size: 31px;
    text-wrap: balance;
  }
}

