/* ==========================================================================
   REWARD SYSTEM CASE STUDY
   ========================================================================== */

.project-reward {
  --reward-bg: #F2ECEA;
  --reward-ink: #171717;
  --reward-navy: #0B1B34;
  --reward-accent: #A15D66;

  --reward-blue: #2B397E;
  --reward-blue-light: #EAEFFF;
  --reward-dark: #222222;

  --reward-section-pad:
    clamp(64px, 7vw, 104px);

  --reward-radius:
    clamp(12px, 1.2vw, 18px);

  background:
    var(--reward-bg);

  color:
    var(--reward-ink);

  font-family:
    "Satoshi",
    system-ui,
    sans-serif;
}


.project-reward main {
  width:
    100%;

  background:
    var(--reward-bg);
}


.project-reward figure {
  margin:
    0;
}


.project-reward img,
.project-reward video {
  display:
    block;

  max-width:
    100%;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.project-reward .masthead {
  background:
    var(--reward-bg);

  color:
    var(--reward-accent);
}


.project-reward .site-header {
  background:
    var(--reward-bg);

  color:
    var(--reward-accent);

  padding:
    clamp(10px, 1.6vw, 16px)
    var(--g);
}


.project-reward
.site-header
.btn-ghost {
  border-color:
    currentColor;
}


/* ==========================================================================
   SHARED TYPOGRAPHY
   ========================================================================== */

.project-reward
.reward-section-label {
  margin:
    0;

  color:
    rgba(11, 27, 52, .72);

  font-size:
    clamp(11px, .8vw, 13px);

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.project-reward
.reward-section-label--light {
  color:
    rgba(255, 255, 255, .62);
}


.project-reward
.reward-section-title {
  margin:
    0;

  color:
    var(--reward-ink);

  font-size:
    clamp(34px, 3.5vw, 54px);

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.project-reward
.reward-hero {
  width:
    100%;

  padding-top:
    calc(
      var(--header-h, 88px)
      + clamp(34px, 4vw, 60px)
    );

  box-sizing:
    border-box;
}


.project-reward
.reward-hero__title {
  width:
    100%;

  margin:
    0;

  color:
    var(--reward-accent);

  font-family:
    "Cormorant",
    serif;

  font-size:
    clamp(96px, 11vw, 175px);

  font-style:
    normal;

  font-weight:
    300;

  line-height:
    .84;

  letter-spacing:
    -.055em;

  text-align:
    center;
}


/* ==========================================================================
   HERO META
   ========================================================================== */

.project-reward
.reward-hero__meta {
  display:
    grid;

  grid-template-columns:
    minmax(190px, 1.2fr)
    minmax(130px, .8fr)
    minmax(165px, 1fr)
    minmax(100px, .6fr)
    minmax(120px, .7fr);

  column-gap:
    clamp(28px, 3.8vw, 64px);

  row-gap:
    30px;

  align-items:
    start;

  width:
    100%;

  margin-top:
    clamp(48px, 5vw, 72px);
}


.project-reward
.reward-hero__meta-item {
  min-width:
    0;
}


.project-reward
.reward-hero__meta-label {
  margin:
    0
    0
    10px;

  color:
    var(--reward-accent);

  font-size:
    clamp(14px, 1vw, 17px);

  font-weight:
    400;

  line-height:
    1.25;
}


.project-reward
.reward-hero__meta-value {
  margin:
    0;

  color:
    rgba(11, 27, 52, .64);

  font-size:
    clamp(15px, 1.08vw, 18px);

  font-weight:
    400;

  line-height:
    1.45;
}


/* ==========================================================================
   HERO PILLS
   ========================================================================== */

.project-reward
.reward-hero__expertise {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  max-width:
    290px;
}


.project-reward
.reward-hero__pill {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    38px;

  padding:
    8px
    14px;

  border:
    1px solid
    rgba(11, 27, 52, .42);

  border-radius:
    999px;

  color:
    rgba(11, 27, 52, .68);

  font-size:
    clamp(13px, .95vw, 16px);

  font-weight:
    400;

  line-height:
    1;

  white-space:
    nowrap;
}


/* ==========================================================================
   HERO COVER
   ========================================================================== */

.project-reward
.reward-hero__cover {
  position:
    relative;

  width:
    100%;

  margin:
    clamp(38px, 4vw, 58px)
    0
    0;

  overflow:
    hidden;

  border-radius:
    var(--reward-radius);

  background:
    var(--reward-dark);
}


.project-reward
.reward-hero__cover img {
  width:
    100%;

  height:
    auto;

  object-fit:
    cover;
}


/* ==========================================================================
   OVERVIEW
   ========================================================================== */

.project-reward
.reward-overview {
  padding-top:
    var(--reward-section-pad);
}


.project-reward
.reward-overview__copy {
  width:
    min(880px, 64%);

  margin-left:
    auto;

  margin-right:
    0;
}


.project-reward
.reward-overview__title {
  margin:
    0
    0
    clamp(22px, 2.5vw, 34px);

  color:
    var(--reward-ink);

  font-size:
    clamp(32px, 3.2vw, 50px);

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


.project-reward
.reward-overview__copy p {
  max-width:
    72ch;

  margin:
    0
    0
    18px;

  color:
    rgba(23, 23, 23, .86);

  font-size:
    clamp(15px, 1.08vw, 18px);

  line-height:
    1.5;

  letter-spacing:
    -.015em;
}


.project-reward
.reward-overview__copy p:last-child {
  margin-bottom:
    0;
}


.project-reward
.reward-overview__visual {
  width:
    100%;

  aspect-ratio:
    16 / 9;

  margin-top:
    clamp(64px, 7vw, 104px);

  overflow:
    hidden;

  border-radius:
    var(--reward-radius);

  background:
    var(--reward-dark);
}


.project-reward
.reward-overview__video {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  border-radius:
    inherit;
}


/* ==========================================================================
   CHALLENGE
   ========================================================================== */

.project-reward
.reward-challenge {
  padding-top:
    var(--reward-section-pad);

  padding-bottom:
    var(--reward-section-pad);
}


.project-reward
.reward-challenge__layout {
  display:
    grid;

  grid-template-columns:
    minmax(120px, 1fr)
    minmax(0, 4fr);

  gap:
    clamp(34px, 5vw, 90px);

  align-items:
    start;
}


.project-reward
.reward-challenge__content {
  min-width:
    0;
}


.project-reward
.reward-challenge__columns {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(44px, 6vw, 90px);

  margin-top:
    clamp(28px, 3vw, 42px);
}


.project-reward
.reward-challenge__columns p {
  margin:
    0;

  color:
    rgba(23, 23, 23, .86);

  font-size:
    clamp(15px, 1.08vw, 18px);

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


.project-reward
.reward-challenge__visual {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    16 / 9;

  margin-top:
    clamp(34px, 4vw, 56px);

  overflow:
    hidden;

  border-radius:
    var(--reward-radius);

  background:
    var(--reward-dark);
}


.project-reward
.reward-challenge__image {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;
}


/* ==========================================================================
   APPROACH
   ========================================================================== */

.project-reward
.reward-approach {
  padding-bottom:
    var(--reward-section-pad);
}


.project-reward
.reward-approach__title {
  max-width:
    1180px;

  margin:
    clamp(26px, 3vw, 38px)
    0
    0;

  color:
    var(--reward-ink);

  font-size:
    clamp(34px, 3.5vw, 54px);

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


.project-reward
.reward-approach__quote {
  max-width:
    1280px;

  margin:
    clamp(24px, 3vw, 40px)
    0
    0;

  padding:
    0;

  border:
    0;

  color:
    var(--reward-ink);

  font-family:
    "Griffiths",
    serif;

  font-size:
    clamp(50px, 5.2vw, 82px);

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    .98;

  letter-spacing:
    -.035em;
}


.project-reward
.reward-approach__methods {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    7px;

  margin:
    clamp(26px, 3vw, 40px)
    0
    0;

  color:
    rgba(23, 23, 23, .4);

  font-size:
    clamp(13px, 1vw, 16px);

  line-height:
    1.5;
}


/* ==========================================================================
   OUTCOME
   ========================================================================== */

.project-reward
.reward-outcome {
  width:
    100%;

  background:
    var(--reward-blue);

  color:
    #FFFFFF;
}


.project-reward
.reward-outcome__inner {
  padding-top:
    var(--reward-section-pad);

  padding-bottom:
    var(--reward-section-pad);
}


.project-reward
.reward-outcome__list {
  width:
    100%;

  margin-top:
    clamp(34px, 4vw, 52px);

  border-top:
    1px solid
    rgba(255, 255, 255, .3);
}


.project-reward
.reward-outcome__item {
  display:
    grid;

  grid-template-columns:
    minmax(48px, .28fr)
    minmax(280px, 1.15fr)
    minmax(300px, 1fr);

  gap:
    clamp(26px, 4vw, 64px);

  align-items:
    start;

  width:
    100%;

  padding:
    clamp(34px, 4vw, 56px)
    0;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .3);
}


.project-reward
.reward-outcome__number {
  margin-top:
    5px;

  color:
    rgba(255, 255, 255, .8);

  font-size:
    clamp(15px, 1vw, 17px);

  line-height:
    1.2;
}


.project-reward
.reward-outcome__title {
  max-width:
    600px;

  margin:
    0;

  color:
    #FFFFFF;

  font-size:
    clamp(30px, 3vw, 46px);

  font-weight:
    400;

  line-height:
    1.16;

  letter-spacing:
    -.035em;
}


.project-reward
.reward-outcome__description {
  max-width:
    46ch;

  margin:
    4px
    0
    0;

  color:
    rgba(255, 255, 255, .74);

  font-size:
    clamp(15px, 1.05vw, 17px);

  line-height:
    1.5;
}


/* ==========================================================================
   SOLUTION STORY
   ========================================================================== */

.project-reward
.reward-solution-story {
  position:
    relative;

  width:
    100%;

  margin:
    0;

  padding:
    0;

  background:
    var(--reward-bg);
}


.project-reward
.reward-solution-story__sticky {
  position:
    sticky;

  top:
    0;

  z-index:
    2;

  width:
    100%;

  height:
    100svh;

  overflow:
    hidden;

  background:
    var(--reward-bg);
}


.project-reward
.reward-solution-story__sticky-inner {
  display:
    grid;

  grid-template-rows:
    auto
    minmax(0, 1fr);

  width:
    100%;

  height:
    100%;

  padding-top:
    clamp(30px, 3.2vh, 44px);

  padding-bottom:
    clamp(26px, 3vh, 40px);

  box-sizing:
    border-box;
}


/* ==========================================================================
   SOLUTION INTRO
   ========================================================================== */

.project-reward
.reward-solution-story__intro {
  width:
    100%;

  margin:
    0
    0
    clamp(22px, 2.6vh, 32px);
}


.project-reward
.reward-solution-story__label {
  margin:
    0
    0
    clamp(16px, 1.8vh, 22px);

  color:
    rgba(11, 27, 52, .72);

  font-size:
    clamp(11px, .8vw, 13px);

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.project-reward
.reward-solution-story__title {
  max-width:
    1050px;

  margin:
    0;

  color:
    var(--reward-ink);

  font-size:
    clamp(34px, 3.5vw, 54px);

  font-weight:
    400;

  line-height:
    1.08;

  letter-spacing:
    -.04em;
}


/* ==========================================================================
   SOLUTION STAGE
   ========================================================================== */

.project-reward
.reward-solution-story__stage {
  position:
    relative;

  width:
    100%;

  min-height:
    0;

  overflow:
    hidden;
}


/* ==========================================================================
   SOLUTION PANELS
   ========================================================================== */

.project-reward
.reward-solution-story__panel {
  position:
    absolute;

  inset:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(270px, .68fr)
    minmax(0, 1.32fr);

  gap:
    clamp(44px, 6vw, 96px);

  align-items:
    center;

  min-width:
    0;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(18px);

  transition:
    opacity .32s ease,
    transform .32s ease,
    visibility .32s ease;
}


.project-reward
.reward-solution-story__panel.is-active {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(0);
}


/* ==========================================================================
   SOLUTION COPY
   ========================================================================== */

.project-reward
.reward-solution-story__copy {
  width:
    100%;

  max-width:
    500px;

  min-width:
    0;
}


.project-reward
.reward-solution-story__eyebrow {
  margin:
    0
    0
    clamp(15px, 1.6vh, 20px);

  color:
    rgba(11, 27, 52, .7);

  font-size:
    clamp(11px, .8vw, 13px);

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.project-reward
.reward-solution-story__panel-title {
  margin:
    0;

  color:
    var(--reward-ink);

  font-size:
    clamp(30px, 3vw, 48px);

  font-weight:
    400;

  line-height:
    1.14;

  letter-spacing:
    -.04em;
}


.project-reward
.reward-solution-story__description {
  max-width:
    43ch;

  margin:
    clamp(16px, 1.7vh, 22px)
    0
    0;

  color:
    rgba(23, 23, 23, .82);

  font-size:
    clamp(15px, 1.05vw, 17px);

  line-height:
    1.5;
}


/* ==========================================================================
   SOLUTION VISUAL
   ========================================================================== */

.project-reward
.reward-solution-story__visual {
  width:
    100%;

  min-width:
    0;

  aspect-ratio:
    16 / 9;

  height:
    auto;

  margin:
    0;

  padding:
    0;

  align-self:
    center;

  overflow:
    hidden;

  border:
    0;

  border-radius:
    var(--reward-radius);

  background:
    transparent;
}


.project-reward
.reward-solution-story__media {
  display:
    block;

  width:
    100%;

  height:
    100%;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    inherit;

  background:
    transparent;

  object-fit:
    cover;

  object-position:
    center;
}


/* ==========================================================================
   SOLUTION STEPS
   ========================================================================== */

.project-reward
.reward-solution-story__steps {
  position:
    relative;

  z-index:
    0;

  margin-top:
    -100svh;

  pointer-events:
    none;
}


.project-reward
.reward-solution-story__step {
  width:
    100%;

  height:
    100svh;
}


/* ==========================================================================
   REFLECTION
   ========================================================================== */

.project-reward
.reward-reflection {
  padding-top:
    var(--reward-section-pad);

  padding-bottom:
    var(--reward-section-pad);
}


.project-reward
.reward-reflection__title {
  max-width:
    1180px;

  margin:
    clamp(26px, 3vw, 38px)
    0
    0;

  color:
    var(--reward-ink);

  font-size:
    clamp(36px, 4vw, 60px);

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


.project-reward
.reward-reflection__accent {
  font-family:
    "Griffiths",
    serif;

  font-size:
    1.12em;

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -.035em;
}


.project-reward
.reward-reflection__description {
  max-width:
    1040px;

  margin:
    clamp(30px, 3.5vw, 46px)
    0
    0;

  color:
    rgba(23, 23, 23, .86);

  font-size:
    clamp(16px, 1.2vw, 19px);

  line-height:
    1.5;

  letter-spacing:
    -.015em;
}


.project-reward
.reward-reflection__visual {
  width:
    100%;

  margin-top:
    clamp(42px, 5vw, 68px);

  overflow:
    hidden;

  border-radius:
    var(--reward-radius);

  background:
    var(--reward-dark);
}


.project-reward
.reward-reflection__visual img {
  width:
    100%;

  height:
    auto;
}


/* ==========================================================================
   NEXT PROJECT — SCROLL TAKEOVER
   ========================================================================== */

.project-reward
.next-project {
  position:
    relative;

  width:
    100%;

  /*
   * Creates a long scroll runway while the
   * next-project viewport remains sticky.
   */
  height:
    240svh;

  margin:
    0;

  padding:
    0;

  background:
    var(--reward-bg);

  color:
    var(--reward-ink);

  --next-progress:
    0;
}


/* ==========================================================================
   NEXT PROJECT — STICKY VIEWPORT
   ========================================================================== */

.project-reward
.next-project__sticky {
  position:
    sticky;

  top:
    0;

  display:
    block;

  width:
    100%;

  height:
    100svh;

  margin:
    0;

  padding:
    0;

  overflow:
    hidden;

  color:
    inherit;

  text-decoration:
    none;

  cursor:
    pointer;
}


/* ==========================================================================
   NEXT PROJECT — INNER
   ========================================================================== */

.project-reward
.next-project__inner {
  position:
    relative;

  width:
    100%;

  height:
    100%;

  overflow:
    hidden;

  background:
    var(--reward-bg);
}


/* ==========================================================================
   NEXT PROJECT — EYEBROW
   ========================================================================== */

.project-reward
.next-project__eyebrow {
  position:
    absolute;

  top:
    clamp(46px, 6vh, 72px);

  left:
    50%;

  z-index:
    5;

  margin:
    0;

  color:
    rgba(11, 27, 52, .58);

  font-family:
    "Satoshi",
    system-ui,
    sans-serif;

  font-size:
    clamp(11px, .8vw, 13px);

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

  transform:
    translateX(-50%)
    translateY(
      calc(
        var(--next-progress)
        *
        -18px
      )
    );

  opacity:
    calc(
      1
      -
      var(--next-progress)
      * .65
    );

  will-change:
    transform,
    opacity;
}


/* ==========================================================================
   NEXT PROJECT — TITLE
   ========================================================================== */

.project-reward
.next-project__title {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  z-index:
    4;

  width:
    max-content;

  max-width:
    none;

  margin:
    0;

  color:
    var(--reward-accent);

  font-family:
    "Cormorant",
    serif;

  font-size:
    clamp(150px, 24vw, 390px);

  font-style:
    normal;

  font-weight:
    300;

  line-height:
    .75;

  letter-spacing:
    -.065em;

  white-space:
    nowrap;

  transform:
    translate(-50%, -50%)
    scale(
      calc(
        1
        +
        var(--next-progress)
        * .18
      )
    );

  transform-origin:
    center;

  opacity:
    calc(
      1
      -
      var(--next-progress)
      * .35
    );

  pointer-events:
    none;

  will-change:
    transform,
    opacity;
}


/* ==========================================================================
   NEXT PROJECT — MEDIA
   ========================================================================== */

.project-reward
.next-project__media {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  z-index:
    2;

  width:
    calc(
      34vw
      +
      var(--next-progress)
      * 66vw
    );

  height:
    calc(
      36vh
      +
      var(--next-progress)
      * 64vh
    );

  margin:
    0;

  padding:
    0;

  overflow:
    hidden;

  border-radius:
    calc(
      var(--reward-radius)
      *
      (
        1
        -
        var(--next-progress)
      )
    );

  background:
    var(--reward-dark);

  transform:
    translate(-50%, -50%);

  will-change:
    width,
    height,
    border-radius;
}


.project-reward
.next-project__image {
  display:
    block;

  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center;

  transform:
    scale(
      calc(
        1.12
        -
        var(--next-progress)
        * .12
      )
    );

  transform-origin:
    center;

  will-change:
    transform;
}


/* ==========================================================================
   NEXT PROJECT — KEEP SCROLLING
   ========================================================================== */

.project-reward
.next-project__scroll {
  position:
    absolute;

  left:
    50%;

  bottom:
    clamp(44px, 6vh, 70px);

  z-index:
    5;

  margin:
    0;

  color:
    rgba(11, 27, 52, .58);

  font-family:
    "Satoshi",
    system-ui,
    sans-serif;

  font-size:
    clamp(11px, .75vw, 13px);

  font-weight:
    500;

  line-height:
    1;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  transform:
    translateX(-50%);

  opacity:
    calc(
      1
      -
      var(--next-progress)
      * .9
    );

  will-change:
    opacity;
}


/* ==========================================================================
   NEXT PROJECT — PROGRESS
   ========================================================================== */

.project-reward
.next-project__progress {
  position:
    absolute;

  left:
    50%;

  bottom:
    24px;

  z-index:
    5;

  width:
    min(760px, 64vw);

  height:
    4px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    rgba(11, 27, 52, .15);

  transform:
    translateX(-50%);
}


.project-reward
.next-project__progress-fill {
  display:
    block;

  width:
    calc(
      var(--next-progress)
      *
      100%
    );

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(--reward-accent);
}


/* ==========================================================================
   NEXT PROJECT — COMPLETE STATE
   ========================================================================== */

.project-reward
.next-project.is-complete
.next-project__media {
  width:
    100vw;

  height:
    100svh;

  border-radius:
    0;
}


.project-reward
.next-project.is-complete
.next-project__title {
  opacity:
    0;
}


.project-reward
.next-project.is-complete
.next-project__eyebrow,
.project-reward
.next-project.is-complete
.next-project__scroll,
.project-reward
.next-project.is-complete
.next-project__progress {
  opacity:
    0;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

  .project-reward
  .reward-hero__title {
    font-size:
      clamp(76px, 11vw, 125px);
  }


  .project-reward
  .reward-hero__meta {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      28px;
  }


  .project-reward
  .reward-overview__copy {
    width:
      min(760px, 72%);
  }


  .project-reward
  .reward-solution-story__panel {
    grid-template-columns:
      minmax(220px, .78fr)
      minmax(0, 1.22fr);

    gap:
      36px;
  }


  .project-reward
  .reward-solution-story__panel-title {
    font-size:
      clamp(28px, 3.8vw, 40px);
  }


  .project-reward
  .next-project__title {
    font-size:
      clamp(130px, 23vw, 280px);
  }


  .project-reward
  .next-project__media {
    width:
      calc(
        42vw
        +
        var(--next-progress)
        * 58vw
      );
  }

}


/* ==========================================================================
   SMALL TABLET
   ========================================================================== */

@media (max-width: 900px) {

  .project-reward
  .reward-challenge__layout {
    grid-template-columns:
      minmax(100px, .8fr)
      minmax(0, 3fr);

    column-gap:
      34px;
  }


  .project-reward
  .reward-challenge__columns {
    gap:
      24px;
  }


  .project-reward
  .reward-approach__title {
    font-size:
      clamp(30px, 4.5vw, 42px);
  }


  .project-reward
  .reward-approach__quote {
    font-size:
      clamp(46px, 6vw, 68px);
  }


  .project-reward
  .reward-outcome__item {
    grid-template-columns:
      54px
      minmax(220px, 1fr)
      minmax(250px, 1fr);

    gap:
      28px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 760px) {

  .project-reward {
    --reward-section-pad:
      52px;

    --reward-radius:
      14px;
  }


  .project-reward .nav {
    background:
      var(--reward-bg);

    color:
      var(--reward-accent);
  }


  .project-reward .nav a {
    color:
      var(--reward-accent);
  }


  .project-reward .nav-toggle {
    color:
      var(--reward-accent);

    border-color:
      var(--reward-accent);
  }


  /* HERO */

  .project-reward
  .reward-hero {
    padding-top:
      calc(
        var(--header-h, 76px)
        + 26px
      );

    padding-bottom:
      52px;
  }


  .project-reward
  .reward-hero__title {
    font-size:
      clamp(58px, 15vw, 88px);

    line-height:
      .9;

    text-align:
      left;
  }


  .project-reward
  .reward-hero__meta {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      26px
      18px;

    margin-top:
      36px;
  }


  .project-reward
  .reward-hero__meta-item:first-child {
    grid-column:
      1 / -1;
  }


  .project-reward
  .reward-hero__expertise {
    max-width:
      none;
  }


  .project-reward
  .reward-hero__cover {
    margin-top:
      30px;
  }


  /* OVERVIEW */

  .project-reward
  .reward-overview__copy {
    width:
      100%;

    margin:
      0;
  }


  .project-reward
  .reward-overview__title {
    font-size:
      clamp(27px, 7vw, 34px);
  }


  .project-reward
  .reward-overview__copy p {
    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-reward
  .reward-overview__visual {
    aspect-ratio:
      16 / 9;

    margin-top:
      32px;
  }


  /* CHALLENGE */

  .project-reward
  .reward-challenge__layout {
    grid-template-columns:
      1fr;

    gap:
      18px;
  }


  .project-reward
  .reward-section-title {
    font-size:
      clamp(29px, 7.5vw, 36px);

    line-height:
      1.17;
  }


  .project-reward
  .reward-challenge__columns {
    grid-template-columns:
      1fr;

    gap:
      18px;

    margin-top:
      24px;
  }


  .project-reward
  .reward-challenge__columns p {
    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-reward
  .reward-challenge__visual {
    margin-top:
      30px;
  }


  /* APPROACH */

  .project-reward
  .reward-approach__title {
    font-size:
      clamp(29px, 7.5vw, 36px);

    line-height:
      1.17;
  }


  .project-reward
  .reward-approach__quote {
    margin-top:
      22px;

    font-size:
      clamp(42px, 11vw, 58px);

    line-height:
      1;
  }


  .project-reward
  .reward-approach__methods {
    margin-top:
      24px;

    font-size:
      13px;
  }


  /* OUTCOME */

  .project-reward
  .reward-outcome__item {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    gap:
      14px
      18px;

    padding:
      30px
      0;
  }


  .project-reward
  .reward-outcome__number {
    grid-row:
      1 / span 2;

    font-size:
      14px;
  }


  .project-reward
  .reward-outcome__title {
    font-size:
      clamp(27px, 7vw, 34px);

    line-height:
      1.18;
  }


  .project-reward
  .reward-outcome__description {
    max-width:
      none;

    font-size:
      15px;

    line-height:
      1.55;
  }


  /* SOLUTION */

  .project-reward
  .reward-solution-story {
    width:
      100%;

    padding-top:
      52px;

    padding-bottom:
      52px;

    box-sizing:
      border-box;
  }


  .project-reward
  .reward-solution-story__sticky {
    position:
      static;

    width:
      100%;

    height:
      auto;

    overflow:
      visible;
  }


  .project-reward
  .reward-solution-story__sticky-inner {
    display:
      block;

    width:
      100%;

    max-width:
      none;

    height:
      auto;

    margin-inline:
      0;

    padding:
      0 20px;

    box-sizing:
      border-box;
  }


  .project-reward
  .reward-solution-story__intro {
    width:
      100%;

    margin:
      0 0 42px;
  }


  .project-reward
  .reward-solution-story__label {
    margin:
      0 0 16px;

    font-size:
      11px;
  }


  .project-reward
  .reward-solution-story__title {
    max-width:
      none;

    margin:
      0;

    font-size:
      clamp(29px, 7.5vw, 36px);

    line-height:
      1.17;
  }


  .project-reward
  .reward-solution-story__stage {
    display:
      grid;

    width:
      100%;

    gap:
      54px;

    overflow:
      visible;
  }


  .project-reward
  .reward-solution-story__panel,
  .project-reward
  .reward-solution-story__panel.is-active {
    position:
      relative;

    inset:
      auto;

    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr);

    width:
      100%;

    gap:
      26px;

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      none;

    transition:
      none;
  }


  .project-reward
  .reward-solution-story__copy {
    width:
      100%;

    max-width:
      none;
  }


  .project-reward
  .reward-solution-story__eyebrow {
    margin:
      0 0 14px;

    font-size:
      11px;
  }


  .project-reward
  .reward-solution-story__panel-title {
    margin:
      0;

    font-size:
      clamp(27px, 7vw, 34px);

    line-height:
      1.18;
  }


  .project-reward
  .reward-solution-story__description {
    max-width:
      none;

    margin-top:
      16px;

    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-reward
  .reward-solution-story__visual {
    width:
      100%;

    aspect-ratio:
      16 / 9;

    height:
      auto;

    margin:
      0;

    overflow:
      hidden;

    border-radius:
      var(--reward-radius);
  }


  .project-reward
  .reward-solution-story__media {
    display:
      block;

    width:
      100%;

    height:
      100%;

    margin:
      0;

    border-radius:
      inherit;

    object-fit:
      cover;

    object-position:
      center;
  }


  .project-reward
  .reward-solution-story__steps {
    display:
      none;
  }


  /* REFLECTION */

  .project-reward
  .reward-reflection__title {
    font-size:
      clamp(29px, 7.5vw, 38px);

    line-height:
      1.14;
  }


  .project-reward
  .reward-reflection__description {
    margin-top:
      24px;

    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-reward
  .reward-reflection__visual {
    margin-top:
      30px;
  }


  /* NEXT PROJECT */

  .project-reward
  .next-project {
    height:
      200svh;
  }


  .project-reward
  .next-project__title {
    font-size:
      clamp(92px, 29vw, 150px);
  }


  .project-reward
  .next-project__media {
    width:
      calc(
        70vw
        +
        var(--next-progress)
        * 30vw
      );

    height:
      calc(
        38vh
        +
        var(--next-progress)
        * 62vh
      );
  }


  .project-reward
  .next-project__eyebrow {
    top:
      42px;

    font-size:
      11px;
  }


  .project-reward
  .next-project__scroll {
    bottom:
      46px;

    font-size:
      10px;
  }


  .project-reward
  .next-project__progress {
    width:
      calc(100vw - 40px);

    bottom:
      20px;

    height:
      3px;
  }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 520px) {

  .project-reward
  .reward-hero__title {
    font-size:
      clamp(52px, 14vw, 70px);
  }


  .project-reward
  .reward-hero__meta {
    grid-template-columns:
      1fr;

    gap:
      24px;
  }


  .project-reward
  .reward-hero__meta-item:first-child {
    grid-column:
      auto;
  }


  .project-reward
  .reward-outcome__item {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    column-gap:
      14px;
  }


  .project-reward
  .reward-solution-story__stage {
    gap:
      48px;
  }


  .project-reward
  .next-project__title {
    font-size:
      clamp(82px, 31vw, 126px);
  }


  .project-reward
  .next-project__media {
    width:
      calc(
        76vw
        +
        var(--next-progress)
        * 24vw
      );
  }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .project-reward
  .reward-solution-story__sticky {
    position:
      static;

    height:
      auto;

    overflow:
      visible;
  }


  .project-reward
  .reward-solution-story__sticky-inner {
    display:
      block;

    height:
      auto;
  }


  .project-reward
  .reward-solution-story__stage {
    display:
      grid;

    gap:
      54px;

    overflow:
      visible;
  }


  .project-reward
  .reward-solution-story__panel,
  .project-reward
  .reward-solution-story__panel.is-active {
    position:
      relative;

    inset:
      auto;

    display:
      grid;

    opacity:
      1;

    visibility:
      visible;

    transform:
      none;
  }


  .project-reward
  .reward-solution-story__steps {
    display:
      none;
  }


  /* NEXT PROJECT */

  .project-reward
  .next-project {
    height:
      100svh;

    --next-progress:
      1;
  }


  .project-reward
  .next-project__sticky {
    position:
      relative;

    top:
      auto;
  }


  .project-reward
  .next-project__media {
    width:
      100vw;

    height:
      100svh;

    border-radius:
      0;

    transform:
      translate(-50%, -50%);
  }


  .project-reward
  .next-project__image {
    transform:
      none;
  }


  .project-reward
  .next-project__title,
  .project-reward
  .next-project__eyebrow,
  .project-reward
  .next-project__scroll,
  .project-reward
  .next-project__progress {
    display:
      none;
  }

}