.solution-areas { scroll-margin-top: 170px; }
.solution-grid.solution-projects article { display: block; }
.solution-projects article > .solution-showcase {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  background: #e0e7e5;
  border-radius: 5px;
}
.solution-showcase a { display: block; width: 100%; min-width: 0; color: var(--ink); text-decoration: none; }
.solution-showcase img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border: 1px solid var(--line); border-radius: 3px; }
.solution-showcase a > span { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.solution-showcase a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.solution-showcase a:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.solution-carousel { position: relative; }
.solution-carousel > a { position: absolute; top: calc(50% - 12px); left: 18px; width: calc(100% - 36px); transform: translateY(-50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 400ms ease, visibility 400ms; }
.solution-carousel > a.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.solution-carousel-controls { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 2px; }
.solution-carousel-controls button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.solution-carousel-controls .slide-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .3; }
.solution-carousel-controls .slide-dot[aria-pressed="true"]::after { opacity: 1; }
.solution-carousel-controls svg { width: 14px; height: 14px; }
.solution-carousel-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) {
  .solution-carousel > a { transition: none; }
}
@media (max-width: 700px) {
  .solution-projects article > .solution-copy { padding-top: 16px; }
  .solution-projects { gap: 32px; }
}