/* Services on the home page: one column per group (Build, Adopt, Optimize). Each column has the group name, its line,
   then every service stacked underneath with its icon, linking to its service page. */

.v2 #main > .srv { background: var(--white); }
.srv-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.srv-top h2 { max-width: 16em; }
.srv-all { display: inline-flex; align-items: center; gap: .45rem; color: var(--forest); font-weight: 500; text-decoration: none; white-space: nowrap; }
.srv-all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms var(--ease-out, ease-out); }
.srv-all:hover svg { transform: translateX(4px); }

/* Each column spans the same three rows through subgrid, so the service lists start level even when the group lines wrap differently */
.srv-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
.srv-col {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  padding-top: 1.6rem; border-top: 1px solid rgba(14, 37, 27, .14);
}
.srv-col h3 { margin: 0; font-size: 1.75rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.srv-line { max-width: 34ch; margin: .65rem 0 0; color: var(--ink); font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.02em; }

.srv-items { display: grid; align-content: start; gap: 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.srv-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .85rem; align-items: start; color: var(--ink); text-decoration: none; }
.srv-item:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; border-radius: 4px; }
.srv-mark { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--forest); fill: none; stroke: var(--mint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: background-color 300ms, stroke 300ms; }
.srv-item:hover .srv-mark, .srv-item:focus-visible .srv-mark { background: var(--mint); stroke: var(--forest); }
.srv-item b { display: block; padding-top: .05rem; font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.srv-desc { display: block; margin-top: .3rem; font-size: .86rem; line-height: 1.5; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .srv-all svg, .srv-mark { transition: none; }
}
@media (max-width: 860px) {
  .srv-cols { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.75rem; }
  .srv-col { grid-row: auto; grid-template-rows: none; padding-top: 1.35rem; }
  .srv-col h3 { font-size: 1.5rem; }
  .srv-line { font-size: 1.1rem; }
  .srv-items { gap: 1.1rem; margin-top: 1.1rem; }
}