/* Whole-card navigation uses real links, with independent secondary controls. */
.product-card{position:relative}
.product-card .product-card-link{
  display:block;position:absolute;inset:0;z-index:5;border-radius:inherit;
  color:inherit;background:transparent;cursor:pointer
}
.product-card-link>svg{display:none}
.product-card .card-bottom :is(a,button){position:relative;z-index:6}
.product-card .card-bottom .text-link::before{content:"";position:absolute;inset:-12px -8px}
.product-card-link:focus-visible{outline:3px solid var(--green,#1d7d63);outline-offset:-5px}
@media(hover:hover){
  .product-card:has(.product-card-link:hover) h3{color:var(--green,#1d7d63)}
}

/* Service overview: picture, copy and surrounding space form one destination. */
.p-service-row{cursor:pointer}
.p-service-row:focus-visible{outline:3px solid var(--green);outline-offset:8px;border-radius:12px}
.p-service-row:hover .p-button{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}
.p-service-picture{transition:box-shadow .2s}
.p-service-row:hover .p-service-picture{box-shadow:5px 6px 0 var(--green)}

/* A project opens from the whole card; the small player control is separate. */
.s-work{position:relative;isolation:isolate}
.s-work-media{position:relative}
.s-work-detail::after{content:"";position:absolute;inset:0;z-index:1;border-radius:12px}
.s-work-detail:focus-visible{outline:none}
.s-work-detail:focus-visible::after{outline:3px solid var(--green);outline-offset:6px}
.s-work .s-work-preview{
  position:absolute;z-index:2;right:12px;bottom:12px;width:auto;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--ink);border-radius:99px;padding:9px 13px;
  background:#fff;color:var(--ink);font-family:inherit;font-size:12px;font-weight:700;line-height:1.4;text-align:center;
  box-shadow:2px 2px 0 var(--ink);cursor:pointer
}
.s-work-preview svg{width:13px;height:13px;fill:currentColor;flex-shrink:0}
.s-work-preview:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.s-work-preview:hover{background:var(--mint,#82d7b5)}
.s-work:has(.s-work-detail:hover) .s-work-image{box-shadow:5px 6px 0 var(--ink)}
.s-work:has(.s-work-detail:hover) h3{color:var(--green)}

/* Already linked cards also include the gaps between their image and copy. */
:is(.p-work,.p-blog-card)>a,.v-recommended-work{display:block}
:is(.p-work,.p-blog-card)>a:focus-visible,.v-recommended-work:focus-visible{
  outline:3px solid var(--green);outline-offset:7px;border-radius:10px
}
.p-case-pagination>a{
  align-self:stretch;min-height:64px;display:flex;flex-direction:column;
  justify-content:center;padding:12px
}
.p-case-pagination>a:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.p-case-pagination>a:hover{background:#1d7d630a;border-radius:8px}

.p-demo-callout{position:relative;--callout-end-space:0px}
.p-demo-callout:last-child{--callout-end-space:96px}
.p-demo-callout .p-button{position:static;transform:none}
.p-demo-callout .p-button::after{
  content:"";position:absolute;inset:0 0 var(--callout-end-space);z-index:1;border-radius:12px
}
.p-demo-callout .p-button:focus-visible::after{outline:3px solid var(--green);outline-offset:6px}
:is(.s-inline-link,.v-text-link,.p-link,.v-back-home){
  min-height:44px;display:inline-flex;align-items:center;
  padding:10px 12px;margin-inline:-12px
}
.s-work-detail{display:flex;width:100%;margin-inline:0;padding-inline:0}
.v-back-home{margin-inline:auto}
:is(.s-inline-link,.v-text-link,.p-link,.v-back-home):focus-visible{
  outline:3px solid var(--green);outline-offset:3px;border-radius:6px
}
@media(max-width:600px){
  .p-demo-callout:last-child{--callout-end-space:72px}
  .p-case-pagination>.p-link{justify-self:stretch;text-align:center;align-items:center}
}
@media(prefers-reduced-motion:reduce){
  .p-service-picture,.p-service-row .p-button{transition:none}
}