/* ==========================================================================
   VINCE CASE STUDY
   ========================================================================== */

.project-vince {
  --vince-bg:
    #F2ECEA;

  --vince-ink:
    #171717;

  --vince-muted:
    #696465;

  --vince-accent:
    #A15D66;

  --vince-purple:
    #2F0549;

  --vince-cyan:
    #38CEC8;

  --vince-dark:
    #222222;

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

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

  background:
    var(--vince-bg);

  color:
    var(--vince-ink);

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


.project-vince main {
  width:
    100%;

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


.project-vince figure {
  margin:
    0;
}


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

  max-width:
    100%;
}


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

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

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


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

  color:
    var(--vince-accent);

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


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


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

.project-vince
.vince-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-vince
.vince-section-label--light {
  color:
    rgba(255, 255, 255, .6);
}


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

  color:
    var(--vince-ink);

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


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

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

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

  box-sizing:
    border-box;
}


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

  margin:
    0;

  color:
    var(--vince-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-vince
.vince-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;

  width:
    100%;

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


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


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

  color:
    var(--vince-accent);

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

  font-weight:
    400;

  line-height:
    1.25;
}


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

  flex-wrap:
    wrap;

  gap:
    8px;

  max-width:
    290px;
}


.project-vince
.vince-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-vince
.vince-hero__cover {
  position:
    relative;

  width:
    100%;

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

  overflow:
    hidden;

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

  background:
    #222222;
}


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

  height:
    auto;

  object-fit:
    cover;
}


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

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


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

  margin-left:
    auto;

  margin-right:
    0;
}


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

  color:
    var(--vince-ink);

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


.project-vince
.vince-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-vince
.vince-overview__copy p:last-child {
  margin-bottom:
    0;
}


/* ==========================================================================
   OVERVIEW VISUAL GRID
   Same structure as eMotion:
   3 stacked visuals left + 1 large visual right
   ========================================================================== */

.project-vince
.vince-overview__grid {
  display:
    grid;

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

  gap:
    14px;

  align-items:
    stretch;

  margin-top:
    var(--vince-section-pad);
}


/* ==========================================================================
   LEFT STACK
   ========================================================================== */

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

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

  gap:
    14px;

  min-width:
    0;
}


/* ==========================================================================
   VISUAL CONTAINERS
   ========================================================================== */

.project-vince
.vince-overview__small-visual,
.project-vince
.vince-overview__large-visual {
  min-width:
    0;

  min-height:
    0;

  margin:
    0;

  overflow:
    hidden;

  border-radius:
    8px;

  background:
    #222222;
}


/* ==========================================================================
   IMAGES
   ========================================================================== */

.project-vince
.vince-overview__small-visual img,
.project-vince
.vince-overview__large-visual img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;
}


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

@media (max-width: 760px) {

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

    gap:
      14px;

    margin-top:
      36px;
  }


  .project-vince
  .vince-overview__stack {
    grid-template-rows:
      none;

    grid-template-columns:
      1fr;

    gap:
      14px;
  }


  .project-vince
  .vince-overview__small-visual,
  .project-vince
  .vince-overview__large-visual {
    aspect-ratio:
      16 / 10;
  }

}


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

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


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

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

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

  align-items:
    start;
}


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


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

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

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

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


.project-vince
.vince-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-vince
.vince-challenge__visual {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    16 / 9;

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

  padding:
    0;

  overflow:
    hidden;

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

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


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

  width:
    100%;

  height:
    100%;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    inherit;

  object-fit:
    cover;

  object-position:
    center;
}


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

.project-vince
.vince-approach {
  padding-top:
    var(--vince-section-pad);

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


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

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

  color:
    var(--vince-ink);

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


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

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

  padding:
    0;

  border:
    0;

  color:
    var(--vince-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-vince
.vince-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-vince
.vince-outcome {
  width:
    100%;

  background:
    var(--vince-purple);

  color:
    #FFFFFF;
}


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

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


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

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

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


.project-vince
.vince-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, .28);
}


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

  margin:
    5px
    0
    0;

  color:
    #FFFFFF;

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

  line-height:
    1.2;
}


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

  margin:
    4px
    0
    0;

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

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

  line-height:
    1.5;
}


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

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

  width:
    100%;

  margin:
    0;

  padding:
    0;

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


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

  top:
    0;

  z-index:
    2;

  width:
    100%;

  height:
    100svh;

  overflow:
    hidden;

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


