/* =====================================================================
   ENHANCEMENTS · motion, elevation, lookbook and booking
   Loaded after style.css; the original styles stay untouched.
   ===================================================================== */
:root{--espresso:#1c1511;--gold:#b89668;--ease:cubic-bezier(.22,1,.36,1);--shadow:0 30px 60px -25px rgba(37,29,23,.45),0 12px 24px -12px rgba(37,29,23,.25)}
::selection{background:var(--wine);color:var(--cream)}
html{scroll-padding-top:20px}
body{overflow-x:clip}

/* intro loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--wine);color:var(--cream);display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:transform 1s var(--ease) .1s}
.js .loader{display:flex}
.loader img{width:84px;filter:brightness(0) invert(.95);animation:loaderIn 1s var(--ease) both}
.loader span{font:11px Arial;letter-spacing:5px;animation:loaderIn 1s var(--ease) .15s both}
.loader em{font-family:Georgia;letter-spacing:1px;font-size:14px}
.loaded .loader{transform:translateY(-100%)}
@keyframes loaderIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* scroll progress + sticky header */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--wine);transform:scaleX(0);transform-origin:left;z-index:60}
header{position:sticky;top:0;z-index:50;transition:height .4s var(--ease),transform .5s var(--ease),background .4s,box-shadow .4s}
header.scrolled{height:78px;background:rgba(245,240,232,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 100vmax rgba(245,240,232,.88);clip-path:inset(0 -100vmax)}
header.scrolled .brand img{width:44px;height:50px}
header.hide{transform:translateY(-100%)}
.brand img{transition:width .4s var(--ease),height .4s var(--ease)}
nav a{position:relative;border:0}
nav a:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--wine);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
nav a:hover:after{transform:scaleX(1);transform-origin:left}

/* buttons: fill sweep + elevation */
.outline,.primary{position:relative;overflow:hidden;isolation:isolate;transition:background .3s,color .35s,border-color .3s,transform .35s var(--ease),box-shadow .35s}
.outline:before,.primary:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease)}
.primary:before{background:#3b0f13}
.outline:hover:before,.primary:hover:before{transform:none}
.outline:hover{background:transparent;color:var(--cream)}
.primary:hover{background:var(--wine);box-shadow:0 14px 30px -12px rgba(103,27,32,.65)}
.outline span,.primary span{display:inline-block;transition:transform .35s var(--ease)}
.outline:hover span,.primary:hover span{transform:translateX(5px)}

/* hero entrance */
.js .split .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.js .split .line>span{display:inline-block;transform:translateY(110%);transition:transform 1.2s var(--ease)}
.js .split .line:nth-child(2)>span{transition-delay:.12s}.js .split .line:nth-child(3)>span{transition-delay:.24s}
.loaded .split .line>span{transform:none}
.js .fade-up{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease) .45s,transform 1s var(--ease) .45s}
.js .actions.fade-up{transition-delay:.6s}.js .scroll.fade-up{transition-delay:.75s}
.loaded .fade-up{opacity:1;transform:none}
.collage{animation:none}
.collage-wrap{position:relative;z-index:1;mix-blend-mode:multiply;transform:translate3d(calc(var(--mx,0)*18px),calc(var(--sy,0px) + var(--my,0)*14px),0);transition:transform .9s var(--ease)}
.js .collage-wrap{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--ease) .25s,transform .9s var(--ease)}
.loaded .collage-wrap{clip-path:inset(0)}
.js .collage{transform:scale(1.12);transition:transform 2s var(--ease) .25s}
.loaded .collage{transform:none}
.outline-number{transform:translate3d(calc(var(--mx,0)*-34px),calc(var(--sy,0px) + var(--my,0)*-20px),0);transition:transform 1s var(--ease)}
.week-tab{transition:padding .35s var(--ease),background .3s}
.week-tab:hover{background:#3b0f13;padding-bottom:30px}
.scroll span{animation:bob 2.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(7px)}}

/* marquee */
.marquee{overflow:hidden;background:var(--wine);color:var(--cream);padding:16px 0;white-space:nowrap;font-size:clamp(20px,2.4vw,34px);font-style:italic}
.marquee-track{display:inline-flex;will-change:transform}
.marquee i{font-style:normal;font-size:.5em;color:var(--gold);margin:0 .9em;vertical-align:middle}

