/* ==========================================================================
   EQUINE INTEGRATION
   ========================================================================== */


/* ==========================================================================
   PAGE
   ========================================================================== */

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

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

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

  background:
    var(--equine-bg);

  color:
    var(--equine-ink);

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


.project-equine main {
  width:
    100%;

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


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

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

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

  box-sizing:
    border-box;
}


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

  margin:
    0;

  color:
    var(--equine-accent);

  font-family:
    "Cormorant",
    serif;

  font-style:
    normal;

  font-weight:
    300;

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

  line-height:
    .84;

  letter-spacing:
    -.055em;

  text-align:
    center;

  white-space:
    nowrap;
}


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

.project-equine .equine-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-equine .equine-hero__meta-item {
  min-width:
    0;
}


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

  color:
    var(--equine-accent);

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

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

  font-weight:
    400;

  line-height:
    1.25;
}


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

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

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

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

  font-weight:
    400;

  line-height:
    1.45;
}


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

  flex-wrap:
    wrap;

  gap:
    8px;

  max-width:
    290px;
}


.project-equine .equine-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-family:
    "Satoshi",
    system-ui,
    sans-serif;

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

  font-weight:
    400;

  line-height:
    1;

  white-space:
    nowrap;
}


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

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

  width:
    100%;

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

  padding:
    0;

  overflow:
    hidden;

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

  background:
    #174D43;
}


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

  width:
    100%;

  height:
    auto;

  margin:
    0;

  object-fit:
    cover;

  object-position:
    center;
}


/* ==========================================================================
   PROJECT CONTEXT
   ========================================================================== */

.project-equine .equine-context {
  padding-top:
    clamp(64px, 7vw, 104px);

  padding-bottom:
    clamp(58px, 7vw, 100px);
}


.project-equine .equine-context__copy {
  width:
    min(880px, 64%);

  margin-left:
    auto;

  margin-right:
    0;
}


.project-equine .equine-context__title {
  max-width:
    860px;

  margin:
    0
    0
    clamp(22px, 2.5vw, 34px);

  color:
    #171717;

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

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


.project-equine .equine-context__copy p {
  max-width:
    830px;

  margin:
    0 0 18px;

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

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.015em;
}


.project-equine .equine-context__copy p:last-child {
  margin-bottom:
    0;
}


/* ==========================================================================
   WHAT THE PROJECT ESTABLISHED
   ========================================================================== */

.project-equine .equine-established {
  width:
    100%;

  min-height:
    100vh;

  background:
    #174D43;

  color:
    #F2ECEA;
}


.project-equine .equine-established__inner {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-height:
    100vh;

  padding-top:
    clamp(70px, 8vw, 120px);

  padding-bottom:
    clamp(70px, 8vw, 120px);

  box-sizing:
    border-box;
}


.project-equine .equine-established__label {
  margin:
    0
    0
    clamp(50px, 7vw, 90px);

  color:
    rgba(242, 236, 234, .58);

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

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

  font-weight:
    400;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.project-equine .equine-established__grid {
  display:
    grid;

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

  gap:
    clamp(38px, 5vw, 70px);

  width:
    100%;
}


.project-equine .equine-established__item {
  min-width:
    0;
}


.project-equine .equine-established__line {
  width:
    100%;

  height:
    1px;

  margin-bottom:
    clamp(32px, 4vw, 50px);

  background:
    rgba(242, 236, 234, .55);
}


.project-equine .equine-established__number {
  display:
    block;

  margin-bottom:
    clamp(32px, 4vw, 52px);

  color:
    rgba(242, 236, 234, .9);

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

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

  font-weight:
    400;

  line-height:
    1;
}


.project-equine .equine-established__title {
  max-width:
    330px;

  margin:
    0
    0
    clamp(18px, 2vw, 26px);

  color:
    #F2ECEA;

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

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

  font-weight:
    400;

  line-height:
    1.18;

  letter-spacing:
    -.035em;
}


.project-equine .equine-established__description {
  max-width:
    350px;

  margin:
    0;

  color:
    rgba(242, 236, 234, .72);

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


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

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

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


.project-equine .equine-challenge__top {
  display:
    grid;

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

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

  align-items:
    start;
}


.project-equine .equine-challenge__label {
  margin:
    5px
    0
    0;

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

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.project-equine .equine-challenge__content {
  width:
    100%;

  max-width:
    1080px;

  min-width:
    0;
}


.project-equine .equine-challenge__title {
  max-width:
    900px;

  margin:
    0;

  color:
    #171717;

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

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

  font-style:
    normal;

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


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

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

  gap:
    clamp(44px, 8vw, 120px);

  width:
    100%;

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


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

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

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


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

  width:
    100%;

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

  padding:
    0;

  overflow:
    hidden;

  aspect-ratio:
    1.82 / 1;

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

  background:
    #2C405C;
}


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

  width:
    100%;

  height:
    100%;

  margin:
    0;

  border:
    0;

  object-fit:
    cover;

  object-position:
    center;
}


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

.project-equine .equine-approach {

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


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

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

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.project-equine .equine-approach__title {
  max-width:
    1100px;

  margin:
    0;

  color:
    #171717;

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

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

  font-style:
    normal;

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


.project-equine .equine-approach__quote {
  max-width:
    1180px;

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

  padding:
    0;

  border:
    0;

  color:
    #171717;

  font-family:
    "Griffiths",
    serif;

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

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    .98;

  letter-spacing:
    -.035em;
}


.project-equine .equine-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-family:
    "Satoshi",
    system-ui,
    sans-serif;

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

  font-weight:
    400;

  line-height:
    1.5;
}


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

.project-equine .equine-outcome {
  padding-top:
    var(--equine-section-pad);

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

  background:
    #173F38;

  color:
    #FFFFFF;
}


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

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

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


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

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


.project-equine .equine-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, .35);
}


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

  margin:
    5px
    0
    0;

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

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

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

  font-weight:
    400;

  line-height:
    1.2;
}


.project-equine .equine-outcome__title {
  margin:
    0;

  color:
    #FFFFFF;

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

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

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    1.16;

  letter-spacing:
    -.035em;
}


.project-equine .equine-outcome__description {
  max-width:
    44ch;

  margin:
    2px
    0
    0;

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

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


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

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

  width:
    100%;

  margin:
    0;

  padding:
    0;

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


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

  top:
    0;

  z-index:
    2;

  width:
    100%;

  height:
    100svh;

  overflow:
    hidden;

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


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

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


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

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

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


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

  margin:
    0;

  color:
    #171717;

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

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

  font-weight:
    400;

  line-height:
    1.08;

  letter-spacing:
    -.04em;
}


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

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

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

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

  font-weight:
    400;

  line-height:
    1.45;
}


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

  width:
    100%;

  min-height:
    0;

  overflow:
    hidden;
}


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

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(0);
}


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

  max-width:
    490px;

  min-width:
    0;
}


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

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

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


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

  color:
    #171717;

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

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

  font-weight:
    400;

  line-height:
    1.14;

  letter-spacing:
    -.04em;
}


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

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

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

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


