.services {
  --section-content-width: 1152px;
  background: #fff;
  color: #1a2128;
  color-scheme: light;
  padding: 200px 0 160px;
  scroll-margin-top: calc(var(--header-height) + 24px);
}
.services__layout { display: grid; grid-template-columns: minmax(0, 462fr) minmax(0, 738fr); gap: 80px; }
.services__eyebrow { margin: 0 0 12px; color: #505c66; font-size: 17px; font-weight: 500; line-height: 26px; }
.services h2 { margin: 0; font-size: 40px; font-weight: 700; line-height: 50px; word-break: keep-all; }
.services__groups { min-width: 0; display: grid; gap: 60px; }
.services h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 25.5px; }
.services__divider { height: 1px; margin: 19px 0 22px; background: url('./assets/services/divider.svg') left center / 100% 1px no-repeat; }
.services__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20.4px 30px; }
.services__list li { min-width: 0; }
.services__button {
  display: flex; align-items: center; gap: 24px; width: 100%; min-height: 44px;
  padding: 0; border: 0; border-radius: 8px; background: transparent;
  text-align: left; font-size: 15px; font-weight: 500; line-height: 22.5px;
  color: #505c66; transition: color 160ms ease;
}
.services__button img { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; }
/* Flat line icons (the diagnosis/used-car photos already ship with this tile baked in). */
.services__button img.services__icon--framed { box-sizing: border-box; padding: 4px; background: #f2f4f6; border-radius: 8px; }
.services__button span { display: inline-flex; align-items: center; gap: 2px; word-break: keep-all; }
/* A masked span (not an <img>) so the arrow can recolor with the text via currentColor. */
.services__button-arrow {
  display: inline-block; flex: none; width: 18px; height: 18px;
  background-color: currentColor; transition: background-color 160ms ease;
  -webkit-mask: url('./assets/services/arrow-diagonal.svg') center / contain no-repeat;
  mask: url('./assets/services/arrow-diagonal.svg') center / contain no-repeat;
}
.services__button[data-service="ai-consultation"] span { opacity: .9; }
@media (hover: hover) { .services__button:hover { color: #1a2128; } }
.services__button:focus-visible { color: #1a2128; outline: 2px solid #00afff; outline-offset: 6px; }
.services__button:active { color: #1a2128; }
@media (max-width: 1279px) {
  .services__layout { grid-template-columns: 1fr; gap: 48px; }
  .services__groups { width: 100%; }
}
@media (max-width: 900px) {
  .services { padding: 128px 0 100px; }
  .services h2 { font-size: 32px; line-height: 42px; }
  .services__list { column-gap: 20px; }
  .services__button { gap: 16px; }
}
@media (max-width: 689px) {
  .services__layout { gap: 40px; }
  .services__eyebrow { font-size: 15px; line-height: 23px; }
  .services h2 { font-size: 30px; line-height: 40px; }
  .services__groups { gap: 40px; }
  .services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .services__button { gap: 12px; min-height: 48px; }
}
@media (max-width: 359px) {
  .services h2 { font-size: 27px; line-height: 36px; }
  .services__button { gap: 8px; }
  .services__list { column-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .services__button { transition: none; } }