/* Still, low-contrast material layers. Decorative only; never intercept input. */
/* Let the icon yield space to the longer interim label on small cards. */
.service-card.interim .service-art { min-width: 0; flex-shrink: 1; height: auto; }
.hero, .contact { isolation: isolate; position: relative; }
.hero::before, .contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at 82% 38%, #de8e6020, transparent 65%);
}
.contact::before {
  inset: 0 -3%;
  background: radial-gradient(ellipse at 78% 48%, #de8e6018, transparent 63%);
}
.hero::after, .about::after, .contact::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('assets/paper-grain.svg') repeat;
  opacity: .045;
  mask-image: linear-gradient(transparent, #000 20%, #000 78%, transparent);
}
/* Feather the decoration, not the content: no rectangular edges on wide screens. */
.hero::before,
.hero::after {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
}
.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url('assets/paper-grain.svg') repeat;
  opacity: .045;
  pointer-events: none;
}
.portrait-small.portrait-work {
  width: min(330px, 84%);
  margin-top: 38px;
  margin-bottom: 8px;
}
.portrait-small.portrait-work > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  border-radius: 110px 130px 82px 105px;
  box-shadow: 0 24px 45px -30px #0009;
}
.portrait-work .personal-seal {
  right: -62px;
  left: auto;
  bottom: 20px;
  width: 132px;
  height: 132px;
  font-size: 15px;
}
html[data-palette="sand"] .hero::before,
html[data-palette="sand"] .contact::before { opacity: .6; }
@media (min-width: 651px) and (max-width: 950px) {
  .service-card.outsourcing h3 { font-size: clamp(34px, 4.5vw, 37px); }
  .portrait-small.portrait-work { width: min(280px, 85%); }
  .portrait-work .personal-seal { right: -35px; width: 112px; height: 112px; font-size: 13px; }
}
@media (max-width: 650px) {
  .portrait-small.portrait-work {
    width: min(300px, 87%);
    margin: 38px auto 0;
  }
  .portrait-small.portrait-work > img { border-radius: 90px 112px 72px 90px; }
  .portrait-work .personal-seal { right: -14px; bottom: 17px; width: 110px; height: 110px; font-size: 13px; }
  /* Keep the longer service promise intact on narrow phones. */
  .service-card.outsourcing h3 { font-size: clamp(32px, 10.25vw, 44px); }
}
@media print {
  .hero::before, .contact::before, .hero::after, .about::after,
  .contact::after, .contact-card::before { display: none; }
  .portrait-small.portrait-work > img { box-shadow: none; }
}