/* =====================================================================
   Sekar Spa & Wellness — website template (by Vosss)
   Zen earthy: krem, sage, tanah liat. Harga & ulasan fiktif.
   Ganti warna brand di :root.
===================================================================== */
:root{
  --cream: #f3eee5;
  --paper: #faf7f1;
  --sand: #e7ddcd;
  --sage: #8c9a7e;
  --moss: #3e4b3c;
  --forest: #243024;
  --clay: #b8784f;
  --clay-2: #a0653e;
  --blush: #e9c9b8;
  --gold: #e2a86b;
  --line: rgba(36,48,36,.14);
  --muted: #6f7466;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --slow: cubic-bezier(.45, 0, .2, 1);
  --wrap: 1200px;
  --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --accent: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --blob: 58% 42% 46% 54% / 44% 52% 48% 56%;
}
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; overflow-x: clip; }
body{ margin: 0; background: var(--cream); color: var(--forest); font-family: var(--sans); font-size: 16.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg{ display: block; max-width: 100%; }
[hidden]{ display: none !important; }
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote{ margin: 0; }
h1, h2, h3{ font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; }
em{ font-family: var(--accent); font-style: italic; font-weight: 500; color: var(--clay); letter-spacing: 0; }
ul, ol{ list-style: none; margin: 0; padding: 0; }
::selection{ background: var(--sage); color: var(--paper); }
:focus-visible{ outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 8px; }
.wrap{ width: min(var(--wrap), 100% - 56px); margin-inline: auto; }
@media (max-width: 600px){ .wrap{ width: calc(100% - 32px); } }
.eyebrow{ display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); }
.eyebrow::before{ content: ""; width: 8px; height: 8px; border-radius: var(--blob); background: var(--clay); animation: morph 6s ease-in-out infinite; }
.eyebrow.light{ color: var(--blush); }
@keyframes morph{ 50%{ border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%; transform: rotate(40deg); } }
.muted{ color: var(--muted); }
.h-xl{ font-size: clamp(48px, 7vw, 104px); }
.h-lg{ font-size: clamp(36px, 4.4vw, 62px); }
.lead{ font-size: clamp(16.5px, 1.3vw, 19px); color: var(--muted); max-width: 520px; }

/* ---------- buttons ---------- */
.btn{ position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform .6s var(--ease), color .5s, box-shadow .5s; }
.btn svg{ width: 18px; height: 18px; transition: transform .5s var(--ease); }
.btn:hover svg{ transform: translateX(4px); }
.btn::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; z-index: -1; transform: translate(-50%, -50%) scale(0); transition: transform .8s var(--ease); }
.btn:hover::after{ transform: translate(-50%, -50%) scale(40); }
.btn:active{ transform: scale(.97); }
.btn.clay{ background: var(--clay); color: var(--paper); box-shadow: 0 14px 30px -16px rgba(184,120,79,.9); }
.btn.clay::after{ background: var(--moss); }
.btn.line{ color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--forest); }
.btn.line::after{ background: var(--forest); }
.btn.line:hover{ color: var(--paper); }
.btn.cream{ background: var(--paper); color: var(--forest); }
.btn.cream::after{ background: var(--gold); }
.btn.block{ width: 100%; }
.btn.sm{ height: 44px; padding: 0 20px; font-size: 14px; }
.icon-btn{ width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transition: background .3s; }
.icon-btn:hover{ background: rgba(36,48,36,.06); }
.icon-btn svg{ width: 22px; height: 22px; }

/* ---------- header ---------- */
.header{ position: sticky; top: 0; z-index: 60; transition: background .5s, box-shadow .5s, backdrop-filter .5s; }
.header.scrolled{ background: rgba(243,238,229,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.header .wrap{ height: 84px; display: flex; align-items: center; gap: 30px; transition: height .5s var(--ease); }
.header.scrolled .wrap{ height: 70px; }
.logo{ display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 28px; line-height: 1; }
.logo .mark{ width: 40px; height: 40px; animation: turn 30s linear infinite; }
.logo small{ display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--sage); margin-top: 4px; }
.logo.light{ color: var(--cream); }
@keyframes turn{ to{ transform: rotate(360deg); } }
.nav{ display: flex; gap: 6px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav a{ position: relative; padding: 8px 14px; border-radius: 999px; transition: background .4s, color .3s; }
.nav a:hover{ background: rgba(140,154,126,.16); }
.nav a.active{ color: var(--clay); }
.nav a.active::after{ content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--clay); }
.tools{ display: flex; align-items: center; gap: 10px; }
.sound{ display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--moss); box-shadow: inset 0 0 0 1px var(--line); transition: background .3s; }
.sound:hover{ background: rgba(140,154,126,.14); }
.sound svg{ width: 20px; height: 20px; }
.sound svg path{ transform-origin: center; }
.sound[aria-pressed="true"]{ background: var(--moss); color: var(--cream); }
.sound[aria-pressed="true"] svg path{ animation: eq 1.1s ease-in-out infinite; }
@keyframes eq{ 50%{ transform: scaleY(.45); } }
.menu-btn{ display: none; }
@media (max-width: 960px){
  .nav, .hide-m{ display: none; }
  .menu-btn{ display: grid; }
  .tools{ margin-left: auto; }
  .sound span{ display: none; }
  .sound{ width: 44px; padding: 0; justify-content: center; }
  .header .wrap{ height: 70px; }
  .logo{ font-size: 24px; }
  .logo .mark{ width: 34px; height: 34px; }
}
.mnav{ position: fixed; inset: 0; z-index: 90; background: var(--moss); color: var(--cream); padding: 100px 30px 30px; display: flex; flex-direction: column; justify-content: space-between; clip-path: ellipse(0% 0% at 100% 0%); transition: clip-path 1s var(--slow); }
.mnav.open{ clip-path: ellipse(150% 150% at 100% 0%); }
.mnav nav{ display: grid; gap: 4px; }
.mnav nav a{ font-family: var(--display); font-size: 42px; opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .8s var(--ease); }
.mnav.open nav a{ opacity: 1; transform: none; }
.mnav.open nav a:nth-child(2){ transition-delay: .06s; } .mnav.open nav a:nth-child(3){ transition-delay: .12s; } .mnav.open nav a:nth-child(4){ transition-delay: .18s; } .mnav.open nav a:nth-child(5){ transition-delay: .24s; }
.mnav p{ font-size: 13px; opacity: .7; }
.mnav .close{ position: absolute; top: 14px; right: 16px; color: var(--cream); }