.project-equine .equine-solution-story__pills {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    clamp(20px, 2.2vh, 28px);
}


.project-equine .equine-solution-story__pills span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    34px;

  padding:
    7px 13px;

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

  border-radius:
    999px;

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

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

  line-height:
    1;
}


.project-equine .equine-solution-story__details {
  display:
    grid;

  gap:
    12px;

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


.project-equine .equine-solution-story__detail {
  display:
    grid;

  grid-template-columns:
    minmax(120px, .8fr)
    minmax(150px, 1.2fr);

  gap:
    16px;

  color:
    #171717;

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

  font-size:
    clamp(13px, .9vw, 15px);

  line-height:
    1.4;
}


.project-equine .equine-solution-story__detail strong {
  font-weight:
    600;
}


.project-equine .equine-solution-story__detail span {
  color:
    rgba(23, 23, 23, .62);
}


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

  background:
    transparent;
}


.project-equine .equine-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-equine .equine-solution-story__steps {
  position:
    relative;

  z-index:
    0;

  margin-top:
    -100svh;

  pointer-events:
    none;
}


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

  height:
    100svh;
}


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

@media (min-width: 1500px) {

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

    gap:
      clamp(56px, 6vw, 105px);
  }

}


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

@media (max-width: 1050px) {

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

    padding-bottom:
      28px;
  }


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


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


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

    gap:
      36px;
  }


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


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

}


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

@media (max-width: 760px) {

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

    padding-bottom:
      52px;
  }


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

    height:
      auto;

    overflow:
      visible;
  }


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

    height:
      auto;

    padding-top:
      0;

    padding-bottom:
      0;
  }


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


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

    font-size:
      11px;
  }


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

    line-height:
      1.17;
  }


  .project-equine .equine-solution-story__intro-text {
    font-size:
      14px;
  }


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

    gap:
      54px;

    overflow:
      visible;
  }


  .project-equine .equine-solution-story__panel,
  .project-equine .equine-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-equine .equine-solution-story__copy {
    max-width:
      none;
  }


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

    line-height:
      1.18;
  }


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

    font-size:
      15px;

    line-height:
      1.55;
  }


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

    gap:
      3px;
  }


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

    aspect-ratio:
      16 / 9;

    height:
      auto;

    max-height:
      none;

    justify-self:
      stretch;

    overflow:
      hidden;

    border-radius:
      12px;
  }


  .project-equine .equine-solution-story__media {
    width:
      100%;

    height:
      100%;

    object-fit:
      cover;

    border-radius:
      inherit;
  }


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

}


