/* TOP motion and scroll states, loaded after top.css. */
/* Salon photo slideshows: travel from left to right with a seamless repeated set. */
.top-gallery{--gallery-gap:calc(38 * var(--u));--gallery-offset:calc(401 * var(--u));overflow:hidden}
.top-gallery .top-gallery-track{gap:var(--gallery-gap)}
.top-gallery:not(.top-gallery-end) .top-gallery-track>div{position:relative}
.top-gallery:not(.top-gallery-end) .top-gallery-track>div>img{position:absolute;width:var(--photo-width,100%);height:var(--photo-height,100%);left:var(--photo-left,0);top:var(--photo-top,0);max-width:none;object-fit:cover}
.top-gallery.is-slideshow .top-gallery-track{animation:top-gallery-right 90s linear infinite;will-change:transform}


@keyframes top-gallery-right{from{transform:translateX(calc(-50% - var(--gallery-gap)/2 - var(--gallery-offset)))}to{transform:translateX(calc(0px - var(--gallery-offset)))}}
@media(max-width:1023px){.top-gallery{--gallery-gap:14px;--gallery-offset:35vw}}
@media(prefers-reduced-motion:reduce){.top-gallery.is-slideshow .top-gallery-track{animation:none;will-change:auto;transform:translateX(calc(0px - var(--gallery-offset)))}}


@media(min-width:1024px){.top-gallery-end{--gallery-offset:calc(408 * var(--u))}}