.project-vince
.vince-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-vince
.vince-solution-story__intro {
  width:
    100%;

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


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

  margin:
    0;

  color:
    var(--vince-ink);

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

  font-weight:
    400;

  line-height:
    1.08;

  letter-spacing:
    -.04em;
}


.project-vince
.vince-solution-story__intro-text {
  margin:
    clamp(12px, 1.4vh, 18px)
    0
    0;

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

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

  line-height:
    1.45;
}


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

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

  width:
    100%;

  min-height:
    0;

  overflow:
    hidden;
}


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

.project-vince
.vince-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-vince
.vince-solution-story__panel.is-active {
  display:
    grid;
}


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

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

  max-width:
    500px;

  min-width:
    0;
}


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

  color:
    var(--vince-ink);

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

  font-weight:
    400;

  line-height:
    1.14;

  letter-spacing:
    -.04em;
}


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

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


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

  width:
    100%;

  height:
    100%;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    inherit;

  object-fit:
    cover;

  object-position:
    center;
}


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

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

  z-index:
    0;

  margin-top:
    -100svh;

  pointer-events:
    none;
}


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

  height:
    100svh;
}


/* ==========================================================================
   FINAL DESIGN
   ========================================================================== */

.project-vince
.vince-final {
  padding-top:
    var(--vince-section-pad);
}


.project-vince
.vince-final__title {
  max-width:
    1000px;

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

  color:
    var(--vince-ink);

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


.project-vince
.vince-final__grid {
  display:
    grid;

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

  gap:
    clamp(18px, 2vw, 28px);

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


.project-vince
.vince-final__visual {
  overflow:
    hidden;

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

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


.project-vince .vince-final__visual img,
.project-vince .vince-final__visual video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.project-vince .vince-final__visual:nth-child(2) .vince-final__video {
  transform: scale(1.25);
  transform-origin: center;
}


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

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

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


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

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

  color:
    var(--vince-ink);

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


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

  font-size:
    1.12em;

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -.035em;
}


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

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

  overflow:
    hidden;

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

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


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

  height:
    auto;
}


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

.project-vince
.next-project {
  position: relative;
  width: 100%;
  height: 240svh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--vince-bg);
  color: var(--vince-ink);
  --next-progress: 0;
}

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

.project-vince
.next-project__inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--vince-bg);
}

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

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

  top:
    50%;

  left:
    50%;

  z-index:
    4;

  width:
    min(92vw, 1200px);

  max-width:
    1200px;

  margin:
    0;

  color:
    var(--vince-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;
}

.project-vince
.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(--vince-radius) * (1 - var(--next-progress)));
  background: var(--vince-dark);
  transform: translate(-50%, -50%);
  will-change: width, height, border-radius;
}

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

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

.project-vince
.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-vince
.next-project__progress-fill {
  display: block;
  width: calc(var(--next-progress) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--vince-accent);
}

.project-vince
.next-project.is-complete
.next-project__media {
  width: 100vw;
  height: 100svh;
  border-radius: 0;
}

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

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


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

@media (min-width: 1400px) {

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


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


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


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


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

    padding:
      9px
      15px;

    font-size:
      15px;
  }

}


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

@media (max-width: 1200px) {

  .project-vince
  .vince-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-vince
  .vince-solution-story__panel {
    grid-template-columns:
      minmax(240px, .75fr)
      minmax(0, 1.25fr);

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

}


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

@media (max-width: 1050px) {

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


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

    gap:
      28px;
  }


  .project-vince
  .vince-hero__meta-item--mentor {
    grid-column:
      span 2;
  }


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


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

    padding-bottom:
      28px;
  }


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


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


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

    gap:
      36px;
  }


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


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



  .project-vince
  .next-project__title {
    font-size: clamp(120px, 20vw, 250px);
  }

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

}


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

@media (max-width: 900px) {

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

    column-gap:
      34px;
  }


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


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


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


  .project-vince
  .vince-research {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


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

    gap:
      28px;
  }

}


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

