/* ==========================================================================
   Superbook Year End 2026
   Only what the shared stylesheets don't cover. Load after:
     default.min.css, superbook-giving.css, Typekit (ith8gey.css)

   Sections, in page order:
     0. Header          (.sb-ye-nav, .sb-ye-match, .sb-ye-hero)
     1. Progress bar    (.sb-ye-progress)
     2. Impact stats    (.sb-ye-stats)
     3. Your Gift Helps (.sb-ye-gift)
     4. Global Reach    (.sb-ye-reach)

   Breakpoints: 768, 1024, 1280, 1440 (min-width)
   ========================================================================== */

   :root {
  --sb-margin: 24px;
  --sb-module-gap: 32px;
}
@media (min-width: 768px)  { :root { --sb-margin: 40px; --sb-module-gap: 40px; } }
@media (min-width: 1280px) { :root { --sb-margin: 64px; --sb-module-gap: 56px; } }
@media (min-width: 1440px) { :root { --sb-module-gap: 64px; } }
@media (min-width: 1920px) { :root { --sb-margin: 64px; } }

.sb-ye-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sb-margin);
  padding-right: var(--sb-margin);
}


.sb-ye-pad { padding-left: var(--sb-margin); padding-right: var(--sb-margin); }

.sb-ye-module-gap { margin-top: var(--sb-module-gap); }

.sb-ye-faq { max-width: 1440px; padding-left: var(--sb-margin); padding-right: var(--sb-margin); }

