/* =========================================================
   RDS v2 — Our Work
   ========================================================= */

.work-hero {
  overflow: hidden;

  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(4rem, 6vw, 5.5rem);

  color: #fff;

  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(0,174,239,.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 8% 95%,
      rgba(239,183,53,.13),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #071323,
      #0a213d
    );
}


.work-hero__grid {
  display: grid;

  grid-template-columns:
    minmax(0,.92fr)
    minmax(32rem,1.08fr);

  align-items: center;

  gap: clamp(3rem,6vw,6rem);
}


.work-hero .eyebrow,
.work-next .eyebrow {
  color: #efb735;
}


.work-hero h1 {
  max-width: 11.5ch;

  margin: 0 0 1.25rem;

  color: #fff;

  font-size:
    clamp(
      3.6rem,
      4.9vw,
      5rem
    );

  line-height: .95;

  letter-spacing: -.055em;
}


.work-hero__lead {
  max-width: 41rem;

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

  font-size: 1.04rem;

  line-height: 1.62;
}


.work-hero__actions,
.work-next__actions {
  display: flex;

  flex-wrap: wrap;

  gap: .75rem;

  margin-top: 1.5rem;
}


.work-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: .82rem 1.05rem;

  border-radius: 999px;

  font-size: .78rem;
  font-weight: 900;

  text-decoration: none;
}


.work-button--primary {
  color: #071323;

  background: #efb735;
}


.work-button--secondary,
.work-button--outline {
  color: #fff;

  border:
    1px solid
    rgba(255,255,255,.36);
}


/* =========================================================
   Hero project stack
   ========================================================= */

.work-proof-stack {
  position: relative;

  display: grid;

  gap: .75rem;

  max-width: 38rem;

  margin-inline: auto;
}


.work-proof-card {
  position: relative;

  display: grid;

  gap: .32rem;

  padding: 1.15rem 1.3rem;

  color: #071323;

  background:
    rgba(255,255,255,.97);

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

  border-radius: .9rem;

  box-shadow:
    0 1.4rem 3rem
    rgba(0,0,0,.22);

  will-change: transform;
}


.work-proof-card > span {
  color: #00718f;

  font-size: .55rem;
  font-weight: 900;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.work-proof-card strong {
  font-size: 1rem;
}


.work-proof-card p {
  max-width: 32rem;

  margin: 0;

  color: #5d6c7d;

  font-size: .74rem;

  line-height: 1.5;
}


.work-proof-card small {
  justify-self: start;

  margin-top: .35rem;

  padding: .3rem .45rem;

  color: #07516a;

  background: #e0f2f6;

  border-radius: 999px;

  font-size: .49rem;
  font-weight: 900;

  letter-spacing: .07em;
}


.work-proof-card--live {
  z-index: 3;

  width: 94%;

  justify-self: start;

  animation:
    work-proof-live
    6.3s
    ease-in-out
    infinite;
}


.work-proof-card--client {
  z-index: 2;

  width: 91%;

  justify-self: end;

  animation:
    work-proof-client
    6.8s
    ease-in-out
    infinite
    reverse;
}


.work-proof-card--internal {
  z-index: 1;

  width: 87%;

  justify-self: start;

  animation:
    work-proof-system
    7.2s
    ease-in-out
    infinite;
}


.work-proof-card--client small {
  color: #795408;

  background: #fff0c9;
}


.work-proof-card--internal {
  color: #fff;

  background:
    linear-gradient(
      140deg,
      #0b2c49,
      #071c33
    );

  border-color:
    rgba(100,215,239,.22);
}


.work-proof-card--internal > span {
  color: #64d7ef;
}


.work-proof-card--internal strong {
  color: #fff;
}


.work-proof-card--internal p {
  color:
    rgba(255,255,255,.7);
}


.work-proof-card--internal small {
  color: #071323;

  background: #efb735;
}


/* =========================================================
   Reused homepage portfolio component
   ========================================================= */

.work-page .portfolio-studio {
  padding-top: clamp(4rem,7vw,6rem);
}


.work-page .portfolio-studio__footer {
  margin-top: 2rem;
}


.work-page
.portfolio-studio__footer
.button--portfolio {
  display: none;
}


/* =========================================================
   Evidence standard
   ========================================================= */

.work-evidence {
  padding-block:
    clamp(4rem,7vw,6rem);

  background: #fff;
}


.work-evidence__grid {
  display: grid;

  grid-template-columns:
    minmax(18rem,.75fr)
    minmax(0,1.25fr);

  gap: clamp(3rem,7vw,7rem);

  align-items: start;
}


.work-evidence h2,
.work-next h2 {
  max-width: 13ch;

  margin: 0;

  color: #071323;

  font-size:
    clamp(
      2.6rem,
      4.5vw,
      4.4rem
    );

  line-height: .98;

  letter-spacing: -.05em;
}


.work-evidence__intro {
  max-width: 31rem;

  color: #58687a;

  line-height: 1.65;
}


.work-evidence__cards {
  display: grid;

  gap: .75rem;
}


.work-evidence__cards article {
  display: grid;

  grid-template-columns:
    auto
    1fr;

  gap: 1rem;

  padding: 1.15rem;

  background: #f3f6f9;

  border:
    1px solid
    rgba(7,19,35,.08);

  border-radius: .9rem;
}


.work-evidence__cards article > span {
  display: grid;

  width: 2.3rem;
  height: 2.3rem;

  place-items: center;

  color: #071323;

  background: #efb735;

  border-radius: 50%;

  font-size: .63rem;
  font-weight: 900;
}


.work-evidence__cards h3 {
  margin: 0 0 .3rem;

  color: #071323;
}


.work-evidence__cards p {
  margin: 0;

  color: #5b6979;

  font-size: .8rem;

  line-height: 1.5;
}


/* =========================================================
   Closing CTA
   ========================================================= */

.work-next {
  padding-block:
    clamp(4rem,7vw,6rem);

  color: #fff;

  background:
    linear-gradient(
      110deg,
      #07516a,
      #071c35 65%,
      #071323
    );
}


.work-next__grid {
  display: grid;

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

  align-items: center;

  gap: 3rem;
}


.work-next h2 {
  max-width: 15ch;

  color: #fff;
}


.work-next p:not(.eyebrow) {
  max-width: 42rem;

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

  line-height: 1.6;
}


/* =========================================================
   Motion
   ========================================================= */

@keyframes work-proof-live {

  0%,
  100% {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  50% {
    transform:
      translate3d(
        0,
        -7px,
        0
      );
  }

}


@keyframes work-proof-client {

  0%,
  100% {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  50% {
    transform:
      translate3d(
        0,
        6px,
        0
      );
  }

}


@keyframes work-proof-system {

  0%,
  100% {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  50% {
    transform:
      translate3d(
        0,
        -5px,
        0
      );
  }

}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1050px) {

  .work-hero__grid,
  .work-evidence__grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 760px) {

  .work-next__grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .work-hero {
    padding-top: 2.5rem;
  }

  .work-hero h1 {
    max-width: none;

    font-size:
      clamp(
        2.7rem,
        12vw,
        4rem
      );
  }

  .work-proof-card,
  .work-proof-card--live,
  .work-proof-card--client,
  .work-proof-card--internal {
    width: 100%;
  }

}


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

  .work-proof-card {
    animation: none;
  }

}

/* Our Work — final portfolio spacing calibration */

.work-page .portfolio-studio {
  padding-top: clamp(2.5rem, 4vw, 3.75rem);
}

.work-page .portfolio-studio__header {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

@media (max-width: 600px) {

  .work-page .portfolio-studio {
    padding-top: 2.25rem;
  }

}