/* WORKS sticky panels; normal flow is the no-script fallback. */
.top-works-stage{position:relative;z-index:1}
.top-work-panels{position:relative}
.top-work-panels .top-work-card+.top-work-card{margin-top:35px}
.top-work-controls{display:none}
.top-works.is-scroll-works,.top-works.is-measuring{padding:0}
.top-works.is-scroll-works{height:calc(var(--works-stage-height, 0px) + var(--works-distance))}
.top-works.is-scroll-works .top-works-stage{position:sticky;top:var(--works-top)}
.top-works.is-scroll-works .top-works-stage,.top-works.is-measuring .top-works-stage{padding:clamp(24px,5vh,70px) 0}
.top-works:is(.is-scroll-works,.is-measuring) .top-work-panels{display:grid;width:75%;margin:calc(60 * var(--u)) auto 0}
.top-works:is(.is-scroll-works,.is-measuring) .top-work-card{grid-area:1/1;width:100%;margin:0;align-self:stretch}
.top-works:is(.is-scroll-works,.is-measuring) .top-work-copy{padding-right:calc(100 * var(--u))}
.top-works.is-scroll-works .top-work-card{opacity:1;visibility:hidden;transform:translateY(var(--work-lift,115%));pointer-events:none;transition:none;box-shadow:0 -10px 28px #754a3320}
.top-works.is-scroll-works .top-work-card.is-in-stack{visibility:visible}
.top-works.is-scroll-works .top-work-card.is-active{pointer-events:auto}
.top-works.is-scroll-works .top-work-controls{display:flex;flex-direction:column;position:absolute;right:calc(12.5% + 15 * var(--u));bottom:calc(clamp(24px,5vh,70px) + 209 * var(--u));z-index:3}
.top-work-controls button{display:grid;place-items:center;width:36px;height:28px;padding:0;border:0;background:transparent;cursor:pointer}
.top-work-controls button span{width:10px;height:10px;border-radius:50%;background:#e9e2d9;transition:background .3s}
.top-work-controls button[aria-current=true] span{background:var(--orange)}
.top-work-controls button:focus-visible{outline:2px solid var(--orange);outline-offset:1px;border-radius:8px}
@media(max-width:1023px){
 .top-works:is(.is-scroll-works,.is-measuring) .top-works-stage{padding:24px 20px}
 .top-works:is(.is-scroll-works,.is-measuring) .top-section-heading h2{font-size:42px}
 .top-works:is(.is-scroll-works,.is-measuring) .top-section-heading p{font-size:15px;margin-top:8px}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-panels{width:100%;margin-top:24px}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-card figure{height:180px;aspect-ratio:auto}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-copy{padding:22px 38px 24px 22px}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-number strong{font-size:36px}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-copy h3{margin-top:10px}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-copy>p:last-child{margin-top:14px}
 .top-works.is-scroll-works .top-work-controls{right:22px;bottom:90px}
}
@media(prefers-reduced-motion:reduce){.top-work-controls button span{transition:none}}
/* Pin the gradient and illustrations with WORKS, so the background never drifts during the sequence. */
.top-works.is-scroll-works{background:transparent}
.top-works.is-scroll-works .top-works-stage{min-height:var(--works-stage-height);background:linear-gradient(221.819deg,var(--orange),var(--yellow));border-radius:inherit;isolation:isolate;overflow:clip}
.top-works.is-measuring .top-works-stage{min-height:0}
.top-works.is-scroll-works .top-work-controls{top:var(--works-controls-top);bottom:auto}
.top-works-stage>.top-art{z-index:-1}
@media(max-width:1023px){
 .top-works-stage>.top-art{width:15%!important;top:30px!important;left:4%!important;opacity:.7}
 .top-works-stage>.top-art:not(.top-work-scissors):not(.top-work-leaf){left:82%!important}
}
/* Figma 5091:2774: clean gradient, 1920×1110 composition, 1440×500 card. */
.top-works>.top-art,.top-works-stage>.top-art{display:block}
.top-works.is-scroll-works .top-work-controls{transform:translateY(-50%)}
.top-work-controls button span{background:#e1e1e3}
@media(min-width:1024px){
 .top-works:is(.is-scroll-works,.is-measuring) .top-works-stage{--u:calc(.0520833333cqw * var(--works-scale,1));padding:calc(175 * var(--u)) 0}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-panels{width:calc(75% * var(--works-scale,1));margin-top:calc(80 * var(--u))}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-copy{padding-right:calc(114 * var(--u))}
 .top-works.is-scroll-works .top-work-controls{right:calc((100% - 75% * var(--works-scale,1))/2 + 29 * var(--u))}
 .top-works.is-scroll-works .top-work-controls{gap:calc(20 * var(--u))}
 .top-work-controls button{width:calc(14 * var(--u));height:calc(14 * var(--u));position:relative}
 .top-work-controls button span{width:calc(14 * var(--u));height:calc(14 * var(--u))}
 .top-work-controls button:before{content:"";position:absolute;inset:-8px}
 .top-works.is-scroll-works .top-work-card{box-shadow:none}
}
@media(min-width:1024px){.top-works:is(.is-scroll-works,.is-measuring) .top-work-copy>p:last-child{font-size:calc(16 * var(--u))}}
/* Keep navigation and scroll progression available at every viewport height. */
.top-works:is(.is-scroll-works,.is-measuring) .top-works-stage{padding-block:var(--works-pad,24px)}
.top-works.is-scroll-works .top-work-controls{z-index:20;display:flex;visibility:visible;opacity:1}
.top-works .top-work-panels{isolation:isolate}
@media(min-width:1024px){
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-panels{width:75%}
 .top-works.is-scroll-works .top-work-controls{right:calc(12.5% + 29 * var(--u))}
 .top-work-controls button span{min-width:8px;min-height:8px}
}
@media(max-width:1023px){
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-card figure{height:var(--works-photo-height,180px)}
}
@media(max-width:1023px) and (max-height:680px){
 .top-works:is(.is-scroll-works,.is-measuring) .top-section-heading h2{font-size:34px}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-copy{padding:16px 38px 18px 20px}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-copy>p:last-child{font-size:12px;line-height:1.8;margin-top:10px}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-number strong{font-size:30px}
 .top-works:is(.is-scroll-works,.is-measuring) .top-work-copy h3{font-size:18px}
}
/* First-view circular photos drift independently without changing their crop or layout. */
.top-hero .top-orb{--drift-x:clamp(6px, .7vw, 14px);--drift-y:clamp(-20px, -1vw, -8px);animation:hero-orb-drift 11s ease-in-out infinite}
.top-hero .top-orb-tools{animation-duration:10s;animation-delay:-2s}
.top-hero .top-orb-salon{--drift-x:clamp(-16px, -.8vw, -6px);--drift-y:clamp(6px, .8vw, 16px);animation-duration:13s;animation-delay:-6s}
.top-hero .top-orb-products{--drift-x:clamp(-12px, -.6vw, -5px);animation-duration:12s;animation-delay:-4s}
@keyframes hero-orb-drift{
 0%,100%{transform:translate3d(0,0,0)}
 35%{transform:translate3d(var(--drift-x),var(--drift-y),0)}
 70%{transform:translate3d(calc(var(--drift-x) * -.6),calc(var(--drift-y) * .45),0)}
}

@media(prefers-reduced-motion:reduce){.top-hero .top-orb{animation:none;transform:none}}
/* ABOUT US uses the same gentle motion, with separate timing for each circular photo. */
.top-about .top-orb{--drift-x:clamp(5px,.6vw,12px);--drift-y:clamp(-16px,-.8vw,-6px);animation:hero-orb-drift 14s ease-in-out infinite}
.top-about .top-about-main{animation-delay:-3s}
.top-about .top-about-detail{--drift-x:clamp(-12px,-.6vw,-5px);--drift-y:clamp(6px,.7vw,14px);animation-duration:11s;animation-delay:-7s}
.top-about .top-about-edge{animation-duration:13s;animation-delay:-5s}
@media(prefers-reduced-motion:reduce){.top-about .top-orb{animation:none;transform:none}}
/* MESSAGE / Company circular photos follow the same restrained drifting motion. */
.top-message>.top-orb,.top-company>.top-orb{--drift-x:clamp(5px,.6vw,12px);--drift-y:clamp(-18px,-.9vw,-7px);animation:hero-orb-drift 15s ease-in-out infinite;animation-delay:-4s}
.top-company>.top-orb:first-child{--drift-x:clamp(-14px,-.7vw,-5px);--drift-y:clamp(6px,.7vw,14px);animation-duration:12s;animation-delay:-6s}
.top-company>.top-orb:nth-child(2){animation-duration:14s;animation-delay:-2s}
@media(prefers-reduced-motion:reduce){.top-message>.top-orb,.top-company>.top-orb{animation:none;transform:none}}
/* Draw-like reveals keep the original Figma line art, cropping and rotations intact. */
.top-hero .line-reveal-ready{--line-start:inset(-20% -20% 120% -20%);--line-delay:.15s;--line-duration:2.2s;clip-path:var(--line-start)}
.top-hero .top-hero-leaf.line-reveal-ready{--line-start:inset(120% -20% -20% -20%);--line-delay:.1s;--line-duration:2.5s}
.top-hero .top-hero-scissors.line-reveal-ready{--line-delay:.4s}
.top-hero .top-hero-dryer.line-reveal-ready{--line-delay:.7s;--line-duration:2.6s}
.top-hero .top-handwritten.line-reveal-ready{--line-start:inset(-20% 120% -20% -20%);--line-delay:1s;--line-duration:2.8s}
.top-hero .line-reveal-ready.is-line-revealed{animation:hero-line-reveal var(--line-duration) cubic-bezier(.35,.05,.3,1) var(--line-delay) both}
@keyframes hero-line-reveal{from{clip-path:var(--line-start)}to{clip-path:inset(-20%)}}
@media(prefers-reduced-motion:reduce){.top-hero .line-reveal-ready,.top-hero .line-reveal-ready.is-line-revealed{clip-path:none;animation:none}}
/* Stagger the first-view star accents for a gentle twinkle. */
.top-page .top-sparkle{animation:hero-sparkle 3.8s ease-in-out var(--sparkle-delay,0s) infinite;transform-origin:center}
@keyframes hero-sparkle{
 0%,100%{opacity:.65;transform:scale(.93) rotate(-4deg)}
 50%{opacity:1;transform:scale(1.1) rotate(4deg)}
}
@media(prefers-reduced-motion:reduce){.top-page .top-sparkle{animation:none;opacity:1;transform:none}}
/* A short entrance sequence; the copy and portrait remain still after appearing. */
.top-hero.hero-motion-ready .top-person,.top-hero.hero-motion-ready .top-hero-copy,.top-hero.hero-motion-ready .top-benefits li{opacity:0}
.top-hero.is-hero-entered .top-person{animation:hero-soft-entrance 1.1s cubic-bezier(.2,.7,.3,1) .1s both}
.top-hero.is-hero-entered .top-hero-copy{animation:hero-soft-entrance 1s cubic-bezier(.2,.7,.3,1) .35s both}
.top-hero.is-hero-entered .top-benefits li{animation:hero-benefit-entrance .9s cubic-bezier(.2,.8,.3,1) 1s both}
.top-hero.is-hero-entered .top-benefits li:nth-child(2){animation-delay:1.18s}
.top-hero.is-hero-entered .top-benefits li:nth-child(3){animation-delay:1.36s}
.top-hero.is-hero-entered .top-recruit-sticker{animation:hero-sticker-sway 6s ease-in-out 1.5s infinite}
@keyframes hero-soft-entrance{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hero-benefit-entrance{from{opacity:0;transform:translate3d(0,14px,0) scale(.94)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes hero-sticker-sway{0%,100%{transform:rotate(5.3deg)}50%{transform:rotate(1.3deg)}}
@media(prefers-reduced-motion:reduce){
 .top-hero.hero-motion-ready .top-person,.top-hero.hero-motion-ready .top-hero-copy,.top-hero.hero-motion-ready .top-benefits li,.top-hero.is-hero-entered .top-person,.top-hero.is-hero-entered .top-hero-copy,.top-hero.is-hero-entered .top-benefits li{animation:none;opacity:1;transform:none}
 .top-hero.is-hero-entered .top-recruit-sticker{animation:none;transform:rotate(5.3deg)}
}
/* Other hand-drawn accents appear as the user reaches them. Observe the wrapper,
   reveal only its image, so clipping never hides the observer's target itself. */
.top-page .scroll-ink-ready{--ink-start:inset(-20% 120% -20% -20%);--ink-duration:3.2s}
.top-page .scroll-ink-ready>img{clip-path:var(--ink-start)}
.top-page .scroll-ink-ready.is-ink-revealed>img{animation:page-ink-reveal var(--ink-duration) cubic-bezier(.35,.05,.3,1) var(--ink-delay,0s) both}
.top-works .scroll-ink-ready,.top-message .scroll-ink-ready{--ink-start:inset(-20% -20% 120% -20%);--ink-duration:2.6s}
.top-works .top-work-leaf.scroll-ink-ready{--ink-start:inset(120% -20% -20% -20%)}
@keyframes page-ink-reveal{from{clip-path:var(--ink-start)}to{clip-path:inset(-20%)}}
@media(prefers-reduced-motion:reduce){.top-page .scroll-ink-ready>img,.top-page .scroll-ink-ready.is-ink-revealed>img{animation:none;clip-path:none}}
/* Uploaded salon photos crossfade inside the existing floating circular windows. */
.top-hero .top-orb.has-timed-photos>img{inset:0!important;width:100%!important;height:100%!important;max-width:none;object-fit:cover;opacity:0;transition:opacity 1s ease;transform:none}
.top-hero .top-orb.has-timed-photos>img.is-current-photo{opacity:1}
@media(prefers-reduced-motion:reduce){.top-hero .top-orb.has-timed-photos>img{transition:none}}