/* ==========================================================================
   NEXT PROJECT
   ========================================================================== */

.project-equine .next-project {
  width:
    100%;

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

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

  box-sizing:
    border-box;
}


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

@media (min-width: 1400px) {

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

  }


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


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


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


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

    padding:
      9px 15px;

    font-size:
      15px;
  }

}


/* ==========================================================================
   SMALL LAPTOP
   ========================================================================== */

@media (max-width: 1200px) {

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

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

}


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

@media (max-width: 1100px) {

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


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


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

    column-gap:
      34px;

    row-gap:
      32px;
  }


  .project-equine
  .equine-hero__meta-item--collaborators {
    grid-column:
      span 2;
  }


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


  .project-equine .equine-hero__meta-label {
    font-size:
      clamp(14px, 1.3vw, 16px);
  }


  .project-equine .equine-hero__meta-value {
    font-size:
      clamp(15px, 1.4vw, 17px);
  }


  .project-equine .equine-hero__pill {
    min-height:
      36px;

    padding:
      8px 13px;

    font-size:
      clamp(13px, 1.2vw, 15px);
  }

}


@media (max-width: 900px) {

  .project-equine .equine-context__copy {
    width:
      82%;
  }


  .project-equine .equine-established__grid {
    gap:
      30px;
  }


  .project-equine .equine-established__title {
    font-size:
      clamp(27px, 4vw, 36px);
  }


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

    column-gap:
      34px;
  }


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


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


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


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


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

    gap:
      26px;
  }


  .project-equine .equine-outcome__title {
    font-size:
      clamp(27px, 3.5vw, 36px);
  }

}


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

@media (max-width: 780px) {

  .project-equine .equine-hero {
    padding-top:
      calc(
        var(--header-h, 84px)
        + 32px
      );
  }


  .project-equine .equine-hero__title {
    font-size:
      clamp(65px, 13vw, 95px);

    line-height:
      .88;

    white-space:
      normal;
  }


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

    gap:
      30px 24px;

    margin-top:
      42px;
  }


  .project-equine
  .equine-hero__meta-item--collaborators {
    grid-column:
      1 / -1;
  }


  .project-equine .equine-hero__expertise {
    max-width:
      100%;
  }


  .project-equine .equine-hero__meta-label {
    font-size:
      15px;
  }


  .project-equine .equine-hero__meta-value {
    font-size:
      16px;
  }


  .project-equine .equine-hero__pill {
    min-height:
      36px;

    padding:
      8px 13px;

    font-size:
      14px;
  }

}


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

@media (max-width: 700px) {

  .project-equine .equine-context {
    padding-top:
      46px;

    padding-bottom:
      52px;
  }


  .project-equine .equine-context__copy {
    width:
      100%;

    margin:
      0;
  }


  .project-equine .equine-context__title {
    margin-bottom:
      20px;

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

    line-height:
      1.16;
  }


  .project-equine .equine-context__copy p {
    margin-bottom:
      16px;

    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-equine .equine-established {
    min-height:
      auto;
  }


  .project-equine .equine-established__inner {
    min-height:
      auto;

    padding-top:
      60px;

    padding-bottom:
      60px;
  }


  .project-equine .equine-established__label {
    margin-bottom:
      46px;
  }


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

    gap:
      54px;
  }


  .project-equine .equine-established__line {
    margin-bottom:
      26px;
  }


  .project-equine .equine-established__number {
    margin-bottom:
      24px;

    font-size:
      14px;
  }


  .project-equine .equine-established__title {
    max-width:
      100%;

    margin-bottom:
      16px;

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


  .project-equine .equine-established__description {
    max-width:
      520px;

    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-equine .equine-challenge {
    padding-top:
      52px;

    padding-bottom:
      52px;
  }


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

    gap:
      20px;
  }


  .project-equine .equine-challenge__label {
    margin:
      0;

    font-size:
      11px;
  }


  .project-equine .equine-challenge__content {
    max-width:
      none;
  }


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

    line-height:
      1.17;
  }


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

    gap:
      18px;

    margin-top:
      24px;
  }


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

    line-height:
      1.55;
  }


  .project-equine .equine-challenge__visual {
    width:
      100%;

    margin:
      30px
      0
      0;

    aspect-ratio:
      1.2 / 1;

    border-radius:
      12px;
  }


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

    padding-bottom:
      52px;
  }


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

    font-size:
      11px;
  }


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

    line-height:
      1.17;
  }


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

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

    line-height:
      1;
  }


  .project-equine .equine-approach__quote br {
    display:
      none;
  }


  .project-equine .equine-approach__methods {
    gap:
      5px;

    margin-top:
      22px;

    font-size:
      13px;
  }


  .project-equine .equine-outcome {
    padding-top:
      52px;

    padding-bottom:
      52px;
  }


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

    font-size:
      11px;
  }


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

    gap:
      16px 18px;

    padding:
      30px 0;
  }


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

    font-size:
      14px;
  }


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

    line-height:
      1.18;
  }


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

    margin-top:
      4px;

    font-size:
      15px;

    line-height:
      1.55;
  }

}


