/* =========================================================
   NORTHSTAR SELECTED — Services Section
   ========================================================= */

.services {
  background: var(--color-black);
  color: var(--color-white);
}

/* ── Section Header ─────────────────────────────────────── */
.services__header {
  max-width: 600px;
  margin-bottom: clamp(var(--sp-12), 6vw, var(--sp-24));
}

.services__intro {
  font-size: var(--fs-md);
  color: rgba(255,255,255,0.5);
  line-height: var(--lh-loose);
  margin-top: var(--sp-4);
  font-weight: var(--fw-light);
}

/* ── Service Items List ─────────────────────────────────── */
.services__list {
  display: flex;
  flex-direction: column;
}

.service-item {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  align-items: center;
  gap: var(--sp-8);
  padding-block: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.service-item:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.service-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-charcoal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
  z-index: 0;
}

.service-item:hover::before {
  transform: scaleX(1);
}

.service-item > * {
  position: relative;
  z-index: 1;
}

.service-item__number {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.15);
  line-height: 1;
  transition: color var(--duration-base) var(--ease-out);
}

.service-item:hover .service-item__number {
  color: var(--color-gold);
}

.service-item__title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 2vw, var(--fs-2xl));
  font-weight: var(--fw-light);
  color: var(--color-white);
  line-height: var(--lh-snug);
}

.service-item__desc {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.45);
  line-height: var(--lh-normal);
  font-weight: var(--fw-light);
  transition: color var(--duration-base) var(--ease-out);
}

.service-item:hover .service-item__desc {
  color: rgba(255,255,255,0.65);
}

.service-item__arrow {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-gold);
  position: relative;
  margin-left: var(--sp-4);
  vertical-align: middle;
  transition: width var(--duration-base) var(--ease-out);
  opacity: 0;
}

.service-item__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -4px;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--color-gold);
  border-right: 1px solid var(--color-gold);
  transform: rotate(45deg);
}

.service-item:hover .service-item__arrow {
  width: 40px;
  opacity: 1;
}

/* end of services.css */