/* =========================================
   WORK CATEGORIES
   LegacyLogic Brand System
========================================= */

.work-categories {
  padding: 95px 0;
  background: var(--cream);
}


/* SECTION INTRO */

.work-categories .section-eyebrow-block {
  max-width: 760px;
}

.work-categories .section-eyebrow-block h2 {
  margin-top: 10px;

  font-family: 'Fraunces', serif;
  font-size: 2.45rem;
  line-height: 1.15;
  font-weight: 600;

  letter-spacing: -0.025em;

  color: var(--navy);
}

.work-categories .section-eyebrow-block p {
  max-width: 700px;

  font-family: 'Inter', sans-serif;

  font-size: .95rem;
  line-height: 1.7;

  color: var(--ink-soft);
}


/* =========================================
   CARD LIST
========================================= */

.work-category-list {
  display: flex;
  flex-direction: column;

  gap: 18px;
}


/* =========================================
   CARD
========================================= */

.work-category-card {

  position: relative;

  min-height: 150px;

  display: flex;
  align-items: center;

  overflow: hidden;

  padding: 28px 30px 28px 34px;

  background: #fff;

  border: 1px solid rgba(14, 44, 58, .13);

  border-radius: 27px;

  text-decoration: none;

  color: var(--navy);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.work-category-card:hover {

  transform: translateY(-3px);

  border-color: rgba(46, 139, 135, .45);

  box-shadow:
    0 18px 40px rgba(14, 44, 58, .07);
}


/* =========================================
   LARGE NUMBER
========================================= */

.work-number {

  position: absolute;

  left: 18px;
  bottom: -30px;

  font-family: 'Inter', sans-serif;

  font-size: 8rem;

  line-height: .9;

  font-weight: 700;

  letter-spacing: -.09em;

  color: rgba(14, 44, 58, .055);

  pointer-events: none;
}


/* =========================================
   MAIN CONTENT
========================================= */

.work-category-main {

  position: relative;

  z-index: 2;

  flex: 1;

  margin-left: 112px;
}


.work-category-main h3 {

  margin: 0 0 13px;

  font-family: 'Fraunces', serif;

  font-size: 1.85rem;

  line-height: 1.15;

  font-weight: 600;

  letter-spacing: -.02em;

  color: var(--navy);
}


/* =========================================
   TAGS
========================================= */

.work-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}


.work-tags span {

  display: inline-flex;

  align-items: center;

  padding: 7px 12px;

  border: 1px solid rgba(14, 44, 58, .13);

  border-radius: 999px;

  background: #fff;

  font-family: 'Inter', sans-serif;

  font-size: .72rem;

  line-height: 1;

  font-weight: 500;

  color: #607080;

  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}


.work-category-card:hover .work-tags span {

  border-color: rgba(46, 139, 135, .25);

  color: var(--navy);
}


/* =========================================
   RIGHT SIDE
========================================= */

.work-category-action {

  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 14px;

  margin-left: 30px;

  white-space: nowrap;

  font-family: 'Inter', sans-serif;

  font-size: .82rem;

  font-weight: 600;

  color: var(--navy);
}


/* =========================================
   ARROW
========================================= */

.work-arrow {

  width: 45px;
  height: 45px;

  display: flex;

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

  flex-shrink: 0;

  border-radius: 50%;

  background: #e8f5f7;

  color: var(--teal);

  font-size: .85rem;

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;
}


.work-category-card:hover .work-arrow {

  transform: translate(3px, -3px);

  background: var(--teal);

  color: #fff;
}


/* =========================================
   GOLD ACCENT
========================================= */

.work-category-card::before {

  content: "";

  position: absolute;

  left: 0;
  top: 30px;

  width: 3px;
  height: 0;

  background: var(--gold);

  border-radius: 0 4px 4px 0;

  transition: height .3s ease;
}


.work-category-card:hover::before {

  height: 88px;
}


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

@media (max-width: 991px) {

  .work-category-main {
    margin-left: 95px;
  }

  .work-category-main h3 {
    font-size: 1.65rem;
  }

  .work-category-action {
    margin-left: 20px;
  }

}


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

@media (max-width: 767px) {

  .work-categories {
    padding: 70px 0;
  }


  .work-categories .section-eyebrow-block h2 {
    font-size: 2rem;
  }


  .work-category-card {

    min-height: 180px;

    display: block;

    padding: 27px 22px;

    border-radius: 22px;
  }


  .work-number {

    left: 10px;
    bottom: -18px;

    font-size: 6.3rem;
  }


  .work-category-main {

    margin-left: 0;
  }


  .work-category-main h3 {

    position: relative;

    z-index: 2;

    margin-bottom: 13px;

    font-size: 1.5rem;
  }


  .work-tags {

    position: relative;

    z-index: 2;

    gap: 6px;
  }


  .work-tags span {

    padding: 7px 10px;

    font-size: .68rem;
  }


  .work-category-action {

    position: relative;

    z-index: 3;

    width: 100%;

    margin: 20px 0 0;

    justify-content: space-between;
  }


  .work-arrow {

    width: 42px;
    height: 42px;
  }


   .work-arrow i {
    font-size: 30px;
}

}


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

@media (max-width: 420px) {

  .work-category-main h3 {
    font-size: 1.35rem;
  }

}