:root{--pink:#f34372;--pale:#fcf0f5;--ink:#292323}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--pale);color:var(--ink);font-family:Arial,Helvetica,sans-serif}.hero{height:100svh;min-height:700px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#fff9fb,#fcf0f5 76%);isolation:isolate}.brand{position:absolute;top:1%;left:50%;transform:translateX(-50%);width:145px;z-index:8;mix-blend-mode:multiply}.brand img{display:block;width:100%}.intro{position:absolute;top:29.5%;left:50%;transform:translateX(-50%);text-align:center;width:100%;z-index:5;pointer-events:none}.intro h1{font-size:clamp(53px,5.1vw,100px);line-height:.95;letter-spacing:-.065em;margin:0;font-weight:1000;transform-origin:center;transition:opacity .3s ease-in-out,transform .3s ease-in-out}.explore{display:inline-flex;align-items:center;justify-content:center;margin-top:35px;min-width:300px;min-height:54px;text-decoration:none;pointer-events:auto}.explore span{display:block;width:100%;padding:13px 24px;border-radius:40px;background:var(--pink);color:white;text-transform:uppercase;font-size:clamp(18px,1.4vw,25px);font-weight:700;letter-spacing:-.04em;transform-origin:center;transition:opacity .3s ease-in-out,transform .3s ease-in-out}.explore:hover span,.explore:focus-visible span{opacity:1!important;transform:scale(1)!important}.explore:focus-visible{outline:3px solid #9f1c4a;outline-offset:3px;border-radius:40px}.hero.active .intro h1{opacity:.1;transform:scale(.88)}.hero.active .explore span{opacity:.16;transform:scale(.9)}.journey{position:absolute;z-index:4;left:15%;right:14%;top:36%;height:11%;min-height:85px;cursor:pointer;touch-action:pan-y;outline-offset:3px}.journey:focus-visible{outline:2px solid var(--pink);border-radius:18px}.route-line{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;color:var(--pink);opacity:.2;transition:opacity .3s ease-in-out}.hero.active .route-line{opacity:1}.stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;white-space:nowrap;color:#694350;font-size:clamp(13px,1.25vw,24px);font-weight:700}.stop span{display:block;transform-origin:center;transition:transform .3s ease-in-out}.hero.active .stop span{transform:scale(1.16)}.stop i{width:20px;height:20px;background:var(--pink);border-radius:50%}.stop:nth-of-type(3),.stop:nth-of-type(7){transform:translateY(18px)}.stop.last i{background:transparent;border:3px solid var(--pink)}.steps{display:flex;align-items:center;gap:clamp(4px,.6vw,12px);transform:rotate(8deg)}.steps:nth-of-type(4n){transform:rotate(-8deg)}.steps svg{width:clamp(12px,1.35vw,25px);height:20px;fill:currentColor;transform:rotate(-25deg)}.steps svg:nth-child(even){transform:scaleY(-1) rotate(-25deg)}.steps.fade svg:nth-child(2){opacity:.65}.steps.fade svg:nth-child(3){opacity:.35}
.products{position:absolute;inset:0;pointer-events:none;z-index:2}.product{position:absolute;pointer-events:auto;cursor:pointer;touch-action:pan-y;mix-blend-mode:multiply;--sway:5deg}.product-art{position:absolute;inset:0;overflow:visible}.product img{position:absolute;height:100%;width:auto;max-width:none;left:50%;top:0;transform:translateX(-50%);pointer-events:none;user-select:none}.product .upper{mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 72%)}.product .lower{mask-image:linear-gradient(to bottom,transparent 50%,#000 72%);transform-origin:50% 50%;transition:transform .45s ease}.product.engaged .lower{transform:translateX(-50%) skewX(var(--sway))}.wig{bottom:-24%;height:67%;width:15%;animation:rise .78s cubic-bezier(.16,1,.3,1) both}.wig-one{left:22%;height:53%;bottom:-24%;animation-delay:0ms;transform:rotate(8deg)}.wig-two{left:33%;height:65%;bottom:-27%;animation-delay:60ms}.wig-three{left:44%;height:70%;bottom:-28%;animation-delay:120ms}.wig-four{left:54%;height:49%;bottom:-20%;animation-delay:180ms}.wig-five{left:65%;height:65%;bottom:-26%;animation-delay:240ms}.side{z-index:2;width:14%;height:43%;top:52%}.side-left{left:-2%;animation:from-left .75s cubic-bezier(.16,1,.3,1) both}.side-right{right:-2%;top:29%;height:31%;animation:from-right .75s cubic-bezier(.16,1,.3,1) both}.side-left img{left:50%}.side-right img{left:50%}@keyframes rise{from{translate:0 110vh}to{translate:0 0}}@keyframes from-left{from{translate:-30vw 0}to{translate:0 0}}@keyframes from-right{from{translate:30vw 0}to{translate:0 0}}
.content{background:#fff9fb;padding:110px 8%;min-height:70vh}.content-inner{max-width:1050px;margin:auto}.eyebrow{font-size:12px;letter-spacing:.25em;color:var(--pink);font-weight:700}.content h2{font:normal clamp(42px,5vw,72px)/1.03 Georgia,serif;letter-spacing:-.04em;margin:30px 0}.content p{color:#705f65;line-height:1.7}.content-rule{height:1px;background:#ecdbe2;margin:55px 0}.content h3{font:normal 30px Georgia,serif}.back-top{display:inline-block;color:#b82c58;margin-top:35px}
@media(max-width:700px){.hero{height:850px;min-height:100svh;max-height:1000px}.brand{width:112px;top:8px}.intro{top:20%}.intro h1{font-size:clamp(43px,10vw,68px)}.explore{margin-top:145px;min-width:245px;min-height:48px}.explore span{font-size:16px;padding:13px 20px}.journey{left:3%;right:3%;top:34%;height:105px;min-height:0}.route-line{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));opacity:.52}.hero.active .route-line{opacity:1}.stop,.stop:nth-of-type(3),.stop:nth-of-type(7){font-size:clamp(9px,2.5vw,12px);transform:none;gap:8px}.hero.active .stop span{transform:scale(1.04)}.stop i{width:12px;height:12px}.stop.last i{border-width:2px}.steps{display:none}.stop:not(:last-of-type):after{content:'· · ·';position:absolute;left:75%;top:20px;color:var(--pink);font-size:15px;letter-spacing:0}.wig{width:22%;bottom:-7%;height:37%}.wig-one{left:1%;height:31%;bottom:-7%}.wig-two{left:19%;height:36%;bottom:-8%}.wig-three{left:38%;height:40%;bottom:-9%}.wig-four{left:57%;height:28%;bottom:-6%}.wig-five{left:75%;height:36%;bottom:-8%}.side{width:18%;height:22%;top:61%}.side-left{left:-4%}.side-right{right:-4%;top:53%;height:19%}.content{padding:80px 7%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0ms!important}}
.products{display:contents}.wig{z-index:2}
@media(min-width:701px){.journey{height:9%;min-height:72px}}
.brand,.product{mix-blend-mode:normal}
@media(max-width:700px){.steps{display:flex;position:absolute;top:56%;width:10%;gap:2px;justify-content:center;transform:none!important}.steps:nth-child(2){left:15%}.steps:nth-child(4){left:35%}.steps:nth-child(6){left:55%}.steps:nth-child(8){left:75%}.steps svg{width:8px;height:10px}.stop:not(:last-of-type):after{content:none}}
/* Keep the stationary and moving slices opaque at their shared edge. */
@media (min-width:701px){.product .upper{mask-image:linear-gradient(to bottom,#000 0 72%,transparent 72%)}.product .lower{mask-image:linear-gradient(to bottom,transparent 0 72%,#000 72%);transform-origin:50% 72%}}
@media(min-width:701px){.journey::before{content:"";position:absolute;inset:0 -24px}}
/* Desktop calibration against the 1890 × 1063 reference. */
@media(min-width:701px){
 .intro{top:30.1%}
 .intro h1{font-size:clamp(53px,4.8vw,92px);line-height:1.06;letter-spacing:-.065em}
 .explore{min-width:0;width:clamp(235px,16.5vw,312px);margin-top:29px;min-height:54px}
 .explore span{font-size:clamp(18px,1.25vw,23px);padding:14px 15px}
 .wig-three{transform:rotate(6deg)}
 .product .product-image{mask-image:none;will-change:filter}
}
@media(min-width:701px){.intro{top:29%}.wig-three{bottom:-27%}}

@media(min-width:701px){.hero{user-select:none}}
/* Desktop wig arrangement tuned to the supplied five-product reference. */
@media(min-width:701px){
 .wig-one{left:21.5%;transform:rotate(15deg)}
 .wig-two{left:32.7%;height:67%;bottom:-27%}
 .wig-three{left:44.4%;transform:rotate(10deg)}
 .wig-four{left:53.5%;height:53%;bottom:-20%}
 .wig-five{left:65.7%;height:67%;bottom:-26%}
}
@media(min-width:701px){.wig-two{transform:rotate(-4deg)}}
/* Match the requested 80% desktop browser-scale appearance by default. */
@media(min-width:701px){html{zoom:.8}}
@media(min-width:701px){.hero{height:125svh;min-height:875px}.explore span{white-space:nowrap}}
/* Keep idle images unfiltered. Only the moving ends use a composited layer. */
.product .product-image{will-change:auto}
.product .tail-image{opacity:0;visibility:hidden;mask-image:linear-gradient(to bottom,transparent 35%,#000 70%);transform-origin:50% 35%;transform:translateX(-50%) skewX(0deg);transition:transform .45s ease-out,opacity .28s ease-in-out,visibility 0s linear .45s;pointer-events:none}
.product.hair-active .tail-image{opacity:1;visibility:visible;transform:translateX(-50%) skewX(var(--tail-angle,1.8deg));transition:transform .4s ease-out,opacity .2s ease-in-out,visibility 0s}