/* Google Fonts: Be Vietnam Pro, original Vietnamese and Latin subsets; display=swap. */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/be-vietnam-pro-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/be-vietnam-pro-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/be-vietnam-pro-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/be-vietnam-pro-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/be-vietnam-pro-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/be-vietnam-pro-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:'Text fallback';src:local('Arial');size-adjust:100%;ascent-override:102%;descent-override:26%;line-gap-override:0%}

/* Cobalt Clinic: glossy white surfaces, cobalt wall panels, LED strips, cyan tech glow. */
:root{
  --bg:#F5F8FD;--bg-2:#EAF0FA;--card:#FFFFFF;
  --ink:#0D1B3D;--ink-soft:#4B5A7A;
  --cobalt:#1C4FB8;--cobalt-deep:#123A8C;--cobalt-night:#0B2766;--cobalt-ink:#1A49AD;
  --cyan:#38D6F5;--cyan-glow:rgba(56,214,245,.75);
  --line:#D8E1F0;--on-blue:#FFFFFF;--on-blue-soft:rgba(255,255,255,.84);
  --radius-s:8px;--radius-m:14px;--cut:12px;
  --shadow:0 18px 40px -18px rgba(13,27,61,.35);
  --panel:linear-gradient(140deg,#2A5FD0 0%,#1C4FB8 42%,#123A8C 100%);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:140px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Be Vietnam Pro','Text fallback',sans-serif;font-size:16px;line-height:1.65}
::selection{background:var(--cobalt);color:#fff}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,dialog:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}
button:disabled{cursor:default;opacity:.5}
p{margin:0 0 1.2em;max-width:62ch}
h1,h2,h3,blockquote{font-weight:600;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,6vw,4.4rem);line-height:1.08;text-wrap:balance}
h1 .accent{color:var(--cobalt)}
h2{font-size:clamp(1.9rem,3.8vw,2.8rem);line-height:1.15;text-wrap:balance}
h3{line-height:1.2}
img{max-width:100%;object-fit:contain}
svg{display:block;max-width:100%}
[hidden]{display:none!important}
.container{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
.section-pad{padding-block:clamp(72px,10vw,124px)}
[id]{scroll-margin-top:140px}

/* Chamfered cuts echo the angled wall panels; hexagons echo the tables and ceiling. */
.button,.chip,.badge,.contact-card,.callout,.nav-book{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}

.eyebrow{display:flex;align-items:center;gap:12px;color:var(--cobalt-ink);font:600 .74rem/1.4 'Be Vietnam Pro','Text fallback',sans-serif;text-transform:uppercase;letter-spacing:.2em;margin:0 0 20px}
.eyebrow::before{content:'';flex:0 0 30px;height:2px;background:linear-gradient(90deg,var(--cobalt),var(--cyan));transform:skewX(-40deg)}
.button{display:inline-flex;justify-content:center;align-items:center;border:0;min-height:50px;padding:14px 28px;font-size:.92rem;font-weight:600;line-height:1.5;letter-spacing:.01em;transition:background-color .2s,color .2s}
.primary{background:var(--cobalt);color:#fff}
.primary:hover{background:var(--cobalt-deep)}
.outline{background:var(--bg-2);color:var(--cobalt-ink)}
.outline:hover{background:#DCE6F7}
.text-link{color:var(--cobalt-ink);font-size:.92rem;font-weight:500;line-height:1.65;text-underline-offset:5px}
.text-link:hover{text-decoration:underline}
.text-button{border:0;background:transparent;color:var(--cobalt-ink);text-decoration:underline;text-underline-offset:4px;font-size:.88rem;padding:10px;min-height:44px}

/* Header */
.site-header{height:72px;position:sticky;top:0;z-index:30;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
.site-header.scrolled{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-color:var(--line)}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{height:44px;width:auto}
.site-header nav{display:flex;align-items:center;gap:10px}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:.92rem}
.site-header nav a:hover{color:var(--cobalt-ink);text-decoration:underline;text-underline-offset:6px}
.site-header nav a:first-child{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:0 16px}
.site-header nav a.nav-book{--cut:8px;background:var(--cobalt);color:#fff;padding:0 18px;min-height:42px;font-weight:600}
.site-header nav a.nav-book:hover{background:var(--cobalt-deep);color:#fff;text-decoration:none}
.desktop-link{display:none!important}

/* Hero: the reception wall */
.hero{display:grid;gap:34px;padding-top:16px;padding-bottom:clamp(40px,6vw,84px)}
.hero-copy{min-width:0}
.hero-lead{font-size:1.08rem;line-height:1.75;color:var(--ink-soft);margin:24px 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 26px}
.hero-actions .text-link{max-width:290px}
.stats{display:grid;grid-template-columns:.7fr 1fr 1.55fr;margin:44px 0 0;padding-top:24px;border-top:1px solid var(--line);position:relative}
.stats::before{content:'';position:absolute;top:-1px;left:0;width:72px;height:2px;background:var(--cobalt)}
.stats>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:0 12px;border-right:1px solid var(--line)}
.stats>div:first-child{padding-left:0}
.stats>div:last-child{border:0;padding-right:0}
.stats dt{font-size:.8rem;color:var(--ink-soft);line-height:1.55}
.stats dd{font-variant-numeric:lining-nums tabular-nums;font-weight:600;font-size:1.4rem;line-height:1.2;margin:0 0 6px;color:var(--cobalt-ink);letter-spacing:-.02em}
.hero-art{position:relative;order:-1;width:100%}
.hero-panel{position:relative;aspect-ratio:16/10;background:var(--panel);overflow:hidden;clip-path:polygon(0 0,100% 0,100% 78%,86% 100%,0 100%,0 0);box-shadow:var(--shadow)}
.hero-panel::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 46%,transparent 47%,transparent 60%,rgba(255,255,255,.08) 70%,transparent 71%);pointer-events:none}
.hero-panel::after{content:'';position:absolute;left:58%;top:-10%;width:64%;height:140%;background:rgba(255,255,255,.07);transform:skewX(-28deg);pointer-events:none}
.hero-panel .led{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 3px var(--cyan-glow))}
.hero-panel .led path{stroke:#fff;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:square;stroke-dasharray:900;stroke-dashoffset:0;animation:led-draw 1.8s ease-out both}
.hero-panel .led path.thin{stroke-width:1.2;stroke-opacity:.7;animation-delay:.5s}
.hero-panel .rings{position:absolute;width:58%;right:-14%;bottom:-22%;color:var(--cyan);stroke:currentColor;opacity:.55;filter:drop-shadow(0 0 6px var(--cyan-glow));animation:spin 60s linear infinite}
.panel-logo{position:absolute;left:50%;top:50%;width:46%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 10px rgba(11,39,102,.35))}
.panel-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.panel-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,58,140,0) 35%,rgba(18,58,140,.6) 100%),linear-gradient(100deg,rgba(28,79,184,.45) 0%,rgba(28,79,184,0) 40%)}
.hero-panel .led,.hero-panel .rings{z-index:2}

