/* WJAZ 80: 3px outer gradient rings only; original card box and fills stay intact. */
.portfolio-page .pg-service-grid > .pg-service-card[href="models-websites.html"] {
  --pg-card-border-top: #9d6b40;
  --pg-card-border-bottom: #c89b75;
  --pg-card-border-base: #b77c4a;
}
.portfolio-page .pg-service-grid > .pg-service-card[href="models-visual-identity.html"] {
  --pg-card-border-top: #918055;
  --pg-card-border-bottom: #beae88;
  --pg-card-border-base: #a99563;
}
.portfolio-page .pg-service-grid > .pg-service-card[href="models-dashboards.html"] {
  --pg-card-border-top: #576d7e;
  --pg-card-border-bottom: #8a9ead;
  --pg-card-border-base: #657f93;
}
.portfolio-page .pg-service-grid > .pg-service-card[href="models-company-profiles.html"] {
  --pg-card-border-top: #6c786a;
  --pg-card-border-bottom: #9ca89b;
  --pg-card-border-base: #7d8c7b;
}
.portfolio-page .pg-service-grid > .pg-service-card[href="models-visual-media.html"] {
  --pg-card-border-top: #826e79;
  --pg-card-border-bottom: #b09ea8;
  --pg-card-border-base: #97808d;
}

/* Retain the existing 1px layout border so dimensions and wrapping do not shift. */
.portfolio-page .pg-service-grid > .pg-service-card[href] {
  border-color: transparent;
}
.portfolio-page .pg-service-grid > .pg-service-card::before {
  content: "";
  position: absolute;
  /* Cover exactly the existing outer border box, including its rounded corners. */
  inset: -1px;
  box-sizing: border-box;
  border: 3px solid var(--pg-card-border-base);
  border-radius: inherit;
  pointer-events: none;
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .portfolio-page .pg-service-grid > .pg-service-card::before {
    border: 0;
    padding: 3px;
    background: linear-gradient(to bottom, var(--pg-card-border-top), var(--pg-card-border-bottom));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}