:root{
  --bk:#0f0f11;--dk:#1a1a1d;--cr:#F0EDE8;--wr:#E8E4DE;
  --g5:#888;--g3:#ccc;--wh:#fff;
  --d:'Space Grotesk',system-ui,sans-serif;
  --s:'Inter',system-ui,sans-serif;
  --e:cubic-bezier(.55,0,.1,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bk)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{font-family:var(--s);color:var(--cr);line-height:1.6;overflow-x:hidden;font-size:16px;background:var(--bk)}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ── Buttons ── */
.btn{display:inline-block;font-family:var(--d);font-weight:600;font-size:.78rem;letter-spacing:.04em;padding:.65rem 1.8rem;border-radius:999px;background:var(--wh);color:var(--bk);transition:all .3s var(--e)}
.btn:hover{background:var(--cr)}
.btn:active{transform:scale(.96)}
.btn--ghost{background:transparent;color:var(--wh);border:1px solid rgba(255,255,255,.2)}
.btn--ghost:hover{background:var(--wh);color:var(--bk)}
.btn--full{width:100%;text-align:center;background:var(--bk);color:var(--wh)}
.btn--full:hover{background:var(--dk)}

/* ── Loader ── */
.ldr{position:fixed;inset:0;z-index:200;background:var(--bk);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;transition:opacity .6s var(--e),visibility .6s}
.ldr.done{opacity:0;visibility:hidden;pointer-events:none}
.ldr__logo{font-family:var(--d);font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--wh);letter-spacing:-.02em}
.ldr__logo span{font-weight:400;color:var(--g5)}
.ldr__track{width:min(280px,55vw);height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.ldr__bar{height:100%;width:0;background:var(--wh);transition:width .12s}
.ldr__pct{font-family:var(--d);font-size:.7rem;color:var(--g5);letter-spacing:.08em}

/* ── Nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,48px);height:60px;mix-blend-mode:difference;transition:transform .4s}
.nav__logo{font-family:var(--d);font-weight:700;font-size:1rem;color:var(--wh)}
.nav__logo span{font-weight:400;opacity:.45}
.nav__tag{font-family:var(--d);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wh);opacity:.4}
.nav__cta{font-family:var(--d);font-weight:600;font-size:.65rem;padding:.4rem 1.1rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:var(--wh);transition:all .3s}
.nav__cta:hover{background:var(--wh);color:var(--bk)}
@media(max-width:500px){.nav__tag{display:none}}

/* ── Shared scene ── */
.sc{position:relative;overflow:hidden}
.sc__pin{width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}

/* ═══ 1. HERO ═══ */
.sc--hero{background:var(--bk)}
#hero-cv{position:absolute;inset:0;width:100%;height:100%}
.hero__txt{position:absolute;bottom:clamp(90px,14vh,150px);left:clamp(20px,4vw,60px);z-index:2}
.hero__txt h1{font-family:var(--d);font-weight:700;font-size:clamp(3rem,8vw,6.5rem);color:var(--wh);letter-spacing:-.05em;line-height:.9}
.hero__txt p{font-family:var(--s);font-weight:300;font-size:clamp(.85rem,1.3vw,1.05rem);color:rgba(255,255,255,.35);margin-top:1rem}
.hero__foot{position:absolute;bottom:clamp(20px,3vh,36px);left:clamp(20px,4vw,60px);right:clamp(20px,4vw,60px);display:flex;justify-content:space-between;align-items:center;z-index:2}
.hero--wait .hero__txt,.hero--wait .hero__foot .btn{transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.hero--wait .hero__foot .btn{transition-delay:.15s}
.hero--wait:not(.hero--in) .hero__txt,.hero--wait:not(.hero--in) .hero__foot .btn{opacity:0;transform:translateY(32px)}
.hero__hint{font-family:var(--d);font-size:.55rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.25)}

/* ═══ 2. MANIFESTO ═══ */
.sc--text{background:var(--cr)}
.sc--text .sc__pin{background:var(--cr)}
.mani{font-family:var(--d);font-weight:400;font-size:clamp(1.8rem,4vw,3.2rem);color:var(--bk);text-align:center;max-width:880px;padding:0 clamp(20px,5vw,80px);line-height:1.4;letter-spacing:-.02em}
.mani .w{opacity:.1;transition:opacity .12s}
.mani .w.on{opacity:1}

/* ═══ 3. BEFORE/AFTER ═══ */
.sc--ba{background:var(--bk)}
.ba{position:relative;width:100%;height:100vh;overflow:hidden;cursor:col-resize}
.ba__dirty,.ba__clean{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__clean{clip-path:inset(0 50% 0 0)}
.ba__div{position:absolute;top:0;bottom:0;left:50%;z-index:3;touch-action:none}
.ba__line{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--wh)}
.ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--wh);color:var(--bk);display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(0,0,0,.3)}
.ba__label{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--d);font-weight:600;font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.ba__label--l{left:clamp(16px,3vw,36px)}.ba__label--r{right:clamp(16px,3vw,36px)}