/* ==========================================================================
   AT A GLANCE
   ========================================================================== */

.project-equine .equine-glance {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(280px, .75fr);

  gap:
    clamp(48px, 7vw, 110px);

  align-items:
    center;

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

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


.project-equine .equine-glance__visual {
  position:
    relative;

  width:
    100%;

  margin:
    0;

  padding:
    0;

  overflow:
    hidden;

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

  background:
    #DCEBF0;
}


.project-equine .equine-glance__visual img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  margin:
    0;

  object-fit:
    cover;

  object-position:
    center;
}


.project-equine .equine-glance__copy {
  max-width:
    470px;
}


.project-equine .equine-glance__eyebrow {
  margin:
    0
    0
    clamp(18px, 2vw, 26px);

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

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.project-equine .equine-glance__title {
  margin:
    0;

  color:
    #171717;

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

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

  font-style:
    normal;

  font-weight:
    500;

  line-height:
    1.15;

  letter-spacing:
    -.04em;
}


.project-equine .equine-glance__description {
  max-width:
    38ch;

  margin:
    clamp(18px, 2vw, 26px)
    0
    0;

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

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


/* ==========================================================================
   DATA WITH CONTEXT
   ========================================================================== */

.project-equine .equine-data-context {
  padding-top:
    var(--equine-section-pad);

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


.project-equine .equine-data-context__head {
  max-width:
    1050px;
}


.project-equine .equine-data-context__eyebrow {
  margin:
    0
    0
    clamp(20px, 2.5vw, 30px);

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

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.project-equine .equine-data-context__title {
  max-width:
    960px;

  margin:
    0;

  color:
    #171717;

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

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

  font-style:
    normal;

  font-weight:
    500;

  line-height:
    1.13;

  letter-spacing:
    -.04em;
}


.project-equine .equine-data-context__visual {
  position:
    relative;

  width:
    100%;

  margin:
    clamp(36px, 4vw, 56px)
    0
    0;

  padding:
    0;

  overflow:
    hidden;

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

  background:
    #DCEBE6;
}


.project-equine .equine-data-context__visual img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  margin:
    0;

  object-fit:
    cover;

  object-position:
    center;
}


.project-equine .equine-data-context__columns {
  display:
    grid;

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

  gap:
    clamp(48px, 8vw, 120px);

  margin-top:
    clamp(30px, 4vw, 48px);
}


.project-equine .equine-data-context__item {
  max-width:
    520px;
}


.project-equine .equine-data-context__item h3 {
  margin:
    0
    0
    10px;

  color:
    #171717;

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    -.015em;
}


.project-equine .equine-data-context__item p {
  margin:
    0;

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

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

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

  font-weight:
    400;

  line-height:
    1.55;

  letter-spacing:
    -.01em;
}


/* ==========================================================================
   IMPORTANT UPDATES
   ========================================================================== */

.project-equine .equine-updates {
  padding-top:
    var(--equine-section-pad);

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


.project-equine .equine-updates__top {
  display:
    grid;

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

  gap:
    clamp(48px, 7vw, 110px);

  align-items:
    center;
}


.project-equine .equine-updates__copy {
  max-width:
    430px;
}


.project-equine .equine-updates__eyebrow {
  margin:
    0
    0
    clamp(18px, 2vw, 26px);

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

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.project-equine .equine-updates__title {
  margin:
    0;

  color:
    #171717;

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

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

  font-style:
    normal;

  font-weight:
    500;

  line-height:
    1.15;

  letter-spacing:
    -.04em;
}


.project-equine .equine-updates__description {
  max-width:
    38ch;

  margin:
    clamp(18px, 2vw, 26px)
    0
    0;

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

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


.project-equine .equine-updates__visual {
  position:
    relative;

  width:
    100%;

  margin:
    0;

  padding:
    0;

  overflow:
    hidden;

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

  background:
    transparent;
}


.project-equine .equine-updates__visual-video {
  display:
    block;

  width:
    100%;

  height:
    auto;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    inherit;

  object-fit:
    contain;

  object-position:
    center;
}


.project-equine .equine-updates__video-wrap {
  position:
    relative;

  width:
    100%;

  margin:
    clamp(48px, 6vw, 82px)
    0
    0;

  padding:
    0;

  overflow:
    hidden;

  background:
    transparent;
}


.project-equine .equine-updates__video {
  display:
    block;

  width:
    100%;

  height:
    auto;

  margin:
    0;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  object-fit:
    contain;

  object-position:
    center;
}


/* ==========================================================================
   EXTENDING THE ECOSYSTEM
   ========================================================================== */

.project-equine .equine-ecosystem {
  padding-top:
    var(--equine-section-pad);

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


.project-equine .equine-ecosystem__intro {
  width:
    100%;

  max-width:
    1180px;
}


.project-equine .equine-ecosystem__label {
  margin:
    0
    0
    clamp(28px, 3vw, 42px);

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

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.project-equine .equine-ecosystem__title {
  max-width:
    1100px;

  margin:
    0;

  color:
    #171717;

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

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

  font-style:
    normal;

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


.project-equine .equine-ecosystem__lead {
  margin:
    clamp(16px, 2vw, 24px)
    0
    0;

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

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

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

  font-weight:
    400;

  line-height:
    1.45;
}


.project-equine .equine-ecosystem__question {
  max-width:
    1100px;

  margin:
    clamp(14px, 1.5vw, 20px)
    0
    0;

  color:
    #171717;

  font-family:
    "Griffiths",
    serif;

  font-size:
    clamp(48px, 5.2vw, 80px);

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -.035em;
}


.project-equine .equine-ecosystem__flow {
  position:
    relative;

  display:
    grid;

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

  gap:
    clamp(20px, 2.5vw, 34px);

  width:
    100%;

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


.project-equine .equine-ecosystem__line {
  position:
    absolute;

  z-index:
    0;

  top:
    50%;

  left:
    4%;

  right:
    4%;

  height:
    1px;

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

  transform:
    translateY(-50%);
}


.project-equine .equine-ecosystem__card {
  position:
    relative;

  z-index:
    1;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  min-height:
    clamp(150px, 13vw, 190px);

  padding:
    clamp(18px, 2vw, 26px);

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

  border-radius:
    clamp(12px, 1vw, 16px);

  background:
    #FAF8F7;

  box-sizing:
    border-box;
}


.project-equine .equine-ecosystem__card--active {
  border-color:
    #174D43;

  background:
    #174D43;

  color:
    #F2ECEA;
}


.project-equine .equine-ecosystem__number {
  display:
    block;

  margin:
    0;

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

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

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

  font-weight:
    400;

  line-height:
    1;
}


.project-equine
.equine-ecosystem__card--active
.equine-ecosystem__number {
  color:
    rgba(242, 236, 234, .82);
}


.project-equine .equine-ecosystem__card-copy {
  margin-top:
    28px;
}


.project-equine .equine-ecosystem__card-copy h3 {
  margin:
    0;

  color:
    #171717;

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

  font-size:
    clamp(17px, 1.3vw, 21px);

  font-weight:
    400;

  line-height:
    1.25;

  letter-spacing:
    -.02em;
}


.project-equine .equine-ecosystem__card-copy p {
  margin:
    5px
    0
    0;

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

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

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

  font-weight:
    400;

  line-height:
    1.35;
}


.project-equine
.equine-ecosystem__card--active
.equine-ecosystem__card-copy h3 {
  color:
    #F2ECEA;
}


.project-equine
.equine-ecosystem__card--active
.equine-ecosystem__card-copy p {
  color:
    rgba(242, 236, 234, .58);
}


/* ==========================================================================
   SMARTWATCH CONCEPT
   ========================================================================== */

.project-equine .equine-watch {
  width:
    100%;

  background:
    #174D43;

  color:
    #F2ECEA;
}


.project-equine .equine-watch__inner {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, .95fr);

  width:
    100%;

  margin:
    0;

  padding:
    0;

  align-items:
    stretch;

  box-sizing:
    border-box;
}


.project-equine .equine-watch__visual {
  position:
    relative;

  width:
    100%;

  margin:
    0;

  padding:
    0;

  overflow:
    hidden;
}


.project-equine .equine-watch__visual img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  margin:
    0;

  padding:
    0;

  object-fit:
    contain;

  object-position:
    left top;
}


.project-equine .equine-watch__copy {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  width:
    100%;

  max-width:
    none;

  padding:
    clamp(48px, 6vw, 96px)
    clamp(42px, 7vw, 120px);

  box-sizing:
    border-box;
}


.project-equine .equine-watch__eyebrow {
  margin:
    0
    0
    clamp(20px, 2.5vw, 32px);

  color:
    rgba(242, 236, 234, .55);

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.project-equine .equine-watch__title {
  max-width:
    560px;

  margin:
    0;

  color:
    #F2ECEA;

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

  font-size:
    clamp(36px, 3.8vw, 58px);

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    1.14;

  letter-spacing:
    -.04em;
}


.project-equine .equine-watch__title span {
  color:
    #84C9B5;
}


.project-equine .equine-watch__description {
  max-width:
    36ch;

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

  color:
    rgba(242, 236, 234, .74);

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.012em;
}


/* ==========================================================================
   TRAINING JOURNEY
   ========================================================================== */

.project-equine .equine-training {
  padding-top:
    var(--equine-section-pad);

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


.project-equine .equine-training__layout {
  display:
    grid;

  grid-template-columns:
    minmax(230px, .5fr)
    minmax(0, 1.5fr);

  gap:
    clamp(46px, 6vw, 92px);

  align-items:
    start;
}


.project-equine .equine-training__sticky {
  position:
    sticky;

  top:
    calc(
      var(--visible-header-h, 0px)
      + 32px
    );

  align-self:
    start;

  width:
    100%;
}


.project-equine .equine-training__phase-copy {
  width:
    100%;

  border-bottom:
    1px solid
    rgba(23, 23, 23, .5);
}


.project-equine .equine-training__phase-title {
  margin:
    0;

  padding:
    clamp(14px, 1.5vw, 20px)
    0;

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

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

  font-size:
    clamp(21px, 1.7vw, 27px);

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    1.2;

  letter-spacing:
    -.025em;
}


.project-equine
.equine-training__phase-copy:first-child
.equine-training__phase-title {
  padding-top:
    0;
}


.project-equine
.equine-training__phase-copy.is-active
.equine-training__phase-title {
  color:
    #171717;

  font-weight:
    600;
}


.project-equine .equine-training__phase-text {
  display:
    none;
}


.project-equine
.equine-training__phase-copy.is-active
.equine-training__phase-text {
  display:
    block;
}


.project-equine .equine-training__phase-text p {
  margin:
    0
    0
    clamp(18px, 2vw, 26px);

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

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

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

  font-weight:
    400;

  line-height:
    1.48;

  letter-spacing:
    -.015em;
}


.project-equine
.equine-training__phase-text
p + p {
  margin-top:
    clamp(20px, 2.5vw, 32px);
}


.project-equine .equine-training__stages {
  display:
    grid;

  gap:
    clamp(48px, 6vw, 82px);

  width:
    100%;
}


.project-equine .equine-training__stage {
  width:
    100%;
}


.project-equine .equine-training__mobile-copy {
  display:
    none;
}


.project-equine .equine-training__grid {
  display:
    grid;

  width:
    100%;

  gap:
    clamp(18px, 2vw, 26px);
}


.project-equine .equine-training__grid--before {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


.project-equine .equine-training__grid--during {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


.project-equine
.equine-training__grid--during
.equine-training__figure--wide {
  grid-column:
    1 / -1;
}


.project-equine .equine-training__grid--after {
  grid-template-columns:
    minmax(0, 1fr);
}


.project-equine .equine-training__figure {
  position:
    relative;

  width:
    100%;

  margin:
    0;

  padding:
    0;

  overflow:
    hidden;

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

  background:
    #2C405C;
}


.project-equine .equine-training__figure--green {
  background:
    #174D43;
}


.project-equine .equine-training__figure img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  margin:
    0;

  padding:
    0;

  object-fit:
    cover;

  object-position:
    center;
}


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

.project-equine .equine-reflection {

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


.project-equine .equine-reflection__label {
  margin:
    0
    0
    clamp(28px, 3vw, 40px);

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

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

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

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


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

  margin:
    0;

  color:
    #171717;

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

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

  font-style:
    normal;

  font-weight:
    500;

  line-height:
    1.12;

  letter-spacing:
    -.04em;
}


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

  font-size:
    1.12em;

  font-style:
    normal;

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -.035em;
}


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

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

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

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

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

  font-weight:
    400;

  line-height:
    1.5;

  letter-spacing:
    -.015em;
}


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

  width:
    100%;

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

  padding:
    0;

  overflow:
    hidden;

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

  background:
    #DCEBE6;
}


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

  width:
    100%;

  height:
    auto;

  margin:
    0;

  object-fit:
    cover;

  object-position:
    center;
}


/* ==========================================================================
   RESPONSIVE — EQUINE SPECIAL SECTIONS
   ========================================================================== */

@media (max-width: 900px) {

  .project-equine .equine-glance {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(240px, .85fr);

    gap:
      40px;
  }


  .project-equine .equine-glance__title,
  .project-equine .equine-updates__title {
    font-size:
      clamp(29px, 4vw, 40px);
  }


  .project-equine .equine-data-context__title,
  .project-equine .equine-ecosystem__title {
    font-size:
      clamp(30px, 4.5vw, 42px);
  }


  .project-equine .equine-data-context__columns {
    gap:
      40px;
  }


  .project-equine .equine-updates__top {
    grid-template-columns:
      minmax(220px, .82fr)
      minmax(0, 1.18fr);

    gap:
      40px;
  }


  .project-equine .equine-updates__copy {
    max-width:
      390px;
  }


  .project-equine .equine-ecosystem__question {
    font-size:
      clamp(44px, 6vw, 62px);
  }


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

    gap:
      22px;
  }


  .project-equine .equine-ecosystem__line {
    display:
      none;
  }


  .project-equine .equine-watch__inner {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
  }


  .project-equine .equine-watch__copy {
    padding:
      42px
      36px;
  }


  .project-equine .equine-watch__title {
    font-size:
      clamp(31px, 4.5vw, 44px);
  }


  .project-equine .equine-training__layout {
    grid-template-columns:
      minmax(200px, .6fr)
      minmax(0, 1.4fr);

    gap:
      36px;
  }


  .project-equine .equine-training__sticky {
    top:
      calc(
        var(--visible-header-h, 0px)
        + 24px
      );
  }


  .project-equine .equine-training__phase-title {
    font-size:
      clamp(19px, 2.2vw, 23px);
  }


  .project-equine .equine-training__phase-text p {
    font-size:
      clamp(15px, 1.5vw, 17px);
  }


  .project-equine .equine-reflection__title {
    font-size:
      clamp(32px, 4.8vw, 46px);
  }


  .project-equine .equine-reflection__description {
    max-width:
      820px;

    font-size:
      16px;
  }

}


/* ==========================================================================
   MOBILE — EQUINE SPECIAL SECTIONS
   ========================================================================== */

@media (max-width: 700px) {

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

    gap:
      28px;

    padding-top:
      52px;

    padding-bottom:
      52px;
  }


  .project-equine .equine-glance__copy {
    order:
      1;

    max-width:
      none;
  }


  .project-equine .equine-glance__visual {
    order:
      2;

    width:
      100%;

    border-radius:
      12px;
  }


  .project-equine .equine-glance__eyebrow,
  .project-equine .equine-data-context__eyebrow,
  .project-equine .equine-updates__eyebrow {
    margin-bottom:
      16px;

    font-size:
      11px;
  }


  .project-equine .equine-glance__title,
  .project-equine .equine-updates__title {
    font-size:
      clamp(28px, 7vw, 34px);

    line-height:
      1.18;
  }


  .project-equine .equine-glance__description,
  .project-equine .equine-updates__description {
    max-width:
      none;

    margin-top:
      18px;

    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-equine .equine-data-context,
  .project-equine .equine-updates,
  .project-equine .equine-ecosystem,
  .project-equine .equine-training,
  .project-equine .equine-reflection {
    padding-top:
      52px;

    padding-bottom:
      52px;
  }


  .project-equine .equine-data-context__title,
  .project-equine .equine-ecosystem__title {
    font-size:
      clamp(29px, 7.5vw, 36px);

    line-height:
      1.17;
  }


  .project-equine .equine-data-context__visual {
    margin-top:
      30px;

    border-radius:
      12px;
  }


  .project-equine .equine-data-context__columns {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      26px;

    margin-top:
      26px;
  }


  .project-equine .equine-data-context__item {
    max-width:
      none;
  }


  .project-equine .equine-data-context__item h3 {
    font-size:
      15px;
  }


  .project-equine .equine-data-context__item p {
    font-size:
      14px;

    line-height:
      1.55;
  }


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

    gap:
      28px;
  }


  .project-equine .equine-updates__copy {
    max-width:
      none;
  }


  .project-equine .equine-updates__video-wrap {
    margin-top:
      34px;
  }


  .project-equine .equine-ecosystem__label {
    margin-bottom:
      20px;

    font-size:
      11px;
  }


  .project-equine .equine-ecosystem__lead {
    margin-top:
      16px;

    font-size:
      15px;
  }


  .project-equine .equine-ecosystem__question {
    margin-top:
      14px;

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

    line-height:
      1;
  }


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

    gap:
      14px;

    margin-top:
      30px;
  }


  .project-equine .equine-ecosystem__card {
    min-height:
      132px;

    padding:
      18px;

    border-radius:
      12px;
  }


  .project-equine .equine-ecosystem__card-copy {
    margin-top:
      24px;
  }


  .project-equine .equine-ecosystem__number {
    font-size:
      15px;
  }


  .project-equine .equine-ecosystem__card-copy h3 {
    font-size:
      18px;
  }


  .project-equine .equine-ecosystem__card-copy p {
    font-size:
      12px;
  }


  .project-equine .equine-watch__inner {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .project-equine .equine-watch__visual {
    width:
      100%;
  }


  .project-equine .equine-watch__visual img {
    width:
      100%;

    height:
      auto;

    object-fit:
      contain;
  }


  .project-equine .equine-watch__copy {
    padding:
      40px
      24px
      48px;
  }


  .project-equine .equine-watch__eyebrow {
    margin-bottom:
      18px;

    font-size:
      11px;
  }


  .project-equine .equine-watch__title {
    max-width:
      none;

    font-size:
      clamp(30px, 8vw, 38px);

    line-height:
      1.16;
  }


  .project-equine .equine-watch__title br {
    display:
      none;
  }


  .project-equine .equine-watch__description {
    max-width:
      none;

    margin-top:
      20px;

    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-equine .equine-training__layout {
    display:
      block;
  }


  .project-equine .equine-training__sticky {
    display:
      none;
  }


  .project-equine .equine-training__stages {
    display:
      grid;

    gap:
      clamp(52px, 10vw, 72px);

    width:
      100%;
  }


  .project-equine .equine-training__stage {
    display:
      block;

    width:
      100%;
  }


  .project-equine .equine-training__mobile-copy {
    display:
      block;

    width:
      100%;

    margin-bottom:
      clamp(26px, 6vw, 36px);
  }


  .project-equine .equine-training__mobile-title {
    margin:
      0
      0
      16px;

    color:
      #171717;

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

    font-size:
      clamp(24px, 6vw, 30px);

    font-weight:
      600;

    line-height:
      1.2;

    letter-spacing:
      -.025em;
  }


  .project-equine .equine-training__mobile-text {
    max-width:
      42ch;
  }


  .project-equine .equine-training__mobile-text p {
    margin:
      0
      0
      18px;

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

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

    font-size:
      15px;

    font-weight:
      400;

    line-height:
      1.55;

    letter-spacing:
      -.012em;
  }


  .project-equine
  .equine-training__mobile-text
  p:last-child {
    margin-bottom:
      0;
  }


  .project-equine
  .equine-training__mobile-text
  p + p {
    margin-top:
      18px;
  }


  .project-equine .equine-training__grid--before,
  .project-equine .equine-training__grid--during {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      12px;
  }


  .project-equine
  .equine-training__grid--during
  .equine-training__figure--wide {
    grid-column:
      1 / -1;
  }


  .project-equine .equine-training__grid--after {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .project-equine .equine-training__figure {
    border-radius:
      12px;
  }


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

    font-size:
      11px;
  }


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

    line-height:
      1.17;
  }


  .project-equine .equine-reflection__accent {
    font-size:
      1.1em;
  }


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

    font-size:
      15px;

    line-height:
      1.55;
  }


  .project-equine .equine-reflection__visual {
    margin-top:
      32px;

    border-radius:
      12px;
  }

}


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

@media (max-width: 600px) {

  .project-equine {
    --equine-section-pad:
      24px;
  }


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

  }


  .project-equine .equine-hero__title {
    font-size:
      clamp(56px, 16vw, 78px);

    line-height:
      .9;

    letter-spacing:
      -.045em;

    text-align:
      left;

    white-space:
      normal;
  }


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

    gap:
      26px 18px;

    margin-top:
      38px;
  }


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


  .project-equine .equine-hero__meta-label {
    margin-bottom:
      7px;

    font-size:
      14px;
  }


  .project-equine .equine-hero__meta-value {
    font-size:
      15px;

    line-height:
      1.4;
  }


  .project-equine .equine-hero__expertise {
    gap:
      7px;

    max-width:
      none;
  }


  .project-equine .equine-hero__pill {
    min-height:
      34px;

    padding:
      7px 12px;

    font-size:
      13px;
  }


  .project-equine .equine-hero__cover {
    margin-top:
      34px;

    border-radius:
      12px;
  }


  .project-equine .next-project {
    padding-top:
      var(--equine-section-pad);

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

}


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

@media (max-width: 380px) {

  .project-equine .equine-hero__title {
    font-size:
      clamp(50px, 15vw, 64px);
  }


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


  .project-equine
  .equine-hero__meta-item:first-child,
  .project-equine
  .equine-hero__meta-item--collaborators {
    grid-column:
      auto;
  }

}


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

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

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

}

/* ==========================================================================
   NEXT PROJECT — SCROLL TAKEOVER
   Added after the original responsive rules so it safely overrides
   the previous next-project card spacing without affecting the rest
   of the Equine case study.
   ========================================================================== */

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

.project-equine .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-equine .next-project__inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--equine-bg);
}

.project-equine .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-equine .next-project__title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: max-content;
  max-width: none;
  margin: 0;
  color: var(--equine-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;
}

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

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

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

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

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

@media (max-width: 1100px) {
  .project-equine .next-project__title {
    font-size: clamp(130px, 23vw, 280px);
  }

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

@media (max-width: 700px) {
  .project-equine .next-project {
    height: 200svh;
    padding: 0;
  }

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

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

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

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

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

@media (max-width: 520px) {
  .project-equine .next-project__title {
    font-size: clamp(82px, 31vw, 126px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .project-equine .next-project {
    height: 100svh;
    --next-progress: 1;
  }

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

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

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

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