/* experience cards: masked zoom + 3D tilt + glare */
.img-mask{position:relative;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),box-shadow .6s}
.img-mask:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,240,220,.22),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.tilt:hover .img-mask{box-shadow:0 35px 60px -25px rgba(0,0,0,.8)}
.tilt:hover .img-mask:after{opacity:1}
.steps img{display:block;transition:transform 1.4s var(--ease)}
.tilt:hover img{transform:scale(1.06)}
.js-animate .steps .reveal .img-mask{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease),transform .6s var(--ease),box-shadow .6s}
.js-animate .steps .reveal.visible .img-mask{clip-path:inset(0)}
.js-animate .steps .reveal img{transform:scale(1.25)}
.js-animate .steps .reveal.visible img{transform:none}
.js-animate .steps .reveal.visible:hover img{transform:scale(1.06)}
.steps .reveal:nth-child(2){transition-delay:.12s}.steps .reveal:nth-child(3){transition-delay:.24s}
.steps .reveal:nth-child(2) .img-mask{transition-delay:.12s,0s,0s}.steps .reveal:nth-child(3) .img-mask{transition-delay:.24s,0s,0s}
.steps article>div>span{transition:color .4s}
.tilt:hover>div>span{color:var(--gold)}

/* week: staggered cards + elevated selection */
.js-animate .outfit-grid .outfit-card{opacity:0;transform:translateY(50px);transition:opacity .9s var(--ease) calc(var(--i)*90ms),transform .9s var(--ease) calc(var(--i)*90ms)}
.js-animate .outfit-grid.visible .outfit-card{opacity:1;transform:none}
.outfit-grid{isolation:isolate}
.outfit-card{position:relative}
.outfit-card:before{content:'';position:absolute;inset:-6px 4px 0;background:#fffaf4;box-shadow:var(--shadow);opacity:0;transform:scale(.96);transition:opacity .5s var(--ease),transform .5s var(--ease);z-index:-1}
.outfit-card[aria-pressed=true]:before{opacity:1;transform:none}
.outfit-card img{transition:transform .7s var(--ease)}
.outfit-card:hover img,.outfit-card[aria-pressed=true] img{transform:translateY(-10px) scale(1.03)}
.outfit-card .rule{transition:width .5s var(--ease),background .4s}
.day-detail.swap h3,.day-detail.swap p{animation:swapIn .6s var(--ease) both}
.day-detail.swap p{animation-delay:.06s}
@keyframes swapIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.arrows button{transition:background .3s,color .3s,transform .3s var(--ease)}
.arrows button:hover{transform:scale(1.08)}

/* lookbook */
.lookbook{position:relative;background:var(--espresso);color:var(--cream);margin-top:35px}
.lookbook-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.lookbook-head{position:absolute;left:0;top:0;bottom:0;width:34vw;padding:0 3vw 0 5vw;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,var(--espresso) 82%,transparent);z-index:3}
.lookbook-head .eyebrow{color:var(--gold)}
.lookbook-head h2{margin:14px 0 22px}
.lookbook-head>p{font:15px/1.8 Arial,sans-serif;opacity:.78;max-width:360px;margin:0}
.lookbook-count{margin-top:38px;font:12px Arial;letter-spacing:3px;color:var(--gold)}
.lookbook-count b{font:400 42px Georgia;color:var(--cream);letter-spacing:0}
.lookbook-count i{font-style:normal}
.lookbook-track{position:relative;z-index:2;display:flex;gap:4vw;align-items:center;padding:0 10vw 0 38vw;will-change:transform}
.look{flex:0 0 auto;width:min(29vw,440px);margin:0}
.look:nth-child(even){margin-top:12vh}
.look-img{position:relative;aspect-ratio:2/3;max-height:68vh;overflow:hidden;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),box-shadow .6s;box-shadow:0 40px 70px -30px rgba(0,0,0,.9)}
.look-img:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,236,210,.25),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.look-img:hover:after{opacity:1}
.look-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.look-img:hover img{transform:scale(1.05)}
.look figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:16px;padding-top:18px}
.look figcaption span{grid-row:span 3;font-size:30px;color:var(--gold)}
.look figcaption small{font:10px Arial;letter-spacing:2px;opacity:.6}
.look figcaption strong{font-weight:400;font-size:22px;margin:4px 0}
.look figcaption p{margin:0;font:13px/1.6 Arial;opacity:.72}
.js-animate .look .look-img{clip-path:inset(0 0 0 100%);transition:clip-path 1.3s var(--ease),transform .6s var(--ease),box-shadow .6s}
.js-animate .look.visible .look-img{clip-path:inset(0)}
.js-animate .look img{transform:scale(1.3)}
.js-animate .look.visible img{transform:none}
.js-animate .look.visible .look-img:hover img{transform:scale(1.05)}
.js-animate .look figcaption,.js-animate .look-end>*{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) .35s,transform .9s var(--ease) .35s}
.js-animate .look.visible figcaption,.js-animate .look-end.visible>*{opacity:1;transform:none}
.look-end{width:min(26vw,380px);padding:40px 0}
.look-end h3{font-size:clamp(30px,3vw,46px);line-height:1.1;margin:14px 0 30px}
.look-end .eyebrow{color:var(--gold)}
.lookbook-ghost{position:absolute;left:30vw;bottom:-4vh;font-size:22vw;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(184,150,104,.22);white-space:nowrap;z-index:1;pointer-events:none;will-change:transform}

