/* Focused RedPunch service-card spacing polish.
   Loaded after the imported v5 stylesheet. No changes to brand fonts,
   photography, colors, grid breakpoints, or other sections. */
.service {
  padding: clamp(24px, 2.5vw, 38px);
}
.service-top {
  margin-bottom: clamp(18px, 2vw, 28px);
}
.service-num {
  font-size: clamp(3.6rem, 5vw, 5.6rem);
}
.service h3 {
  margin-bottom: 8px;
}
.service-meta {
  margin: 18px 0 24px;
}
.service-meta div {
  grid-template-columns: minmax(96px, 112px) minmax(0, 1fr);
  gap: 12px;
  padding-block: 10px;
}
.service-meta dd {
  overflow-wrap: break-word;
}
@media (max-width: 720px) {
  .service {
    padding: 24px;
  }
  .service-top {
    margin-bottom: 18px;
  }
  .service-meta div {
    grid-template-columns: 104px minmax(0, 1fr);
  }
}
@media (max-width: 420px) {
  .service-meta div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}

/* Number cleanup: the issues list is topical, not a sequence.
   Preserve the original item dividers, hover accent, and typography. */
.concerns li {
  display: block;
}
/* Prices now lead cards directly after removing decorative 01–04 numerals. */
.service-top {
  justify-content: flex-start;
}

/* What We Do: pin category tags to the bottom of each staggered card.
   Do not flatten the three offset columns or alter tablet/mobile layout. */
@media (min-width: 960px) {
  .practice-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  .practice-body .chips {
    margin-top: auto;
    padding-top: 22px;
  }
}

/* The third marquee phrase has its own typographic voice:
   Serious Business = Barlow Condensed; Creative Freedom = Manrope;
   Own Your Future = the site's existing Plex Mono. */
.marquee span.marquee-future {
  font-family: var(--f-mono);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* RedPunch wordmark: RED in punch red, PUNCH in white; preserve the red dot.
   Applies identically to the header and footer brand links. */
.brand-word .brand-red {
  color: var(--red-bright);
}
.brand-word .brand-white {
  color: var(--white);
}
