/* ==========================================================================
   eMOTION CASE STUDY
   ========================================================================== */

.project-emotion {
  --emotion-bg: #F2ECEA;
  --emotion-ink: #171717;
  --emotion-muted: #696465;
  --emotion-accent: #A15D66;

  --emotion-section-pad: clamp(64px, 7vw, 104px);
  --emotion-radius: clamp(12px, 1.2vw, 18px);

  background: var(--emotion-bg);
  color: var(--emotion-ink);

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


.project-emotion main {
  width: 100%;
  background: var(--emotion-bg);
}


.project-emotion figure {
  margin: 0;
}


.project-emotion img,
.project-emotion video {
  display: block;
  max-width: 100%;
}


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

.project-emotion .masthead {
  background: var(--emotion-bg);
  color: var(--emotion-accent);
}


.project-emotion .site-header {
  background: var(--emotion-bg);
  color: var(--emotion-accent);

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


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


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

.project-emotion .emotion-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-emotion .emotion-section-title {
  margin: 0;

  color:
    var(--emotion-ink);

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


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

.project-emotion .emotion-hero {
  padding-top:
    calc(
      var(--header-h, 88px)
      + clamp(34px, 4vw, 60px)
    );
}


.project-emotion .emotion-hero__title {
  margin: 0;

  color:
    var(--emotion-accent);

  font-family:
    "Cormorant",
    serif;

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

  font-weight:
    300;

  line-height:
    .84;

  letter-spacing:
    -.055em;

  text-align:
    center;
}


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

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

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

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

  row-gap:
    30px;

  align-items:
    start;

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

  margin-bottom:
    clamp(38px, 4vw, 58px);
}


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


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

  color:
    var(--emotion-accent);

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

  font-weight:
    400;

  line-height:
    1.25;
}


.project-emotion .emotion-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 EXPERTISE
   ========================================================================== */

.project-emotion .emotion-hero__chips {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  max-width:
    290px;
}


.project-emotion .emotion-chip {
  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 MEDIA
   ========================================================================== */

.project-emotion .emotion-hero__media {
  width:
    100%;

  overflow:
    hidden;

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


.project-emotion .emotion-hero__media img {
  width:
    100%;

  height:
    auto;
}


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

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


.project-emotion .emotion-overview__copy {
  width:
    min(820px, 66%);

  margin-left:
    auto;

  margin-right:
    0;
}


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

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


.project-emotion .emotion-overview__copy p {
  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-emotion .emotion-overview__grid {
  display:
    grid;

  grid-template-columns:
    minmax(260px, .72fr)
    minmax(0, 1.28fr);

  gap:
    14px;

  align-items:
    stretch;

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


.project-emotion .emotion-overview__stack {
  display:
    grid;

  grid-template-rows:
    repeat(3, 1fr);

  gap:
    14px;
}


.project-emotion .emotion-overview__small-visual,
.project-emotion .emotion-overview__map {
  min-width:
    0;

  overflow:
    hidden;

  border-radius:
    8px;
}


.project-emotion .emotion-overview__small-visual img,
.project-emotion .emotion-overview__map img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


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

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

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


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

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

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

  align-items:
    start;
}


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


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

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

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

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


.project-emotion .emotion-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-emotion .emotion-challenge__visual {
  width:
    100%;

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

  overflow:
    hidden;

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

  background:
    #061333;
}


.project-emotion .emotion-challenge__video {
  width:
    100%;

  aspect-ratio:
    16 / 9;

  height:
    auto;

  object-fit:
    cover;
}


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

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


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

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

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


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

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

  color:
    var(--emotion-ink);

  font-family:
    "Griffiths",
    serif;

  font-style:
    normal;

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

  font-weight:
    400;

  line-height:
    .98;

  letter-spacing:
    -.035em;
}


.project-emotion .emotion-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-emotion .emotion-outcome {
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(255, 71, 125, .95),
      transparent 34%
    ),
    radial-gradient(
      circle at 42% 72%,
      rgba(255, 208, 46, .9),
      transparent 34%
    ),
    radial-gradient(
      circle at 84% 20%,
      rgba(188, 229, 0, .86),
      transparent 34%
    ),
    radial-gradient(
      circle at 94% 85%,
      rgba(29, 159, 236, .92),
      transparent 38%
    ),
    linear-gradient(
      125deg,
      #ff477c 0%,
      #ffd33d 48%,
      #b6db00 72%,
      #26a4ed 100%
    );
}


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

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


.project-emotion .emotion-section-label--outcome {
  color:
    rgba(23, 23, 23, .72);
}


.project-emotion .emotion-outcome__rows {
  margin-top:
    clamp(34px, 4vw, 52px);
}


.project-emotion .emotion-outcome__row {
  display:
    grid;

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

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

  align-items:
    start;

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

  border-top:
    1px solid
    rgba(23, 23, 23, .28);
}


.project-emotion .emotion-outcome__row:last-child {
  border-bottom:
    1px solid
    rgba(23, 23, 23, .28);
}


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

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

  line-height:
    1.2;
}


.project-emotion .emotion-outcome__row h3 {
  margin:
    0;

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

  font-weight:
    400;

  line-height:
    1.16;

  letter-spacing:
    -.035em;
}


.project-emotion .emotion-outcome__row p {
  margin:
    4px
    0
    0;

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

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


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

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

  width:
    100%;

  margin:
    0;

  padding:
    0;

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


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

  top:
    0;

  z-index:
    2;

  width:
    100%;

  height:
    100svh;

  overflow:
    hidden;

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


.project-emotion .emotion-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;
}


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

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


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

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

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

  font-weight:
    400;

  line-height:
    1.08;

  letter-spacing:
    -.04em;
}


