/* Editorial ornaments share the lettering's irregular, pressure-shaped contours.
   Generated SVGs stay crisp and inherit each section's ink. Functional borders,
   focus rings, player controls and brand icons deliberately remain untouched. */
.pencil-mark{overflow:visible;pointer-events:none}
.pencil-mark use{fill:currentColor;stroke:none}
.pencil-arrow,.media_open,.media_text_link>span:last-child,.footer_btn::after,.client_case i{
  font-family:var(--font-hand);font-weight:400;font-style:normal;
}
.pencil-arrow{display:inline-block}
.tvHero__open .pencil-arrow{font-size:1.25em}
[data-surface] .footer_hello .pencil-mark{color:var(--surface-accent)}
/* The ink service card gets the same drawn edge as the About card.
   A decorative fallback keeps its boundary visible without changing its size. */
.service_item:nth-child(3n+1) .service_card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid currentColor;border-radius:inherit;opacity:.45;
}

@supports (mask-image:url("")){
  .approach__choice::before{
    inset:-3px -8px;border:0;border-radius:0;
    background:var(--surface-accent,var(--c-accent-on-dark));
    mask:url("../media/ink/pencil-loop.15d0f150728b.svg") center / 100% 100% no-repeat;
  }
  .media_tab::after{
    bottom:-2px;height:13px;border:0;border-radius:0;
    background:var(--media-accent,var(--c-accent-red));
    mask:url("../media/ink/pencil-underline.3913f55f13aa.svg") center / 100% 100% no-repeat;
  }
  .about__card--humor{border-color:transparent}
  .about__card--humor::before,
  .service_item:nth-child(3n+1) .service_card::before{
    content:"";position:absolute;inset:-2px;pointer-events:none;
    border:0;border-radius:0;background:currentColor;opacity:.45;
    mask:url("../media/ink/pencil-frame.f51c6b4966e4.svg") center / 100% 100% no-repeat;
  }
  .projectStory__quote{position:relative;border-left-color:transparent}
  .projectStory__quote::before{
    content:"";position:absolute;inset:0 auto 0 -6px;width:10px;pointer-events:none;
    background:var(--c-accent-red);
    mask:url("../media/ink/pencil-rule.8b9a9e8676de.svg") center / 100% 100% no-repeat;
  }
}

/* Filled pencil contours are revealed as a whole rather than dashed strokes. */
.approach__answer.is-arriving .approach__punchline .pencil-mark{
  animation:pencil-reveal .65s ease-out both;
}
@keyframes pencil-reveal{
  from{clip-path:inset(-5px 100% -5px -5px)}
  to{clip-path:inset(-5px -5px -5px -5px)}
}
@media(prefers-reduced-motion:reduce){
  .approach__answer.is-arriving .approach__punchline .pencil-mark{animation:none}
}