/* ==========================================================================
   ED CONTROLS — PAGE
   ========================================================================== */

.project-ed {
  --ed-bg: #F2ECEA;
  --ed-ink: #0B1B34;
  --ed-text: #171717;
  --ed-accent: #A15D66;

  --ed-blue: #CFE7F2;
  --ed-green: #CBECCF;
  --ed-dark: #2C3C50;

  --ed-outcome: #17243F;

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

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

  background:
    var(--ed-bg);

  color:
    var(--ed-ink);

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


.project-ed main {
  width:
    100%;

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


/* ==========================================================================
   SHARED SECTION SPACING
   ========================================================================== */

.project-ed .ed-introduction,
.project-ed .ed-challenge,
.project-ed .ed-reflection {
  width:
    100%;

  padding-top:
    var(--ed-section-pad);

  box-sizing:
    border-box;
}


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

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

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

  box-sizing:
    border-box;
}


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

  margin:
    0;

  color:
    var(--ed-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-ed .ed-hero__meta {
  display:
    grid;

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

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

  row-gap:
    30px;

  align-items:
    start;

  width:
    100%;

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


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


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

  color:
    var(--ed-accent);

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

  font-weight:
    400;

  line-height:
    1.25;
}


.project-ed .ed-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-ed .ed-hero__expertise {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  max-width:
    290px;
}


.project-ed .ed-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;

  background:
    transparent;

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

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

  font-weight:
    400;

  line-height:
    1;

  white-space:
    nowrap;
}


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

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

  width:
    100%;

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

  padding:
    0;

  overflow:
    hidden;

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

  background:
    #DCECF2;
}


.project-ed .ed-hero__cover img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  margin:
    0;

  object-fit:
    cover;

  object-position:
    center;
}


/* ==========================================================================
   INTRODUCTION
   ========================================================================== */

.project-ed .ed-introduction__copy {
  width:
    min(820px, 66%);

  margin-left:
    auto;

  margin-right:
    0;

  text-align:
    left;
}


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

  color:
    var(--ed-text);

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


.project-ed .ed-introduction__copy p {
  width:
    100%;

  max-width:
    72ch;

  margin:
    0
    0
    18px;

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.015em;
}


.project-ed .ed-introduction__copy p:last-child {
  margin-bottom:
    0;
}


.project-ed .ed-introduction__visual {
  position:
    relative;

  width:
    100%;

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

  padding:
    0;

  overflow:
    hidden;

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

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


.project-ed .ed-introduction__video {
  display:
    block;

  width:
    100%;

  height:
    auto;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    inherit;

  background:
    var(--ed-dark);

  object-fit:
    cover;

  object-position:
    center;
}


/* ==========================================================================
   01 — CHALLENGE
   ========================================================================== */

.project-ed .ed-challenge {
  width:
    100%;

  padding-top:
    var(--ed-section-pad);

  padding-bottom:
    var(--ed-section-pad);

  box-sizing:
    border-box;
}


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

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

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

  align-items:
    start;
}


.project-ed .ed-challenge__label {
  margin:
    4px
    0
    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-ed .ed-challenge__content {
  width:
    100%;

  min-width:
    0;
}


.project-ed .ed-challenge__title {
  width:
    100%;

  max-width:
    none;

  margin:
    0;

  color:
    var(--ed-text);

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


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

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

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

  width:
    100%;

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


.project-ed .ed-challenge__column {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.project-ed .ed-challenge__text {
  margin:
    0
    0
    clamp(34px, 4vw, 56px);

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


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

  width:
    100%;

  aspect-ratio:
    1 / 1;

  margin:
    0;

  padding:
    0;

  overflow:
    hidden;

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

  background:
    #D8D8D8;
}


.project-ed .ed-challenge__video {
  display:
    block;

  width:
    100%;

  height:
    100%;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    inherit;

  object-fit:
    cover;

  object-position:
    center;
}


/* ==========================================================================
   02 — APPROACH
   ========================================================================== */

.project-ed .ed-approach {
  width:
    100%;

  padding-bottom:
    var(--ed-section-pad);

  box-sizing:
    border-box;
}


.project-ed .ed-approach__label {
  margin:
    0
    0
    clamp(26px, 3vw, 38px);

  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-ed .ed-approach__title {
  max-width:
    1200px;

  margin:
    0;

  color:
    var(--ed-text);

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


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

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

  padding:
    0;

  border:
    0;

  color:
    var(--ed-text);

  font-family:
    "Griffiths",
    serif;

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

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    .98;

  letter-spacing:
    -.035em;
}


.project-ed .ed-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);

  font-weight:
    400;

  line-height:
    1.5;
}


/* ==========================================================================
   03 — OUTCOME
   ========================================================================== */

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

  background:
    var(--ed-outcome);

  color:
    #FFFFFF;
}


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

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


.project-ed .ed-outcome__label {
  margin:
    0
    0
    clamp(34px, 4vw, 52px);

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


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

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


.project-ed .ed-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, .32);
}