.about{margin-top:0;border-top:0}
.about-photo{position:relative;isolation:isolate;max-width:520px;width:100%;justify-self:center}
.about-photo:before{content:'';position:absolute;inset:24px -24px -24px 24px;border:1px solid var(--wine);z-index:-1;transition:transform .8s var(--ease)}
.about-photo:hover:before{transform:translate(-10px,-10px)}
.about-photo .img-mask{box-shadow:var(--shadow)}
.about-photo .img-mask img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;transition:transform 1.4s var(--ease)}
.about-photo:hover .img-mask img{transform:scale(1.04)}
.about-badge{position:absolute;left:-28px;bottom:48px;width:86px;height:86px;object-fit:contain;padding:12px;border-radius:50%;background:var(--cream);box-shadow:var(--shadow);animation:float 5s ease-in-out infinite}
.about-sign{position:absolute;right:18px;top:12px;font-size:clamp(46px,5vw,78px);font-style:italic;color:var(--cream);text-shadow:0 4px 20px rgba(0,0,0,.4)}
@keyframes float{50%{transform:translateY(-10px)}}
.js-animate .about-photo.reveal .img-mask{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--ease),transform .6s var(--ease),box-shadow .6s}
.js-animate .about-photo.reveal.visible .img-mask{clip-path:inset(0)}

/* FAQ */
.faq summary{transition:color .3s}
.faq summary:hover{color:var(--wine)}
.faq summary:after{transition:transform .4s var(--ease)}
.faq details[open] summary:after{transform:rotate(180deg)}
.faq details[open] p{animation:swapIn .5s var(--ease) both}
.js-animate .faq details,.js-animate .faq h2{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-animate .faq details.visible,.js-animate .faq h2.visible{opacity:1;transform:none}
.js-animate .reveal{transition:opacity 1s var(--ease),transform 1s var(--ease);transform:translateY(40px)}
.closing{position:relative;overflow:hidden;isolation:isolate}
.closing:before{content:'';position:absolute;z-index:-1;width:60vw;height:60vw;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(103,27,32,.12),transparent 60%);animation:breathe 7s ease-in-out infinite;pointer-events:none}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.2)}}

/* custom cursor (desktop) */
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;display:none}
.has-cursor .cursor{display:block}
.cursor span{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--wine);opacity:0;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .3s,background .3s,border-color .3s;border:1px solid transparent}
.cursor.on span{opacity:1}
.cursor.grow span{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(103,27,32,.08);border-color:var(--wine)}
.magnetic{will-change:transform}

/* dialogs */
dialog[open]{animation:dialogIn .55s var(--ease) both;box-shadow:0 50px 100px -30px rgba(20,12,8,.6)}
dialog.closing{animation:dialogOut .26s ease-in both}
dialog[open]::backdrop{animation:fade .4s both}
@keyframes dialogIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dialogOut{to{opacity:0;transform:translateY(20px) scale(.98)}}
@keyframes fade{from{opacity:0}}
.quiz-option{transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease);animation:swapIn .5s var(--ease) calc(var(--i)*60ms) both}
.quiz-option:hover{border-color:var(--ink);transform:translateX(6px)}

