/* Drip Haus Luxe: blush satin, rose gold, slate navy (from her badge). One signature: the IV line. */
:root{
  --blush:#f8e9e4; --cream:#fdf6f2; --rose:#e7b4ab; --rg:#b8776a; --rg-deep:#8c4f45;
  --ink:#2b4252; --ink-2:#51697a; --powder:#bcd3df; --gold:#d9b18c; --tint:#f4b6c4;
  --ease:cubic-bezier(.2,.75,.2,1);
  --serif:"Gilda Display",Georgia,serif; --sans:"Mulish",system-ui,sans-serif; --script:"Great Vibes","Brush Script MT",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.script{font-family:var(--script);font-weight:400;color:var(--rg);letter-spacing:0;text-transform:none}
.eyebrow{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--rg-deep)}
.eyebrow i{font-style:normal;margin:0 .4em;color:var(--rose)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:.005em}
h2{font-size:clamp(2.3rem,5.2vw,4.1rem)}
h2 .script{font-size:1.18em;line-height:.8}
.lead{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--ink-2);max-width:34em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:0 1.7em;border-radius:999px;font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;transition:transform .35s var(--ease),box-shadow .35s,background .3s,color .3s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#c78a7c,#a9645a 60%,#8c4f45);color:#fff;box-shadow:0 10px 26px -10px rgba(140,79,69,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{box-shadow:0 16px 30px -10px rgba(140,79,69,.75),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-ghost{border:1.5px solid rgba(43,66,82,.3);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-book{min-height:42px;padding:0 1.3em;background:var(--ink);color:#fff;font-size:.74rem}

/* intro */
.intro{position:fixed;inset:0;z-index:200;overflow:hidden;background:linear-gradient(165deg,#fcefea,#f4d6cf);cursor:pointer;opacity:1;transition:opacity .75s ease,transform 1s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.no-intro .intro{display:none}
.intro.out{opacity:0;transform:scale(1.035);pointer-events:none}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.i-badge{position:absolute;left:50%;top:50%;width:min(280px,58vw);height:auto;opacity:0;transform:translate(-50%,-50%) translateY(54px) scale(.6);transition:opacity .75s ease,transform 1.15s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.i-badge.show{opacity:1;transform:translate(-50%,-50%)}
.i-skip{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));text-align:center;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--rg-deep);opacity:0;animation:ifade .6s ease 1s forwards}
@keyframes ifade{to{opacity:.65}}

/* nav */
.nav{position:fixed;z-index:60;top:14px;left:50%;transform:translateX(-50%);width:min(1100px,100% - 28px);display:flex;align-items:center;gap:22px;padding:8px 10px 8px 22px;border-radius:999px;background:rgba(253,246,242,.72);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(184,119,106,.22);box-shadow:0 8px 30px -14px rgba(140,79,69,.35)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.12rem;letter-spacing:.06em;text-transform:uppercase;margin-right:auto;white-space:nowrap}
.brand img{width:22px;height:auto}
.brand em{font-style:normal;color:var(--rg-deep);letter-spacing:.3em;margin-left:.15em;font-size:.82em}
.links{display:flex;gap:24px;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.links a{position:relative;padding:6px 0}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--rg);transition:right .35s var(--ease)}
.links a:hover{color:var(--ink)}.links a:hover::after{right:0}
.burger{display:none;width:42px;height:42px;border-radius:50%;background:rgba(43,66,82,.08);position:relative}
.burger i{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease)}
.burger i:first-child{top:17px}.burger i:last-child{top:24px}
.burger[aria-expanded=true] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded=true] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* the infusion line */
.line{position:fixed;z-index:40;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);height:min(58vh,520px);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.chamber{position:relative;width:20px;height:42px;border-radius:9px 9px 12px 12px;border:1.5px solid var(--rg);background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(231,180,171,.25));overflow:hidden;flex:none}
.chamber::before{content:"";position:absolute;left:-1px;right:-1px;top:-1.5px;height:7px;background:var(--rg)}
.bead{position:absolute;left:50%;top:9px;width:6px;height:9px;margin-left:-3px;border-radius:50% 50% 55% 55%/60% 60% 45% 45%;background:linear-gradient(180deg,#e9c1b7,#b8776a);animation:bead 2.1s ease-in infinite}
@keyframes bead{0%{transform:translateY(0) scale(.4);opacity:0}15%{opacity:1;transform:translateY(0) scale(1)}85%{opacity:1}100%{transform:translateY(24px) scale(1);opacity:0}}
.tube{position:relative;flex:1;width:8px;margin-top:-1px;border-radius:0 0 8px 8px;background:rgba(255,255,255,.6);border:1.5px solid var(--rg);border-top:0;overflow:hidden;box-shadow:0 6px 18px -8px rgba(140,79,69,.5)}
.fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p,0)*100%);background:linear-gradient(180deg,var(--powder),var(--rose) 60%,var(--rg));transition:height .15s linear}
.line-label{position:absolute;top:0;left:-8px;transform-origin:0 0;writing-mode:vertical-rl;font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--rg-deep);margin-left:-26px;white-space:nowrap}

