[data-sig=tattoo-hero]{height:220dvh;position:relative}[data-sig=tattoo-hero] .hero-stage{height:100dvh;position:sticky;top:0;overflow:hidden;min-height:640px}[data-sig=tattoo-hero] .hero-frames,[data-sig=tattoo-hero] .frame{position:absolute;inset:0}[data-sig=tattoo-hero] .frame{opacity:0}[data-sig=tattoo-hero] .frame.current{opacity:1}[data-sig=tattoo-hero] .frame img{width:100%;height:100%;object-position:center}[data-sig=tattoo-hero] .hero-frames:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,23,21,.92),rgba(23,23,21,0) 80%)}[data-sig=tattoo-hero] .hero-copy{position:absolute;top:17%;left:var(--edge);width:48%;z-index:2}[data-sig=tattoo-hero] h1{margin:22px 0 24px}[data-sig=tattoo-hero] .hero-copy>p:not(.location){max-width:33ch;color:var(--paper);margin-bottom:32px}[data-sig=tattoo-hero] .location{font-size:14px;color:var(--muted)}[data-sig=tattoo-hero] .process-caption{position:absolute;bottom:35px;left:var(--edge);right:var(--edge);z-index:2;display:grid;grid-template-columns:1fr auto;align-items:center;border-top:1px solid #777064;padding-top:20px}[data-sig=tattoo-hero] .process-caption>span{font-family:var(--display);font-size:28px}[data-sig=tattoo-hero] .stage-tabs{display:flex;gap:8px}[data-sig=tattoo-hero] .stage-tabs button{background:transparent;color:var(--muted);border:0;border-bottom:2px solid transparent;padding:8px 14px;font-size:15px}[data-sig=tattoo-hero] .stage-tabs button[aria-pressed=true]{color:var(--paper);border-color:var(--accent)}[data-sig=tattoo-hero] .stage-note{font-size:14px;color:var(--muted);margin-top:8px;grid-column:1/-1}@media(max-width:760px){[data-sig=tattoo-hero]{height:180dvh}[data-sig=tattoo-hero] .hero-stage{height:calc(100dvh - 60px);min-height:620px}[data-sig=tattoo-hero] .hero-copy{top:7%;width:calc(100% - 44px)}[data-sig=tattoo-hero] h1{font-size:58px;max-width:8ch;margin:14px 0 16px}[data-sig=tattoo-hero] .hero-copy>p:not(.location){font-size:16px;max-width:28ch;margin-bottom:20px}[data-sig=tattoo-hero] .frame img{object-position:65% center}[data-sig=tattoo-hero] .hero-frames:after{background:linear-gradient(180deg,rgba(23,23,21,.82),rgba(23,23,21,.05) 75%)}[data-sig=tattoo-hero] .process-caption{bottom:22px;display:block;padding-top:12px}[data-sig=tattoo-hero] .stage-tabs{justify-content:space-between;gap:0;margin-top:8px}[data-sig=tattoo-hero] .stage-tabs button{padding:4px 3px;font-size:12px}[data-sig=tattoo-hero] .stage-note{font-size:12px}}@media(prefers-reduced-motion:reduce){[data-sig=tattoo-hero]{height:100dvh}}
@media(max-width:760px){[data-sig=tattoo-hero] h1{max-width:none;font-size:56px}[data-sig=tattoo-hero] .hero-copy{top:8%}}
@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){[data-sig=tattoo-hero]{view-timeline-name:--tattoo-process;view-timeline-axis:block}[data-sig=tattoo-hero] .frame{animation-duration:1s;animation-timing-function:steps(1,end);animation-fill-mode:both;animation-timeline:--tattoo-process;animation-range:contain 0% contain 100%}[data-sig=tattoo-hero] [data-frame="0"]{animation-name:stencil-cut}[data-sig=tattoo-hero] [data-frame="1"]{animation-name:line-cut}[data-sig=tattoo-hero] [data-frame="2"]{animation-name:finish-cut}[data-sig=tattoo-hero] [data-frame="3"]{animation-name:healed-cut}@keyframes stencil-cut{0%,24.99%{opacity:1}25%,100%{opacity:0}}@keyframes line-cut{0%,24.99%{opacity:0}25%,49.99%{opacity:1}50%,100%{opacity:0}}@keyframes finish-cut{0%,49.99%{opacity:0}50%,74.99%{opacity:1}75%,100%{opacity:0}}@keyframes healed-cut{0%,74.99%{opacity:0}75%,100%{opacity:1}}}}
@media(max-width:600px){[data-sig=tattoo-hero] .frame img{object-position:center}}
