/* Service cards and process timeline for the final portfolio composition. */
.services {
  padding-top: 38px;
  padding-bottom: 46px;
  background: #07101f;
}

.services .services-head {
  margin: 16px 0 21px;
}

.services .service-list {
  gap: 12px;
}

.services .service-row {
  grid-template-columns: 62px minmax(0, 1fr) clamp(116px, 12vw, 166px);
  gap: clamp(10px, 1.4vw, 22px);
  min-height: 156px;
  padding: 14px 15px;
  border: 1px solid #426198;
  border-radius: 5px;
  background: linear-gradient(125deg, #08172c, #091326);
  color: #f3f6ff;
  box-shadow: inset 0 1px #ffffff0b;
  transition: background .24s ease, color .24s ease, border-color .24s ease,
    box-shadow .24s ease, transform .24s ease;
}

.services .service-row h3 {
  color: inherit;
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1.04;
  margin-bottom: 8px;
}

.services .service-row p {
  color: #aebfda;
  font-size: clamp(10px, .83vw, 12px);
  line-height: 1.45;
  max-width: 265px;
}

.services .service-num {
  color: #84a9ff;
  font-size: clamp(37px, 3.4vw, 50px);
  line-height: 1;
  padding-top: 2px;
}

/* The active light card follows the pointer; motion graphics starts selected. */
.services .service-row:nth-child(2),
.services .service-row:hover {
  background: linear-gradient(122deg, #f0f5ff, #dce7ff);
  border-color: #c8d9ff;
  color: #0a1933;
  box-shadow: 0 0 26px #5d88ff25, inset 0 1px #fff;
  transform: translateY(-2px);
}

.services .service-row:nth-child(2) p,
.services .service-row:hover p {
  color: #455a82;
}

.services .service-row:nth-child(2) .service-num,
.services .service-row:hover .service-num {
  color: #7294ec;
}

.services .service-row:hover h3,
.services .service-row:nth-child(2) h3 {
  color: #0a1933;
}

@supports selector(.service-list:has(.service-row:hover)) {
  .services .service-list:has(.service-row:not(:nth-child(2)):hover) .service-row:nth-child(2) {
    background: linear-gradient(125deg, #08172c, #091326);
    border-color: #426198;
    color: #f3f6ff;
    box-shadow: inset 0 1px #ffffff0b;
    transform: none;
  }

  .services .service-list:has(.service-row:not(:nth-child(2)):hover) .service-row:nth-child(2) h3 {
    color: #f3f6ff;
  }

  .services .service-list:has(.service-row:not(:nth-child(2)):hover) .service-row:nth-child(2) p {
    color: #aebfda;
  }
}

.services .service-art {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  border: 1px solid #8aaeff4d;
  border-radius: 6px;
  background-color: #09162e;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 6px 20px #02091570;
  transform: none;
}

.services .service-art img,
.services .service-mini-track {
  display: none;
}

.services .service-row:nth-child(1) .service-art {
  background-image: url('assets/services/video-editing-photo.jpg');
}

.services .service-row:nth-child(2) .service-art {
  background-image: url('assets/services/motion-graphics-photo.jpg');
}

.services .service-row:nth-child(3) .service-art {
  background-image: url('assets/services/social-short-form-photo.jpg');
}

.services .service-row:nth-child(4) .service-art {
  background-image: url('assets/services/long-form-content-photo.jpg');
}

/* A single active card switches cleanly; moving a card never moves the pointer target. */
.services .service-list .service-row,
.services .service-list .service-row:nth-child(2),
.services .service-list .service-row:hover {
  transform:none;
  background:linear-gradient(125deg,#08172c,#091326);
  border-color:#426198;
  color:#f3f6ff;
  box-shadow:inset 0 1px #ffffff0b;
  transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.services .service-list .service-row p,
.services .service-list .service-row:nth-child(2) p,
.services .service-list .service-row:hover p{color:#aebfda}
.services .service-list .service-row h3,
.services .service-list .service-row:nth-child(2) h3,
.services .service-list .service-row:hover h3{color:#f3f6ff}
.services .service-list .service-row .service-num,
.services .service-list .service-row:nth-child(2) .service-num,
.services .service-list .service-row:hover .service-num{color:#84a9ff}
.services .service-list .service-row.is-active,
.services .service-list .service-row.is-active:hover{
  background:linear-gradient(122deg,#f0f5ff,#dce7ff);
  border-color:#c8d9ff;color:#0a1933;
  box-shadow:0 0 26px #5d88ff25,inset 0 1px #fff;
}
.services .service-list .service-row.is-active h3,
.services .service-list .service-row.is-active:hover h3{color:#0a1933}
.services .service-list .service-row.is-active p,
.services .service-list .service-row.is-active:hover p{color:#455a82}
.services .service-list .service-row.is-active .service-num,
.services .service-list .service-row.is-active:hover .service-num{color:#7294ec}

.services .service-list .service-row{position:relative;isolation:isolate;background:#08172c;overflow:hidden}
.services .service-list .service-row::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(122deg,#f0f5ff,#dce7ff);
  opacity:0;transition:opacity .3s ease;
}
.services .service-list .service-row>*{position:relative;z-index:1}
.services .service-list .service-row.is-active,
.services .service-list .service-row.is-active:hover{background:#08172c}
.services .service-list .service-row.is-active::before{opacity:1}

.process {
  background: linear-gradient(112deg, #dbe5ff 0%, #e7edff 66%, #dce6ff 100%);
  color: #091b39;
  padding-top: 34px;
  padding-bottom: 39px;
}

.process .section-kicker,
.process .section-kicker span,
.process .section-kicker span:hover {
  color: #3d5f9c;
}

.process h2 {
  max-width: 760px;
  line-height: .98;
  margin-top: 27px;
}

.process-wave {
  display: none;
}

.process h2::after {
  content: '';
  display: block;
  width: min(100%, 625px);
  height: 72px;
  margin-top: 20px;
  background: url('assets/services/audio-wave.svg') left center / contain no-repeat;
  filter: drop-shadow(0 0 9px #4a82ff4d);
}

.process .process-grid {
  margin-top: 25px;
  padding-left: 36px;
  border-left-color: #9bb9f1;
}

.process .process-grid > div,
.process .process-grid > div:hover,
.process .process-grid > div.is-visible,
.process .process-grid > div.is-visible:hover {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 10px;
  min-height: 0;
  padding: 0 0 22px 31px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0d2041;
  box-shadow: none;
  transform: none;
}

.process .process-grid > div:last-child {
  padding-bottom: 0;
}

/* The earlier reveal animation could leave a step faded while hovering or scrolling. */
.process .process-grid > div,
.process .process-grid > div.is-visible {
  animation: none !important;
  opacity: 1 !important;
}

.process .process-grid > div::before,
.process .process-grid > div:hover::before {
  top: 4px;
  left: -43px;
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: #3f79fb;
  box-shadow: 0 0 0 5px #dfeaff;
}

.process .process-grid span,
.process .process-grid h3,
.process .process-grid p,
.process .process-grid > div:hover span,
.process .process-grid > div:hover h3,
.process .process-grid > div:hover p {
  color: #0d2041;
  text-shadow: none;
}

.process .process-grid h3 {
  font-size: clamp(19px, 1.55vw, 24px);
  line-height: 1.12;
  margin: 0 0 3px;
}

.process .process-grid p,
.process .process-grid > div:hover p {
  color: #4d6593;
  font-size: clamp(12px, .94vw, 14px);
  line-height: 1.4;
  max-width: 430px;
}

.process .process-grid span {
  font-size: 12px;
  font-weight: 700;
  padding-top: 4px;
}

@media (max-width: 1100px) {
  .services .service-row {
    grid-template-columns: 48px minmax(0, 1fr) 116px;
    gap: 10px;
  }
}

@media (max-width: 800px) {
  .services .service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services .service-row {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 0;
    align-content: start;
    padding: 13px;
  }

  .services .service-row .service-art {
    grid-column: 1 / -1;
    max-height: 150px;
    margin-top: 6px;
  }

  .services .service-row p {
    font-size: 11px;
  }

  .process h2::after {
    height: 56px;
  }
}

@media (max-width: 600px) {
  .services .service-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .services .service-row,
  .services .service-row:hover {
    grid-template-columns: 42px minmax(0, 1fr) 105px;
    align-items: center;
    min-height: 112px;
    padding: 10px;
  }

  .services .service-row .service-art {
    grid-column: 3;
    grid-row: 1;
    max-height: none;
    margin: 0;
  }

  .services .service-row h3 {
    font-size: clamp(17px, 4.6vw, 21px);
  }

  .services .service-row p {
    font-size: 10px;
    line-height: 1.35;
  }

  .services .service-num {
    font-size: 32px;
  }

  .process h2 {
    margin-top: 19px;
  }

  .process h2::after {
    width: 100%;
    height: 44px;
    margin-top: 18px;
  }

  .process .process-grid {
    margin-top: 6px;
    padding-left: 17px;
  }

  .process .process-grid > div,
  .process .process-grid > div:hover,
  .process .process-grid > div.is-visible,
  .process .process-grid > div.is-visible:hover {
    grid-template-columns: 33px minmax(0, 1fr);
    padding: 0 0 18px 14px;
  }

  .process .process-grid > div::before,
  .process .process-grid > div:hover::before {
    left: -24px;
    width: 11px;
    height: 11px;
  }
}

@media (max-width: 390px) {
  .services .service-row,
  .services .service-row:hover {
    grid-template-columns: 32px minmax(0, 1fr) 88px;
    gap: 8px;
  }

  .services .service-row p {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services .service-row {
    transition: none;
  }
}