/* booking */
#booking{width:min(640px,94vw)}
.book-steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 40px 22px 0;counter-reset:s}
.book-steps li{flex:1;font:10px Arial;letter-spacing:2px;text-transform:uppercase;color:#9b8b7d;padding-top:10px;border-top:2px solid var(--line);transition:color .4s,border-color .4s;counter-increment:s}
.book-steps li:before{content:'0' counter(s) ' '}
.book-steps li.active{color:var(--ink);border-color:var(--wine)}
.book-steps li.done{color:var(--wine);border-color:var(--wine)}
.book-panel:not([hidden]){animation:swapIn .5s var(--ease) both}
#booking h2{margin:10px 0 22px}
.book-note{font:13px/1.6 Arial;color:#6f5548}
.calendar{border:1px solid var(--line);background:#fffaf4;padding:18px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head strong{font-weight:400;font-size:20px}
.cal-nav{border:1px solid #b5a494;border-radius:50%;width:38px;height:38px;background:none;transition:background .3s,color .3s}
.cal-nav:hover:not(:disabled){background:var(--ink);color:var(--cream)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-week span{font:10px Arial;letter-spacing:1px;color:#8a7a6d;padding:6px 0}
.cal-grid button{width:100%;max-width:48px;justify-self:center;aspect-ratio:1;border:1px solid transparent;border-radius:50%;background:none;font:15px Arial;padding:0;transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease);animation:pop .45s var(--ease) calc(var(--i)*12ms) both}
.cal-grid button:not(:disabled){border-color:var(--line);color:var(--ink);font-weight:bold}
.cal-grid button:not(:disabled):hover{background:var(--wine);color:var(--cream);border-color:var(--wine);transform:scale(1.08)}
.cal-grid button:disabled{color:#c4b8ab;cursor:default}
.cal-grid button.today{text-decoration:underline;text-underline-offset:4px}
.cal-grid button[aria-pressed=true]{background:var(--ink);color:var(--cream)}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:20px 0}
.slot{border:1px solid #b5a494;background:#fffaf4;padding:15px 10px;font:15px Arial;transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease),box-shadow .35s;animation:swapIn .5s var(--ease) calc(var(--i)*50ms) both}
.slot:hover{background:var(--wine);border-color:var(--wine);color:var(--cream);transform:translateY(-3px);box-shadow:0 12px 24px -12px rgba(103,27,32,.6)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-row label{margin-bottom:0}
input,textarea{transition:border-color .3s,box-shadow .3s}
input:focus,textarea:focus{outline:0;border-color:var(--wine);box-shadow:0 0 0 3px rgba(103,27,32,.12)}
.formats{border:0;padding:0;margin:18px 0}
.formats legend{font:12px Arial;margin-bottom:10px;padding:0}
#format-options{display:flex;flex-wrap:wrap;gap:8px}
.chip{margin:0;cursor:pointer;position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip span{display:inline-block;border:1px solid #b5a494;padding:10px 15px;font:13px Arial;transition:background .3s,color .3s,border-color .3s}
.chip input:checked+span{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--wine);outline-offset:3px}
.honey{position:absolute!important;left:-9999px;opacity:0}
#book-submit:disabled{opacity:.6;cursor:wait}
.book-done{text-align:center}
.tick{width:74px;height:74px;margin:6px auto 10px;display:block}
.tick circle{fill:none;stroke:var(--wine);stroke-width:2;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .9s var(--ease) .1s forwards}
.tick path{fill:none;stroke:var(--wine);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s var(--ease) .8s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.book-done>p:not(.eyebrow){font:15px/1.7 Arial}
.done-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:20px 0 6px}
.done-actions .outline,.done-actions .primary{padding:13px 18px;font-size:13px}
#inquiry-text{font:13px/1.6 Arial}

/* tablet */
@media(max-width:900px){
  .lookbook{height:auto!important}
  .lookbook-pin{position:relative;height:auto;display:block;padding:60px 0 50px}
  .lookbook-head{position:static;width:auto;padding:0 6%;background:none}
  .lookbook-count{display:block;margin-top:24px}
  .lookbook-track{transform:none!important;padding:34px 6% 10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:20px;align-items:flex-start}
  .lookbook-track::-webkit-scrollbar{display:none}
  .look{width:58vw;scroll-snap-align:center}
  .look:nth-child(even){margin-top:40px}
  .look-end{width:58vw}
  .lookbook-ghost{display:none}
  header.scrolled{height:72px}
}
/* phone */
@media(max-width:600px){
  header.scrolled{height:68px}
  nav{top:100%}
  .marquee{padding:12px 0}
  .look,.look-end{width:78vw}
  .look:nth-child(even){margin-top:0}
  .look figcaption strong{font-size:20px}
  .field-row{grid-template-columns:1fr;gap:0}
  .field-row label{margin-bottom:18px}
  dialog,#booking{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border:0;border-top:3px solid var(--wine)}
  dialog[open]{animation:sheetIn .5s var(--ease) both}
  dialog.closing{animation:sheetOut .26s ease-in both}
  .calendar{padding:12px}
  .cal-grid button{font-size:14px}
  .slots{grid-template-columns:1fr 1fr}
  .book-steps{margin-right:34px}
  .closing:before{width:120vw;height:120vw}
  .about-photo{max-width:none;width:88%;margin-left:0}
  .about-badge{left:auto;right:-14px;bottom:-18px;width:70px;height:70px}
}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetOut{to{transform:translateY(100%)}}

@media(prefers-reduced-motion:reduce){
  .js .split .line>span,.js .fade-up,.js .collage-wrap,.js .collage{transform:none;opacity:1;clip-path:none}
  .marquee-track{transform:none!important}
}