/* Gallery: real photos from the spa */
.gallery{background:var(--card)}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
.gallery-grid figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-m);background:var(--bg-2)}
.gallery-grid img{display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .6s ease-out}
.gallery-grid figure:hover img{transform:scale(1.03)}
.gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 12px;font-size:.8rem;font-weight:500;line-height:1.4;color:#fff;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6))}
.g-a{grid-column:1/-1}
.g-a img{aspect-ratio:4/3;object-position:50% 35%}
.g-c img{object-position:50% 25%}
.g-e img{object-position:50% 30%}
.partner{display:grid;gap:22px;margin-top:40px;padding:14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-m);align-items:center}
.partner img{display:block;width:100%;height:auto;border-radius:max(0px,calc(var(--radius-m) - 6px))}
.partner-copy{padding:2px 8px 10px}
.partner-copy .eyebrow{margin-bottom:14px}
.partner h3{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:12px}
.partner-copy p:not(.eyebrow){font-size:.95rem;color:var(--ink-soft);margin:0}

/* Price list */
.section-heading p:not(.eyebrow){color:var(--ink-soft);margin:20px 0 0}
.filter{margin-top:40px}
.filter>p{font-size:.95rem;font-weight:600;margin-bottom:14px}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{--cut:8px;border:0;padding:10px 16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:.9rem;min-height:44px;text-align:left;line-height:1.5;transition:background-color .2s,color .2s}
.chip:hover{box-shadow:inset 0 0 0 1px var(--cobalt)}
.chip[aria-pressed=true]{background:var(--cobalt);box-shadow:none;color:#fff}
.filter-result{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 0}
.filter-result p{margin:0;color:var(--ink-soft);font-size:.86rem}
.callout{margin-top:20px;padding:22px 24px;background:var(--bg-2);display:flex;align-items:center;gap:24px;flex-wrap:wrap;border-left:3px solid var(--cobalt)}
.callout p{flex:1 1 280px;margin:0;font-size:.9rem;color:var(--ink)}
.callout .button{font-size:.84rem;padding:10px 20px;min-height:44px;background:var(--cobalt);color:#fff}
.group-nav{position:sticky;top:72px;background:rgba(245,248,253,.94);backdrop-filter:blur(12px);z-index:25;margin-top:44px;border-bottom:1px solid var(--line)}
.group-nav-inner{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent);padding-right:30px}
.group-nav-inner::-webkit-scrollbar{display:none}
.group-nav a{flex-shrink:0;font-size:.84rem;font-weight:500;display:flex;align-items:center;padding:16px 0;min-height:56px;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--ink-soft)}
.group-nav a:hover{color:var(--ink)}
.group-nav a.active{color:var(--cobalt-ink);border-color:var(--cobalt)}
.service-group{padding-block:56px;border-bottom:1px solid var(--line);display:grid;gap:30px}
.service-group:last-child{border:0;padding-bottom:0}
.group-description h3{text-wrap:balance;font-size:clamp(1.55rem,2.6vw,2rem);color:var(--ink);margin-bottom:16px}
.group-description h3::before{content:'';display:block;width:46px;height:3px;margin:0 0 18px 4px;background:linear-gradient(90deg,var(--cobalt),var(--cyan));transform:skewX(-40deg)}
.group-description>p{font-size:.95rem;color:var(--ink-soft)}
.group-meta{font-size:.82rem;margin:22px 0 0;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);display:grid;gap:12px}
.group-meta dt{color:var(--ink-soft);margin-bottom:4px}
.group-meta dd{margin:0;display:flex;align-items:center;gap:12px;font-weight:600}
.meter{display:flex;gap:4px}
.meter i{display:block;width:16px;height:7px;background:var(--line);transform:skewX(-30deg)}
.meter i.filled{background:var(--cobalt)}
.service-list{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-m);padding:6px 20px}
.service-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);transition:background-color .2s}
.service-row:last-child{border-bottom:0}
.service-copy{min-width:0}
.service-name-line{display:flex;align-items:baseline;gap:12px}
.service-name{font-weight:500;font-size:1rem;overflow-wrap:anywhere}
.service-note{font-size:.86rem;color:var(--ink-soft);margin:6px 0 0;line-height:1.6}
.badge{--cut:6px;display:inline-block;margin-right:8px;vertical-align:middle;padding:3px 10px;background:linear-gradient(90deg,rgba(28,79,184,.12),rgba(56,214,245,.18));color:var(--cobalt-deep);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.5}
.leader{display:none}
.price{font-size:1rem;font-weight:600;color:var(--cobalt-ink);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.add-service{width:44px;height:44px;border:0;background:transparent;padding:0;position:relative;align-self:start;display:flex;align-items:center;justify-content:center}
.add-service::before,.add-service::after{content:'';position:absolute;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background .2s}
.add-service::before{inset:2px 4px;background:var(--cobalt)}
.add-service::after{inset:3.6px 5.4px;background:var(--card)}
.add-service svg{position:relative;z-index:1;width:20px;height:20px;color:var(--cobalt)}
.add-service .check{display:none}
.add-service:hover::after{background:var(--bg-2)}
.add-service[aria-pressed=true]::after{background:var(--cobalt)}
.add-service[aria-pressed=true]:hover::before,.add-service[aria-pressed=true]:hover::after{background:var(--cobalt-deep)}
.add-service[aria-pressed=true] svg{color:#fff}
.add-service[aria-pressed=true] .plus{display:none}
.add-service[aria-pressed=true] .check{display:block}
.service-row.flash{animation:flash 1.6s ease-out}

/* Notes */
.notes{background:var(--bg-2)}
.notes-grid{display:grid;gap:18px;margin-top:42px}
.notes-grid article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-m);padding:24px 24px 26px;position:relative;overflow:hidden}
.notes-grid article::before{content:'';position:absolute;top:0;left:24px;width:46px;height:3px;background:linear-gradient(90deg,var(--cobalt),var(--cyan))}
.note-number{font-size:.8rem;font-weight:600;letter-spacing:.16em;color:var(--cobalt-ink)}
.notes-grid h3{font-size:1.08rem;line-height:1.5;letter-spacing:0;margin:8px 0 10px}
.notes-grid p{font-size:.94rem;color:var(--ink-soft);margin:0}

