/* Figma: 1200-wide section, 200-high desktop rows, separate capability column. */
body .services-section .service-row {
  grid-template-columns: 4.916667cqi minmax(0, 1fr) 24.583333cqi 10cqi;
  grid-template-rows: auto auto;
  padding: 2.833333cqi 6cqi 2.833333cqi 2cqi;
  min-height: 15.666667cqi;
  gap: 1cqi 0;
  align-content: center;
  align-items: center;
}
body .services-section .service-row h3 { align-self: end; letter-spacing: 0; }
body .services-section .service-row .service-number { margin: 1cqi 0 0; line-height: .9; }
body .services-section .service-row .service-summary {
  grid-column: 2; grid-row: 2; align-self: start; margin: 0;
  padding-right: 1em; font-size: clamp(.9375rem, 1.5cqi, 1.35rem);
  line-height: 1.333333; white-space: normal;
}
body .services-section .service-row .service-capabilities {
  grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0 1em;
  list-style: none; color: #fff;
  font: 400 clamp(.875rem, 1.333333cqi, 1.2rem)/1.75 'Helixa', sans-serif;
  font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100;
  font-synthesis: none; letter-spacing: 0;
  transition: color 360ms ease, opacity 900ms var(--motion-ease), transform 900ms var(--motion-ease);
}
.service-capabilities li { position: relative; }
.service-capabilities li::before { content: ''; position: absolute; width: .25em; height: .25em; left: -1em; top: .75em; background: url('../assets/services/bullet-normal.svg') center / contain no-repeat; }
body .services-section .service-row .service-icon-frame {
  position: relative; grid-column: 4; grid-row: 1 / 3;
  width: 100%; right: auto; top: auto; translate: none; margin: 0; align-self: center;
}
body .service-icon-frame--product-design img { width: 153.333333%; height: 153.333333%; left: -26.666667%; top: -26.666667%; }
@media (hover: hover) {
  body .services-section .service-row:hover .service-capabilities li::before { background-image: url('../assets/services/bullet-hover.svg'); }
  body .services-section .service-row:hover .service-capabilities { color: var(--dark-brown); }
  body .services-section .service-row:hover .service-number { opacity: 1; }
}
body .services-section .service-row:focus-within .service-capabilities { color: var(--dark-brown); }
body .services-section .service-row:focus-within .service-capabilities li::before { background-image: url('../assets/services/bullet-hover.svg'); }
body .services-section .service-row:focus-within .service-number { opacity: 1; }
body .services-section .service-row.reveal-pending:not(.is-visible) .service-capabilities { opacity: 0; transform: translate(-.75em, .75em); }
@media (min-width: 761px) {
  body .services-section .service-row { grid-template-rows: 4.666667cqi 2cqi; padding-block: 4.5cqi; }
  body .services-section .service-row .service-number { align-self: start; margin-top: 1cqi; }
  body .services-section .service-row .service-icon-frame { height: 10cqi; }
}
@media (max-width: 760px) {
  body .services-section .service-row { grid-template-columns: 1.75rem minmax(0, 1fr) 5rem; grid-template-rows: auto auto auto; gap: .875rem .75rem; padding: 2rem 1rem; min-height: 0; }
  body .services-section .service-row .service-number { margin: .6em 0 0; font-size: 1rem; }
  body .services-section .service-row h3 { grid-column: 2 / -1; font-size: clamp(1.625rem, 6.8vw, 2.5rem); }
  body .services-section .service-row .service-summary { grid-column: 2 / -1; padding: 0; }
  body .services-section .service-row .service-capabilities { grid-column: 2; grid-row: 3; font-size: .875rem; margin-top: .75rem; }
  body .services-section .service-row .service-icon-frame { grid-column: 3; grid-row: 3; width: 100%; }
}
@media (min-width: 1101px) {
  /* Figma: 48px above the title, 16px to its description, 200px per row.
     Keep spanning content in the grid so it remains responsive. */
  body .services-section .service-row {
    row-gap: 1.333333cqi;
    padding-top: 4cqi;
    padding-bottom: calc(4.666667cqi - 1px);
    min-height: 16.666667cqi;
  }
  body .services-section .service-row .service-capabilities,
  body .services-section .service-row .service-icon-frame { margin-top: .666667cqi; }
  body .services-section .service-list { margin-top: 6.666667cqi; }
}
@media (prefers-reduced-motion: reduce) {
  body .services-section .service-row .service-capabilities { transition: none; transform: none !important; opacity: 1 !important; }
}

/* Figma desktop proportions, with flexible rows when summaries wrap. */
body .services-section .center-heading h2 { line-height: 1.166667; letter-spacing: .02em; font-weight: 500; }
body .services-section .center-heading .eyebrow { margin-bottom: 24px; }
@media (min-width: 761px) {
 body .services-section .service-row { grid-template-rows: auto auto; min-height: 16.666667cqi; padding-block: 3.333333cqi; row-gap: 1.333333cqi; }
 body .services-section .service-row h3 { font-size: clamp(28px,4cqi,57.6px); line-height: 1.166667; }
 body .services-section .service-row .service-capabilities,
 body .services-section .service-row .service-icon-frame { margin-top: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
 body .services-section .service-row { grid-template-columns: 40px minmax(0,1fr) minmax(160px,25%) 80px; padding: 32px 16px; }
 body .services-section .service-row .service-icon-frame { height: 80px; }
}