/* ═══════════════════════════════════════════════════
   SECTION: services — source #services (SALES-03-SERVICES-C)

   The variant C rules live in services-variants.css scoped to #services-c,
   but the home page markup uses id="services". Only the unscoped .svc-c-*
   classes carry over; the section wrapper comes from services.css.
═══════════════════════════════════════════════════ */

#services {
  background: var(--c-bg);
  padding: var(--sp-section) 0;
  position: relative;
}

.svc-c-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.svc-c-hdr {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--sp-20);
  align-items: end;
  margin-bottom: 56px;
}
.svc-c-desc { font-size: var(--fs-300); color: var(--c-text-3); line-height: 1.75 }

.svc-c-list { display: flex; flex-direction: column; gap: 10px }

.svc-c-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  background: var(--c-bg-2);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.svc-c-row:hover {
  border-color: var(--svc-hue);
  transform: translateX(4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}
.svc-c-row:hover .svc-c-name { color: var(--svc-hue) }
.svc-c-row:hover .svc-c-arrow-wrap { transform: translate(3px, -3px); opacity: 1 }

/* ── Colour stripe.
   These five hues are a categorical palette identifying each practice
   area; they are not accent shades and have no token equivalents.

   Each row declares its hue once as --svc-hue and two things read it: the
   stripe, and the border on hover. Setting the colour twice is how a row ends
   up with a green stripe and a blue outline the day somebody adds a sixth. ── */
.svc-c-row:nth-child(1) { --svc-hue: var(--c-accent) }
.svc-c-row:nth-child(2) { --svc-hue: #8B5CF6 }
.svc-c-row:nth-child(3) { --svc-hue: #10B981 }
.svc-c-row:nth-child(4) { --svc-hue: #F59E0B }
.svc-c-row:nth-child(5) { --svc-hue: #14B8A6 }

.svc-c-stripe {
  width: 6px;
  flex-shrink: 0;
  background: var(--svc-hue);
  transition: width var(--dur-base) var(--ease-out);
}
.svc-c-row:hover .svc-c-stripe { width: 10px }

/* ── Content ── */
.svc-c-content {
  flex: 1;
  padding: 28px var(--sp-8);
  display: grid;
  grid-template-columns: 64px 1fr 1fr auto;
  gap: var(--sp-8);
  align-items: center;
}
.svc-c-num {
  font-family: var(--f-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-extrabold);
  letter-spacing: .08em;
  color: var(--c-text-4);
}
.svc-c-name {
  font-family: var(--f-display);
  /* Between --fs-400 and --fs-600; neither max matches 24px closely enough. */
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: var(--fw-black);
  letter-spacing: -.035em;
  line-height: var(--lh-tight);
  color: var(--c-text-1);
  margin-bottom: 6px;
  transition: color var(--dur-base);
}
.svc-c-sub { font-size: var(--fs-200); color: var(--c-text-3); line-height: 1.7 }

.svc-c-tags-area { display: flex; flex-wrap: wrap; gap: 5px }
.svc-c-tag {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(var(--c-accent-rgb), .07);
  border: 1px solid rgba(var(--c-accent-rgb), .18);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  color: var(--c-accent);
}
.svc-c-row:nth-child(2) .svc-c-tag { background: rgba(139, 92, 246, .07); border-color: rgba(139, 92, 246, .18); color: #8B5CF6 }
.svc-c-row:nth-child(3) .svc-c-tag { background: rgba(16, 185, 129, .07); border-color: rgba(16, 185, 129, .18); color: #10B981 }
.svc-c-row:nth-child(4) .svc-c-tag { background: rgba(245, 158, 11, .07); border-color: rgba(245, 158, 11, .18); color: #F59E0B }
.svc-c-row:nth-child(5) .svc-c-tag { background: rgba(20, 184, 166, .07); border-color: rgba(20, 184, 166, .18); color: #14B8A6 }

.svc-c-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px }
.svc-c-arrow-wrap {
  font-size: var(--fs-500);
  color: var(--c-accent);
  opacity: .4;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.svc-c-row:nth-child(2) .svc-c-arrow-wrap { color: #8B5CF6 }
.svc-c-row:nth-child(3) .svc-c-arrow-wrap { color: #10B981 }
.svc-c-row:nth-child(4) .svc-c-arrow-wrap { color: #F59E0B }
.svc-c-row:nth-child(5) .svc-c-arrow-wrap { color: #14B8A6 }

/* ── "New" badge ── */
.svc-badge-new {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(var(--c-success-rgb), .12);
  border: 1px solid rgba(var(--c-success-rgb), .25);
  font-family: var(--f-body);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-success);
  vertical-align: middle;
  margin-left: 10px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .svc-c-hdr { grid-template-columns: 1fr; gap: var(--sp-6) }
  .svc-c-content { grid-template-columns: 48px 1fr auto; gap: var(--sp-5) }
  .svc-c-tags-area { display: none }
}

@media (max-width: 640px) {
  .svc-c-inner { padding: 0 var(--sp-6) }
  .svc-c-content { grid-template-columns: 1fr auto; gap: var(--sp-4); padding: var(--sp-5) }
  .svc-c-num { display: none }
}