.watercolor-cta{position:relative;display:grid;place-items:center;width:320px;max-width:100%;aspect-ratio:1918/820;box-sizing:border-box;padding:18px 64px 20px 30px;border:0;background:none;color:#493429;font:inherit;text-decoration:none;cursor:pointer;isolation:isolate}
.watercolor-cta::before{content:"";position:absolute;inset:0;background:url('assets/cta-frame-r01.png') center/100% 100% no-repeat;opacity:.58;z-index:-1;pointer-events:none}
.watercolor-cta .label{display:flex;flex-direction:column;align-items:center;gap:4px;white-space:nowrap;font-size:23px;letter-spacing:.1em;line-height:1.5}
.watercolor-cta .phone{font-size:14px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.watercolor-cta:focus-visible{outline:2px solid #6d6949;outline-offset:5px;border-radius:40%}
.watercolor-cta[aria-disabled=true]{cursor:default}
@media(max-width:700px){.watercolor-cta{width:292px;padding:16px 59px 18px 27px}.watercolor-cta .label{font-size:21px}.watercolor-cta .phone{font-size:14px}}
.sample{background-image:none!important}

/* A separate translucent wash: keep the adopted watercolor outline above it. */
.watercolor-cta{--cta-wash:#EFDEB0}
.watercolor-cta::after{
  content:"";
  position:absolute;
  inset:9% 7% 8% 1%;
  z-index:-2;
  pointer-events:none;
  background-color:var(--cta-wash);
  opacity:.56;
  border-radius:44% 56% 34% 27% / 58% 53% 37% 39%;
  transform:rotate(-1.4deg) translate(1%,1%);
  mask-image:
    radial-gradient(ellipse 18% 12% at 29% 1%,transparent 42%,#000 84%),
    radial-gradient(ellipse 12% 9% at 70% 100%,transparent 36%,#000 88%),
    radial-gradient(ellipse 6% 23% at 0% 56%,transparent 25%,#000 85%),
    radial-gradient(ellipse at 64% 33%,#0008 0%,#000c 36%,#000 75%);
  mask-composite:intersect;
}