.project-emotion .emotion-solution-story__intro-text {
  margin:
    clamp(10px, 1.2vh, 15px)
    0
    0;

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

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

  line-height:
    1.45;
}


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

  width:
    100%;

  min-height:
    0;

  overflow:
    hidden;
}


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

  inset:
    0;

  display:
    none;

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

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

  align-items:
    center;

  min-width:
    0;
}


.project-emotion .emotion-solution-story__panel.is-active {
  display:
    grid;
}


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

  max-width:
    500px;

  min-width:
    0;
}


.project-emotion .emotion-solution-story__eyebrow {
  margin:
    0
    0
    clamp(14px, 1.5vh, 19px);

  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-emotion .emotion-solution-story__panel-title {
  margin:
    0;

  color:
    var(--emotion-ink);

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

  font-weight:
    400;

  line-height:
    1.14;

  letter-spacing:
    -.04em;
}


.project-emotion .emotion-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;
}


.project-emotion .emotion-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(--emotion-radius);

  background:
    transparent;
}


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

  width:
    100%;

  height:
    100%;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    inherit;

  object-fit:
    cover;

  object-position:
    center;

  background:
    transparent;
}


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

  z-index:
    0;

  margin-top:
    -100svh;

  pointer-events:
    none;
}


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

  height:
    100svh;
}


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

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

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


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

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

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


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

  font-size:
    1.12em;

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -.035em;
}


.project-emotion .emotion-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-emotion .emotion-reflection__visual {
  width:
    100%;

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

  overflow:
    hidden;

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


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

  height:
    auto;
}


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

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

  width:
    100%;

  height:
    240svh;

  margin:
    0;

  padding:
    0;

  background:
    var(--emotion-bg);

  color:
    var(--emotion-ink);

  --next-progress:
    0;
}


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