.project-ed .ed-outcome__number {
  display:
    block;

  margin:
    5px
    0
    0;

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

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

  font-weight:
    400;

  line-height:
    1.2;
}


.project-ed .ed-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-ed .ed-outcome__description {
  max-width:
    46ch;

  margin:
    4px
    0
    0;

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


/* ==========================================================================
   04 — SOLUTION SCROLL STORY
   ========================================================================== */

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

  width:
    100%;

  margin:
    0;

  padding:
    0;

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


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

  top:
    0;

  z-index:
    2;

  width:
    100%;

  height:
    100svh;

  overflow:
    hidden;

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


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

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

  width:
    100%;

  height:
    100%;

  padding-top:
    clamp(32px, 3.5vh, 48px);

  padding-bottom:
    clamp(28px, 3vh, 42px);

  box-sizing:
    border-box;
}


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

  margin:
    0
    0
    clamp(24px, 3vh, 36px);
}


.project-ed .ed-solution-story__label {
  margin:
    0
    0
    clamp(18px, 2vh, 24px);

  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-ed .ed-solution-story__title {
  max-width:
    1050px;

  margin:
    0;

  color:
    var(--ed-text);

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

  font-weight:
    400;

  line-height:
    1.08;

  letter-spacing:
    -.04em;
}


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

  width:
    100%;

  min-height:
    0;

  overflow:
    hidden;
}


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

  inset:
    0;

  display:
    grid;

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

  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-ed .ed-solution-story__panel.is-active {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(0);
}


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

  max-width:
    500px;

  min-width:
    0;
}


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

  color:
    var(--ed-text);

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

  font-weight:
    400;

  line-height:
    1.14;

  letter-spacing:
    -.04em;
}


.project-ed .ed-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);

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


.project-ed .ed-solution-story__meta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin:
    clamp(18px, 2vh, 24px)
    0
    0;

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

  font-size:
    clamp(12px, .9vw, 14px);

  line-height:
    1.4;
}


.project-ed .ed-solution-story__status {
  display:
    grid;

  grid-template-columns:
    minmax(110px, .85fr)
    minmax(130px, 1.15fr);

  gap:
    16px;

  max-width:
    420px;

  margin-top:
    clamp(22px, 2.5vh, 30px);

  color:
    var(--ed-text);

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

  line-height:
    1.4;
}


.project-ed .ed-solution-story__status strong {
  font-weight:
    600;
}


.project-ed .ed-solution-story__status span {
  color:
    rgba(23, 23, 23, .72);
}


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

  background:
    transparent;
}


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


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

  z-index:
    0;

  margin-top:
    -100svh;

  pointer-events:
    none;
}


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

  height:
    100svh;
}


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

.project-ed .ed-reflection {
  padding-bottom:
    var(--ed-section-pad);
}


.project-ed .ed-reflection__label {
  margin:
    0
    0
    clamp(24px, 3vw, 38px);

  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-ed .ed-reflection__title {
  max-width:
    1180px;

  margin:
    0;

  color:
    var(--ed-text);

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


.project-ed .ed-reflection__accent {
  display:
    block;

  margin-top:
    clamp(6px, .8vw, 10px);

  font-family:
    "Griffiths",
    serif;

  font-size:
    1.14em;

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -.035em;
}


.project-ed .ed-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);

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.015em;
}


.project-ed .ed-reflection__visual {
  position:
    relative;

  width:
    100%;

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

  padding:
    0;

  overflow:
    hidden;

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

  background:
    #222222;
}


