/* Transparent service cells in one continuous bordered grid. */
.services-page { --services-accent: #009aff; }
.services-catalog { padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 5vw, 80px); }
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--page-line); }
.service-card { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: start; min-width: 0; padding: clamp(24px, 2.3vw, 34px); border: 0; border-right: 1px solid var(--page-line); border-bottom: 1px solid var(--page-line); border-radius: 0; background: transparent; color: var(--page-text); text-decoration: none; }
.service-card:nth-child(3n) { border-right: 0; }
.service-card:nth-last-child(-n + 3) { border-bottom: 0; }
.service-card:focus-visible { z-index: 1; outline: 2px solid var(--services-accent); outline-offset: -2px; }
.service-card__number { display: flex; flex-direction: column; align-items: start; gap: 10px; color: var(--page-text); font: 500 14px/1.5 'IBM Plex Mono', monospace; letter-spacing: .05em; }
.service-card__number::before { content: ''; width: 21px; height: 1px; background: var(--services-accent); }
.services-number { color: var(--services-accent); font: 400 11px/1.6 'IBM Plex Mono', monospace; letter-spacing: .05em; }
.service-card__illustration { display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; width: 100%; height: clamp(175px, 15vw, 225px); margin: 8px 0 24px; }
.service-card__illustration img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .45s ease; }
.service-card:hover .service-card__illustration img { transform: translateY(-5px); }
.service-card h2 { max-width: 330px; font-size: clamp(22px, 1.8vw, 27px); font-weight: 400; line-height: 1.35; letter-spacing: -.035em; overflow-wrap: anywhere; }
.service-card p { margin-top: 16px; margin-bottom: 28px; max-width: 380px; color: var(--page-muted); font: 400 16px/1.75 'Inter Tight', sans-serif; }
.service-card__more { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; margin-top: auto; color: #c9c9c9; font-size: 12px; line-height: 1.7; }
.service-card__more > span { color: var(--services-accent); font-size: 19px; transition: transform .2s; }
.service-card:hover .service-card__more { color: white; }
.service-card:hover .service-card__more > span { transform: translate(2px, -2px); }
.services-approach { padding: clamp(48px, 5vw, 80px) 0; border-top: 1px solid var(--page-line); }
.services-approach__heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 32px clamp(40px, 5vw, 90px); }
.services-approach__heading h2 { max-width: 580px; margin-top: 18px; font-size: clamp(29px, 2.6vw, 40px); font-weight: 400; line-height: 1.3; letter-spacing: -.04em; }
.services-approach__heading > p { max-width: 610px; color: var(--page-muted); font: 400 18px/1.75 'Inter Tight', sans-serif; }
.services-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: 48px; }
.services-principles article { min-width: 0; padding-top: 24px; border-top: 1px solid var(--page-line); }
.services-principles h3 { max-width: 320px; margin-top: 18px; color: #e1e1e1; font-size: 21px; font-weight: 400; line-height: 1.4; letter-spacing: -.025em; }
.services-principles p { margin-top: 14px; color: var(--page-muted); font: 400 16px/1.8 'Inter Tight', sans-serif; }
.services-closing { display: flex; align-items: center; justify-content: space-between; gap: 32px 64px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--page-line); }
.services-closing > div { max-width: 720px; }
.services-closing h2 { margin-top: 16px; font-size: clamp(26px, 2.3vw, 34px); font-weight: 400; letter-spacing: -.035em; line-height: 1.3; }
.services-closing p { margin-top: 14px; color: var(--page-muted); font: 400 17px/1.7 'Inter Tight', sans-serif; }
.services-closing > a { flex-shrink: 0; }
@media (max-width: 1050px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card:nth-child(3n) { border-right: 1px solid var(--page-line); }
  .service-card:nth-child(2n) { border-right: 0; }
  .service-card:nth-last-child(-n + 3) { border-bottom: 1px solid var(--page-line); }
  .service-card:nth-last-child(-n + 2) { border-bottom: 0; }
  .services-approach__heading { gap: 32px; }
  .services-closing { gap: 32px; }
}
@media (max-width: 800px) {
  .services-approach__heading { grid-template-columns: 1fr; gap: 24px; }
  .services-principles { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .services-principles h3 { max-width: none; }
  .services-principles p { max-width: 640px; }
  .services-closing { align-items: start; flex-direction: column; margin-top: 44px; padding-top: 32px; }
}
@media (max-width: 600px) {
  .services-catalog { padding: 32px 0 48px; }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .service-card { padding: 24px; border-right: 0; border-bottom: 1px solid var(--page-line); }
  .services-grid .service-card:last-child { border-bottom: 0; }
  .service-card__illustration { height: 210px; margin-bottom: 22px; }
  .service-card h2 { font-size: 25px; }
  .service-card p { margin-top: 14px; margin-bottom: 24px; }
  .services-approach { padding: 40px 0 52px; }
  .services-approach__heading > p { font-size: 17px; }
}