:root {
  --brand: #7C3AED; /* todo replace with brand purple */
  --text: #1F2937;
  --card: #fff;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(17, 12, 34, .08);
}
.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.services-quicknav {
  margin: 28px 0;
}

.sq-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex
;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  flex-direction: row;
  flex-wrap: wrap;
}

/* Card */
.sq-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 5px 16px;
  background: #f8f6f6;
  border: 1px solid #d6d4d4;
  /* border-radius: var(--radius); */
  text-decoration: none;
  color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  font-size: 0.9rem;
}

.sq-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #E9E2F9;
}

.sq-card:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--brand) 42%, white);
  outline-offset: 3px;
}

.sq-title {
  font-weight: 600;
  flex: 1; /* takes up all available space */
  white-space: nowrap; /* single line */
  overflow: hidden; /* hide overflow */
  text-overflow: ellipsis; /* add ellipsis */
}

.sq-arrow {
  margin-left: auto;
  opacity: .5;
  transition: .15s;
  display: none;
}

.sq-card:hover .sq-arrow {
  opacity: 1;
  transform: translateX(2px);
}