.project-ed .ed-reflection__visual img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  margin:
    0;

  border-radius:
    inherit;

  object-fit:
    cover;

  object-position:
    center;
}


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

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

  width:
    100%;

  height:
    240svh;

  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;

  background:
    var(--ed-bg);

  color:
    var(--ed-ink);

  --next-progress:
    0;
}


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

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

  width:
    100%;

  height:
    100%;

  overflow:
    hidden;

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


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

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

  top:
    50%;

  left:
    50%;

  z-index:
    4;

  width:
    min(90vw, 1200px);

  max-width:
    1200px;

  margin:
    0;

  color:
    var(--ed-accent);

  font-family:
    "Cormorant",
    serif;

  font-size:
    clamp(130px, 19vw, 320px);

  font-style:
    normal;

  font-weight:
    300;

  line-height:
    .76;

  letter-spacing:
    -.065em;

  white-space:
    normal;

  text-align:
    center;

  overflow-wrap:
    normal;

  word-break:
    normal;

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

  background:
    #222222;

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

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


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

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

  height:
    100%;

  border-radius:
    inherit;

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


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

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

  height:
    100svh;

  border-radius:
    0;
}


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


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

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

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


/* ==========================================================================
   LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1400px) {

  .project-ed .ed-hero {
    padding-top:
      calc(
        var(--header-h, 88px)
        + 52px
      );
  }


  .project-ed .ed-hero__title {
    font-size:
      170px;
  }


  .project-ed .ed-hero__meta-label {
    font-size:
      17px;
  }


  .project-ed .ed-hero__meta-value {
    font-size:
      18px;
  }


  .project-ed .ed-hero__pill {
    min-height:
      40px;

    padding:
      9px
      15px;

    font-size:
      15px;
  }


  .project-ed .ed-introduction__copy {
    width:
      min(880px, 64%);
  }

}


/* ==========================================================================
   SMALL DESKTOP
   ========================================================================== */

@media (max-width: 1200px) {

  .project-ed .ed-hero__meta {
    grid-template-columns:
      minmax(180px, 1.2fr)
      minmax(120px, .8fr)
      minmax(150px, 1fr)
      minmax(90px, .6fr)
      minmax(190px, 1.2fr);

    column-gap:
      24px;
  }


  .project-ed .ed-solution-story__panel {
    grid-template-columns:
      minmax(240px, .75fr)
      minmax(0, 1.25fr);

    gap:
      clamp(32px, 4vw, 56px);
  }

}


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

@media (max-width: 1050px) {

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


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

    gap:
      28px;
  }


  .project-ed .ed-hero__meta-item--mentors {
    grid-column:
      span 2;
  }


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


  .project-ed .ed-solution-story__sticky-inner {
    padding-top:
      28px;

    padding-bottom:
      28px;
  }


  .project-ed .ed-solution-story__intro {
    margin-bottom:
      24px;
  }


  .project-ed .ed-solution-story__title {
    font-size:
      clamp(31px, 4.2vw, 46px);
  }


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

    gap:
      36px;
  }


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


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


  .project-ed
  .next-project__title {
    font-size:
      clamp(110px, 18vw, 230px);
  }


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

}


/* ==========================================================================
   TABLET — APPROACH + OUTCOME
   ========================================================================== */

@media (max-width: 900px) {

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

    column-gap:
      34px;
  }


  .project-ed .ed-challenge__title {
    font-size:
      clamp(28px, 4vw, 40px);
  }


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


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


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


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

    gap:
      28px;
  }


  .project-ed .ed-outcome__title {
    font-size:
      clamp(30px, 4vw, 42px);
  }

}


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

