.theme-stack {
  margin: 126px 0 !important;
}
.theme-stack:first-child {
  margin: 114px 0;
}

.page-hero__title {
  width: 541px;
  margin-left: 0;
  color: #000;
}

.page-hero__content .accent {
  width: 161px;
  height: 9px;
  background-image: url(../img/accents/generics/white-main-header.svg);
}

.main_container {
  width: 1240px;
  margin: 0 auto;
}

/* === Theme: Stat banner === */
.theme-stat {
  margin: 48px 0;
  border-radius: 16px;
  background: var(--500-Yellow, #ffc845);
}

/* two columns inside the rounded box */
.ts-inner {
  width: 1240px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 16px;
}

/* LEFT column (text) — fixed-ish width like the Figma */
.ts-left {
  display: flex;
  flex-direction: column;
  gap: 40px; /* spacing between eyebrow+accent and the text */
  padding: 64px;
  flex: 0 0 831px; /* matches your spec */
  min-width: 0;
  align-self: stretch;
  background: var(--500-Yellow, #ffc845);
  border-radius: 16px 0 0 16px;
}

/* Eyebrow + accent */
.ts-eyebrow > span {
  text-transform: uppercase;
  color: var(--Black, #000);
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px; /* 137.5% */
  letter-spacing: 0.16px;
  display: block;
}

.ts-eyebrow > .ts-accent {
  margin-top: 10px;
  display: inline-block;
  width: 136px;
  height: 7px;
  background-image: url("../img/accents/theme/stat_accent.svg");
  background-repeat: no-repeat;
  background-size: contain; /* or 'cover', depending on your art */
  background-position: left center;
}

.ts-accent {
  display: block;
  width: 200px; /* adjust if you want the exact Figma width */
  height: 10px;
  margin-top: 10px;
  background-image: url("../img/accents/kr_head.svg"); /* reuse your accent asset */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* The big copy uses whatever formatting editors put in WYSIWYG */
.ts-copy > p {
  color: var(--Black, #000);
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px;
}

.ts-left a {
  font-family: Poppins;
  font-size: 18px;
  font-style: SemiBold;
  font-weight: 600;
  line-height: 28px; /* 155.556% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-color: #000;
  text-decoration-thickness: 13%; /* 2.34px */
  text-underline-offset: 25%; /* 4.5px */
  text-underline-position: from-font;
}

/* RIGHT column (icon) */
.ts-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  flex: 1 1 auto;
  background: var(--500-Yellow, #ffc845);
  border-radius: 0 16px 16px 0;
  margin-left: -44px;
}

/* ============== THEME: Two-column “Section” block ============== */

.theme-section {
  padding: 0;
}

.theme-section:first-of-type {
  border-top: 0;
}

.theme-section__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 816px; /* left label + right content */
  gap: 32px;
  align-items: start;
}

.theme-further .tf-inner {
  align-items: stretch;
}
.theme-rp .two-col {
  align-items: stretch;
}

/* LEFT column (sticky label + accent + icon) */
.sec-left {
  position: sticky;
  top: 180px; /* clear your site header */
  align-self: start;
}
.sec-left h2 {
  margin: 0 0 12px 0;
}
.sec-left .t-title {
  display: block;
  margin: 0;
  color: #000;
  /* Title/H2 */
  font-family: Poppins;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px; /* 125% */
  letter-spacing: -0.5px;
  text-align: left;
}
.sec-left .accent {
  display: block;
  width: 217px;
  height: 19px;
  background: no-repeat left / contain
    url("../img/accents/theme/theme-section-mobile.svg");

  margin-bottom: 20px;
}
.theme-section__icon {
  display: block;
  width: 64px; /* tweak if you use a larger icon */
  height: auto;
  margin-top: 24px;
}

/* RIGHT column (header + body) */
.sec-right h3 {
  margin: 0 0 16px 0;
  font-weight: 600;
}
.sec-right .wysiwyg {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sec-right .wysiwyg p {
  margin: 0 0 16px;
}
.sec-right .wysiwyg ul {
  margin: 0 0 16px 20px;
}
.sec-right .wysiwyg li {
  margin: 6px 0;
}

/* Curated Knowledge Resources inside a section
   (cards come from components/resource-card.css) */
.theme-section__resources {
  margin-top: 32px;
}
.theme-section__resources .resgrid-2 {
  margin-top: 16px;
}

/* Row-first “masonry” using CSS Grid */
.theme-section__resources .resgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  grid-auto-rows: auto; /* Don't use masonry */
}

.theme-section__resources .resgrid .rescard {
  width: 100%; /* Ensure cards fill the column width */
  height: auto; /* Vertical cards auto-size properly */
}

/* Horizontal card spans both columns */
.theme-section__resources .resgrid .resgrid-item--horizontal,
.theme-section__resources .resgrid .rescard.card-horizontal {
  grid-column: 1 / -1;
  width: 100%;
}

/* container under the grid, align to the right */
.theme-section__viewall {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

/* link: label + red round chevron */
.viewall-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--Black, #000);
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  letter-spacing: 0.16px;
  text-transform: uppercase;
}

.viewall-link:hover {
  opacity: 0.9;
}

/* red round chevron */
.viewall-link__icon {
  width: 32px;
  height: 32px;
  border-radius: 41%;
  padding: 7px;
  background: var(--500-Crea-Pink, #fa455c);
  background-image: url("../img/chevrons/right_kr_single_download.svg");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: center;
  flex-shrink: 0;
}

/* ===== Quote Slider ===== */
.quote-slider {
  width: 1240px;
  margin: 64px auto;
  border-radius: 16px;
  overflow: hidden;
}

.qs-viewport {
  position: relative;
  background: #0f0f0f; /* black panel behind right column */
  border-radius: 16px;
}

.qs-track {
  position: relative;
}

.qs-slide {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  background: #000;
}

.qs-slide.is-active {
  display: grid;
}

.qs-col {
  min-height: 595px;
}

.qs-col--image {
  background: #000;
}

.qs-col--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qs-col--copy {
  color: #fff;
  padding: 60px;
  position: relative;
}

.qs-quote-eyebrow {
  width: 56px;
  height: 43px;
  margin-bottom: 24px;
  background: url("../img/icons/quote_marks.svg") no-repeat center/contain;
}

.qs-quote-text {
  margin-bottom: 40px;
}

.qs-quote-text p {
  color: var(--White, #fff);
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px; /* 150% */
}

.qs-cta {
  color: var(--500-Yellow, #ffc845);
  margin-top: 40px;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px; /* 166.667% */
  text-transform: uppercase;
}

.qs-rule {
  border: 0;
  height: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  margin: 40px 0;
}

.card-bottom {
  display: grid;
  grid-template-columns: 1fr 132px;
  align-items: center;
}

.qs-cite__name {
  color: var(--500-Yellow, #ffc845);
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px; /* 166.667% */
  margin-bottom: 5px;
}

.qs-cite__role {
  color: var(--Light-Blue, #eafafc);
  font-family: Poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 160% */
}

.qs-nav {
  display: flex;
  gap: 12px;
}

.qs-btn {
  width: 60px;
  height: 60px;
  cursor: pointer;
  background: #000;
  padding: 0;
  padding-inline: 0;
  border-width: 0;
  border-style: outset;
  border-color: buttonborder;
  border-image: initial;
}

@media (max-width: 980px) {
  .qs-slide {
    grid-template-columns: 1fr;
  }
  .qs-col--image {
    min-height: 260px;
  }
}

/* ===== Join / Mailing List ===== */

/* a11y helper */
.sr-only {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Responsive */
@media (max-width: 900px) {
  .tj-title {
    font-size: 36px;
  }
  .tj-form {
    grid-template-columns: 1fr;
  }
  .tj-submit {
    width: 100%;
  }
}

/* Subject-matter experts (2-col shell only) */
.theme-rp {
  max-width: 1240px;
  margin: 72px auto 48px;
}
.theme-rp .two-col {
  display: grid;
  grid-template-columns: 1fr 816px;
  gap: 24px 48px;
  align-items: start;
}
.theme-rp .col-left {
  position: sticky;
  top: 180px; /* match your .sec-left */
  align-self: start;
}

.theme-rp .col-left .accent {
  display: inline-block;
  margin-top: 10px;
  width: 260px; /* adjust to taste / figma */
  height: 9px;
  background-image: url("../img/accents/kr_head.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.theme-rp .rp-viewall {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
.theme-rp .btn-viewall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e6e6e6;
  text-decoration: none;
}
.theme-rp .btn-viewall .arrow {
  width: 24px;
  height: 24px;
  background: url("../img/chevrons/right_kr_single_download.svg") no-repeat
    center/24px;
}

/* === Further Reading === */
.theme-further {
  margin: 80px 0;
}

.theme-further .tf-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr; /* left header / right list */
  gap: 40px;
  align-items: start;
}

.theme-further .col-left {
  position: sticky;
  top: 180px;
  align-self: start;
}
/* Reuse your left-column header + accent pattern */
.theme-further .col-left h2 {
  margin: 0 0 8px 0;
}

.theme-further .col-left .accent {
  display: inline-block;
  width: 260px; /* adjust to taste / figma */
  height: 9px;
  background-image: url("../img/accents/kr_head.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Right list */
.tf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px; /* space between links */
}

/* Link with yellow underline accent */
.tf-link {
  color: var(--Black, #000);
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; /* 155.556% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-color: #fbc84e;
  text-decoration-thickness: 13%; /* 2.34px */
  text-underline-offset: 25%; /* 4.5px */
  text-underline-position: from-font;
}

.tf-link > li {
  margin-bottom: 0;
}

.tf-link:hover {
  opacity: 0.9;
}

/* === Explore Other Themes === */
.theme-explore {
  display: flex;
  width: 100%;
  padding: 80px 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  margin: 0 auto; /* center on page */
}

.theme-explore .te-inner {
  width: 100%;
}

/* Header row */
.te-head {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.te-left h2 {
  margin: 0 0 8px 0;
}

.te-left .accent {
  display: inline-block;
  width: 240px;
  height: 9px;
  background-image: url("../img/accents/kr_head.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* View all (right) */
.te-viewall {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--Black, #000);
}

/* Card grid */
.te-grid {
  margin-top: 60px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.te-card {
  display: flex;
  height: 392px;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;
}

.te-thumb {
  display: block;
  width: 100%;
}
.te-thumb img,
.te-thumb--fallback {
  width: 100%;
  height: 312px;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}
.te-thumb--fallback {
  background: #00807d;
}

/* Title + red icon row */
.te-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 16px;
  padding: 24px 16px;
}

.te-title {
  color: var(--Black, #000);
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 24px */
  letter-spacing: -0.2px;
}




.section-style.wysiwyg a {
  color: var(--Black, #000);
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; /* 155.556% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-color: #fbc84e;
  text-decoration-thickness: 13%; /* 2.34px */
  text-underline-offset: 25%; /* 4.5px */
  text-underline-position: from-font;
}

.section-style.wysiwyg a:hover {
  color: grey;
}



@media (min-width: 1024px) {
  h1 {
    color: var(--Black, #000);
    text-align: center;
    font-family: Poppins;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px; /* 138.889% */
  }
}

.theme-accordion-toggle {
  background: none;
  border: none;
}

.t-chevron {
  display: none;
}

@media (max-width: 980px) {
  .main_container {
    width: 100%;
    margin: 0;
    padding: 0;
    padding-top: 0 !important;
  }

  .theme-stack {
    margin: 0 !important;
  }
  .theme-stack:first-child {
    margin: 0;
  }

  .theme-stack {
    padding: 0 24px 24px 24px;
  }

  .quote-slider.theme-stack {
    padding: 24px 0 24px 0;
  }
  .theme-explore.theme-stack,
  .theme-further.theme-stack,
  .theme-rp.theme-stack {
    padding-top: 40px;
  }

  .theme-stack:first-child {
    padding-top: 24px;
  }

  .theme-stat.theme-stack {
    width: 100%;
    background: #fff;
  }

  .sec-left {
    position: static !important;
    top: auto !important;
  }

  .theme-further .col-left {
    position: static !important;
    top: auto !important;
  }

  .sec-left .accent {
    display: none;
    width: 217px;
    height: 19px;
    background: no-repeat left / contain
      url("../img/accents/theme/theme-section-mobile.svg");
    margin-bottom: 40px;
  }

  .sec-left h2 {
    color: var(--Black, #000);
    text-align: left;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 133.333% */
    margin: 0;
  }

  .theme-stat.theme-stack .ts-inner {
    width: 100%;
    flex-direction: column;
    background: #ffc845;
    padding: 30px 30px;
  }
  .ts-left {
    flex: auto;
    padding: 0;
  }
  .ts-copy > p {
    color: #000;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
  }
  .ts-right {
    padding: 0;
    margin-top: 60px;
  }

  .quote-slider {
    width: 100%;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
  }
  .qs-col--copy {
    color: #fff;
    padding: 30px;
    position: relative;
  }

  .theme-rp .two-col {
    grid-template-columns: 1fr;
    border: none;
    padding: 0;
  }
  .theme-rp .col-left {
    position: static;
  }
  .theme-rp h2 {
    color: var(--Black, #000);
    text-align: left;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 133.333% */
  }
  .te-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .te-head .te-left h1 {
    text-align: left;
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 133.333% */
  }
  .te-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
  }
  .resgrid {
    display: flex;
    flex-direction: column;
  }
  .theme-further .tf-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .tf-link {
    color: #000;
    font-family: Poppins;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 176.471% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-color: #ffc845;
    text-decoration-thickness: 1.8px; /* 10.588% */
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

  .theme-section__resources .resgrid {
    display: flex;
  }

  /* ============================
   MOBILE THEME ACCORDION
   ============================ */
  .theme-section {
    padding-top: 24px;
  }

  .theme-section.theme-accordion + .theme-section.theme-accordion {
    border-top: 1px solid #d8d8d8;
  }

  .theme-accordion .theme-accordion-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  .theme-accordion .theme-section__inner {
    max-width: 100%;
  }

  .theme-accordion .theme-accordion-toggle .t-title {
    font-size: 18px;
    font-weight: 700;
    display: block;
    text-align: left;
    margin-bottom: 0;
    line-height: 32px;
    letter-spacing: 0px;
  }

  .t-chevron {
    display: block;
    width: 18px;
    height: 10px;
  }

  .t-chevron svg {
    display: block;
    transform-origin: center;
    transition: transform 0.25s ease;
    transform: rotate(180deg);
  }

  .theme-accordion.active .t-chevron svg {
    transform: rotate(0deg);
  }

  /* hide content by default */
  .theme-accordion .sec-right {
    display: none;
    margin-top: 48px;
  }

  /* show when active */
  .theme-accordion.active .sec-right {
    display: block;
  }

  /* disable sticky on mobile */
  .theme-accordion .sec-left {
    position: static !important;
  }

  /* stack layout on mobile */
  .theme-accordion .theme-section__inner {
    display: block !important;
  }

  .icon-stat {
    display: none;
  }
}