/* ═══ 4. SERVICES ═══ */
.sc--svc{background:var(--bk)}
.svc__slides{position:absolute;inset:0}
.svc__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .7s var(--e)}
.svc__slide--active{opacity:1}
.svc__info{position:absolute;bottom:clamp(80px,10vh,120px);left:clamp(20px,5vw,60px);z-index:2;max-width:440px}
.svc__info span{font-family:var(--d);font-weight:700;font-size:clamp(3rem,6vw,5rem);color:rgba(255,255,255,.08);display:block;line-height:1;margin-bottom:.3rem}
.svc__info h3{font-family:var(--d);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--wh);letter-spacing:-.03em;margin-bottom:.5rem}
.svc__info p{font-size:.88rem;color:rgba(255,255,255,.5);line-height:1.6}
.svc__nav{position:absolute;bottom:clamp(20px,3vh,36px);right:clamp(20px,5vw,60px);z-index:5;display:flex;align-items:center;gap:1.2rem}
.svc__dots{display:flex;gap:.5rem}
.svc__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s}
.svc__dot--on{background:var(--wh);width:24px;border-radius:4px}
.svc__count{font-family:var(--d);font-size:.7rem;color:rgba(255,255,255,.4)}

/* ═══ 5. 360° ROTATE ═══ */
.sc--rotate{background:var(--cr)}
.sc--rotate .sc__pin{background:var(--cr)}
#rot-cv{position:absolute;inset:0;width:100%;height:100%}
.rot__txt{position:absolute;bottom:clamp(20px,4vh,40px);left:50%;transform:translateX(-50%);text-align:center;z-index:2}
.rot__txt h2{font-family:var(--d);font-weight:700;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--bk);letter-spacing:-.02em}
.rot__txt p{font-size:.7rem;color:var(--g5);margin-top:.3rem}

/* ═══ 6. CERAMIC ═══ */
.sc--ceramic{background:var(--bk)}
.cer__bg{position:absolute;inset:0;background-size:cover;background-position:center}
.cer__over{position:absolute;inset:0;background:rgba(15,15,17,.55)}
.cer__body{position:relative;z-index:2;text-align:center}
.cer__stats{display:flex;justify-content:center;gap:clamp(2.5rem,7vw,7rem);margin-bottom:2rem}
.cer__stat{display:flex;flex-direction:column;align-items:center}
.cer__n{font-family:var(--d);font-weight:700;font-size:clamp(3rem,7vw,5.5rem);color:var(--wh);line-height:1;letter-spacing:-.04em}
.cer__u{font-family:var(--d);font-weight:400;font-size:clamp(1.2rem,2.5vw,2rem);color:rgba(255,255,255,.5);margin-top:-.3rem}
.cer__l{font-family:var(--d);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:.4rem}
.cer__desc{font-size:.9rem;color:rgba(255,255,255,.45);max-width:480px;margin:0 auto;line-height:1.7;padding:0 20px}
@media(max-width:480px){.cer__stats{flex-direction:column;gap:1.5rem}}

/* ═══ 7. GALLERY ═══ */
.sc--gal{background:var(--cr)}
.gal__track{display:flex;gap:1rem;padding:0 clamp(20px,4vw,48px);height:100vh;align-items:center;will-change:transform}
.gal__card{flex:0 0 clamp(280px,42vw,520px);height:65vh;border-radius:6px;overflow:hidden;position:relative}
.gal__card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.gal__card:hover img{transform:scale(1.04)}
.gal__card figcaption{position:absolute;bottom:0;left:0;right:0;padding:1rem 1.2rem;font-family:var(--d);font-weight:600;font-size:.75rem;color:var(--wh);background:linear-gradient(to top,rgba(0,0,0,.5),transparent)}