@media (max-width: 760px) {

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

    --ed-radius:
      14px;
  }


  /* HERO */

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

    padding-bottom:
      52px;
  }


  .project-ed .ed-hero__title {
    font-size:
      clamp(62px, 17vw, 92px);

    line-height:
      .9;

    text-align:
      left;
  }


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

    gap:
      26px
      18px;

    margin-top:
      36px;
  }


  .project-ed .ed-hero__meta-item:first-child,
  .project-ed .ed-hero__meta-item--mentors {
    grid-column:
      1 / -1;
  }


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


  .project-ed .ed-hero__cover {
    margin-top:
      30px;

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


  /* INTRODUCTION */

  .project-ed .ed-introduction__copy {
    width:
      100%;

    margin:
      0;
  }


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


  .project-ed .ed-introduction__copy p {
    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-ed .ed-introduction__visual {
    margin-top:
      32px;
  }


  /* CHALLENGE */

  .project-ed .ed-challenge__layout {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      18px;
  }


  .project-ed .ed-challenge__label {
    margin:
      0;
  }


  .project-ed .ed-challenge__title {
    font-size:
      clamp(28px, 7vw, 35px);

    line-height:
      1.17;
  }


  .project-ed .ed-challenge__title br {
    display:
      none;
  }


  .project-ed .ed-challenge__columns {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      30px;

    margin-top:
      22px;
  }


  .project-ed .ed-challenge__text {
    margin-bottom:
      16px;

    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-ed .ed-challenge__visual {
    border-radius:
      var(--ed-radius);
  }


  /* APPROACH */

  .project-ed .ed-approach {
    padding-top:
      52px;

    padding-bottom:
      52px;
  }


  .project-ed .ed-approach__label {
    margin-bottom:
      20px;

    font-size:
      11px;
  }


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

    line-height:
      1.17;
  }


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

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

    line-height:
      1;
  }


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

    gap:
      5px;

    font-size:
      13px;
  }


  /* OUTCOME */

  .project-ed .ed-outcome__inner {
    padding-top:
      52px;

    padding-bottom:
      52px;
  }


  .project-ed .ed-outcome__label {
    margin-bottom:
      28px;

    font-size:
      11px;
  }


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

    gap:
      14px
      18px;

    padding:
      30px
      0;
  }


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

    font-size:
      14px;
  }


  .project-ed .ed-outcome__title {
    max-width:
      none;

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

    line-height:
      1.18;
  }


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

    margin-top:
      4px;

    font-size:
      15px;

    line-height:
      1.55;
  }


  /* SOLUTION */

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

    padding-bottom:
      52px;
  }


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

    height:
      auto;

    overflow:
      visible;
  }


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

    height:
      auto;

    padding-top:
      0;

    padding-bottom:
      0;
  }


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


  .project-ed .ed-solution-story__label {
    margin-bottom:
      16px;

    font-size:
      11px;
  }


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

    line-height:
      1.17;
  }


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

    gap:
      54px;

    overflow:
      visible;
  }


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

    inset:
      auto;

    display:
      grid;

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

    gap:
      26px;

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      none;

    transition:
      none;
  }


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


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

    line-height:
      1.18;
  }


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

    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-ed .ed-solution-story__status {
    grid-template-columns:
      minmax(100px, .85fr)
      minmax(120px, 1.15fr);

    gap:
      14px;
  }


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

    aspect-ratio:
      16 / 9;

    height:
      auto;

    overflow:
      hidden;

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


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

    width:
      100%;

    height:
      100%;

    border-radius:
      inherit;

    object-fit:
      cover;

    object-position:
      center;
  }


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


  /* REFLECTION */

  .project-ed .ed-reflection__label {
    margin-bottom:
      20px;

    font-size:
      11px;
  }


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

    line-height:
      1.14;
  }


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

    font-size:
      15px;

    line-height:
      1.55;
  }


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


  /* NEXT PROJECT */

  .project-ed
  .next-project {
    height:
      200svh;

    padding:
      0;
  }


  .project-ed
  .next-project__title {
    width:
      94vw;

    font-size:
      clamp(70px, 18vw, 120px);

    line-height:
      .82;

    white-space:
      normal;

    text-align:
      center;
  }


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

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


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

    font-size:
      11px;
  }


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

    font-size:
      10px;
  }


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

    bottom:
      20px;

    height:
      3px;
  }

}


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

@media (max-width: 520px) {

  .project-ed .ed-hero__title {
    font-size:
      clamp(56px, 16vw, 76px);
  }


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

    gap:
      24px;
  }


  .project-ed .ed-hero__meta-item:first-child,
  .project-ed .ed-hero__meta-item--mentors {
    grid-column:
      auto;
  }


  .project-ed .ed-challenge__columns {
    gap:
      34px;
  }


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

    column-gap:
      14px;
  }


  .project-ed .ed-outcome__title {
    font-size:
      26px;
  }


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


  .project-ed .ed-solution-story__status {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      4px;
  }


  .project-ed
  .next-project__title {
    font-size:
      clamp(60px, 17vw, 94px);
  }


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

}


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

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

  .project-ed .ed-solution-story__panel {
    transition:
      none;
  }


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

    --next-progress:
      1;
  }


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

    top:
      auto;
  }


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

    height:
      100svh;

    border-radius:
      0;

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


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


  .project-ed
  .next-project__title,

  .project-ed
  .next-project__eyebrow,

  .project-ed
  .next-project__scroll,

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

}