/* About: a cobalt wall with LED strips and the hexagon ceiling */
.about{background:var(--panel);color:var(--on-blue);overflow:hidden;position:relative}
.about-decor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.about-decor .hex{color:rgba(255,255,255,.1)}
.about-decor .led{stroke:#fff;stroke-width:2;stroke-opacity:.8;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px var(--cyan-glow))}
.about-decor .led.thin{stroke-width:1.2;stroke-opacity:.5}
.about-copy{position:relative;max-width:640px}
.about .eyebrow{color:var(--cyan)}
.about .eyebrow::before{background:linear-gradient(90deg,#fff,var(--cyan))}
.about blockquote{font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.3;margin:0 0 28px;text-wrap:balance}
.about p{color:var(--on-blue-soft);margin-top:16px}
.about p:last-child{margin-bottom:0}

/* Booking */
.booking{background:var(--card)}
.booking-grid{display:grid;gap:44px}
.booking-lead{font-size:1.05rem;color:var(--ink-soft);margin:20px 0 0}
.booking-steps{list-style:none;counter-reset:step;padding:0;margin:32px 0 0;display:grid;gap:14px;max-width:52ch}
.booking-steps li{counter-increment:step;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:baseline;font-size:.95rem;color:var(--ink-soft);line-height:1.65}
.booking-steps li::before{content:counter(step,decimal-leading-zero);font-weight:600;font-size:.85rem;letter-spacing:.14em;color:var(--cobalt-ink)}
.contact-card{--cut:22px;position:relative;background:var(--panel);color:var(--on-blue);padding:12px 28px;overflow:hidden}
.contact-card::after{content:'';position:absolute;right:-30%;top:-20%;width:60%;height:140%;background:rgba(255,255,255,.06);transform:skewX(-28deg);pointer-events:none}
.contact-list{margin:0;position:relative;z-index:1}
.contact-list>div{padding:18px 0}
.contact-list>div:not([hidden])~div:not([hidden]){border-top:1px solid rgba(255,255,255,.18)}
.contact-list dt{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);margin-bottom:6px}
.contact-list dd{margin:0;font-size:1rem;font-weight:500;overflow-wrap:anywhere}
.contact-list a{color:#fff;display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:5px}
.contact-list a:hover{text-decoration-color:#fff}
.contact-phone dd{font-size:clamp(1.6rem,4vw,2rem);font-weight:600;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.contact-phone a{text-decoration:none}

/* Footer */
.site-footer{padding-top:60px;padding-bottom:110px;border-top:1px solid var(--line);background:var(--bg)}
.footer-grid{display:grid;gap:32px;padding-bottom:40px}
.footer-grid img{height:64px;width:auto;display:block}
.footer-grid p{font-size:.9rem;color:var(--ink-soft);margin:18px 0 0}
.contacts h2{font-size:1.3rem}
.contacts p{margin-top:10px}
.contacts a{color:var(--cobalt-ink);text-underline-offset:5px}
.contacts a:hover{text-decoration:underline}
.copyright{font-size:.8rem;color:var(--ink-soft);padding-top:24px;border-top:1px solid var(--line)}

/* Selection tray and drawer */
.tray{position:fixed;z-index:40;left:50%;bottom:16px;transform:translateX(-50%);width:calc(100% - 24px);max-width:560px;border-radius:var(--radius-m);background:var(--cobalt-night);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 20px;box-shadow:var(--shadow),inset 0 1px 0 rgba(56,214,245,.45);animation:tray-in .24s ease-out}
.tray p{margin:0;font-size:.84rem;line-height:1.6}
.tray p strong{font-weight:600;color:var(--cyan)}
.tray .button{--cut:8px;background:#fff;color:var(--cobalt-deep);font-size:.82rem;flex-shrink:0;padding:12px 18px;min-height:44px}
.drawer{border:0;padding:0;background:var(--card);color:var(--ink);position:fixed;margin:0;inset:auto 0 0;width:100%;max-width:none;max-height:82dvh;border-radius:18px 18px 0 0;box-shadow:var(--shadow);overflow:auto}
.drawer::backdrop{background:rgba(11,39,102,.4)}
body:has(.drawer[open]){overflow:hidden}
.drawer-header{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);z-index:1}
.drawer-header::after{content:'';position:absolute;left:24px;bottom:-1px;width:46px;height:2px;background:linear-gradient(90deg,var(--cobalt),var(--cyan))}
.drawer-header h2{font-size:1.5rem}
.icon-button{border:0;background:transparent;width:44px;height:44px;border-radius:50%;font-size:1.6rem;flex-shrink:0}
.icon-button:hover{background:var(--bg-2)}
.drawer-content{padding:0 24px 30px}
.selected-list{list-style:none;margin:0;padding:0}
.selected-list li{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:10px;padding:18px 0;border-bottom:1px solid var(--line)}
.selected-name{font-size:.92rem;display:block}
.selected-price{font-size:.9rem;color:var(--cobalt-ink);font-weight:600;display:block;margin-top:4px}
.empty-state{padding-top:24px;font-size:.9rem;color:var(--ink-soft)}
.total-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:24px}
.total-line>span{font-size:.95rem}
.total-line strong{font-size:1.7rem;font-weight:600;line-height:1.3;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;color:var(--cobalt-ink);white-space:nowrap}
.variable-note{font-size:.82rem;color:var(--ink-soft);margin:10px 0 0}
.drawer-actions{display:grid;gap:10px;margin-top:26px}
.drawer-actions:has([data-zalo]:not([hidden])) [data-copy]{background:var(--bg-2);color:var(--cobalt-ink)}
.drawer-actions:has([data-zalo]:not([hidden])) [data-copy]:hover{background:#DCE6F7}
.toast{position:fixed;z-index:100;bottom:110px;left:50%;transform:translateX(-50%);background:var(--cobalt-night);color:#fff;padding:14px 20px;border-radius:var(--radius-s);border-left:3px solid var(--cyan);width:max-content;max-width:calc(100% - 32px);font-size:.9rem;box-shadow:var(--shadow)}

@media(min-width:600px){.container{padding-inline:32px}.stats>div{padding-inline:20px}.hero-actions .text-link{white-space:nowrap;max-width:none}.callout{flex-wrap:nowrap}.notes-grid article{padding:28px 28px 30px}.notes-grid article::before{left:28px}}
@media(max-width:599px){.service-list{padding:4px 16px}.service-row{grid-template-columns:minmax(0,1fr) 44px;gap:10px 14px}.service-copy{grid-column:1/-1}.service-row>.price{grid-column:1;grid-row:2;align-self:center}.service-row>.add-service{grid-column:2;grid-row:2}.tray{padding-left:16px}.tray p{font-size:.76rem}.tray .button{padding-inline:14px;font-size:.76rem}.stats{column-gap:14px}.stats dd{font-size:1.3rem}.stats dt{font-size:.74rem}.filter-chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent);padding-right:20px}.filter-chips::-webkit-scrollbar{display:none}.chip{flex-shrink:0;scroll-snap-align:start;padding:8px 14px;font-size:.86rem}.hero-actions{gap:18px}.hero-actions .text-link{max-width:270px}.contact-card{padding:8px 22px}}
@media(min-width:700px){.leader{display:block;flex:1;min-width:18px;border-bottom:1.5px dotted #B9C7E0;transform:translateY(-5px)}.service-name{max-width:90%}}
@media(min-width:760px){.site-header nav{gap:30px}.desktop-link{display:inline-flex!important}.site-header nav a:first-child{background:none;border:0;padding:0}.brand img{height:56px}.notes-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.drawer{inset:0 0 0 auto;width:420px;max-height:100dvh;height:100dvh;border-radius:0}.drawer-header{padding:30px 26px}.drawer-header::after{left:26px}.drawer-content{padding-inline:26px}}
@media(min-width:900px){body{font-size:17px}.hero{grid-template-columns:6fr 6fr;gap:52px;align-items:center;padding-top:56px}.hero-art{order:0}.hero-panel{aspect-ratio:1/1.02;clip-path:polygon(16% 0,100% 0,100% 82%,84% 100%,0 100%,0 26%)}.panel-logo{width:54%}.hero-panel .rings{width:62%;right:-18%;bottom:-16%}.hero-actions{align-items:flex-start}.hero-actions .text-link{padding-top:3px}.stats dd{font-size:1.8rem}.stats{grid-template-columns:.6fr .9fr 1.6fr}.stats>div{padding-inline:18px}.service-group{grid-template-columns:4fr 8fr;gap:52px;align-items:start}.group-description{position:sticky;top:150px}.service-list{padding:6px 26px}.group-nav-inner{gap:28px}.group-nav a{font-size:.8rem}.notes-grid{grid-template-columns:repeat(3,1fr)}.booking-grid{grid-template-columns:6fr 5fr;gap:64px;align-items:center}.contact-card{padding:16px 36px}.gallery-grid{grid-template-columns:2fr 1fr 1fr;gap:16px}.gallery-grid img{aspect-ratio:4/5}.g-a{grid-column:1;grid-row:1/span 2}.gallery-grid .g-a img{aspect-ratio:auto}.partner{grid-template-columns:1.15fr 1fr;gap:44px;padding:18px}}
@media(hover:hover){.service-row:hover{background:var(--bg);box-shadow:-20px 0 0 var(--bg),20px 0 0 var(--bg)}}
@media(prefers-reduced-motion:no-preference){.reveal-ready{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out}.reveal-ready.revealed{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@keyframes led-draw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes tray-in{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes flash{0%,70%{background:#DCE6F7}100%{background:transparent}}

/* Motion. Everything here is switched off by the prefers-reduced-motion rule above. */
.ticker{overflow:hidden;background:var(--card);border-block:1px solid var(--line);padding:15px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;font-size:.95rem;font-weight:600;color:var(--ink);white-space:nowrap}
.ticker span::after{content:'';width:7px;height:7px;margin:0 26px;border-radius:50%;background:linear-gradient(135deg,var(--cobalt),var(--cyan))}
.hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(2){animation-delay:.1s}
.hero-copy>:nth-child(3){animation-delay:.22s}
.hero-copy>:nth-child(4){animation-delay:.34s}
.hero-copy>:nth-child(5){animation-delay:.46s}
.hero-art{animation:rise-in 1.1s .15s cubic-bezier(.2,.7,.2,1) both}
.primary{position:relative;overflow:hidden;isolation:isolate}
.primary::after{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:shine 5s ease-in-out 1.2s infinite}
.site-header nav a.nav-book{animation:glow 3.2s ease-in-out infinite}
.add-service[aria-pressed=true] svg{animation:pop .45s cubic-bezier(.3,1.7,.5,1)}
.notes-grid article{transition:transform .35s ease,box-shadow .35s ease}
.notes-grid article:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(13,27,61,.45)}
.notes-grid article.reveal-ready:nth-child(3n+2),.gallery-grid figure.reveal-ready:nth-child(2n){transition-delay:.1s}
.notes-grid article.reveal-ready:nth-child(3n),.gallery-grid figure.reveal-ready:nth-child(3n){transition-delay:.2s}
.eyebrow::before{transform-origin:center}
@supports (animation-timeline: scroll()){
  body::after{content:'';position:fixed;z-index:60;left:0;top:0;width:100%;height:3px;transform-origin:0 50%;background:linear-gradient(90deg,var(--cobalt),var(--cyan));animation:progress linear both;animation-timeline:scroll(root)}
}
@supports (animation-timeline: view()){
  .service-row{animation:row-in linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .gallery-grid figure.reveal-ready,.partner.reveal-ready{opacity:1;transform:none}
  .gallery-grid figure,.partner img{animation:wipe linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes rise-in{from{opacity:0;transform:translateY(26px) scale(.97)}}
@keyframes shine{0%,62%{left:-60%}100%{left:130%}}
@keyframes glow{50%{box-shadow:0 0 0 6px rgba(124,196,255,.28)}}
@keyframes pop{0%{transform:scale(.3)}100%{transform:scale(1)}}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes row-in{from{opacity:0;transform:translateY(16px)}}
@keyframes wipe{from{clip-path:inset(22% 0 0 0);opacity:.35}to{clip-path:inset(0);opacity:1}}