/* A typeset service index: six individual entries, with one shared baseline.
   Labels belong to the typography rather than a second layer of UI controls. */
.service-index {
  list-style: none;
  padding: 0;
  margin: 62px 0 0;
  border-top: 1px solid var(--line);
}
.service-entry {
  display: grid;
  grid-template-columns: 54px minmax(0, 1.35fr) minmax(0, 1fr) 40px;
  column-gap: 28px;
  align-items: center;
  position: relative;
  min-height: 160px;
  padding-block: 36px;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.service-entry::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #b9ff380b, transparent 65%);
  opacity: 0;
  transition: opacity 200ms ease;
}
[dir=rtl] .service-entry::before { background: linear-gradient(270deg, #b9ff380b, transparent 65%); }
.service-index-number {
  align-self: start;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  line-height: 1;
  padding-top: 10px;
  color: var(--muted);
  transition: color 180ms ease;
}
.service-entry-body { min-width: 0; }
.service-entry h3 {
  display: inline;
  font-size: clamp(26px, 2.65vw, 39px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.045em;
  transition: color 180ms ease;
}
.service-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: 19px;
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
}
.service-topics span { white-space: nowrap; }
.service-topics span + span::before {
  content: '/';
  display: inline-block;
  color: #656d61;
  margin-inline: 10px;
}
.service-entry-summary {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 34ch;
}
.service-entry-arrow {
  justify-self: end;
  align-self: center;
  font: 30px/1 Arial, sans-serif;
  color: var(--paper);
  transition: transform 200ms var(--motion-out), color 160ms ease;
}
.service-entry:focus-visible { outline-offset: 7px; }
.service-entry:focus-visible h3, .service-entry:focus-visible .service-index-number,
.service-entry:focus-visible .service-entry-arrow { color: var(--lime); }
.service-entry:focus-visible::before { opacity: 1; }

@media (hover:hover) and (pointer:fine) {
  .service-entry:hover::before { opacity: 1; }
  .service-entry:hover h3, .service-entry:hover .service-index-number { color: var(--lime); }
  .service-entry:hover .service-entry-arrow { transform: translate(4px, -4px); color: var(--lime); }
}
@media (max-width:1100px) {
  .service-entry { grid-template-columns: 35px minmax(0, 1.2fr) minmax(0, 1fr) 30px; column-gap: 24px; }
  .service-entry h3 { font-size: 29px; }
  .service-entry-summary { font-size: 13px; }
  .service-topics { font-size: 9px; }
  .service-topics span + span::before { margin-inline: 7px; }
}
@media (max-width:900px) {
  .service-entry { grid-template-columns: 30px minmax(0, 1fr) 34px; gap: 18px 22px; padding-block: 30px; }
  .service-entry-body { grid-column: 2; grid-row: 1; }
  .service-entry-arrow { grid-column: 3; grid-row: 1; align-self: start; margin-top: 5px; }
  .service-entry-summary { grid-column: 2 / 4; grid-row: 2; max-width: 54ch; font-size: 14px; }
  .service-entry h3 { font-size: 34px; }
  .service-topics { margin-top: 13px; font-size: 10px; }
}
@media (max-width:580px) {
  .service-index { margin-top: 40px; }
  .service-entry { grid-template-columns: 22px minmax(0, 1fr) 24px; gap: 17px 14px; padding-block: 28px; }
  .service-index-number { font-size: 10px; padding-top: 8px; }
  .service-entry h3 { font-size: 27px; line-height: 1.25; }
  .service-topics { font-size: 9px; gap: 4px 0; margin-top: 14px; }
  .service-topics span + span::before { margin-inline: 6px; }
  .service-entry-summary { font-size: 13px; max-width: 35ch; }
  .service-entry-arrow { font-size: 25px; }
}
html[lang=ar] .service-entry h3 { letter-spacing: 0; line-height: 1.4; }
html[lang=ar] .service-topics { font-size: 12px; }
@media (prefers-reduced-motion:reduce) {
  .service-entry:hover .service-entry-arrow { transform: none; }
  .service-entry h3, .service-entry-arrow, .service-index-number { transition: color 120ms ease !important; }
}
[data-motion-input=keyboard] .service-entry * { transition: none !important; }