/* Quiet pencil details. Decorative images have no text or interactive role. */
.home-page {
  --home-pencil-ticks: url('../images/home/doodles/ticks.svg');
  --home-pencil-sprig: url('../images/home/doodles/sprig.svg');
  --home-pencil-line: url('../images/home/doodles/pencil-line.svg');
  --home-paper-fibers: url('../images/home/doodles/paper-fibers.svg');
}
.home-page :is(.message, .case-gallery, .services, .access, .contact-cta, .large-contact-banner) {
  background-image: var(--home-paper-fibers);
  background-size: 180px 160px;
}
.home-page :is(.message, .case-gallery, .promise, .access, .sns, .partner-banners) {
  position: relative;
}
.home-page :is(.case-gallery, .promise, .access, .sns)::before {
  content: '';
  position: absolute;
  top: 24px;
  right: max(24px, calc((100% - 1200px) / 2));
  width: 54px;
  height: 68px;
  background: var(--home-pencil-sprig) center / contain no-repeat;
  opacity: .19;
  transform: rotate(14deg);
  pointer-events: none;
}
.home-page .column-gallery::before { right: auto; left: 24px; transform: rotate(-16deg); }
.home-page .promise::before { top: 12px; right: max(24px, calc((100% - 1080px) / 2)); }
.home-page .sns::before { top: 28px; width: 36px; height: 46px; }

/* Short pencil strokes frame the words, even when a title wraps. */
.home-page .home-handdrawn-label {
  display: inline-block;
  position: relative;
  max-width: 100%;
  padding-inline: 28px;
}
.home-page .home-handdrawn-label::before,
.home-page .home-handdrawn-label::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 26px;
  background: var(--home-pencil-ticks) center / contain no-repeat;
  transform: translateY(-50%) rotate(-7deg);
  opacity: .75;
  pointer-events: none;
}
.home-page .home-handdrawn-label::after {
  left: auto;
  right: 0;
  transform: translateY(-50%) scaleX(-1) rotate(-7deg);
}
.home-page .feature__title::after {
  width: 112px;
  height: 12px;
  background: var(--home-pencil-line) center / contain no-repeat;
}
.home-page .hero__title { position: relative; }
.home-page .hero__title::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 50%;
  width: 116px;
  height: 10px;
  background: var(--home-pencil-line) center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: .6;
  transform: translateX(-50%) rotate(-2deg);
  pointer-events: none;
}
.home-page .message { background-color: #faf9f5; }
.home-page .curtain-strengths__item {
  border-radius: 14px 11px 15px 12px;
  background-image: var(--home-paper-fibers);
  background-size: 180px 160px;
}
.home-page .curtain-strengths__eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 22px;
  background: var(--home-pencil-ticks) center / contain no-repeat;
  opacity: .65;
  transform: rotate(18deg);
}
.home-page .case-gallery__category { border-radius: 18px 22px 17px 20px; }
.home-page .services__card-body { background: var(--home-paper-fibers) 0 0 / 180px 160px; }
.home-page .promise__card { background-image: var(--home-paper-fibers); background-size: 180px 160px; }
.home-page .promise__message { border-top-style: dashed; border-top-color: #c4cec1; }
.home-page .promise__message-signature::after {
  content: '';
  display: block;
  width: 78px;
  height: 9px;
  margin: 3px auto 0;
  background: var(--home-pencil-line) center / contain no-repeat;
  opacity: .65;
  pointer-events: none;
}
.home-page .slideshow__inner { border-bottom: 1px dashed #d7ddd1; }
.home-page .partner-banners::before {
  content: '';
  display: block;
  width: 74px;
  height: 10px;
  margin: 0 auto 18px;
  background: var(--home-pencil-line) center / contain no-repeat;
  opacity: .6;
  pointer-events: none;
}
@media (max-width: 699px) {
  .home-page .home-handdrawn-label { padding-inline: 22px; }
  .home-page .home-handdrawn-label::before,
  .home-page .home-handdrawn-label::after { width: 17px; height: 21px; }
  .home-page :is(.case-gallery, .promise, .access, .sns)::before { top: 14px; width: 28px; height: 36px; opacity: .13; }
  .home-page .case-gallery::before { right: 10px; }
  .home-page .column-gallery::before { right: auto; left: 10px; }
}