/* reveal */
.rv{opacity:0;translate:0 36px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.rv.in{opacity:1;translate:0 0}
.sec-head{margin-bottom:clamp(28px,5vw,56px)}
.sec-head.center{text-align:center}
.sec-head h2{margin-top:.25em}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:2vw;padding:112px max(24px,5.5vw) 64px;overflow:hidden;background:
  radial-gradient(70% 60% at 12% 10%,rgba(255,255,255,.75),transparent 60%),
  linear-gradient(118deg,#fcf0eb 0%,#f6dcd5 52%,#fae9e3 100%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(118deg,rgba(255,255,255,.3) 0 46px,rgba(255,255,255,0) 46px 150px);-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 85%);mask-image:linear-gradient(180deg,#000 10%,transparent 85%)}
.hero-glow{position:absolute;right:-6%;top:6%;width:58vw;aspect-ratio:1;border-radius:50%;background:var(--tint);filter:blur(90px);opacity:.55;transition:background 1.4s ease;pointer-events:none}
.hero-copy{position:relative;z-index:2}
.h1{font-size:clamp(3.8rem,10.4vw,9.4rem);line-height:.9;margin:.2em 0 .22em;letter-spacing:-.01em;color:var(--ink)}
.h1 .w{display:block;overflow:hidden;padding:.04em 0 .1em;margin-bottom:-.12em}
.h1 .w>span{display:inline-block;translate:0 110%;transition:translate 1.1s var(--ease)}
.h1 .w:nth-child(2)>span{transition-delay:.13s;margin-left:.9em}
.h1 .w:nth-child(3)>span{transition-delay:.26s;margin-left:.2em}
body.ready .h1 .w>span{translate:0 0}
.h1 .script{font-size:1.08em;line-height:.9}
.hero .eyebrow,.hero .lead,.hero .cta,.hero .mini{opacity:0;translate:0 22px;transition:opacity .9s var(--ease) .5s,translate .9s var(--ease) .5s}
body.ready .hero .eyebrow,body.ready .hero .lead,body.ready .hero .cta,body.ready .hero .mini{opacity:1;translate:0 0}
.hero .lead{margin-bottom:28px;transition-delay:.6s}.hero .cta{transition-delay:.72s}.hero .mini{transition-delay:.84s}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.mini{margin-top:26px;font-size:.84rem;color:var(--ink-2)}.mini b{color:var(--ink)}
.hero-stage{position:relative;z-index:2;height:min(76vh,720px);min-height:480px;justify-self:center;width:min(100%,520px)}
.arm{position:absolute;top:0;left:0;right:0;height:11px;border-radius:8px;background:linear-gradient(180deg,#f0d3c8,#c78a7c 55%,#8c4f45);box-shadow:0 8px 14px -8px rgba(90,40,30,.5)}
.arm .pole{position:absolute;right:6px;top:0;width:11px;height:200vh;background:linear-gradient(90deg,#f0d3c8,#c78a7c 55%,#8c4f45);border-radius:6px;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 62%);mask-image:linear-gradient(180deg,#000 40%,transparent 62%);height:92%}
.hang{position:absolute;left:8%;right:8%;top:8px;bottom:42px;transform-origin:50% 0;animation:sway 6.5s ease-in-out infinite;translate:0 calc(var(--par,0)*1px)}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.hb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;opacity:0;transform:translateY(-26px) scale(.98);transition:opacity .9s ease,transform 1.1s var(--ease);filter:drop-shadow(0 26px 30px rgba(140,79,69,.28))}
.hb.on{opacity:1;transform:none}
body:not(.ready) .hang{opacity:0}.hang{transition:opacity 1s .6s}
.stage-label{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--rg-deep)}
.stage-label::before{content:"";display:block;width:1px;height:16px;background:var(--rg);margin:0 auto 8px}
.scroll-cue{position:absolute;left:50%;bottom:16px;width:22px;height:36px;border:1.5px solid rgba(43,66,82,.4);border-radius:14px;translate:-50% 0;z-index:3}
.scroll-cue span{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:3px;background:var(--rg);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* treatments */
.treat{position:relative;padding:clamp(80px,11vw,150px) 0 clamp(60px,8vw,110px);background:linear-gradient(180deg,#fae9e3 0,var(--cream) 22%)}
.rail-wrap{width:min(1320px,100% - 32px);margin-inline:auto}
.rail{position:relative;height:12px;border-radius:8px;background:linear-gradient(180deg,#f0d3c8,#c78a7c 55%,#8c4f45);box-shadow:0 10px 16px -10px rgba(90,40,30,.55);z-index:2}
.rail i{position:absolute;top:100%;width:12px;height:16px;border:2px solid var(--rg);border-top:0;border-radius:0 0 10px 10px}
.rail i{margin-left:-6px}.rail i:nth-child(1){left:10.2%}.rail i:nth-child(2){left:30.1%}.rail i:nth-child(3){left:50%}.rail i:nth-child(4){left:69.9%}.rail i:nth-child(5){left:89.8%}
.hangers{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,26px);padding:0 1.5vw}
.hanger{transform-origin:50% 0;rotate:calc(var(--sway,0)*var(--k)*1deg)}
.hanger a{display:block;position:relative;padding-top:var(--drop);transition:translate .5s var(--ease)}
.hanger a:hover{translate:0 -6px}
.string{position:absolute;left:50%;top:0;width:1.5px;height:calc(var(--drop) + 26px);background:linear-gradient(180deg,var(--rg),rgba(184,119,106,.5));z-index:1}
.hanger img{position:relative;width:100%;border-radius:999px 999px 30px 30px;box-shadow:0 26px 40px -22px rgba(140,79,69,.55);transition:box-shadow .5s}
.hanger a:hover img{box-shadow:0 36px 50px -22px rgba(140,79,69,.7)}
.hanger h3{font-size:1.45rem;margin:18px 0 6px}
.hanger p{font-size:.92rem;color:var(--ink-2);max-width:20em}
.price-note{margin-top:clamp(34px,5vw,64px);text-align:center;font-size:.9rem;color:var(--ink-2)}
.price-note.left{text-align:left;margin-top:26px}
.price-note a{color:var(--rg-deep);font-weight:700;border-bottom:1.5px solid var(--rose)}

/* menu */
.menu{padding:clamp(70px,9vw,130px) 0;background:linear-gradient(180deg,var(--cream),#f7e5df 60%,var(--cream))}
.switch{position:relative;display:inline-flex;margin-top:26px;padding:5px;border-radius:999px;background:rgba(43,66,82,.07)}
.switch button{position:relative;z-index:1;padding:10px 24px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);transition:color .3s}
.switch button[aria-selected=true]{color:#fff}
.knob{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:var(--kw,100px);border-radius:999px;background:var(--ink);transition:transform .45s var(--ease),width .45s var(--ease);transform:translateX(var(--kx,0))}
.picker{display:grid;grid-template-columns:minmax(220px,300px) 1fr minmax(260px,360px);align-items:center;gap:clamp(18px,3vw,48px)}
.plist{display:flex;flex-direction:column;gap:2px;border-left:1.5px solid rgba(184,119,106,.35);padding-left:0}
.plist button{position:relative;display:block;width:100%;text-align:left;padding:11px 0 11px 24px;font-family:var(--serif);font-size:1.18rem;color:var(--ink-2);transition:color .3s,padding .35s var(--ease)}
.plist button::before{content:"";position:absolute;left:-6px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--rose);scale:0;transition:scale .35s var(--ease),background .3s}
.plist button:hover{color:var(--ink)}
.plist button[aria-selected=true]{color:var(--ink);padding-left:32px}
.plist button[aria-selected=true]::before{scale:1;background:var(--pc,var(--rg))}
.pstage{position:relative;height:min(62vh,560px);min-height:400px}
.arm.small{left:6%;right:6%;height:9px}
.arm.small .pole{display:none}
.phang{position:absolute;left:10%;right:10%;top:10px;bottom:30px;transform-origin:50% 0;animation:sway 7s ease-in-out infinite}
.phang img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;filter:drop-shadow(0 28px 32px rgba(140,79,69,.3));transition:opacity .35s ease,transform .6s var(--ease)}
.phang.shot img{object-position:50% 40%}
.phang img.out{opacity:0;transform:translateY(60px) scale(.96)}
.phang img.pre{opacity:0;transform:translateY(-70px) scale(.97);transition:none}
.pfloor{position:absolute;left:18%;right:18%;bottom:8px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(140,79,69,.28),transparent)}
.pdetail{position:relative}
.pkind{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--rg-deep)}
.pdetail h3{font-size:clamp(2rem,3.4vw,3rem);margin:.2em 0 .25em;min-height:2.1em;display:flex;align-items:flex-end}
.ptag{font-size:1.06rem;color:var(--ink);padding-left:14px;border-left:3px solid var(--pc,var(--rose));min-height:3.4em;transition:border-color .5s}
.pnote{margin:18px 0 24px;font-size:.88rem;color:var(--ink-2)}
.pcount{position:absolute;right:0;top:0;font-size:.74rem;letter-spacing:.2em;color:var(--ink-2)}

/* prp: slate navy */
.prp{padding:clamp(80px,10vw,150px) 0;background:radial-gradient(60% 80% at 20% 30%,#3a566a,transparent 70%),#243847;color:#f6e6e0;position:relative;overflow:hidden}
.prp .eyebrow{color:var(--gold)}
.prp .script{color:#e9c1b7}
.prp .lead{color:rgba(246,230,224,.78)}
.prp-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,80px)}
.prp-art{position:relative;display:grid;place-items:center;aspect-ratio:1}
.prp-art img{position:relative;width:76%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.orbit{position:absolute;inset:4%;border-radius:50%;border:1.5px dashed rgba(217,177,140,.55);rotate:var(--spin,0deg)}
.orbit::before,.orbit::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#f0d3c8,#b8776a);top:-7px;left:50%;margin-left:-7px}
.orbit::after{top:auto;bottom:-7px;background:linear-gradient(135deg,#bcd3df,#7fa3b8)}
.prp h2{margin:.25em 0 .4em}
.prp-list{margin:30px 0 34px;border-top:1px solid rgba(246,230,224,.2)}
.prp-list li{display:flex;gap:22px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(246,230,224,.2)}
.prp-list b{font-family:var(--serif);font-weight:400;font-size:1.1rem;color:var(--gold)}
.prp-list h3{font-size:1.9rem;margin-bottom:2px}
.prp-list p{color:rgba(246,230,224,.7);font-size:.95rem}

/* mobile */
.mobile{padding:clamp(80px,10vw,140px) 0;background:linear-gradient(180deg,var(--cream),#f6e3dc)}
.mob-grid{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:clamp(28px,6vw,100px)}
.tote{position:relative;width:min(100%,400px);margin-inline:auto;transform-origin:50% -30px;animation:sway 7.5s ease-in-out infinite;padding-top:42px}
.tote .hook{position:absolute;left:50%;top:0;width:3px;height:56px;margin-left:-1.5px;background:linear-gradient(180deg,var(--rg),rgba(184,119,106,.5))}
.tote .hook::before{content:"";position:absolute;left:-7px;top:-6px;width:17px;height:17px;border:2px solid var(--rg);border-radius:50%}
.tote img{border-radius:999px 999px 30px 30px;box-shadow:0 34px 50px -26px rgba(140,79,69,.6)}
.mob-copy h2{margin:.25em 0 .4em}
.route{display:block;width:min(520px,100%);margin:34px 0 0;color:var(--rg);overflow:visible}
.route text{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;fill:var(--ink-2)}
.route .pin{fill:var(--ink)}
.route .walker{fill:var(--rg);filter:drop-shadow(0 0 6px rgba(184,119,106,.6))}

/* about */
.about{padding:clamp(80px,10vw,140px) 0 clamp(70px,8vw,110px);background:var(--cream)}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:end;gap:clamp(28px,6vw,100px)}
.portrait{position:relative;width:min(100%,480px);margin-inline:auto;aspect-ratio:.72}
.portrait .window{position:absolute;inset:0 6% 0;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#f4d4cb,#f9e6df 70%,#fdf3ee);box-shadow:inset 0 0 0 2px rgba(184,119,106,.5),0 40px 60px -40px rgba(140,79,69,.55)}
.portrait .window::before{content:"";position:absolute;inset:14px 14px 0;border-radius:999px 999px 0 0;border:1px solid rgba(184,119,106,.35)}
.portrait img{position:absolute;left:0;right:0;bottom:0;width:100%;filter:drop-shadow(0 20px 24px rgba(90,40,30,.25))}
.about-copy{padding-bottom:20px}
.about-copy h2{margin:.25em 0 .5em}
.about-copy p{color:var(--ink-2);margin-bottom:1em;max-width:36em}
.band{margin-top:clamp(48px,6vw,86px);position:relative;border-radius:14px;background:linear-gradient(180deg,#fff,#f1f5f8);border:1px solid rgba(43,66,82,.18);box-shadow:0 18px 30px -20px rgba(43,66,82,.5);overflow:hidden;padding:0 0 0 64px}
.band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:54px;background:var(--powder);border-right:2px dashed rgba(43,66,82,.35);-webkit-mask:radial-gradient(circle at 14px 50%,transparent 5px,#000 6px);mask:radial-gradient(circle at 14px 50%,transparent 5px,#000 6px)}
.band::after{content:"";position:absolute;right:0;top:0;bottom:0;width:18px;background:repeating-linear-gradient(180deg,var(--ink) 0 2px,transparent 2px 6px);opacity:.15}
.band-in{display:flex;flex-wrap:wrap;gap:6px 34px;padding:20px 40px 20px 8px;align-items:flex-end}
.bf{display:flex;flex-direction:column;font-weight:700;font-size:.98rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.bf small{font-size:.58rem;letter-spacing:.24em;color:var(--ink-2);font-weight:700}
.bf.wide{flex:1 1 300px}
.bars{display:none}

/* book: Rx pad */
.book{padding:clamp(80px,10vw,150px) 0;background:linear-gradient(180deg,var(--cream),#f4d9d2)}
.book-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,6vw,100px)}
.rx{position:relative;max-width:480px;margin-inline:auto;rotate:-2.2deg;background:#fffdfb;border-radius:6px 6px 14px 14px;padding:56px 34px 30px;box-shadow:0 2px 0 #f1ddd6,0 4px 0 #fffdfb,0 6px 0 #f1ddd6,0 40px 50px -26px rgba(140,79,69,.55);transition:rotate .6s var(--ease)}
.rx:hover{rotate:-.5deg}
.rx-tear{position:absolute;left:0;right:0;top:0;height:26px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#e7c9bf,#f2dcd4);-webkit-mask:linear-gradient(#000,#000);}
.rx-tear::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:12px;background:radial-gradient(circle at 8px 0,#fffdfb 6px,transparent 6.5px) 0 0/16px 12px repeat-x;filter:drop-shadow(0 1px 0 #ecd3ca)}
.rx-head{display:flex;gap:16px;align-items:center;padding-bottom:16px;border-bottom:1.5px solid var(--rg)}
.rx-sym{font-family:var(--serif);font-size:3.6rem;line-height:1;color:var(--rg)}
.rx-head b{display:block;font-family:var(--serif);font-weight:400;font-size:1.4rem;letter-spacing:.08em;text-transform:uppercase}
.rx-head small{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.rx-body{padding:22px 0 6px}
.rx-line{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid rgba(43,66,82,.18)}
.rx-line small{flex:0 0 74px;font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.rx-line span{font-size:1.06rem}
.rx-line .script{font-size:1.9rem;line-height:1}
.rx-btn{width:100%;margin-top:26px}
.rx-sign{margin-top:18px;text-align:right;font-family:var(--script);font-size:1.7rem;color:var(--ink-2)}
.book-copy h2{margin:.25em 0 .4em}
.contact{margin-top:30px;border-top:1px solid rgba(43,66,82,.2)}
.contact li{display:flex;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(43,66,82,.2)}
.contact small{flex:0 0 96px;font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--rg-deep)}
.contact a,.contact span{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.65rem);overflow-wrap:anywhere}
.contact a:hover{color:var(--rg-deep)}

/* footer */
.foot{background:var(--ink);color:#f3e2dc;padding:clamp(50px,6vw,80px) 0 26px}
.foot-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(24px,5vw,70px)}
.foot-badge{width:136px;height:auto}
.foot .script.big{font-size:clamp(2.2rem,4vw,3.4rem);color:#e9c1b7;line-height:1.1}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.foot nav a{opacity:.8}.foot nav a:hover{opacity:1;color:var(--gold)}
.foot-r{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:.92rem}
.foot-r a:hover{color:var(--gold)}
.foot-r .ig{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(243,226,220,.4);transition:background .3s,color .3s}
.foot-r .ig:hover{background:var(--gold);color:var(--ink)}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:44px;padding-top:20px;border-top:1px solid rgba(243,226,220,.16);font-size:.8rem;color:rgba(243,226,220,.65)}
.built{display:inline-flex;align-items:center;gap:8px}.built i{font-style:normal}
.built a{color:#f3e2dc}.built a:hover{color:var(--gold)}
.dev-ig{display:inline-flex;align-items:center;gap:6px}
.fab{display:none}

/* responsive */
@media (max-width:1100px){
  .links{display:none}
  .burger{display:block}
  .nav.open .links{display:flex;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;gap:2px;padding:14px 22px;border-radius:26px;background:rgba(253,246,242,.96);backdrop-filter:blur(16px);box-shadow:0 20px 40px -20px rgba(140,79,69,.5);border:1px solid rgba(184,119,106,.2)}
  .nav.open .links a{padding:12px 0;font-size:.86rem;border-bottom:1px solid rgba(43,66,82,.08)}
  .line{display:none}
  .picker{grid-template-columns:1fr 1fr}
  .plist{grid-column:1/-1;flex-direction:row;overflow-x:auto;border-left:0;padding-bottom:10px;gap:6px;scrollbar-width:none;margin-inline:-24px;padding-inline:24px}
  .plist::-webkit-scrollbar{display:none}
  .plist button{width:auto;white-space:nowrap;padding:10px 18px!important;border-radius:999px;border:1.5px solid rgba(43,66,82,.18);font-size:1rem}
  .plist button::before{display:none}
  .plist button[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:104px;padding-bottom:70px;text-align:left}
  .hero-stage{order:-1;height:min(46vh,380px);min-height:300px;width:min(100%,340px);margin:0 auto -6px}
  .h1{font-size:clamp(3.4rem,17vw,6.4rem)}
  .h1 .w:nth-child(2)>span{margin-left:.5em}
  .scroll-cue{display:none}
  .hangers{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:0 24px 30px;margin-inline:-16px;scrollbar-width:none}
  .hangers::-webkit-scrollbar{display:none}
  .hanger{flex:0 0 62vw;max-width:260px;scroll-snap-align:center}
  .rail i{display:none}
  .prp-grid,.mob-grid,.about-grid,.book-grid{grid-template-columns:1fr}
  .prp-art{max-width:380px;margin-inline:auto}
  .tote{width:min(70%,320px)}
  .portrait{max-width:380px}
  .foot-in{grid-template-columns:1fr;text-align:left}
  .picker{grid-template-columns:1fr}
  .pstage{height:min(52vh,420px);min-height:340px}
  .pdetail h3{min-height:0}
  .ptag{min-height:0}
  .fab{display:inline-flex;position:fixed;z-index:55;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));min-height:48px;padding:0 1.5em;align-items:center;border-radius:999px;background:linear-gradient(135deg,#c78a7c,#8c4f45);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 14px 26px -10px rgba(90,40,30,.7)}
  .foot{padding-bottom:90px}
  .btn-book{display:none}
  .nav{padding-right:8px}
  .band{padding-left:46px}.band::before{width:38px}
  .band-in{gap:12px 24px;padding-right:20px}
  .rx{padding:52px 22px 24px}
  .rx-line small{flex-basis:62px}
}
@media (max-width:520px){
  .wrap{width:calc(100% - 40px)}
  .brand{font-size:.98rem}.brand em{letter-spacing:.2em}
  .cta .btn{flex:1 1 100%}
  .contact li{flex-direction:column;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.hero .eyebrow,.hero .lead,.hero .cta,.hero .mini{opacity:1;translate:0 0}
  .h1 .w>span{translate:0 0}
  .intro{display:none}
}

/* cut-outs that kept a bit of glossy shelf: feather the foot */
.phang img.soft{-webkit-mask-image:linear-gradient(180deg,#000 87%,transparent 95%);mask-image:linear-gradient(180deg,#000 87%,transparent 95%)}

/* keep content clear of the infusion line on wide screens */
@media (min-width:1101px){
  .wrap{width:min(1240px,100% - 150px)}
  .rail-wrap{width:min(1320px,100% - 140px)}
  .hero{padding-inline:max(90px,6vw)}
}
@media (max-width:900px){.hero-stage{margin-bottom:22px}.eyebrow{letter-spacing:.2em}}
/* script word needs room for its swash and descender */
.h1 .w:nth-child(3){padding:.3em .15em .38em;margin:-.22em 0 -.3em -.15em}

/* v3: tighter hero on wide screens, bigger bag, label hugging the bag */
@media (min-width:901px){
  .hero{padding-inline:max(90px,calc((100% - 1380px)/2));grid-template-columns:1fr minmax(0,.95fr);gap:clamp(20px,3vw,60px)}
  .hero-stage{width:min(100%,680px)}
}
@media (min-width:1101px){.hero{padding-inline:max(90px,calc((100% - 1380px)/2))}}
.hero-stage{height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;padding-bottom:6px}
.hero-stage .hang{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:9px 4% 0;aspect-ratio:.9;flex:none}
.stage-label{position:static;margin-top:16px;font-size:.95rem;letter-spacing:.3em;font-weight:700}
.stage-label::before{height:20px;margin-bottom:10px}
@media (max-width:900px){
  .hero-stage{height:auto;min-height:0;width:min(100%,380px)}
  .hero-stage .hang{margin-inline:2%}
  .stage-label{font-size:.82rem}
}

/* v4: match the artwork's own arch corners so no pale square shows; softer shadow */
.hanger img,.tote img{border-radius:999px 999px 12% 12% / 999px 999px 6.7% 6.7%;box-shadow:0 18px 30px -20px rgba(140,79,69,.4)}
.hanger a:hover img{box-shadow:0 24px 34px -20px rgba(140,79,69,.5)}

/* v7: hero flies in as the intro fades (copy from the left, bag from the right), one smooth ease */
.hero-copy,.hero-stage{will-change:transform,opacity;transition:opacity 1s ease,translate 1.5s cubic-bezier(.16,1,.3,1)}
body:not(.ready) .hero-copy{opacity:0;translate:-90px 0}
body:not(.ready) .hero-stage{opacity:0;translate:110px 0}
.hero-stage{transition-delay:.12s}
body:not(.ready) .hero-stage .hang{opacity:1}
.hero-stage .hang{transition:none}
.h1 .w>span{transition:translate 1.35s cubic-bezier(.16,1,.3,1)}
.h1 .w:nth-child(1)>span{transition-delay:.05s}.h1 .w:nth-child(2)>span{transition-delay:.14s}.h1 .w:nth-child(3)>span{transition-delay:.23s}
.hero .eyebrow,.hero .lead,.hero .cta,.hero .mini{translate:0 30px;transition:opacity 1s ease,translate 1.3s cubic-bezier(.16,1,.3,1)}
.hero .eyebrow{transition-delay:.05s}.hero .lead{transition-delay:.3s}.hero .cta{transition-delay:.38s}.hero .mini{transition-delay:.46s}
.hero-glow{transition:background 1.4s ease,opacity 1.6s ease}
body:not(.ready) .hero-glow{opacity:0}
.intro{transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.i-badge{transition:opacity .55s ease,transform 1s cubic-bezier(.16,1,.3,1)}
@media (max-width:900px){body:not(.ready) .hero-copy{translate:0 50px}body:not(.ready) .hero-stage{translate:0 -50px}}
@media (prefers-reduced-motion:reduce){.hero-copy,.hero-stage,.hero-glow{opacity:1!important;translate:0 0!important}}

/* v8: the intro badge flies into the nav logo slot; only the backdrop fades */
.intro{background:none;transition:none}
.intro.out{opacity:1;transform:none;pointer-events:none}
.i-bg{position:absolute;inset:0;background:linear-gradient(165deg,#fcefea,#f4d6cf)}
.i-bg,.intro canvas,.i-skip{transition:opacity .9s ease}
.intro.out .i-bg,.intro.out canvas{opacity:0}
.intro.out .i-skip{opacity:0!important;animation:none}
.i-badge{transform-origin:50% 50%}
.brand img{width:38px;height:38px;border-radius:50%}
html:not(.no-intro) body:not(.landed) .brand img{opacity:0}
@media (max-width:520px){.brand img{width:34px;height:34px}}

/* v9: nav keeps the tear-drop icon; the drop lifts out of the badge and flies there */
.brand img{width:22px;height:auto;border-radius:0}
@media (max-width:520px){.brand img{width:20px;height:auto}}
.i-dropfly{position:absolute;left:50%;top:50%;height:auto;opacity:0;transform:translate(-50%,-50%);transform-origin:50% 50%;will-change:transform}

/* v10: images cropped inside the artwork's own border; our border + shadow instead */
.hanger img,.tote img{border:2.5px solid #c78a7c;border-radius:999px 999px 18.4% 18.4% / 999px 999px 10.2% 10.2%;box-shadow:0 22px 34px -22px rgba(90,40,30,.5),0 3px 8px -3px rgba(90,40,30,.25);background:#f4dcd4}
.hanger a:hover img{box-shadow:0 30px 40px -22px rgba(90,40,30,.55),0 4px 10px -3px rgba(90,40,30,.3)}
.prp-art img{width:72%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid #d9b18c;filter:none;box-shadow:0 34px 50px -24px rgba(0,0,0,.6),0 0 0 12px rgba(217,177,140,.1)}

/* v11: arch images are pre-masked with their own rose-gold edge; only a clean shadow is applied */
.hanger img,.tote img{border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 20px 22px rgba(90,40,30,.26)) drop-shadow(0 2px 4px rgba(90,40,30,.18))}
.hanger a:hover img{box-shadow:none;filter:drop-shadow(0 28px 28px rgba(90,40,30,.3)) drop-shadow(0 3px 6px rgba(90,40,30,.2))}

/* v12: mobile hero cleanup */
.lead{text-wrap:pretty;hyphens:none;-webkit-hyphens:none}
@media (max-width:900px){
  .hero{padding-inline:max(22px,6vw);padding-top:98px;padding-bottom:56px}
  .hero-stage{margin-bottom:10px}
  .hero .eyebrow{display:flex;flex-direction:column;gap:2px;font-size:.7rem;letter-spacing:.2em;line-height:1.5}
  .hero .eyebrow i{display:none}
  .h1{font-size:clamp(3.5rem,18.5vw,6.2rem);line-height:.92;margin:.28em 0 .3em}
  .h1 .w:nth-child(2)>span{margin-left:0}
  .h1 .w:nth-child(3)>span{margin-left:0}
  .h1 .w:nth-child(3){padding-left:.05em}
  .hero .lead{font-size:1.02rem;line-height:1.62;max-width:26em;margin-bottom:24px}
  .cta{gap:10px}
  .mini{margin-top:20px;font-size:.82rem;line-height:1.5}
}
@media (max-width:520px){
  .cta .btn{flex:1 1 100%;min-height:52px}
  .hero .eyebrow{letter-spacing:.16em}
}

@media (max-width:900px){
  .about{padding-bottom:48px}
  .book{padding-top:56px}
  .rx-head small{letter-spacing:.12em;font-size:.66rem;line-height:1.4;display:block}
  .rx-head b{font-size:1.2rem;letter-spacing:.06em}
  .rx-sym{font-size:3.1rem}
}

@media (max-width:1100px){
  .plist{scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);padding-right:48px}
  .plist li{scroll-snap-align:start;flex:none}
}

.phang img.soft{-webkit-mask-image:none;mask-image:none}