@media (max-width: 760px) {

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

    --vince-radius:
      14px;
  }


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

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


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


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

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


  /* HERO */

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

    padding-bottom:
      52px;
  }


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

    line-height:
      .9;

    text-align:
      left;
  }


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

    gap:
      26px
      18px;

    margin-top:
      36px;
  }


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


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


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


  /* OVERVIEW */

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

    margin:
      0;
  }


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


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

    line-height:
      1.55;
  }


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

    gap:
      18px;

    margin-top:
      36px;
  }


  /* CHALLENGE */

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

    gap:
      18px;
  }


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

    gap:
      18px;

    margin-top:
      24px;
  }


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

    line-height:
      1.55;
  }


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

    line-height:
      1.17;
  }


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


  /* APPROACH */

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

    line-height:
      1.17;
  }


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

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

    line-height:
      1;
  }


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

    font-size:
      13px;
  }


  .project-vince
  .vince-research {
    grid-template-columns:
      1fr;

    gap:
      38px;

    margin-top:
      42px;

    padding-top:
      32px;
  }


  /* OUTCOME */

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

    gap:
      14px
      18px;

    padding:
      30px
      0;
  }


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

    font-size:
      14px;
  }


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

    line-height:
      1.18;
  }


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

    font-size:
      15px;

    line-height:
      1.55;
  }


  /* SOLUTION */

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

    padding-top:
      52px;

    padding-bottom:
      52px;

    box-sizing:
      border-box;
  }


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

    width:
      100%;

    height:
      auto;

    overflow:
      visible;
  }


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

    width:
      100%;

    max-width:
      none;

    height:
      auto;

    margin-inline:
      0;

    padding:
      0 20px;

    box-sizing:
      border-box;
  }


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

    margin:
      0 0 42px;
  }


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

    font-size:
      11px;
  }


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

    margin:
      0;

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

    line-height:
      1.17;
  }


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

    width:
      100%;

    gap:
      54px;

    overflow:
      visible;
  }


  .project-vince
  .vince-solution-story__panel,
  .project-vince
  .vince-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-vince
  .vince-solution-story__copy {
    width:
      100%;

    max-width:
      none;
  }


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

    font-size:
      11px;
  }


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

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

    line-height:
      1.18;
  }


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

    margin-top:
      16px;

    font-size:
      15px;

    line-height:
      1.55;
  }


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

    aspect-ratio:
      16 / 9;

    height:
      auto;

    margin:
      0;

    overflow:
      hidden;

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


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

    width:
      100%;

    height:
      100%;

    margin:
      0;

    border-radius:
      inherit;

    object-fit:
      cover;

    object-position:
      center;
  }


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


  /* FINAL */

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

    line-height:
      1.17;
  }


  .project-vince
  .vince-final__grid {
    grid-template-columns:
      1fr;

    margin-top:
      30px;
  }


  /* REFLECTION */

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

    line-height:
      1.14;
  }


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

    font-size:
      15px;

    line-height:
      1.55;
  }


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



  /* NEXT PROJECT */

  .project-vince
  .next-project {
    height: 200svh;
    padding: 0;
  }

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

  .project-vince
  .next-project__media {
    width: calc(70vw + var(--next-progress) * 30vw);
    height: calc(38vh + var(--next-progress) * 62vh);
  }

  .project-vince
  .next-project__eyebrow {
    top: 42px;
    font-size: 11px;
  }

  .project-vince
  .next-project__scroll {
    bottom: 46px;
    font-size: 10px;
  }

  .project-vince
  .next-project__progress {
    width: calc(100vw - 40px);
    bottom: 20px;
    height: 3px;
  }

}


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

@media (max-width: 520px) {

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


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

    gap:
      24px;
  }


  .project-vince
  .vince-hero__meta-item:first-child,
  .project-vince
  .vince-hero__meta-item--mentor {
    grid-column:
      auto;
  }


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

    column-gap:
      14px;
  }


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



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

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

}


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

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

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

    height:
      auto;

    overflow:
      visible;
  }


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

    height:
      auto;
  }


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

    gap:
      54px;

    overflow:
      visible;
  }


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

    inset:
      auto;

    display:
      grid;
  }


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



  .project-vince
  .next-project {
    height: 100svh;
    --next-progress: 1;
  }

  .project-vince
  .next-project__sticky {
    position: relative;
    top: auto;
  }

  .project-vince
  .next-project__media {
    width: 100vw;
    height: 100svh;
    border-radius: 0;
    transform: translate(-50%, -50%);
  }

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

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

}