.project-emotion
.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-emotion
.next-project__inner {
  position:
    relative;

  width:
    100%;

  height:
    100%;

  overflow:
    hidden;

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


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

.project-emotion
.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-emotion
.next-project__title {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  z-index:
    4;

  width:
    max-content;

  max-width:
    none;

  margin:
    0;

  color:
    var(--emotion-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:
    1;

  pointer-events:
    none;

  will-change:
    transform,
    opacity;
}


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

.project-emotion
.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(--emotion-radius)
      *
      (
        1
        -
        var(--next-progress)
      )
    );

  background:
    #222222;

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

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


.project-emotion
.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-emotion
.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-emotion
.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-emotion
.next-project__progress-fill {
  display:
    block;

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

  height:
    100%;

  border-radius:
    inherit;

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


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

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

  height:
    100svh;

  border-radius:
    0;
}


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


.project-emotion
.next-project.is-complete
.next-project__eyebrow,

.project-emotion
.next-project.is-complete
.next-project__scroll,

.project-emotion
.next-project.is-complete
.next-project__progress {
  opacity:
    0;
}


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

@media (max-width: 1100px) {

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


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


  .project-emotion .emotion-solution-story__panel {
    grid-template-columns:
      minmax(220px, .72fr)
      minmax(0, 1.28fr);

    gap:
      34px;
  }


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


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

}


@media (max-width: 820px) {

  .project-emotion .emotion-overview__copy {
    width:
      88%;
  }


  .project-emotion .emotion-overview__grid {
    grid-template-columns:
      1fr;
  }


  .project-emotion .emotion-overview__stack {
    grid-template-columns:
      repeat(3, 1fr);

    grid-template-rows:
      none;
  }


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


  .project-emotion .emotion-outcome__row {
    grid-template-columns:
      52px
      minmax(0, 1fr);
  }


  .project-emotion .emotion-outcome__row p {
    grid-column:
      2;
  }

}


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

@media (max-width: 760px) {

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

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


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


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

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


  .project-emotion .emotion-solution-story {
    padding-top:
      52px;

    padding-bottom:
      52px;
  }


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

    height:
      auto;

    overflow:
      visible;
  }


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

    height:
      auto;

    padding-top:
      0;

    padding-bottom:
      0;
  }


  .project-emotion .emotion-solution-story__intro {
    margin-bottom:
      42px;
  }


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

    gap:
      54px;

    overflow:
      visible;
  }


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

    inset:
      auto;

    display:
      grid;

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

    gap:
      26px;
  }


  .project-emotion .emotion-solution-story__copy {
    max-width:
      none;
  }


  .project-emotion .emotion-solution-story__description {
    max-width:
      none;
  }


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


  /* NEXT PROJECT */

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


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


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

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


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

    font-size:
      11px;
  }


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

    font-size:
      10px;
  }


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

    bottom:
      20px;

    height:
      3px;
  }

}


@media (max-width: 600px) {

  .project-emotion .emotion-hero__title {
    font-size:
      clamp(70px, 22vw, 108px);

    text-align:
      left;
  }


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

    gap:
      22px;
  }


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

    margin:
      0;
  }


  .project-emotion .emotion-overview__stack {
    grid-template-columns:
      1fr;
  }


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

    gap:
      18px;
  }


  .project-emotion .emotion-outcome__row {
    grid-template-columns:
      1fr;

    gap:
      14px;
  }


  .project-emotion .emotion-outcome__row p {
    grid-column:
      auto;
  }


  .project-emotion .emotion-solution-story__title {
    font-size:
      clamp(29px, 7.5vw, 36px);

    line-height:
      1.17;
  }


  .project-emotion .emotion-reflection__title {
    font-size:
      clamp(30px, 7.8vw, 38px);

    line-height:
      1.17;
  }


  .project-emotion .emotion-solution-story__panel-title {
    font-size:
      clamp(27px, 7vw, 34px);

    line-height:
      1.18;
  }


  .project-emotion .emotion-solution-story__description {
    font-size:
      15px;

    line-height:
      1.55;
  }

}


@media (max-width: 520px) {

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


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

}


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

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

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

    height:
      auto;

    overflow:
      visible;
  }


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

    height:
      auto;
  }


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

    gap:
      56px;

    overflow:
      visible;
  }


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

    inset:
      auto;

    display:
      grid;
  }


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


  /* NEXT PROJECT */

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

    --next-progress:
      1;
  }


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

    top:
      auto;
  }


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

    height:
      100svh;

    border-radius:
      0;

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


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


  .project-emotion
  .next-project__title,

  .project-emotion
  .next-project__eyebrow,

  .project-emotion
  .next-project__scroll,

  .project-emotion
  .next-project__progress {
    display:
      none;
  }

}