/* The headline pairs a clear invitation with DUO's handwritten second look. */
.hero .hero-title{font-family:var(--sans);font-size:clamp(52px,17.5cqw,122px);line-height:1.04;letter-spacing:-.065em;white-space:normal;font-weight:780;max-width:100%;margin:0;overflow:visible}
.hero .hero-title>.hero-title__lead{display:block;color:#f5f5f0;-webkit-text-fill-color:#f5f5f0;background:none;animation:none;letter-spacing:-.06em}
.hero .hero-title>.hero-title__finish{display:block;position:relative;width:max-content;max-width:100%;white-space:nowrap;font-size:.96em;line-height:1.08;letter-spacing:-.06em;margin-top:-.1em;padding-bottom:.15em;background:none;color:#ffcf12;-webkit-text-fill-color:#ffcf12;animation:none}
.hero-title__look{font-weight:800;color:#f5f5f0;-webkit-text-fill-color:#f5f5f0}
.hero-title__dot{color:#f5f5f0;-webkit-text-fill-color:#f5f5f0;margin-left:.07em}
.hero-title__finish em{display:inline-block;font-family:'DUO Hand',cursive;font-weight:600;font-size:1.37em;font-style:normal;letter-spacing:-.055em;line-height:.95;padding:.14em .12em .16em .04em;margin-block:-.14em -.16em;margin-right:-.12em;overflow:visible;rotate:-4deg;transform-origin:center 70%;margin-left:.025em;background:linear-gradient(110deg,#e6a700 0%,#ffcd00 25%,#fff0a0 50%,#ffcd00 75%,#e6a700 100%);background-size:280% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:duo-title-gold 8s ease-in-out infinite}
.hero-title__stroke{position:absolute;left:-1%;bottom:-.2em;width:99%;height:.36em;overflow:visible;pointer-events:none;stroke:url(#hero-underline-gold);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.hero-title__stroke path{stroke-dasharray:1;stroke-dashoffset:0;animation:duo-title-draw 9s cubic-bezier(.45,0,.2,1) .9s infinite both}
.hero:has(.hero-title) .hero__description{margin-top:28px;max-width:410px}
.hero:has(.hero-title) .eyebrow{display:flex;align-items:center;gap:12px;letter-spacing:.16em}
.hero:has(.hero-title) .eyebrow:before{content:'';width:24px;height:1px;background:#dfc762;flex:none}
@keyframes duo-title-draw{0%,100%{stroke-dashoffset:1;opacity:0}16%,76%{stroke-dashoffset:0;opacity:1}88%{stroke-dashoffset:-1;opacity:0}}
@keyframes duo-title-gold{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
html[data-intro=playing] .hero-title__stroke path{animation-play-state:paused}
body[data-page-hidden=true] .hero-title__finish em,.hero[data-motion-visible=false] .hero-title__finish em{animation-play-state:paused}
@media(max-width:960px){.hero .hero-title{font-size:clamp(58px,17.5cqw,112px)}.hero:has(.hero-title) .hero__description{max-width:470px}}
@media(max-width:600px){.hero .hero-title{font-size:17cqw}.hero .hero-title>.hero-title__finish{padding-bottom:.22em}.hero-title__stroke{stroke-width:2.8}.hero:has(.hero-title) .hero__description{margin-top:23px}.hero:has(.hero-title) .eyebrow{font-size:8px;gap:8px;margin-bottom:22px}.hero:has(.hero-title) .eyebrow:before{width:17px}}
@media(prefers-reduced-motion:reduce){.hero-title__finish em,.hero-title__stroke path{animation:none}}

/* Two letter-sized eyes keep LOOK readable and add a subtle second glance. */
.hero-title__eyes{display:inline-block;width:1.18em;height:.73em;vertical-align:-.015em;margin-inline:.055em -.015em;overflow:visible}
.hero-title__eyelid{animation:duo-eyes-blink 8.5s cubic-bezier(.4,0,.2,1) infinite}
.hero-title__pupil{animation:duo-eyes-glance 8.5s ease-in-out infinite}
@keyframes duo-eyes-glance{0%,18%,58%,100%{transform:translateX(0)}28%,46%{transform:translateX(-11px)}}
@keyframes duo-eyes-blink{0%,65.4%,69%,100%{d:path("M0 -4Q29 -4 58 -4L58 78Q29 78 0 78Z")}66.7%,67.2%{d:path("M0 34Q29 48 58 34L58 36Q29 50 0 36Z")}}
html[data-intro=playing] .hero-title__eyelid,html[data-intro=playing] .hero-title__pupil,body[data-motion=paused] .hero-title__eyelid,body[data-motion=paused] .hero-title__pupil,body[data-page-hidden=true] .hero-title__eyelid,body[data-page-hidden=true] .hero-title__pupil,.hero[data-motion-visible=false] .hero-title__eyelid,.hero[data-motion-visible=false] .hero-title__pupil{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-title__eyelid,.hero-title__pupil{animation:none}}

/* The same moving gold finish across all handwritten headings. */
.handwritten-gradient{background:linear-gradient(110deg,#e6a700 0%,#ffcd00 25%,#fff0a0 50%,#ffcd00 75%,#e6a700 100%);background-size:280% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:duo-title-gold 8s ease-in-out infinite}
h2 .handwritten-gradient{padding:.12em .05em;margin-inline:-.05em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.handwritten-gradient .handwritten-dot{display:inline-block;margin-left:.14em;letter-spacing:0;color:#f5f5f0;-webkit-text-fill-color:#f5f5f0;background:none}
.handwritten-gradient[data-motion-visible=false],body[data-page-hidden=true] .handwritten-gradient,body[data-motion=paused] .handwritten-gradient{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.handwritten-gradient{animation:none}}

#process-title{min-width:0;flex-wrap:wrap;overflow:visible}
#process-title .handwritten-gradient{display:inline-block;flex-shrink:0;white-space:nowrap;text-transform:none;font-size:1.18em;line-height:1.2;padding:.12em .18em .22em .06em;margin-block:-.12em -.22em;margin-inline:-.06em 0;overflow:visible}

.hero[data-motion-visible=false] .hero-title__stroke path,body[data-page-hidden=true] .hero-title__stroke path,body[data-motion=paused] .hero-title__stroke path{animation-play-state:paused}