/* Cache-busted refinements for the portfolio buttons and visual cards. */

.service-visual--portfolio {
  min-height: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 62px 24px 28px;
}
.service-visual--social.service-visual--portfolio { min-height: 760px; }
.service-visual--local.service-visual--portfolio { min-height: 700px; }
.service-visual--video.service-visual--portfolio { min-height: 650px; }
.service-visual--portfolio .laptop,
.service-visual--portfolio .phone,
.service-visual--portfolio .newsletter-window,
.service-visual--portfolio .local-card { flex: 0 0 auto; }
.visual-portfolio-circle {
  position: relative;
  z-index: 4;
  width: 142px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 50%;
  background: linear-gradient(145deg, #efd9a3, #c49a49);
  box-shadow: 0 16px 34px rgba(91,67,29,.2), inset 0 0 0 7px rgba(255,255,255,.18);
  color: #2b2419;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .065em;
  line-height: 1.32;
  text-align: center;
  text-transform: uppercase;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.visual-portfolio-circle b { font-size: 1.15rem; font-weight: 500; line-height: 1; transition: transform .2s ease; }
.visual-portfolio-circle:hover {
  transform: translateY(-4px);
  background: linear-gradient(145deg, #f3dfad, #c9a253);
  box-shadow: 0 21px 42px rgba(91,67,29,.28), inset 0 0 0 7px rgba(255,255,255,.2);
}
.visual-portfolio-circle:hover b { transform: translateX(3px); }
.visual-portfolio-circle--dark { border-color: rgba(255,255,255,.42); box-shadow: 0 18px 38px rgba(0,0,0,.32), inset 0 0 0 7px rgba(255,255,255,.16); }

@media (max-width: 560px) {
  .service-visual--portfolio { min-height: 540px; gap: 18px; padding: 56px 16px 24px; }
  .service-visual--social.service-visual--portfolio { min-height: 680px; }
  .service-visual--local.service-visual--portfolio { min-height: 570px; }
  .service-visual--video.service-visual--portfolio { min-height: 510px; }
  .visual-portfolio-circle { width: 120px; padding: 1rem; font-size: .54rem; }
  .visual-portfolio-circle b { font-size: 1rem; }
}