/* ═══ 8. PRICING ═══ */
.sc--price{background:var(--bk);min-height:100vh;display:flex;align-items:center}
.price__wrap{width:100%;max-width:1060px;margin:0 auto;padding:clamp(80px,12vh,120px) clamp(20px,4vw,60px)}
.price__h{font-family:var(--d);font-weight:700;font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--wh);letter-spacing:-.03em;margin-bottom:clamp(2rem,4vh,3.5rem)}
.price__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden}
.price__col{background:var(--dk);padding:clamp(1.8rem,3vw,2.5rem);display:flex;flex-direction:column}
.price__col--pop{background:#1c1c20}
.price__badge{font-family:var(--d);font-size:.5rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g5);margin-bottom:.6rem}
.price__name{font-family:var(--d);font-weight:600;font-size:.95rem;color:var(--wh);margin-bottom:.4rem}
.price__amt{font-family:var(--d);font-weight:700;font-size:clamp(2rem,4vw,3rem);color:var(--wh);letter-spacing:-.04em;line-height:1;margin-bottom:.8rem}
.price__amt small{font-size:.4em;font-weight:400;color:var(--g5)}
.price__col p{font-size:.8rem;color:var(--g5);line-height:1.55;flex:1;margin-bottom:1.2rem}
@media(max-width:680px){.price__grid{grid-template-columns:1fr}}

/* ═══ 9. BOOKING ═══ */
.sc--book{background:var(--cr);min-height:100vh;display:flex;align-items:center}
.book{width:100%;max-width:1060px;margin:0 auto;padding:clamp(80px,12vh,120px) clamp(20px,4vw,60px);display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.book__left h2{font-family:var(--d);font-weight:700;font-size:clamp(2.2rem,4.5vw,3.5rem);color:var(--bk);letter-spacing:-.04em;line-height:.95;margin-bottom:.8rem}
.book__left p{color:var(--g5);max-width:300px;line-height:1.7}
.book__right{background:var(--wh);border-radius:8px;padding:clamp(1.5rem,2.5vw,2.2rem)}
.fm__row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.4rem}
.fm__f{margin-bottom:.4rem}
.fm__f label{display:block;font-family:var(--d);font-size:.65rem;font-weight:600;color:var(--g5);margin-bottom:.2rem}
.fm__f input,.fm__f select,.fm__f textarea{font-family:var(--s);font-size:.86rem;color:var(--bk);background:var(--cr);border:1px solid var(--wr);border-radius:6px;padding:.55rem .8rem;width:100%;transition:border-color .3s}
.fm__f input:focus,.fm__f select:focus,.fm__f textarea:focus{outline:none;border-color:var(--bk)}
.fm__f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;padding-right:1.8rem}
.fm__f textarea{resize:vertical;min-height:56px}
.fm__f input::placeholder,.fm__f textarea::placeholder{color:var(--g3)}
@media(max-width:680px){.book{grid-template-columns:1fr}.fm__row{grid-template-columns:1fr}}

/* ═══ FOOTER ═══ */
.ft{padding:2.5rem 0 1rem;background:var(--bk);border-top:1px solid rgba(255,255,255,.05)}
.ft__in{max-width:1060px;margin:0 auto;padding:0 clamp(20px,4vw,60px);display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;margin-bottom:1.5rem}
.ft__brand span{font-family:var(--d);font-weight:700;font-size:1.2rem;color:var(--wh);display:block;margin-bottom:.2rem}
.ft__brand span span{font-weight:400;color:var(--g5)}
.ft__brand p{font-size:.75rem;color:var(--g5)}
.ft__col h4{font-family:var(--d);font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--g5);margin-bottom:.4rem}
.ft__col a{display:block;font-size:.78rem;color:rgba(255,255,255,.35);padding:.1rem 0;transition:color .3s}
.ft__col a:hover{color:var(--wh)}
.ft__copy{max-width:1060px;margin:0 auto;padding:.6rem clamp(20px,4vw,60px) 0;border-top:1px solid rgba(255,255,255,.05);font-size:.6rem;color:rgba(255,255,255,.15)}
@media(max-width:580px){.ft__in{grid-template-columns:1fr;gap:1.2rem}}

/* ═══ REDUCED MOTION ═══ */
/* Portrait: 360 frames are shot on black, so the section goes dark to match and the heading flips to white */
@media(max-aspect-ratio:1/1){.sc--rotate,.sc--rotate .sc__pin{background:var(--bk)}.rot__txt h2{color:var(--wh)}}
@media(prefers-reduced-motion:reduce){.ldr{display:none}.mani .w{opacity:1!important}}