/* ---------- petals ---------- */
.petals{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.petal{ position: absolute; top: -40px; width: var(--s); height: var(--s); animation: fall var(--t) linear infinite; animation-delay: var(--d); }
.petal::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #f3c46a 0 12%, #fbe7c2 30%, #fffaf1 62%, transparent 64%); clip-path: polygon(50% 0, 62% 38%, 100% 38%, 69% 60%, 80% 100%, 50% 76%, 20% 100%, 31% 60%, 0 38%, 38% 38%); border-radius: 50%; opacity: .9; animation: spinp 7s linear infinite; }
@keyframes fall{ 0%{ transform: translate(0, 0) rotate(var(--r)); opacity: 0; } 8%{ opacity: 1; } 100%{ transform: translate(-120px, 110vh) rotate(calc(var(--r) + 360deg)); opacity: .2; } }
@keyframes spinp{ to{ transform: rotateY(360deg); } }

/* ---------- hero ---------- */
.hero{ position: relative; padding: 20px 0 90px; }
.hero-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.hero h1{ margin: 22px 0 24px; }
.w{ display: inline-block; }
.js .w{ opacity: 0; transform: translateY(30px); filter: blur(10px); animation: win 1.6s var(--ease) forwards; animation-delay: calc(var(--i) * .15s + .2s); }
@keyframes win{ to{ opacity: 1; transform: none; filter: none; } }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.breath{ display: flex; align-items: center; gap: 18px; margin-top: 44px; padding: 14px 22px 14px 14px; border-radius: 999px; background: rgba(250,247,241,.7); box-shadow: inset 0 0 0 1px var(--line); width: fit-content; max-width: 100%; }
.b-orb{ position: relative; width: 64px; height: 64px; flex: 0 0 auto; display: grid; place-items: center; }
.b-orb i{ position: absolute; inset: 0; border-radius: 50%; background: rgba(140,154,126,.25); transform: scale(var(--bs, .55)); transition: transform var(--bt, 4s) var(--slow); }
.b-orb i + i{ inset: 12px; background: rgba(140,154,126,.45); transition-delay: .15s; }
.b-orb span{ width: 14px; height: 14px; border-radius: 50%; background: var(--sage); }
.breath b{ display: block; font-family: var(--display); font-weight: 400; font-size: 20px; }
.breath small{ font-size: 12.5px; color: var(--muted); }
.hero-art{ position: relative; }
.arch{ position: relative; aspect-ratio: 5/6; max-height: 680px; border-radius: 999px 999px 32px 32px; overflow: hidden; box-shadow: 0 50px 80px -50px rgba(36,48,36,.55); }
.js .arch{ clip-path: inset(100% 0 0 0 round 999px 999px 32px 32px); animation: rise-in 1.8s var(--slow) .2s forwards; }
@keyframes rise-in{ to{ clip-path: inset(0 0 0 0 round 999px 999px 32px 32px); } }
.scene{ width: 100%; height: 100%; }
.scene .sun{ animation: sunp 8s ease-in-out infinite; transform-origin: 300px 190px; }
@keyframes sunp{ 50%{ transform: scale(1.06); } }
.scene .lf{ transform-origin: 0 100%; animation: sway 7s ease-in-out infinite; animation-delay: var(--d); }
.scene .lf.r{ transform-origin: 100% 100%; animation-name: sway-r; }
@keyframes sway{ 50%{ transform: rotate(3deg) translateY(-4px); } }
@keyframes sway-r{ 50%{ transform: rotate(-3deg) translateY(-4px); } }
.scene .rp{ fill: none; stroke: rgba(255,255,255,.8); stroke-width: 1.5; transform-origin: 170px 440px; animation: ripple 4.5s ease-out infinite; opacity: 0; }
.scene .rp.r2{ animation-delay: 1.5s; } .scene .rp.r3{ animation-delay: 3s; }
@keyframes ripple{ 0%{ transform: scale(.2); opacity: .9; } 100%{ transform: scale(2.6); opacity: 0; } }
.scene .float{ animation: bob 5s ease-in-out infinite; }
.scene .float.f2{ animation-delay: -1.6s; } .scene .float.f3{ animation-delay: -3.2s; }
@keyframes bob{ 50%{ transform: translate(3px, -3px); } }
.scene .flame{ transform-origin: 455px 398px; animation: flick 1.4s ease-in-out infinite alternate; }
.scene .flame.in{ animation-duration: .9s; }
@keyframes flick{ 0%{ transform: scale(1, 1) skewX(0); } 40%{ transform: scale(.94, 1.08) skewX(-4deg); } 100%{ transform: scale(1.04, .95) skewX(3deg); } }
.scene .halo{ animation: halo 2.4s ease-in-out infinite alternate; transform-origin: 455px 395px; }
@keyframes halo{ to{ transform: scale(1.18); opacity: .7; } }
.scene .steam path{ fill: none; stroke: rgba(255,255,255,.7); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: steam 5s ease-in-out infinite; }
.scene .steam path:nth-child(2){ animation-delay: 2.2s; }
@keyframes steam{ 0%{ stroke-dashoffset: 80; opacity: 0; } 30%{ opacity: .9; } 100%{ stroke-dashoffset: -80; opacity: 0; } }
.h-badge{ position: absolute; left: -26px; bottom: 16%; z-index: 2; display: grid; justify-items: center; width: 118px; aspect-ratio: 1; align-content: center; border-radius: var(--blob); background: var(--paper); box-shadow: 0 24px 40px -24px rgba(36,48,36,.5); animation: morph2 9s ease-in-out infinite; }
.h-badge b{ font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1; }
.h-badge span{ color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.h-badge small{ font-size: 11.5px; color: var(--muted); }
@keyframes morph2{ 50%{ border-radius: 44% 56% 58% 42% / 56% 42% 58% 44%; } }
.h-open{ position: absolute; right: 18px; top: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(250,247,241,.9); font-size: 12.5px; font-weight: 600; }
.h-open i{ width: 8px; height: 8px; border-radius: 50%; background: #5c9a60; box-shadow: 0 0 0 0 rgba(92,154,96,.6); animation: ping 2s infinite; }
@keyframes ping{ 70%{ box-shadow: 0 0 0 9px rgba(92,154,96,0); } 100%{ box-shadow: 0 0 0 0 rgba(92,154,96,0); } }
.js .h-badge, .js .h-open{ opacity: 0; animation: pop 1s var(--ease) 1.4s forwards, morph2 9s ease-in-out 2.4s infinite; }
.js .h-open{ animation: pop 1s var(--ease) 1.6s forwards; }
@keyframes pop{ from{ opacity: 0; transform: translateY(20px) scale(.9); } to{ opacity: 1; transform: none; } }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: minmax(0, 1fr); gap: 36px; } .hero-art{ max-width: 440px; width: 88%; justify-self: center; } .h-badge{ width: 94px; left: -16px; } .h-badge b{ font-size: 26px; } }

/* ---------- ribbon ---------- */
.ribbon{ background: var(--moss); color: var(--cream); }
.ribbon .wrap{ display: grid; grid-template-columns: repeat(4, 1fr); }
.ribbon .wrap > div{ padding: 26px 22px; border-left: 1px solid rgba(243,238,229,.14); display: grid; }
.ribbon .wrap > div:first-child{ border-left: 0; padding-left: 0; }
.ribbon b{ font-family: var(--display); font-weight: 400; font-size: 20px; }
.ribbon span{ font-size: 13.5px; opacity: .7; }
@media (max-width: 800px){ .ribbon .wrap{ grid-template-columns: 1fr 1fr; } .ribbon .wrap > div{ padding: 18px 12px; } .ribbon .wrap > div:nth-child(3){ border-left: 0; padding-left: 0; } .ribbon .wrap > div:nth-child(n+3){ border-top: 1px solid rgba(243,238,229,.14); } }

/* ---------- sections ---------- */
section{ position: relative; padding: 120px 0; }
@media (max-width: 760px){ section{ padding: 80px 0; } }
.sec-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 50px; }
.sec-head h2{ margin-top: 14px; }
.sec-head.center{ justify-content: center; text-align: center; }