.sb-ye-gift__img { position: relative; overflow: hidden; }
.sb-ye-gift__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sb-steps { background: #FBFAF8; }
.sb-steps__h { color: #750C04; line-height: 1.1; }
.sb-steps__p { color: #33312E; line-height: 1.5; }
.sb-steps__quote { max-width: 760px; }
.sb-steps__verse { color: #7A5840; line-height: 1.35; }
.sb-ye-gift__img { position: relative; overflow: hidden; }
.sb-ye-gift__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The page's .form-row rule forces the body font size on every a, div, p and
   span, and it beats single-class selectors. Font sizes on those tags are set
   in the HTML with the site's text-NN utilities (they are !important). Inline
   spans that sit inside sized text must inherit that size instead. */
.sb-ye-match__remaining,
.sb-ye-match__total,
.sb-ye-progress-raised,
.sb-ye-progress-goal,
.sb-ye-progress-percent,
.sb-ye-count {
  font-size: inherit !important;
}


/* ==========================================================================
   0. Header: logo bar, match banner, hero
   ========================================================================== */

.sb-ye-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #750C04;
  padding: 16px 60px;
}

.sb-ye-nav__link {
  display: block;
}

.sb-ye-nav__logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
}

.sb-ye-match {
  background: #BF4439;
  padding: 16px 40px;
}

.sb-ye-match__text {
  margin: 0;
  color: #F9F9EF;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.sb-ye-hero {
  display: flex;
  flex-direction: column;
}

.sb-ye-hero__photo {
  order: -1;
  height: 285px;
  background: var(--img, none) lightgray 50% / cover no-repeat;
}

.sb-ye-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 32px var(--sb-margin);
  background: var(--dark-blue-left, linear-gradient(90deg, rgba(59, 63, 93, 0.70) 0%, rgba(29, 31, 46, 0.90) 60%, #1D1F2E 100%), #1D1F2E);
}

.sb-ye-hero__content > * {
  margin: 0;
}

.sb-ye-hero__eyebrow {
  color: #EDB782;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.sb-ye-hero__title {
  font-family: inherit !important; /* shared sheet forces a serif on headings */
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.4px;
}

.sb-ye-hero__text {
  color: #fff;
  line-height: 1.25;
}

.sb-ye-hero__text--alt {
  color: #F9F9EF;
}

.sb-ye-hero__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.sb-ye-hero__accent {
  margin: 0;
  color: #EDB782;
  font-weight: 700;
  line-height: 1.25;
}

.sb-ye-hero__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 165px;
  height: 44px;
  background: #BF4439;
  border-radius: 4px;
  color: #fff;
  font-family: lemonde-sans, sans-serif;
  font-weight: 700;
  letter-spacing: 1.68px;
  text-decoration: none;
  text-transform: uppercase;
}

.sb-ye-hero__cta:hover {
  color: #fff;
  opacity: .9;
}

@media (min-width: 768px) {
  .sb-ye-nav {
    padding: 24px;
  }

  .sb-ye-hero__text--alt {
    min-height: 48px;
  }

  .sb-ye-hero__photo {
    height: 485px;
  }
}

@media (min-width: 1024px) {
  .sb-ye-nav__logo {
    height: 76px;
  }

  .sb-ye-match {
    padding: 16px 64px;
  }

  .sb-ye-match__text {
    line-height: 24px;
  }

  .sb-ye-hero {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding-left: var(--sb-margin);
  }

  .sb-ye-hero__content {
    flex: 0 1 511px;
    gap: 24px;
    padding: 0;
    background: transparent;
  }

  .sb-ye-hero__action {
    gap: 24px;
  }

  .sb-ye-hero__title {
    font-size: 60px;
    letter-spacing: -.6px;
  }

  .sb-ye-hero__photo {
    order: 1;
    flex: 1 1 0;
    align-self: stretch;
    height: auto;
    min-height: 640px;
  }
}

@media (min-width: 1280px) {
  .sb-ye-hero {
    padding-left: var(--sb-margin);
  }
}

@media (min-width: 1440px) {
  .sb-ye-nav {
    padding: 32px 24px;
  }

  .sb-ye-hero {
    gap: 48px;
  }

  .sb-ye-hero__content {
    flex-basis: 579px;
  }

  .sb-ye-hero__photo {
    min-height: 661px;
  }
}


/* ==========================================================================
   1. Progress bar
   ========================================================================== */

.sb-ye-progress {
  background: #FBFAF8;
  padding: 32px 24px;
}

.sb-ye-progress__inner {
  max-width: 1440px;
  margin: 0 auto;
  gap: 32px;
}

.sb-ye-progress__meter {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
  width: 100%;
}

.sb-ye-progress__title {
  color: #071E3E;
  line-height: 1.1;
  margin-bottom: 8px !important;
}

.sb-ye-progress__label {
  color: #25282A;
  line-height: 1.5;
  letter-spacing: 1.68px;
}

.sb-ye-progress__bar {
  height: 10px;
  padding: 1px;
  border: 1px solid #DFEBF2;
  background: #fff;
}

.sb-ye-progress__fill {
  height: 8px;
  background: #EDB782;
}

.sb-ye-progress__support {
  color: #515355;
  line-height: 1.5;
}

.sb-ye-progress__cta {
  width: 165px;
  height: 44px;
  background: #BF4439;
  border-radius: 4px;
  letter-spacing: 1.68px;
}

.sb-ye-progress__cta:hover {
  color: #fff;
  opacity: .9;
}

@media (min-width: 768px) {
  .sb-ye-progress__meter {
    row-gap: 10px;
  }

  .sb-ye-progress__title {
    margin-bottom: 0 !important;
  }

  .sb-ye-progress__label {
    margin-bottom: -2px !important;
  }
}

@media (min-width: 1024px) {
  .sb-ye-progress {
    padding: 32px 0;
  }

  .sb-ye-progress__inner {
    padding: 0 var(--sb-margin);
    gap: 40px;
  }

  .sb-ye-progress__meter {
    flex: 1 0 0;
    width: auto;
    grid-template-columns: 1fr auto;
    grid-template-rows: 29px auto auto;
  }

  .sb-ye-progress__title {
    align-self: baseline;
  }

  .sb-ye-progress__label {
    align-self: baseline;
    margin-bottom: 0 !important;
  }

  .sb-ye-progress__bar,
  .sb-ye-progress__support {
    grid-column: 1 / -1;
  }

}


/* ==========================================================================
   2. Impact stats (count-up cards)
   ========================================================================== */

.sb-ye-stats {
  background: #FBFAF8;
  padding: 32px 24px;
  gap: 32px;
}

.sb-ye-stats__title {
  font-family: lemonde-sans, sans-serif !important; /* shared sheet forces merriweather on h2 */
  color: #071E3E;
  font-size: 32px;
  line-height: 1.1;
  align-self: stretch;
}

.sb-ye-stats__cards {
  gap: 24px;
  align-self: stretch;
}

.sb-ye-stats__card {
  background: #F6F3EE;
  border-radius: 15px;
  padding: 16px 32px;
  gap: 8px;
}

.sb-ye-stats__num {
  color: #750C04;
  line-height: 44px;
}

.sb-ye-stats__unit {
  line-height: 1;
}

.sb-ye-stats__label {
  color: #33312E;
  line-height: 24px;
}

.sb-ye-stats__note {
  align-self: stretch;
  gap: 4px;
  color: #7C7E7F;
  line-height: 1.5;
  letter-spacing: .32px;
}

.sb-ye-stats__caret {
  width: 14px;
  flex-shrink: 0;
}

.sb-ye-stats__card--done .sb-ye-stats__num {
  animation: sb-ye-pulse .5s ease;
  transform-origin: left center;
}

@keyframes sb-ye-pulse {
  50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .sb-ye-stats__card--done .sb-ye-stats__num {
    animation: none;
  }
}

@media (min-width: 768px) {
  .sb-ye-stats {
    padding: 20px 24px;
    gap: 24px;
  }

  .sb-ye-stats__title {
    align-self: center;
    max-width: 664px;
    letter-spacing: -.48px;
  }

  .sb-ye-stats__card {
    flex: 1 1 0;
  }

  .sb-ye-stats__note {
    line-height: 24px;
  }

  .sb-ye-stats__caret {
    width: 20px;
  }
}

@media (min-width: 1024px) {
  .sb-ye-stats {
    padding: 32px 8px;
  }

  .sb-ye-stats__title {
    max-width: 1112px;
    font-size: 40px;
    letter-spacing: -.6px;
  }

  .sb-ye-stats__cards {
    align-self: center;
    gap: 32px;
    width: 100%;
    max-width: 1082px;
  }

  .sb-ye-stats__num {
    line-height: 57px;
  }

  .sb-ye-stats__note {
    max-width: 1112px;
    align-self: center;
  }
}

@media (min-width: 1440px) {
  .sb-ye-stats {
    gap: 32px;
  }

  .sb-ye-stats__title {
    letter-spacing: -.2px;
  }

    .sb-ye-stats__cards {
        max-width: 1315px;
    }

}


/* ==========================================================================
   3. Your Gift Helps cards
   ========================================================================== */

.sb-ye-gift {
  background: #fff;
  padding: 32px 24px;
  gap: 16px;
  max-width: 1440px;
  justify-self: center;
}

.mw-1440{
  max-width: 1440px;
      justify-self: center;
}



.sb-ye-gift__head {
  gap: 16px;
}

.sb-ye-gift__title {
  font-family: lemonde-sans, sans-serif !important; /* shared sheet forces merriweather on h2 */
  color: #071E3E;
  font-size: 32px;
  line-height: 1.25;
}

.sb-ye-gift__sub {
  color: #25282A;
  line-height: 1.25;
}

.sb-ye-gift__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

.sb-ye-gift__card {
  background: #FFDFBF;
  border-radius: 15px;
  padding: 24px 20px;
  gap: 16px;
  min-height: 330px;
}

.sb-ye-gift__img {
  height: 166px;
  border-radius: 8px;
  background: var(--img, none) lightgray 50% / cover no-repeat;
}

.sb-ye-gift__name {
  color: #1D1F2E;
  line-height: 1.1;
  letter-spacing: .1px;
}

.sb-ye-gift__text {
  color: #1D1F2E;
  line-height: 1.25;
}

@media (min-width: 600px) {
  .sb-ye-gift__cards {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

    .sb-ye-gift__card {
    min-height: 355px;
  }
}

@media (min-width: 768px) {
  .sb-ye-gift {
    padding: 40px;
  }

  .sb-ye-gift__cards {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .sb-ye-gift__card {
    min-height: 355px;
  }
}

@media (min-width: 1024px) {
  .sb-ye-gift {
    padding: 40px var(--sb-margin);;
  }

  .sb-ye-gift__title {
    font-size: 40px;
    line-height: 1.1;
  }

  .sb-ye-gift__cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .sb-ye-gift__card {
    min-height: 392px;
  }
}

@media (min-width: 1280px) {
  .sb-ye-gift {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media (min-width: 1440px) {
  .sb-ye-gift {
    gap: 32px;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .sb-ye-gift__title {
    letter-spacing: -.2px;
  }

  .sb-ye-gift__cards {
    gap: 32px;
  }

  .sb-ye-gift__card {
    min-height: 360px;
  }
}


/* ==========================================================================
   4. Global Reach
   ========================================================================== */

.sb-ye-reach {
  background: #1D1F2E;
  padding: 32px 24px 24px;
}

.sb-ye-reach__inner {
  margin: 0 auto;
  gap: 24px;
}

.sb-ye-reach__head {
  padding: 0 24px;
  gap: 12px;
}

.sb-ye-reach__title {
  font-family: lemonde-sans, sans-serif !important; /* shared sheet forces merriweather on h2 */
  font-size: 32px;
  line-height: 40px;
}

.sb-ye-reach__label,
.sb-ye-reach__cite {
  line-height: 19.5px;
  letter-spacing: 2.34px;
}

.sb-ye-reach__label {
  color: #EDB782;
}

.sb-ye-reach__cite {
  font-size: 13px; /* figcaption isn't hit by the .form-row override */
  color: #C3C3C3;
}

.sb-ye-reach__inner .sb-reach-card-grid {
  width: 100%;
  gap: 24px;
  max-width: 1440px;
}

.sb-ye-reach__card {
  background: #2C2F47;
  border-radius: 15px;
  padding: 24px;
  min-height: 148px;
}

.sb-ye-reach__stat {
  color: #EDB782;
  line-height: 44px;
}

.sb-ye-reach__unit {
  line-height: 1; /* stops the smaller unit text from stretching the number line to 52px */
}

.sb-ye-reach__desc {
  color: #F9F9EF;
  line-height: 24px;
}

.sb-ye-reach__quote {
  color: #EDB782;
  font-size: 24px;
  line-height: 1.35;
  max-width: 760px;
}

.sb-ye-reach__foot {
  width: 100%;
  border-top: 1px solid #CABFAC;
  padding-top: 24px;
  color: #D3D4D4;
  line-height: 24px;
}

@media (min-width: 768px) {
  .sb-ye-reach {
    padding: 32px 40px 48px;
  }

  .sb-ye-reach__head {
    gap: 16px;
  }

  .sb-ye-reach__inner .sb-reach-card-grid {
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .sb-ye-reach__inner .sb-reach-card-grid {
    gap: 32px 24px;
  }
}

@media (min-width: 1280px) {
  .sb-ye-reach {
    padding: 56px 64px;
  }

  .sb-ye-reach__inner {
    gap: 36px;
  }

  .sb-ye-reach__head {
    padding: 0;
    gap: 12px;
  }

  .sb-ye-reach__title {
    font-size: 40px;
    line-height: 50px;
  }
}

@media (min-width: 1440px) {
  .sb-ye-reach {
    padding: 64px;
  }

  .sb-ye-reach__inner {
    gap: 32px;
  }

  .sb-ye-reach__quote-wrap {
    margin-top: 4px;
  }

  
}


/* ==========================================================================
   5. Footer (.sb-ye-footer)
   Figma: #750C04 bg, 32px padding (40px sides below 1024), 16px gap,
   Proxima Nova 500, line-height 185%. Font size comes from text-16 lg:text-18.
   ========================================================================== */

.sb-ye-footer {
  background: #750C04;
  padding: 32px 40px;
}

.sb-ye-footer__inner {
  gap: 16px;
}

.sb-ye-footer__copy,
.sb-ye-footer__links {
  line-height: 1.85;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .sb-ye-footer {
    padding: 32px 0;
  }
}



/* Hero photo: matches Figma fills (cover, centered) */
.sb-ye-hero__photo { position: relative; overflow: hidden; }
.sb-ye-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* 768 frame: full width, top-aligned (heads stay in frame) */
@media (min-width: 768px) and (max-width: 1023px) {
  .sb-ye-hero__image { object-position: 50% 0; }
}

.sb-ye-gift__img { position: relative; overflow: hidden; }
.sb-ye-gift__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.sb-ye-hero.hero-inner {
          width: 100%;
          padding: 0;
    }

@media (min-width: 1440px) {
  .sb-ye-gift__card { gap: 20px; }
}
.sb-ye-faq { margin: 0 auto; padding: 64px var(--sb-margin) 80px; }

.sb-ye-faq {
  padding-block: 32px; /* 360 and up to 767 */
}

.sb-ye-faq__title { margin-bottom: 32px;   font-family: lemonde-sans, sans-serif !important; }
.sb-ye-faq .accordion-container { padding: 0; border: 0; }
.sb-ye-faq .accordion li { border-bottom: 1px solid #071E3E; margin: 0 0 24px; padding: 0 0 31px; list-style: none; }
.sb-ye-faq .accordion li:last-child { margin-bottom: 0; }
.sb-ye-faq .accordion li:has(h5[aria-expanded="true"]) { padding-bottom: 28px; }
.sb-ye-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; color: #071E3E; cursor: pointer; }
.sb-ye-faq__q button { display: flex; align-items: center; background: none; border: 0; padding: 0; }
.sb-ye-faq__icon { display: block; flex: 0 0 25px; width: 25px; height: 14px; background: url("/Images/dist/Giving/Animation/arrow-icon-down.svg") center / contain no-repeat; }
.sb-ye-faq__q[aria-expanded="true"] .sb-ye-faq__icon { background-image: url("/Images/dist/Giving/Animation/arrow-up-icon.svg"); }
.sb-ye-faq .accordion-panel { margin: 10px 0 0; color: #071E3E; line-height: 1.55; }
.sb-ye-faq .accordion-panel a { color: inherit; text-decoration: underline; }

@media (min-width: 768px)  { .sb-ye-faq { padding-block: 40px; } }
@media (min-width: 1280px) { .sb-ye-faq { padding-block: 56px; } .sb-ye-faq__title { margin-top: 0; margin-bottom: 72px; } }
@media (min-width: 1440px) { .sb-ye-faq { padding-block: 64px; } }

@media (min-width: 1280px) {
  .sb-ye-hero {
    gap: 0;
    padding-left: 0;
  }
  .sb-ye-hero__content {
    flex: 0 0 50%;
    box-sizing: border-box;
    padding: 0 48px 0 var(--sb-margin);
  }
  .sb-ye-hero__photo {
    flex: 0 0 50%;
  }
}

@media (min-width: 1500px) { .mw-1440{
padding-inline: 64px;
}
 

.sb-ye-progress__inner{
 padding-inline: var(--sb-margin);
}
}

@media (min-width: 1440px) {
    .sb-ye-hero  {
        max-width: 1440px !important;
    }


}
/* Gift cards: Figma image boxes */
.sb-ye-gift__img { height: 165px; }          /* mobile: fixed height, width stretches */
@media (min-width: 768px) {
  .sb-ye-gift__img { height: auto; aspect-ratio: 16 / 9; }  /* 768 and up: full 16:9 image */
}
.sb-ye-gift__img img { object-fit: cover; object-position: 50% 50%; }
/* Gift cards: per-image zoom and position to match Figma */
.sb-ye-gift__card:nth-child(1) .sb-ye-gift__img img { transform: scale(1.399); transform-origin: 17.5% 22.4%; }
.sb-ye-gift__card:nth-child(2) .sb-ye-gift__img img { transform: scale(1.326); transform-origin: 23.6% 48.8%; }
.sb-ye-gift__card:nth-child(3) .sb-ye-gift__img img { transform: scale(1.77);  transform-origin: 43.7% 37.3%; }
.sb-ye-gift__card:nth-child(4) .sb-ye-gift__img img { transform: scale(1.77);  transform-origin: 63.2% 45.3%; }



.sb-ye-hero.hero-wrapper  {
  max-width: none !important;
  background: linear-gradient(90deg, #32354F 0%, #1D1F2E 60%, #1D1F2E 100%);
}

.lemonde-sans-bold {
  font-family: lemonde-sans, sans-serif !important;
  font-weight: 700;
} 

.sb-steps > .mw-1440,
.sb-shape.mw-1440 {
  max-width: 1312px;
  padding-inline: 0;
}