html,body{margin:0;height:100%}body{background:#fff;overflow:hidden}
a{color:#1F2A44;text-decoration:none}a:hover{color:#8A6A35}
/* ---------- opening ---------- */
@keyframes opWrap{0%,82%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes opRing{from{stroke-dashoffset:1260}to{stroke-dashoffset:0}}
@keyframes opLogo{0%,18%{opacity:0;transform:scale(.9);filter:blur(10px)}45%,100%{opacity:1;transform:none;filter:none}}
@keyframes opStar{0%,30%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}70%,100%{opacity:0;transform:scale(.6) rotate(90deg)}}
@keyframes opTag{0%,50%{opacity:0;letter-spacing:.8em}72%,100%{opacity:1;letter-spacing:.45em}}
@keyframes opL{0%,74%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@keyframes opR{0%,74%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes opCenter{0%,70%{opacity:1;transform:none}82%,100%{opacity:0;transform:scale(1.15)}}
.op{animation:opWrap 4.8s ease forwards}
.op-l{animation:opL 4.8s cubic-bezier(.75,0,.2,1) forwards}
.op-r{animation:opR 4.8s cubic-bezier(.75,0,.2,1) forwards}
.op-c{animation:opCenter 4.8s ease forwards}
.op-ring{stroke-dasharray:1260;animation:opRing 2.2s cubic-bezier(.6,0,.3,1) .2s both}
.op-logo{animation:opLogo 4.8s ease forwards}
.op-star{animation:opStar 3.4s ease forwards}
.op-tag{animation:opTag 4.8s ease forwards}
/* ---------- hero (time based) ---------- */
@keyframes fade{0%{opacity:0;transform:scale(1.14)}8%{opacity:1}33%{opacity:1}41%{opacity:0;transform:scale(1.02)}100%{opacity:0}}
@keyframes chUp{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes dotbar{0%{transform:scaleX(0)}33%{transform:scaleX(1)}34%,100%{transform:scaleX(0)}}
.slide{opacity:0;animation:fade 18s ease-in-out infinite}
.hc{display:inline-block;opacity:0;animation:chUp .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(4.4s + var(--i) * 70ms)}
.catch2{opacity:0;animation:rise 1.4s ease 5.6s forwards}
.dotbar{transform-origin:left;transform:scaleX(0);animation:dotbar 18s linear infinite}
/* ---------- horizontal track ---------- */
.track{position:relative;display:flex;height:calc(100vh - 70px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:auto}
.track::-webkit-scrollbar{display:none}
.pn{flex:0 0 auto;height:100%;position:relative;box-sizing:border-box}
.pxbox{position:absolute;inset:0;overflow:clip}
.px{position:absolute;top:0;left:-14%;width:128%;height:100%;object-fit:cover}
/* ---------- scroll-driven (inline axis) ---------- */
@keyframes pxMove{from{transform:translateX(-11%)}to{transform:translateX(11%)}}
@keyframes pxMoveS{from{transform:translateX(-5%) scale(1.06)}to{transform:translateX(5%) scale(1.06)}}
@keyframes clipIn{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes clipUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes clipDown{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes zoomIn{from{transform:scale(1.25)}to{transform:scale(1)}}
@keyframes chIn{from{transform:translateY(120%) rotate(12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes lnIn{from{transform:translateY(36px);opacity:0}to{transform:none;opacity:1}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes layer{from{transform:translateX(0)}to{transform:translateX(330vw)}}
@keyframes floatA{from{transform:translateX(30vw) translateY(-20px)}to{transform:translateX(-30vw) translateY(20px)}}
@keyframes floatB{from{transform:translateX(-18vw)}to{transform:translateX(18vw)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes vtIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@supports (animation-timeline: view(inline)){
.px{animation:pxMove linear both;animation-timeline:view(inline)}
.pxs{animation:pxMoveS linear both;animation-timeline:view(inline)}
.rv{animation:clipIn linear both;animation-timeline:view(inline);animation-range:entry 0% cover 42%}
.rvu{animation:clipUp linear both;animation-timeline:view(inline);animation-range:entry 10% cover 45%}
.rvd{animation:clipDown linear both;animation-timeline:view(inline);animation-range:entry 10% cover 45%}
.zm{animation:zoomIn linear both;animation-timeline:view(inline);animation-range:entry 0% cover 50%}
.ln{animation:lnIn linear both;animation-timeline:view(inline);animation-range:entry 30% cover 34%}
.ln[style*="--d: 1"]{animation-range:entry 45% cover 38%}
.ln[style*="--d: 2"]{animation-range:entry 60% cover 42%}
.lg{transform-origin:left;animation:lineGrow linear both;animation-timeline:view(inline);animation-range:entry 50% cover 45%}
.vt{animation:vtIn linear both;animation-timeline:view(inline);animation-range:entry 30% cover 45%}
.layer{animation:layer linear both;animation-timeline:scroll(nearest inline)}
.fa{animation:floatA linear both;animation-timeline:view(inline)}
.fb{animation:floatB linear both;animation-timeline:view(inline)}
.spin{animation:spin linear both;animation-timeline:scroll(nearest inline)}
}
.ch{display:inline-block}
@supports (animation-timeline: view(inline)){
.mask[data-reveal]{view-timeline:--w inline}
.mask[data-reveal] .ch{animation:chIn linear both;animation-timeline:--w}
.mask[data-reveal] .c0{animation-range:cover 8% cover 28%}
.mask[data-reveal] .c1{animation-range:cover 12% cover 32%}
.mask[data-reveal] .c2{animation-range:cover 16% cover 36%}
.mask[data-reveal] .c3{animation-range:cover 20% cover 40%}
.mask[data-reveal] .c4{animation-range:cover 24% cover 44%}
.mask[data-reveal] .c5{animation-range:cover 28% cover 48%}
.mask[data-reveal] .c6{animation-range:cover 32% cover 52%}
.mask[data-reveal] .c7{animation-range:cover 36% cover 56%}
}
.mask{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.06em}
.pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:240px;min-height:56px;border:1px solid #B08D57;border-radius:999px;color:#8A6A35;font-family:'Marcellus',serif;font-size:16px;letter-spacing:.12em;isolation:isolate;transition:color .5s}
.pill::before{content:"";position:absolute;inset:0;background:#B08D57;transform:translateX(-101%);transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:-1}
.pill:hover{color:#fff}.pill:hover::before{transform:none}
.pill .arr{transition:transform .5s}.pill:hover .arr{transform:translateX(6px)}
.nav a{font-family:'Marcellus',serif;font-size:15px;letter-spacing:.08em;padding:8px 0;position:relative;color:#1F2A44}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:#B08D57;transform:scaleX(0);transition:transform .4s}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:#8A6A35}
.card .card-img{transition:filter .8s}
.card:hover .card-img{filter:brightness(1.06) saturate(1.08)}
.card .more{transition:letter-spacing .5s,color .5s}
.card:hover .more{letter-spacing:.3em;color:#8A6A35}
.card:hover .num{-webkit-text-stroke-color:#B08D57}
/* last panel: the track cannot scroll past it, so finish by the time it is fully in view */
@supports (animation-timeline: view(inline)){
.mask[data-reveal="contact"] .c0{animation-range:entry 0% entry 44%}
.mask[data-reveal="contact"] .c1{animation-range:entry 8% entry 52%}
.mask[data-reveal="contact"] .c2{animation-range:entry 16% entry 60%}
.mask[data-reveal="contact"] .c3{animation-range:entry 24% entry 68%}
.mask[data-reveal="contact"] .c4{animation-range:entry 32% entry 76%}
.mask[data-reveal="contact"] .c5{animation-range:entry 40% entry 84%}
.mask[data-reveal="contact"] .c6{animation-range:entry 48% entry 92%}
.mask[data-reveal="contact"] .c7{animation-range:entry 56% entry 100%}
#contact .ln{animation-range:entry 0% entry 90% !important}
}
@media (max-width:768px){.ch{transform:none;opacity:1}body{overflow:auto}.track{display:block;height:auto;overflow:visible}.pn{width:100% !important;min-width:0 !important;height:auto;min-height:440px}.nav{display:none !important}.layer,.floaty{display:none}.vt{writing-mode:horizontal-tb !important}}
@media (prefers-reduced-motion:reduce){.op{display:none}.slide{animation:none;opacity:0}.slide.first{opacity:1}.ch{transform:none !important;opacity:1 !important;transition:none}.hc,.catch2,.ln,.rv,.rvu,.rvd,.zm,.px,.pxs,.lg,.vt,.layer,.fa,.fb{animation:none !important;opacity:1;transform:none;clip-path:none}}

@media (max-width:768px){.page{height:auto !important;overflow:visible !important}header{position:sticky !important;top:0;padding:0 16px !important}.card>div:first-child{flex:0 0 auto !important;height:260px}#company>div{flex:0 0 auto !important;height:220px}#home p:first-of-type{font-size:6vw !important;letter-spacing:.06em !important}.pn{padding-top:56px !important;padding-bottom:56px !important}.pn.card>div:last-child{padding:28px 20px !important}#home,#about,#business,#salon{padding:0 !important}#company{padding:0 !important}}