@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=DM+Serif+Display:ital@0;1&display=swap');

:root{--cream:#faf7f2;--ink:#35352f;--muted:#79776d;--coral:#df7868;--line:#eae5dc;--serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ac5d4e;outline-offset:6px}button{cursor:pointer}button:disabled{cursor:default}[hidden]{display:none!important}.masthead{max-width:1320px;margin:auto;padding:30px 52px;display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:18px;font-weight:650;letter-spacing:-.6px}.wordmark svg{width:23px;height:23px;fill:none;stroke:var(--coral);stroke-width:1.7}.header-note{font-size:12px;color:var(--muted);letter-spacing:.3px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2px;margin:0 0 20px}.unboxing{text-align:center;min-height:calc(100svh - 153px);padding:38px 20px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center}.unboxing h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,5vw,68px);line-height:1.08;letter-spacing:-1.6px;margin:0}.unboxing h1 em{font-weight:400;color:var(--coral)}.intro-copy{font-size:14px;color:var(--muted);margin:18px 0 0}.gift{display:block;border:0;padding:0;background:transparent;width:340px;max-width:100%;height:300px;touch-action:none;user-select:none;position:relative;cursor:grab}.gift:active{cursor:grabbing}.gift-art{width:100%;height:100%;overflow:visible;transform:translateY(calc(var(--pull,0px) * .12));transition:transform .2s ease}.gift-sparkles{animation:float 5s ease-in-out infinite}.little-heart{transform-origin:300px 127px;animation:heart-float 4s ease-in-out infinite}.ground{transition:opacity .9s,transform .9s;transform-origin:210px 332px}.bow{transform-origin:210px 155px;transition:transform .65s cubic-bezier(.3,.8,.3,1),opacity .6s}.body-ribbon,.lid-ribbon{transition:transform .7s ease,opacity .6s;transform-origin:210px 210px}.lid{transform-origin:210px 180px;transition:transform .8s cubic-bezier(.25,.8,.25,1),opacity .7s}.box-body{transition:transform .8s,opacity .6s;transform-origin:210px 320px}.peek-card{transform:translateY(35px);transition:transform .9s,opacity .6s;opacity:0}.gift-tag{transition:transform .8s,opacity .6s;transform-origin:260px 210px}.gift[data-step="1"] .bow{transform:translateY(-31px) rotate(-17deg) scale(1.08)}.gift[data-step="2"] .bow,.gift[data-step="3"] .bow,.gift[data-step="4"] .bow{transform:translate(50px,-115px) rotate(40deg);opacity:0}.gift[data-step="2"] .body-ribbon,.gift[data-step="3"] .body-ribbon,.gift[data-step="4"] .body-ribbon{transform:translate(70px,35px) rotate(20deg);opacity:0}.gift[data-step="2"] .lid-ribbon,.gift[data-step="3"] .lid-ribbon,.gift[data-step="4"] .lid-ribbon{transform:translate(-40px,-45px) rotate(-40deg);opacity:0}.gift[data-step="2"] .gift-tag,.gift[data-step="3"] .gift-tag,.gift[data-step="4"] .gift-tag{transform:translate(65px,20px) rotate(35deg);opacity:0}.gift[data-step="3"] .lid{transform:translate(-12px,-68px) rotate(-13deg)}.gift[data-step="3"] .peek-card{transform:translateY(-25px);opacity:1}.gift[data-step="4"] .lid{transform:translate(-50px,-150px) rotate(-32deg);opacity:0}.gift[data-step="4"] .box-body{transform:translateY(35px) scale(.95);opacity:0}.gift[data-step="4"] .peek-card{transform:translateY(-70px) rotate(5deg) scale(1.2);opacity:1}.gift[data-step="4"] .ground{opacity:0;transform:scale(.5)}.unwrap-controls{min-height:142px}.swipe-arrow{color:var(--coral);animation:swipe 1.8s ease-in-out infinite}#gesture-hint{font-size:14px;font-weight:550;margin:3px 0 15px}.progress{display:flex;gap:7px;justify-content:center}.progress span{height:4px;width:30px;background:#e3ddd2;border-radius:9px;transition:background .3s,transform .3s}.progress span.done{background:var(--coral);transform:scaleY(1.25)}.tap-alternative{border:0;background:none;color:#777469;font-size:11px;padding:11px 6px}.tap-alternative span{margin-left:4px;color:#918a7e;font-variant-numeric:tabular-nums}.step-message{font-size:11px;color:#8b857b;margin:2px 0 0}.unboxing.leaving{animation:exit .5s ease both}.reveal{padding:30px 24px 22px;max-width:1050px;margin:auto;animation:enter .85s cubic-bezier(.2,.75,.3,1) both}.birthday-note{text-align:center;margin-bottom:34px}.birthday-note .eyebrow{margin-bottom:15px}.birthday-note h1{position:relative;font-family:var(--serif);font-size:clamp(38px,4vw,52px);font-weight:400;letter-spacing:-1.2px;line-height:1.16;margin:0}.birthday-note h1:focus{outline:none}.birthday-note h1 em{color:var(--coral);font-weight:400}.title-heart{font-family:var(--sans);display:inline-block;font-size:40px;transform:rotate(13deg) translate(9px,-9px);color:var(--coral)}.birthday-note>p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.65;margin:14px 0 11px}.signature{font-size:12px;color:#8a6656}.mobile-break{display:none}.experience-card{max-width:900px;margin:auto;background:#fff;border-radius:23px;overflow:hidden;display:grid;grid-template-columns:.85fr 1fr;border:1px solid #e9e1d6;box-shadow:0 12px 45px -20px #7d694326}.card-art{position:relative;background:#eee6d6;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:33px 20px 34px;overflow:hidden}.art-label{position:absolute;top:32px;font-size:9px;font-weight:600;letter-spacing:2px;color:#776e5c}.card-art>svg{width:115%;max-width:440px;margin:8px -20px -3px;overflow:visible}.art-caption{align-self:flex-start;position:relative;font-family:var(--serif);font-size:40px;line-height:1.15;letter-spacing:-.7px;margin:0 0 0 20px;width:calc(100% - 40px)}.art-caption em{color:#897953}.art-caption>span{position:absolute;right:1px;bottom:8px;color:#9a8b63;font-family:var(--sans);font-size:50px}.card-content{padding:30px 34px 26px}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:5px}.card-heading .eyebrow{font-size:8px;letter-spacing:1.6px;margin:0}.heart-badge{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:23px;line-height:1;color:var(--coral)}h2{font-weight:550;font-size:29px;line-height:1.15;letter-spacing:-1.1px;margin:13px 0 13px}.experience-description{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 23px}.details{margin:0}.details>div{position:relative;border-top:1px solid var(--line);padding:15px 0 15px 32px}.details dt{font-size:8px;letter-spacing:1.5px;color:#8b8478;font-weight:600;margin-bottom:6px}.details dt svg{position:absolute;left:0;top:19px;width:19px;height:19px;fill:none;stroke:#777468;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.details dd{font-size:12px;font-weight:550;margin:0;line-height:1.4}.details dd a{text-decoration:none}.details dd a:hover{text-decoration:underline}.details dd a>span{color:var(--coral);margin-left:3px}.detail-secondary{display:block;font-size:10px;font-weight:400;color:#8b8479;margin-top:5px}.booking-button{background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:600;text-decoration:none;border-radius:10px;min-height:49px;padding:12px 16px;margin-top:9px;box-shadow:0 4px 9px #d9846d15;transition:background .2s,transform .2s}.booking-button:hover{background:#cb6758;transform:translateY(-2px)}.booking-button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-width:1.5}.booking-button>span{margin-left:auto;font-size:17px}.booking-button svg{margin-right:auto}.booking-note{font-size:9px;color:var(--muted);text-align:center;margin:11px 0 0;line-height:1.6}.personal-promise{font-size:10px;color:var(--muted);text-align:center;line-height:1.7;margin:20px 0 10px}.personal-promise span{color:var(--coral);margin:0 5px}.replay{display:block;background:none;border:0;color:#82796b;font-size:10px;margin:0 auto;padding:10px 12px}.replay span{margin-right:5px;font-size:14px}footer{text-align:center;padding:25px 16px 28px;font-size:8px;letter-spacing:1.7px;color:#a29a8d}footer span{color:#cd8d7b;margin:0 9px;font-size:13px}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10}.confetti i{position:absolute;top:-20px;left:var(--x);width:var(--size);height:calc(var(--size) * .6);background:var(--color);border-radius:2px;animation:confetti-fall var(--duration) var(--delay) ease-out both}.no-script{max-width:500px;margin:70px auto;padding:20px;line-height:1.8}@keyframes float{50%{transform:translateY(-5px)}}@keyframes heart-float{50%{transform:translateY(-6px) rotate(5deg)}}@keyframes swipe{0%,100%{transform:translateY(3px);opacity:.5}50%{transform:translateY(-3px);opacity:1}}@keyframes enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes exit{to{opacity:0;transform:translateY(-20px)}}@keyframes confetti-fall{0%{transform:translateY(-10vh) rotate(0);opacity:1}85%{opacity:1}100%{transform:translate(var(--drift),110vh) rotate(var(--spin));opacity:0}}
@media(min-width:1500px){.unboxing{padding-top:55px}.gift{width:390px;height:340px}}@media(max-height:850px) and (min-width:601px){.unboxing{padding-top:15px}.gift{width:300px;height:255px}.unboxing h1{font-size:56px}.unboxing .eyebrow{margin-bottom:15px}.unwrap-controls{min-height:130px}}@media(max-width:600px){.masthead{padding:24px 24px 20px}.wordmark{font-size:17px}.header-note{font-size:10px}.unboxing{min-height:calc(100svh - 127px);padding:25px 20px 10px;justify-content:center}.eyebrow{font-size:8px;letter-spacing:1.6px}.unboxing h1{font-size:53px;letter-spacing:-1.5px}.intro-copy{font-size:12px;margin-top:14px}.gift{width:310px;height:272px}.unwrap-controls{min-height:137px}#gesture-hint{font-size:13px}.step-message{font-size:10px}footer{font-size:6px;letter-spacing:1.2px;padding:19px 14px 23px}footer span{margin:0 5px}.reveal{padding:26px 20px 18px}.birthday-note{margin-bottom:26px}.birthday-note h1{font-size:43px;line-height:1.08}.mobile-break{display:block}.title-heart{position:absolute;font-size:33px;transform:rotate(13deg);margin-left:10px;margin-top:2px}.birthday-note .eyebrow{font-size:8px}.birthday-note>p:not(.eyebrow){font-size:12px;line-height:1.65;margin-top:14px}.signature{font-size:11px}.experience-card{max-width:410px;display:block;border-radius:20px}.card-art{height:225px;align-items:flex-start;padding:25px}.art-label{top:22px;left:24px;font-size:7px;letter-spacing:1.4px}.card-art>svg{position:absolute;width:254px;max-width:none;right:-18px;top:1px;margin:0}.art-caption{font-size:29px;margin:45px 0 0;width:145px;z-index:1}.art-caption>span{font-size:25px;right:56px;bottom:-40px}.card-content{padding:25px 24px 24px}.card-heading .eyebrow{font-size:7px;letter-spacing:1.5px}h2{font-size:29px;margin:10px 0 12px}.experience-description{font-size:12px;margin-bottom:20px}.details>div{padding-top:16px;padding-bottom:16px}.details dd{font-size:12px}.detail-secondary{font-size:10px}.booking-button{font-size:12px;min-height:51px}.booking-note{font-size:9px}.personal-promise{max-width:280px;margin:18px auto 8px;font-size:9px}}@media(max-width:350px){.header-note{display:none}.unboxing h1{font-size:46px}.gift{width:270px;height:235px}.card-content{padding:21px 19px}.card-art>svg{right:-43px}.art-caption{font-size:26px}.title-heart{display:none}}@media(max-height:700px) and (max-width:600px){.unboxing{padding-top:10px}.unboxing h1{font-size:46px}.gift{width:270px;height:230px}.unboxing .eyebrow{margin-bottom:13px}.unwrap-controls{min-height:128px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confetti{display:none}}

/* The opening has no masthead or tagline: keep the gift centered on screen. */
.unboxing{min-height:calc(100svh - 77px)}
.reveal{padding-top:58px}
@media(max-width:600px){.unboxing{min-height:calc(100svh - 53px)}.reveal{padding-top:42px}}

/* Minimal opening: the interactive object is the whole introduction. */
.unboxing{min-height:100svh;padding:24px 16px;justify-content:center}
.gift{width:min(440px,100%);height:390px}
.gift-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gift.three-ready .gift-art{visibility:hidden}
.unwrap-controls{min-height:112px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.unboxing{padding:20px 16px}.gift{height:340px;width:360px;max-width:100%}.unwrap-controls{min-height:112px}}
@media(max-height:600px){.gift{height:280px;width:320px}}

/* The revealed gift: location, treatment, duration, validity, booking. */
.reveal{max-width:650px;padding:40px 24px 24px}
.massage-card{background:#fff;border:1px solid #e9e1d6;border-radius:22px;overflow:hidden;box-shadow:0 12px 45px -20px #7d69431c}
.location-map-wrap{height:255px;position:relative;background:#eae9df}
.location-map{height:100%;width:100%;z-index:0;background:#eae9df}
.location-map .leaflet-tile-pane{filter:saturate(.42)}
.location-map .leaflet-control-attribution{font-size:8px;background:#ffffffe8;color:#777;padding:1px 5px}
.location-map .leaflet-control-attribution a{color:#777}
.massage-pin svg{width:44px;height:52px;filter:drop-shadow(0 3px 4px #77604438)}
.map-link{position:absolute;right:16px;top:16px;z-index:1;font-size:11px;text-decoration:none;background:#fffaf5f5;border:1px solid #e8e1d5;border-radius:8px;padding:9px 12px;box-shadow:0 2px 8px #5c473011}
.map-link span{margin-left:12px;color:var(--coral)}
.massage-content{padding:31px 34px 33px}
.birthday-greeting{font-size:13px;color:var(--coral);margin:0 0 13px}
.massage-content h1{font-family:var(--serif);font-size:44px;font-weight:400;line-height:1.12;letter-spacing:-1px;margin:0 0 17px}
.massage-content h1:focus{outline:none}
.massage-content h1 em{font-weight:400;color:var(--coral)}
.venue-link{display:inline-block;text-decoration:none;font-size:12px;color:var(--muted);line-height:1.5}
.venue-link:hover{text-decoration:underline}
.venue-link span{color:var(--coral);margin-left:6px}
.massage-facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px 0 23px;padding:20px 0;gap:15px}
.massage-fact{display:flex;align-items:center;gap:12px;min-height:43px}
.massage-fact>svg{width:25px;height:25px;flex-shrink:0;fill:none;stroke:#82796a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.massage-fact span{display:block;font-size:15px;font-weight:500}
.massage-fact small{display:block;font-size:10px;color:var(--muted);margin-top:4px}
.massage-content .booking-button{margin:0;font-size:13px;min-height:51px}
.replay-icon{width:44px;height:44px;margin:15px auto 0;display:grid;place-items:center;border-radius:50%;padding:12px}
.replay-icon:hover{background:#eee8df}
.replay-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.reveal{padding:24px 18px 18px}.massage-card{border-radius:19px}.location-map-wrap{height:220px}.massage-content{padding:26px 25px 27px}.massage-content h1{font-size:36px;letter-spacing:-.8px}.birthday-greeting{font-size:12px}.venue-link{font-size:10px}.massage-facts{margin:23px 0 22px;padding:18px 0;gap:12px}.massage-fact{gap:9px}.massage-fact span{font-size:14px}.massage-fact small{font-size:9px}.map-link{top:12px;right:12px;font-size:10px}.massage-content .booking-button{font-size:12px}}
@media(max-width:350px){.reveal{padding:18px 14px}.massage-content{padding:23px 20px}.massage-content h1{font-size:31px}.location-map-wrap{height:190px}.massage-fact{gap:8px}.massage-fact>svg{width:22px;height:22px}.massage-fact span{font-size:13px}}

/* A softly raised card: one continuous surface, with a thin paper edge. */
.massage-card{
  position:relative;
  transform:perspective(1300px) rotateX(var(--card-rx,2deg)) rotateY(var(--card-ry,-2.4deg));
  transform-origin:50% 45%;
  border-color:#e6dfd4;
  box-shadow:
    inset 0 1px 0 #fff,
    1px 1px 0 #e8e1d7,
    2px 2px 0 #e4dccf,
    3px 3px 0 #ded5c6,
    4px 5px 0 #d9cfbf,
    7px 13px 16px -9px #78604430,
    12px 30px 48px -18px #78604435;
  transition:transform .55s cubic-bezier(.2,.75,.25,1);
}
.massage-card.following-pointer{transition-duration:.16s}
.massage-card::after{
  content:"";position:absolute;inset:0;z-index:450;pointer-events:none;border-radius:inherit;
  background:linear-gradient(125deg,#ffffff18,transparent 42%,#b9946506);
  box-shadow:inset 1px 1px 1px #ffffffc0,inset -1px -1px 1px #ae947514;
}
.replay-icon{margin-top:24px}
@media(max-width:600px){
  .massage-card{transform:perspective(1300px) rotateX(var(--card-rx,1.6deg)) rotateY(var(--card-ry,-2deg))}
}
@media(prefers-reduced-motion:reduce){.massage-card{transform:none}}

/* Phone swipes work anywhere on the opening, without page-scroll interference. */
.unboxing{touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
.gift-canvas{transform:translateY(calc(var(--pull,0px) * .1));transition:transform .15s ease}
.card-float{animation:card-drift 7s ease-in-out infinite;transform-origin:50% 45%}
@keyframes card-drift{0%,100%{transform:translateY(0) rotate(-.12deg)}50%{transform:translateY(-6px) rotate(.12deg)}}
@media(prefers-reduced-motion:reduce){.card-float{animation:none;transform:none}}
