/* Separate artwork: abstract interactive backdrop and uncropped transparent logo. */
header.hero{position:relative;isolation:isolate}
.hero-dither{position:absolute;z-index:-2;top:-112px;bottom:-80px;left:calc((100% - 100vw)/2);width:100vw;overflow:hidden;pointer-events:none;background:var(--bg,#F8F9FB);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%)}
.hero-dither img,.hero-dither canvas{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;pointer-events:none}
.hero-dither canvas{opacity:0}
.hero-dither::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--bg,#F8F9FB) 0%,color-mix(in srgb,var(--bg,#F8F9FB) 85%,transparent) 40%,color-mix(in srgb,var(--bg,#F8F9FB) 20%,transparent) 100%);pointer-events:none}
.hero-brand-3d{position:absolute;z-index:-1;right:clamp(-64px,-3vw,-12px);top:65px;width:clamp(230px,36vw,480px);height:calc(100% - 80px);max-height:490px;object-fit:contain;object-position:right center;pointer-events:none}
header.hero>.after{position:relative;z-index:1}
@media(max-width:1080px){.hero-brand-3d{right:-12px;top:100px;width:34%;height:280px;opacity:.65}}
@media(max-width:700px){.hero-dither{top:-100px;bottom:-55px}.hero-dither::after{background:color-mix(in srgb,var(--bg,#F8F9FB) 86%,transparent)}.hero-brand-3d{right:0;top:24px;width:130px;height:130px;opacity:.35}}

/* Both images are composited into the same interactive shader; only show plain art as fallback. */
.hero-dither .hero-brand-3d{inset:auto;right:4.5%;top:20%;width:43%;height:62%;max-height:none;object-fit:contain;object-position:right center;z-index:0;mix-blend-mode:screen;opacity:1}
.hero-dither.effect-ready>img{visibility:hidden}
.hero-dither canvas{z-index:1}

.hero-dither::after{z-index:2}
/* Never expose the original artwork while the pixel effect initializes. */
.hero-dither>img{visibility:hidden}

/* Contact repeats the Hero artwork and interactive pixels behind the content. */
footer.contact-dither{position:relative;isolation:isolate}
footer.contact-dither>.hero-dither{top:0;bottom:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 65%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 65%,#000 100%)}
footer.contact-dither .ft .hl{background-image:linear-gradient(#D8C1FC,#D8C1FC)}
@media(prefers-reduced-motion:no-preference){footer.contact-dither .ft .hl:not(.sweep){background-size:0 100%}}

footer.contact-dither .cta{margin-top:22px}
footer.contact-dither .rotating-highlight{display:inline-block;vertical-align:baseline;text-align:left;transition:width .16s ease;box-sizing:content-box}
footer.contact-dither .rotating-highlight.sweep{animation:sweep 1s var(--ease) both,contact-enter .6s ease both}
@keyframes contact-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
footer.contact-dither .rotating-word{display:inline-block;width:max-content;min-height:1em}
footer.contact-dither .rotating-word::after{content:'';display:inline-block;height:.85em;margin-left:.04em;border-right:2px solid currentColor;animation:contact-caret 1s steps(1) infinite}
@keyframes contact-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){footer.contact-dither .rotating-word::after{display:none}}

@media(prefers-reduced-motion:reduce){footer.contact-dither .rotating-highlight{transition:none;animation:none}}