/* ---------- signature rituals ---------- */
.sigs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sig{ position: relative; display: grid; gap: 10px; padding: 26px 26px 30px; border-radius: 36px; background: var(--paper); transition: transform .8s var(--ease), box-shadow .6s, background .6s; }
.sig:hover{ transform: translateY(-10px); background: #fff; box-shadow: 0 40px 60px -40px rgba(36,48,36,.45); }
.sig-art{ position: relative; aspect-ratio: 4/3; border-radius: var(--blob); display: grid; place-items: center; background: var(--tint, var(--sand)); margin-bottom: 12px; transition: border-radius 1.4s var(--ease); }
.sig:hover .sig-art{ border-radius: 42% 58% 60% 40% / 56% 44% 56% 44%; }
.sig-art .ic{ width: 50%; transition: transform 1s var(--ease); }
.sig:hover .sig-art .ic{ transform: scale(1.1) rotate(-6deg); }
.sig-n{ position: absolute; top: 24px; right: 30px; font-family: var(--accent); font-style: italic; font-size: 26px; color: var(--clay); }
.sig h3{ font-size: 28px; }
.sig p{ color: var(--muted); }
.sig-meta{ display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.sig-meta b{ color: var(--clay); font-weight: 600; transition: transform .5s var(--ease); }
.sig:hover .sig-meta b{ transform: translateX(6px); }
@media (max-width: 900px){ .sigs{ grid-template-columns: 1fr; } }

/* ---------- menu (price list) ---------- */
.menu-sec{ padding-top: 0; }
.menu-card{ padding: clamp(26px, 5vw, 60px); border-radius: 44px; background: var(--paper); }
.menu-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 30px; }
.menu-head h2{ margin-top: 12px; }
.menu-ctrl{ display: grid; gap: 12px; justify-items: end; }
.tabs{ position: relative; display: flex; padding: 5px; border-radius: 999px; background: var(--cream); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabs::-webkit-scrollbar{ display: none; }
.tabs button{ position: relative; z-index: 1; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .4s; }
.tabs button.on{ color: var(--paper); }
.tab-pill{ position: absolute; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; background: var(--moss); transition: left .7s var(--ease), width .7s var(--ease); }
.durs{ display: flex; gap: 6px; }
.durs button{ height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s, box-shadow .3s; }
.durs button.on{ background: var(--clay); color: var(--paper); box-shadow: none; }
.durs.big{ flex-wrap: wrap; }
.durs.big button{ height: 46px; padding: 0 20px; font-size: 14.5px; white-space: nowrap; }
.menu-list{ display: grid; }
.m-row{ display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: center; padding: 20px 0; border-top: 1px dashed var(--line); animation: row-in .8s var(--ease) both; }
.m-row:hover .m-ic{ transform: rotate(-8deg) scale(1.08); }
.m-ic{ width: 64px; height: 64px; border-radius: var(--blob); background: var(--tint); display: grid; place-items: center; padding: 10px; transition: transform .6s var(--ease); }
.m-row h3{ font-size: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-row h3 .best{ font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--blush); color: var(--clay-2); }
.m-row p{ font-size: 14px; color: var(--muted); max-width: 620px; }
.m-price{ text-align: right; }
.m-price b{ display: block; font-family: var(--display); font-weight: 400; font-size: 24px; font-variant-numeric: tabular-nums; }
.m-price small{ font-size: 12.5px; color: var(--muted); }
.m-price.na b{ font-size: 15px; font-family: var(--sans); color: var(--muted); }
.m-price a{ font-size: 13px; font-weight: 600; color: var(--clay); }
@keyframes row-in{ from{ opacity: 0; transform: translateY(18px); } }
@media (max-width: 700px){ .menu-ctrl{ justify-items: start; width: 100%; } .m-row{ grid-template-columns: 48px 1fr; gap: 14px; } .m-ic{ width: 48px; height: 48px; padding: 7px; } .m-price{ grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .m-row h3{ font-size: 19px; } }

/* ---------- journey path ---------- */
.path-wrap{ position: relative; height: 400px; }
.path-svg{ position: absolute; left: 0; right: 0; top: 40px; width: 100%; height: 220px; overflow: visible; }
.path-svg path{ fill: none; stroke-width: 2; stroke-linecap: round; }
.p-bg{ stroke: var(--line); stroke-dasharray: 2 8; }
.p-fg{ stroke: var(--clay); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pp, 0)); }
.stops{ position: absolute; left: 0; right: 0; top: 40px; height: 220px; }
.stop{ position: absolute; left: var(--x, 0); top: var(--y, 110px); width: 190px; margin-left: -95px; text-align: center; }
.stop .dot{ display: grid; place-items: center; width: 46px; height: 46px; margin: -23px auto 14px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 2px var(--line); transition: background .6s, box-shadow .6s, transform .8s var(--ease); }
.stop .dot i{ font-style: normal; font-family: var(--display); font-size: 17px; color: var(--muted); transition: color .5s; }
.stop h4, .stop p{ opacity: .35; transform: translateY(10px); transition: opacity .7s, transform .9s var(--ease); }
.stop h4{ font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.2; }
.stop p{ font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.stop.on .dot{ background: var(--clay); box-shadow: 0 0 0 8px rgba(184,120,79,.15); transform: scale(1.08); }
.stop.on .dot i{ color: var(--paper); }
.stop.on h4, .stop.on p{ opacity: 1; transform: none; }
.stop:first-child{ margin-left: -40px; text-align: left; } .stop:first-child .dot{ margin-left: 17px; }
.stop:last-child{ margin-left: -150px; text-align: right; } .stop:last-child .dot{ margin-right: 17px; }
@media (max-width: 900px){
  .path-wrap{ height: auto; padding-left: 10px; }
  .path-svg{ display: none; }
  .stops{ position: relative; top: 0; height: auto; display: grid; gap: 26px; }
  .stops::before{ content: ""; position: absolute; left: 22px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
  .stops::after{ content: ""; position: absolute; left: 22px; top: 10px; width: 2px; height: calc(var(--pp, 0) * (100% - 20px)); background: var(--clay); }
  .stop, .stop:first-child, .stop:last-child{ position: relative; left: auto; top: auto; width: auto; margin: 0; text-align: left; padding-left: 70px; }
  .stop .dot, .stop:first-child .dot, .stop:last-child .dot{ position: absolute; left: 0; top: 0; margin: 0; z-index: 1; }
}

/* ---------- aroma picker ---------- */
.aroma{ transition: background 1.2s var(--ease); background: var(--oil-tint, #efeaf6); }
.aroma-grid{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 70px; align-items: center; }
.aroma h2{ margin: 14px 0 16px; }
.aroma-art{ position: relative; display: grid; place-items: center; min-height: 440px; }
.aura{ position: absolute; width: 78%; aspect-ratio: 1; border-radius: var(--blob); background: radial-gradient(circle, var(--oil, #a99bd0), transparent 70%); opacity: .45; filter: blur(8px); animation: morph2 8s ease-in-out infinite, turn 40s linear infinite; transition: background 1.2s; }
.bottle{ position: relative; width: min(60%, 260px); animation: floaty 6s ease-in-out infinite; }
@keyframes floaty{ 50%{ transform: translateY(-14px) rotate(-2deg); } }
.oil-liq{ transform: translateY(calc(var(--lvl, .1) * 1px)); transition: transform 1.2s var(--ease); }
.oil-wave{ fill: var(--oil, #a99bd0); transition: fill 1s; animation: wave 3s linear infinite; }
@keyframes wave{ to{ transform: translateX(-100px); } }
.drops i{ position: absolute; left: 50%; top: 4%; width: 12px; height: 16px; margin-left: -6px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--oil, #a99bd0); opacity: 0; }
.drops.go i{ animation: drop 1.1s cubic-bezier(.55,0,1,.45) forwards; }
.drops.go i:nth-child(2){ animation-delay: .18s; } .drops.go i:nth-child(3){ animation-delay: .36s; }
@keyframes drop{ 0%{ transform: translateY(-20px) scale(.5); opacity: 0; } 20%{ opacity: 1; } 100%{ transform: translateY(150px) scale(1); opacity: 0; } }
.oils{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.oils button{ display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 8px; border-radius: 999px; background: rgba(250,247,241,.75); font-weight: 600; font-size: 14.5px; box-shadow: inset 0 0 0 1px var(--line); transition: background .4s, box-shadow .4s, transform .5s var(--ease); }
.oils button i{ width: 32px; height: 32px; border-radius: var(--blob); transition: transform .8s var(--ease); }
.oils button:hover{ transform: translateY(-3px); }
.oils button.on{ background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--forest); }
.oils button.on i{ transform: rotate(180deg) scale(1.1); }
.oils.small{ margin-top: 0; }
.oils.small button{ height: 42px; font-size: 13.5px; }
.oils.small button i{ width: 26px; height: 26px; }
.oil-info{ margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.oil-info h3{ font-size: 32px; }
.oil-info p{ font-family: var(--accent); font-style: italic; font-size: 22px; color: var(--moss); margin: 4px 0 14px; }
.notes{ display: flex; flex-wrap: wrap; gap: 8px; }
.notes li{ padding: 6px 14px; border-radius: 999px; background: rgba(250,247,241,.8); font-size: 13px; }
.notes li b{ font-weight: 600; color: var(--muted); margin-right: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.swap{ animation: swap .7s var(--ease); }
@keyframes swap{ from{ opacity: 0; transform: translateY(10px); filter: blur(4px); } }
@media (max-width: 900px){ .aroma-grid{ grid-template-columns: minmax(0, 1fr); gap: 20px; } .aroma-art{ min-height: 320px; } }

/* ---------- packages ---------- */
.pkgs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pkg{ position: relative; display: flex; flex-direction: column; gap: 10px; padding: 36px 30px 30px; border-radius: 36px; background: var(--paper); transition: transform .8s var(--ease), box-shadow .6s; }
.pkg:hover{ transform: translateY(-8px); box-shadow: 0 40px 60px -40px rgba(36,48,36,.45); }
.pkg.hot{ background: var(--moss); color: var(--cream); }
.pkg.hot .pkg-sub, .pkg.hot s{ color: rgba(243,238,229,.65); }
.pkg.hot li::before{ background: var(--gold); }
.pkg-tag{ position: absolute; top: -14px; left: 30px; padding: 6px 14px; border-radius: 999px; background: var(--gold); color: var(--forest); font-size: 12px; font-weight: 700; }
.pkg h3{ font-size: 32px; }
.pkg-sub{ color: var(--muted); font-size: 14px; }
.pkg-price{ display: flex; align-items: baseline; gap: 10px; margin: 8px 0 6px; }
.pkg-price b{ font-family: var(--display); font-weight: 400; font-size: 32px; }
.pkg-price s{ font-size: 14px; color: var(--muted); }
.pkg ul{ display: grid; gap: 10px; margin: 10px 0 26px; flex: 1; }
.pkg li{ display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.pkg li::before{ content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--blob); background: var(--sage); transform: translateY(-1px); }
.pkg.hot .btn.clay::after{ background: var(--gold); }
@media (max-width: 900px){ .pkgs{ grid-template-columns: 1fr; gap: 30px; } }

/* ---------- team (flip cards) ---------- */
.team{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tcard{ perspective: 1200px; cursor: pointer; aspect-ratio: 3/4; }
.tcard-in{ position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.tcard.flip .tcard-in{ transform: rotateY(180deg); }
.tface{ position: absolute; inset: 0; border-radius: 30px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tface.front .mono{ width: 100%; height: 100%; }
.tface.front .cap{ position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 14px 16px; border-radius: 20px; background: rgba(250,247,241,.92); }
.tface.front .cap b{ display: block; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.2; }
.tface.front .cap small{ color: var(--muted); font-size: 12.5px; }
.tface.back{ transform: rotateY(180deg); background: var(--moss); color: var(--cream); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; }
.tface.back p{ font-family: var(--accent); font-style: italic; font-size: 20px; line-height: 1.35; }
.tface.back small{ font-size: 12.5px; opacity: .75; }
.tface.back b{ font-family: var(--display); font-weight: 400; font-size: 44px; color: var(--gold); line-height: 1; }
@media (max-width: 900px){ .team{ grid-template-columns: 1fr 1fr; gap: 12px; } .tface.back{ padding: 16px; } .tface.back p{ font-size: 16px; } .tface.back b{ font-size: 30px; } .tface.front .cap{ left: 8px; right: 8px; bottom: 8px; padding: 10px 12px; } .tface.front .cap b{ font-size: 16px; } }

/* ---------- reviews ---------- */
.rev-card{ position: relative; max-width: 900px; margin: 0 auto; padding: clamp(36px, 6vw, 70px); border-radius: 48px; background: var(--paper); text-align: center; overflow: hidden; }
.rev-card > .mark{ width: 70px; margin: 0 auto 18px; animation: turn 30s linear infinite; }
.qs{ display: grid; }
.q{ grid-area: 1 / 1; opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .9s, transform 1s var(--ease), filter .9s; pointer-events: none; }
.q.on{ opacity: 1; transform: none; filter: none; pointer-events: auto; }
.q blockquote{ font-family: var(--accent); font-style: italic; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.3; }
.q figcaption{ margin-top: 20px; font-weight: 600; }
.q figcaption span{ color: var(--muted); font-weight: 400; }
.q-nav{ display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 30px; font-size: 14px; color: var(--muted); }
.q-nav button{ width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); font-size: 18px; transition: background .3s, color .3s; }
.q-nav button:hover{ background: var(--moss); color: var(--cream); }

/* ---------- gift ---------- */
.gift{ background: var(--moss); color: var(--cream); overflow: hidden; }
.gift-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.gift h2{ margin: 14px 0 16px; }
.gift em{ color: var(--gold); }
.gift p{ opacity: .8; max-width: 460px; margin-bottom: 30px; }
.gift-card-demo{ perspective: 1000px; }
.gc{ position: relative; aspect-ratio: 1.6; max-width: 440px; margin-left: auto; padding: 30px; border-radius: 26px; background: linear-gradient(135deg, #e7ddcd, #f3eee5 50%, #e9c9b8); color: var(--forest); display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; box-shadow: 0 40px 60px -30px rgba(0,0,0,.5); transform: rotateY(-16deg) rotateX(8deg); animation: gcf 7s ease-in-out infinite; }
.gc .mark{ position: absolute; top: 22px; right: 22px; width: 60px; }
.gc span{ font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); }
.gc b{ font-family: var(--display); font-weight: 400; font-size: 42px; line-height: 1; }
.gc small{ color: var(--muted); }
@keyframes gcf{ 50%{ transform: rotateY(-4deg) rotateX(2deg) translateY(-10px); } }
@media (max-width: 900px){ .gift-grid{ grid-template-columns: minmax(0, 1fr); } .gc{ margin: 0 auto; transform: none; } }

/* ---------- footer ---------- */
.footer{ background: var(--forest); color: var(--cream); padding: 80px 0 30px; }
.f-top{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; }
.f-brand p{ margin-top: 18px; opacity: .7; max-width: 300px; font-size: 14.5px; }
.footer h4{ font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.footer p{ font-size: 14.5px; opacity: .85; margin-bottom: 10px; }
.f-map svg{ width: 180px; margin-top: 8px; }
.pin-ring{ transform-origin: 120px 64px; animation: pring 2.2s ease-out infinite; stroke-width: 2; }
@keyframes pring{ from{ transform: scale(.4); opacity: 1; } to{ transform: scale(1.6); opacity: 0; } }
.news{ display: flex; border-bottom: 1px solid rgba(243,238,229,.3); }
.news input{ flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 12px 0; color: var(--cream); }
.news input::placeholder{ color: rgba(243,238,229,.5); }
.news button{ width: 40px; color: var(--gold); }
.news button svg{ width: 20px; height: 20px; margin-left: auto; }
.f-bottom{ display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 60px; padding-top: 22px; border-top: 1px solid rgba(243,238,229,.12); font-size: 13px; opacity: .6; }
@media (max-width: 900px){ .f-top{ grid-template-columns: 1fr 1fr; } .f-brand{ grid-column: span 2; } }
@media (max-width: 520px){ .f-top{ grid-template-columns: 1fr; } .f-brand{ grid-column: auto; } }

/* ---------- toast ---------- */
.toast{ position: fixed; left: 50%; bottom: 24px; z-index: 120; padding: 14px 22px; border-radius: 999px; background: var(--forest); color: var(--cream); font-size: 14.5px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); transform: translate(-50%, 150%); transition: transform .7s var(--ease); visibility: hidden; max-width: calc(100% - 32px); }
.toast.on{ transform: translate(-50%, 0); visibility: visible; }

/* ---------- page hero ---------- */
.page-hero{ position: relative; padding: 60px 0 40px; overflow: hidden; }
.page-hero .wrap{ position: relative; z-index: 1; }
.page-hero.slim{ padding-bottom: 10px; }
.page-hero .lead{ margin-top: 16px; }
.crumb{ font-size: 13.5px; color: var(--muted); margin-bottom: 16px; }
.crumb a{ color: var(--clay); font-weight: 600; }

/* ---------- menu page ---------- */
.menu-page{ padding-top: 30px; }
.filterbar{ position: sticky; top: 70px; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; background: var(--cream); margin-bottom: 26px; }
.chips{ display: flex; gap: 8px; flex-wrap: wrap; }
.chips button{ height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1px var(--line); transition: background .4s, color .4s, box-shadow .4s; }
.chips button:hover{ box-shadow: inset 0 0 0 1px var(--forest); }
.chips button.on{ background: var(--moss); color: var(--cream); box-shadow: none; }
.search{ display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); min-width: 260px; }
.search:focus-within{ box-shadow: inset 0 0 0 1.5px var(--clay); }
.search svg{ width: 18px; height: 18px; color: var(--muted); }
.search input{ flex: 1; min-width: 0; border: 0; outline: none; background: none; }
.t-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tc{ display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 32px; background: var(--paper); transition: transform .7s var(--ease), box-shadow .5s; }
.tc:hover{ transform: translateY(-6px); box-shadow: 0 30px 50px -36px rgba(36,48,36,.5); }
.tc-art{ height: 150px; border-radius: var(--blob); background: var(--tint); display: grid; place-items: center; margin-bottom: 6px; transition: border-radius 1.2s var(--ease); }
.tc:hover .tc-art{ border-radius: 42% 58% 60% 40% / 56% 44% 56% 44%; }
.tc-art .ic{ height: 70%; }
.tc .tc-cat{ font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.tc h3{ font-size: 24px; }
.tc p{ font-size: 14px; color: var(--muted); flex: 1; }
.tc-durs{ display: flex; flex-wrap: wrap; gap: 6px; }
.tc-durs span{ padding: 4px 10px; border-radius: 999px; background: var(--cream); font-size: 12.5px; }
.tc-durs span b{ font-weight: 700; }
.tc-foot{ display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.tc-foot small{ color: var(--muted); font-size: 12.5px; }
.tc-foot b{ display: block; font-family: var(--display); font-weight: 400; font-size: 22px; }
.empty-t{ grid-column: 1 / -1; text-align: center; padding: 60px 0; font-family: var(--accent); font-style: italic; font-size: 24px; color: var(--muted); }
@media (max-width: 1000px){ .t-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .t-grid{ grid-template-columns: 1fr; } .search{ min-width: 0; width: 100%; } .filterbar{ top: 70px; } .chips{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; } .chips::-webkit-scrollbar{ display: none; } .chips button{ flex: 0 0 auto; } }

/* ---------- booking ---------- */
.book-sec{ padding-top: 30px; }
.book{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 34px; align-items: start; }
.book-main{ padding: clamp(22px, 4vw, 44px); border-radius: 40px; background: var(--paper); }
.bsteps{ position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 34px; }
.bsteps li{ position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); transition: color .4s; }
.bsteps li i{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cream); font-style: normal; font-family: var(--display); font-size: 17px; transition: background .5s, color .5s, transform .6s var(--ease); }
.bsteps li.on, .bsteps li.done{ color: var(--forest); }
.bsteps li.on i{ background: var(--clay); color: var(--paper); transform: scale(1.12); }
.bsteps li.done i{ background: var(--sage); color: var(--paper); }
.bs-line{ position: absolute; left: 12.5%; right: 12.5%; top: 19px; height: 2px; background: var(--cream); }
.bs-line b{ display: block; height: 100%; width: calc(var(--bp, 0) * 100%); background: var(--clay); transition: width .9s var(--ease); }
.bpane{ display: none; }
.bpane.on{ display: block; animation: pin .8s var(--ease); }
@keyframes pin{ from{ opacity: 0; transform: translateX(26px); } }
.bpane h3{ font-size: 30px; margin-bottom: 18px; }
.sub-h{ margin: 26px 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.sub-h small{ text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; margin-left: 6px; }
.pick-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 420px; overflow-y: auto; padding: 4px; }
.pick{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; text-align: left; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .4s, background .4s, transform .5s var(--ease); }
.pick:hover{ transform: translateY(-2px); }
.pick .p-ic{ width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--blob); background: var(--tint); padding: 6px; }
.pick b{ display: block; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.pick small{ color: var(--muted); font-size: 12.5px; }
.pick.on{ background: #fff; box-shadow: inset 0 0 0 2px var(--clay); }
.guests{ display: inline-flex; align-items: center; gap: 14px; padding: 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.guests button{ width: 40px; height: 40px; border-radius: 50%; font-size: 20px; transition: background .3s; }
.guests button:hover{ background: var(--cream); }
.guests b{ font-family: var(--display); font-weight: 400; font-size: 22px; min-width: 16px; text-align: center; }
.guests small{ margin-right: 12px; color: var(--muted); }
.cal{ padding: 18px; border-radius: 26px; background: var(--cream); max-width: 460px; }
.cal-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal-head b{ font-family: var(--display); font-weight: 400; font-size: 20px; }
.cal-head button{ width: 38px; height: 38px; border-radius: 50%; transition: background .3s; }
.cal-head button:hover{ background: var(--paper); }
.cal-head button:disabled{ opacity: .3; cursor: default; }
.cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-grid .dw{ font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-grid button{ aspect-ratio: 1; border-radius: 50%; font-size: 14px; font-weight: 600; transition: background .3s, color .3s, transform .4s var(--ease); }
.cal-grid button:hover:not(:disabled){ background: var(--paper); transform: scale(1.08); }
.cal-grid button:disabled{ color: rgba(36,48,36,.25); cursor: default; }
.cal-grid button.today{ box-shadow: inset 0 0 0 1px var(--sage); }
.cal-grid button.on{ background: var(--clay); color: var(--paper); }
.slots{ display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.slots button{ height: 44px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s, transform .4s var(--ease); animation: row-in .5s var(--ease) both; }
.slots button:hover:not(:disabled){ transform: translateY(-2px); }
.slots button:disabled{ text-decoration: line-through; color: rgba(36,48,36,.3); cursor: default; }
.slots button.on{ background: var(--moss); color: var(--cream); box-shadow: none; }
.slots .hint{ grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.thera{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.th{ position: relative; padding: 10px 10px 14px; border-radius: 24px; text-align: center; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .4s, background .4s, transform .5s var(--ease); }
.th:hover{ transform: translateY(-3px); }
.th .mono{ width: 70px; height: 70px; margin: 4px auto 10px; border-radius: var(--blob); overflow: hidden; }
.th b{ display: block; font-size: 14.5px; }
.th small{ display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.th.on{ background: #fff; box-shadow: inset 0 0 0 2px var(--clay); }
.pressure{ max-width: 380px; }
.pressure input{ width: 100%; accent-color: var(--clay); }
.pressure div{ display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.frow{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px){ .frow{ grid-template-columns: 1fr; gap: 0; } }
.field{ display: block; margin-top: 14px; }
.field span{ display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea{ width: 100%; height: 52px; padding: 0 18px; border-radius: 18px; border: 0; background: var(--cream); outline: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .3s, background .3s; }
.field textarea{ height: 100px; padding: 14px 18px; resize: vertical; }
.field input:focus, .field textarea:focus{ background: #fff; box-shadow: inset 0 0 0 1.5px var(--clay); }
.bactions{ display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; }
.bactions [data-bprev]{ visibility: hidden; }
.bactions.back [data-bprev]{ visibility: visible; }
.bsum{ position: sticky; top: 94px; padding: 28px; border-radius: 36px; background: var(--moss); color: var(--cream); }
.bsum h3{ font-size: 26px; }
.bs-art{ height: 120px; margin: 16px 0; border-radius: var(--blob); background: rgba(243,238,229,.08); display: grid; place-items: center; animation: morph2 9s ease-in-out infinite; }
.bs-art .ic{ height: 76%; }
.bsum dl{ display: grid; gap: 10px; }
.bsum dl div{ display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding-bottom: 10px; border-bottom: 1px dashed rgba(243,238,229,.16); }
.bsum dt{ opacity: .65; }
.bsum dd{ text-align: right; font-weight: 600; }
.bsum dd.flash{ animation: flash .8s var(--ease); }
@keyframes flash{ from{ color: var(--gold); transform: translateY(-4px); } }
.bs-total{ display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 10px; }
.bs-total b{ font-family: var(--display); font-weight: 400; font-size: 30px; color: var(--gold); font-variant-numeric: tabular-nums; }
.bsum .muted{ color: rgba(243,238,229,.65); }
@media (max-width: 960px){ .book{ grid-template-columns: minmax(0, 1fr); } .bsum{ position: static; } .pick-list{ grid-template-columns: 1fr; max-height: none; } .bsteps li{ font-size: 11.5px; } }
.booked{ position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 20px; background: rgba(36,48,36,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .6s; }
.booked.on{ opacity: 1; pointer-events: auto; }
.done-box{ width: min(520px, 100%); max-height: calc(100svh - 40px); overflow: auto; padding: 44px 32px 34px; border-radius: 40px; background: var(--paper); text-align: center; transform: translateY(40px) scale(.95); transition: transform 1s var(--ease); }
.booked.on .done-box{ transform: none; }
.lotus{ width: 150px; margin: 0 auto 12px; }
.lotus path{ stroke-dasharray: 1; stroke-dashoffset: 1; }
.booked.on .lotus path{ transition: stroke-dashoffset 1.6s var(--ease); stroke-dashoffset: 0; }
.booked.on .lotus path:nth-child(2), .booked.on .lotus path:nth-child(3){ transition-delay: .35s; }
.booked.on .lotus path:nth-child(4), .booked.on .lotus path:nth-child(5){ transition-delay: .7s; }
.done-box h3{ font-size: 34px; margin-bottom: 12px; }
.done-box .code{ margin: 16px 0 22px; font-size: 14px; }
.done-box .code b{ font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .08em; color: var(--clay); margin-left: 6px; }
.done-actions{ display: flex; flex-direction: column; gap: 10px; }

/* ---------- voucher ---------- */
.vou-sec{ padding-top: 30px; }
.vou{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.vou-form{ padding: clamp(22px, 4vw, 40px); border-radius: 40px; background: var(--paper); }
.vou-form .sub-h:first-child{ margin-top: 0; }
.themes{ display: flex; gap: 10px; flex-wrap: wrap; }
.themes button{ display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 8px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .4s, background .4s; }
.themes button i{ width: 32px; height: 32px; border-radius: 50%; }
.themes button.on{ background: #fff; box-shadow: inset 0 0 0 2px var(--forest); }
i.th-sawah{ background: linear-gradient(135deg, #8c9a7e, #3e4b3c); }
i.th-senja{ background: linear-gradient(135deg, #f2c98e, #b8784f); }
i.th-kamboja{ background: linear-gradient(135deg, #fbe7c2, #e9c9b8); }
.amts{ display: flex; gap: 8px; flex-wrap: wrap; }
.amts button{ height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s; }
.amts button.on{ background: var(--clay); color: var(--paper); box-shadow: none; }
.amt-custom{ display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.amt-custom:focus-within{ box-shadow: inset 0 0 0 1.5px var(--clay); }
.amt-custom input{ width: 120px; border: 0; outline: none; background: none; }
.field .cnt{ display: block; text-align: right; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 4px; }
.vou-form .btn.block{ margin-top: 24px; }
.vou-stage{ position: sticky; top: 100px; perspective: 1400px; }
.vcard{ position: relative; aspect-ratio: 1.58; transform-style: preserve-3d; transition: transform 1.1s var(--ease); cursor: pointer; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.vcard.flipped{ transform: rotateY(calc(180deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg)); }
.v-face{ position: absolute; inset: 0; border-radius: 28px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 28px; box-shadow: 0 40px 70px -36px rgba(36,48,36,.6); transition: background 1s; }
.v-front{ display: flex; flex-direction: column; justify-content: space-between; color: var(--cream); }
.v-front .mark{ position: absolute; right: -30px; top: -30px; width: 190px; opacity: .9; animation: turn 40s linear infinite; }
.v-top{ display: grid; gap: 2px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; position: relative; }
.v-top span:first-child{ font-family: var(--display); font-size: 18px; letter-spacing: .02em; text-transform: none; }
.v-amt{ position: relative; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1; }
.v-to{ position: relative; z-index: 1; }
.v-to small{ display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.v-to span{ font-family: var(--accent); font-style: italic; font-size: 26px; }
.v-wave{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; opacity: .25; }
.v-wave path{ fill: #fff; }
.v-back{ transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: space-between; background: var(--paper); color: var(--forest); }
.v-msg{ font-family: var(--accent); font-style: italic; font-size: 24px; line-height: 1.3; word-break: break-word; }
.v-from{ color: var(--muted); }
.v-code{ display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px dashed var(--line); }
.v-code small{ font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.v-code b{ font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .08em; }
.v-valid{ font-size: 12px; color: var(--muted); }
.vcard.th-sawah .v-front{ background: linear-gradient(140deg, #8c9a7e, #3e4b3c 70%); }
.vcard.th-senja .v-front{ background: linear-gradient(140deg, #f2c98e, #b8784f 55%, #7c4a2c); }
.vcard.th-kamboja .v-front{ background: linear-gradient(140deg, #fff6e6, #f3d9b7 50%, #e9b8a6); color: var(--forest); }
.vcard.pulse{ animation: vpulse .7s var(--ease); }
@keyframes vpulse{ 40%{ scale: 1.03; } }
.flip-hint{ text-align: center; margin-top: 18px; font-size: 14px; }
.vcard.sold .v-code b{ color: var(--clay); animation: flash 1s var(--ease); }
@media (max-width: 960px){ .vou{ grid-template-columns: minmax(0, 1fr); gap: 30px; } .vou-stage{ position: relative; top: 0; order: -1; } .v-face{ padding: 20px; } .v-msg{ font-size: 19px; } .v-front .mark{ width: 130px; } }

/* ---------- reveal ---------- */
.js .rv{ opacity: 0; transform: translateY(40px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease), filter 1.1s; transition-delay: var(--d, 0s); }
.js .rv.in{ opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .rv, .js .w{ opacity: 1; transform: none; filter: none; }
  .petals{ display: none; }
}