/* Paper labels and service notes share the portfolio's print language. */
.button,.hero .button{
  position:relative;isolation:isolate;min-height:54px;padding:15px 23px;
  gap:22px;border:0;background:transparent;color:var(--ink);
  font-size:15px;font-weight:600;line-height:1.4;
  transform:none;transition:color .18s ease;
}
.button::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--lime);
  clip-path:polygon(1% 5%,98% 0,100% 92%,2% 100%,0 47%);
  transition:background .18s ease;
}
.button:hover{background:transparent;transform:none;color:var(--ink)}
.button:hover::before{background:var(--accent-hover)}
.button:active::before{background:var(--accent-active)}
.button>span{font-size:0;display:grid;place-items:center;width:22px;height:22px}
.button>span::after{content:"";width:17px;height:13px;border:1.5px solid currentColor;border-radius:2px;
  background:linear-gradient(33deg,transparent 47%,currentColor 49%,currentColor 52%,transparent 54%) left top/50% 75% no-repeat,
  linear-gradient(-33deg,transparent 47%,currentColor 49%,currentColor 52%,transparent 54%) right top/50% 75% no-repeat}
.hero-actions{gap:27px;align-items:center}
.text-link{font-family:'Caveat',cursive;font-size:25px;font-weight:600;border:0;
  padding:10px 0;min-height:48px;line-height:1.2;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:var(--muted)}
.text-link span{font-family:'Golos Text',sans-serif;font-size:16px;padding-left:8px}
.text-link:hover{color:var(--ink);text-decoration-color:var(--ink)}
.services{gap:36px;padding-top:78px;padding-bottom:80px;align-items:stretch}
.service-card{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  border:0;background:transparent;padding:30px 29px 23px;
  box-shadow:none;transform:none!important;
}
.service-card::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--note);
  clip-path:polygon(0 1%,99% 0,100% 97%,94% 98%,88% 97%,81% 99%,73% 98%,64% 100%,55% 98%,43% 99%,33% 98%,22% 99%,11% 98%,1% 99%);
}
.service-card::after{
  content:"";position:absolute;top:-10px;left:28px;width:66px;height:23px;
  background:var(--tape);transform:rotate(-5deg);
}
.service-card.green::before{background:var(--note-green)}
.service-card.green::after{left:auto;right:30px;transform:rotate(7deg)}
.service-card:hover,.service-card.green:hover{background:transparent}
.service-card h3{
  font-family:'Caveat',cursive;font-size:38px;font-weight:600;
  letter-spacing:-.02em;line-height:1.05;margin:0 0 21px;
}
.service-card p{font-size:16px;line-height:1.65;max-width:none;margin:0 0 28px;color:var(--note-ink)}
.card-bottom{
  margin-top:auto;padding:0;border:0;gap:12px;align-items:center;
  font-size:13px;line-height:1.4;color:var(--note-ink);
}
.card-bottom>span:last-child{
  font-family:'Caveat',cursive;font-size:24px;white-space:nowrap;
  color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:5px;
}
.service-card:hover .card-bottom>span:last-child{text-decoration-thickness:2px}
.button:focus-visible,.service-card:focus-visible,.text-link:focus-visible{
  outline:2px solid var(--ink);outline-offset:6px;
}
@media(max-width:1100px){.services{gap:30px}.service-card h3{font-size:36px}}
@media(max-width:760px){
  .hero-actions{gap:18px;flex-wrap:wrap}
  .button,.hero .button{font-size:14px;min-height:52px;padding:14px 20px;gap:17px}
  .text-link{font-size:24px;padding:10px 0}
  .services{padding-top:45px;padding-bottom:45px;gap:32px}
  .service-card{padding:29px 24px 25px}
  .service-card h3{font-size:36px;margin-bottom:17px}
  .service-card p{font-size:16px;margin-bottom:25px}
  .card-bottom{font-size:12px}
}