@import url("scrollbars.css?v=20261001-2");
@font-face{font-family:Nunito;src:url(assets/fonts/Nunito-vietnamese.woff2) format("woff2");font-style:normal;font-weight:200 1000;font-display:swap;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:Nunito;src:url(assets/fonts/Nunito-latin-ext.woff2) format("woff2");font-style:normal;font-weight:200 1000;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Nunito;src:url(assets/fonts/Nunito-latin.woff2) format("woff2");font-style:normal;font-weight:200 1000;font-display:swap;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:Quicksand;src:url(assets/fonts/Quicksand-vietnamese.woff2) format("woff2");font-style:normal;font-weight:300 700;font-display:swap;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:Quicksand;src:url(assets/fonts/Quicksand-latin-ext.woff2) format("woff2");font-style:normal;font-weight:300 700;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Quicksand;src:url(assets/fonts/Quicksand-latin.woff2) format("woff2");font-style:normal;font-weight:300 700;font-display:swap;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:"Baloo 2";src:url(assets/fonts/Baloo2-vietnamese.woff2) format("woff2");font-style:normal;font-weight:400 800;font-display:swap;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:"Baloo 2";src:url(assets/fonts/Baloo2-latin-ext.woff2) format("woff2");font-style:normal;font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Baloo 2";src:url(assets/fonts/Baloo2-latin.woff2) format("woff2");font-style:normal;font-weight:400 800;font-display:swap;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}
:root{--paper:#fcf3ee;--paper-2:#fff9f7;--white:#fff;--cocoa:#4f382e;--ink:#5d463d;--muted:#8b746b;--pink:#e85e7c;--pink-strong:#d9476d;--pink-soft:#f8d8df;--lavender:#b493dd;--lavender-soft:#f1e8fa;--peach:#efa87f;--line:#f0d4d1;--shadow:0 24px 70px -44px rgba(93,56,65,.42);--radius-lg:34px;--radius-md:24px;--content:1440px;--header:86px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header);background:var(--paper)}
body{margin:0;color:var(--cocoa);background:var(--paper);font-family:Nunito,system-ui,sans-serif;overflow-x:hidden}
body.has-overlay{overflow:hidden}
button,a,input,textarea{font:inherit}
button,a{ -webkit-tap-highlight-color:transparent}
button{color:inherit}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;padding:10px 14px;border-radius:12px;background:var(--cocoa);color:#fff;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.paper-width{width:min(var(--content),calc(100% - 64px));margin-inline:auto}
.paper-section{position:relative;isolation:isolate}
.site-header{position:sticky;top:0;z-index:90;background:rgba(252,243,238,.91);border-bottom:1px solid rgba(217,71,109,.09);backdrop-filter:blur(18px)}
.header-inner{min-height:var(--header);display:flex;align-items:center;gap:30px}
.brand{position:relative;display:grid;grid-template-columns:auto 46px;grid-template-rows:auto auto;align-items:center;column-gap:4px;flex:none;line-height:1}
.brand-mark{font-family:Quicksand,sans-serif;font-weight:700;font-size:30px;letter-spacing:-.06em;color:var(--pink)}
.brand img{grid-row:1/3;grid-column:2;width:43px;height:43px;object-fit:contain}
.brand-sub{grid-column:1/3;margin-top:3px;font-size:9.5px;font-weight:800;letter-spacing:.02em;color:#33251f}
.desktop-nav{display:flex;align-items:stretch;justify-content:center;gap:5px;flex:1}
.desktop-nav a{position:relative;display:flex;align-items:center;gap:7px;min-height:48px;padding:0 12px;border-radius:14px;font-size:13.5px;font-weight:800;color:#6e5a52;transition:.25s ease}
.desktop-nav img{width:21px;height:21px;object-fit:contain}
.desktop-nav a:hover,.desktop-nav a.is-active{color:var(--pink-strong);background:rgba(255,255,255,.72)}
.desktop-nav a.is-active::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:999px;background:var(--pink)}
.button-primary,.button-secondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:15px;border:1px solid transparent;font-family:Quicksand,sans-serif;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.button-primary{background:linear-gradient(135deg,#ee6f8b,var(--pink-strong));color:#fff;box-shadow:0 16px 28px -18px rgba(217,71,109,.85)}
.button-primary:hover,.button-secondary:hover{transform:translateY(-2px)}
.button-primary:focus-visible,.button-secondary:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--pink-strong);outline-offset:4px}
.button-secondary{border-color:#edb9c4;background:rgba(255,255,255,.65);color:var(--pink-strong)}
.header-book{min-height:42px;padding-inline:18px;border-radius:13px;font-size:13px}
.menu-button{display:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--pink-soft);cursor:pointer}
.menu-button span{display:block;width:20px;height:2px;margin:4px auto;border-radius:999px;background:var(--pink-strong)}
.mobile-drawer[hidden]{display:none}
.mobile-drawer{position:fixed;inset:0;z-index:120}
.drawer-backdrop{position:absolute;inset:0;background:rgba(79,56,46,.3);backdrop-filter:blur(2px)}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(390px,88vw);display:flex;flex-direction:column;gap:9px;padding:28px 24px;background:var(--paper);box-shadow:-28px 0 80px -50px #4f382e;animation:drawer-in .26s ease both}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font:700 21px Quicksand}
.drawer-head button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--cocoa);cursor:pointer}
.drawer-head button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.drawer-panel>a{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:0 17px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.7);font-weight:800}
.drawer-book{margin-top:auto}
/* Hotline, hours and address sit on the footer's wavy pink paper at the foot of the drawer,
   bleeding past the drawer padding to its edges and bottom. */
.drawer-contact{display:grid;margin:auto -16px -30px}
.drawer-contact__wave{display:block;width:100%;height:40px;margin-bottom:-1px;overflow:visible}
.drawer-contact__rows{display:grid;gap:14px;padding:22px 26px 30px;background:#fdf0ef}
.drawer-contact__row{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:12px;margin:0;color:var(--cocoa);text-decoration:none}
.drawer-contact__icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 8px 18px -14px rgba(121,62,78,.6)}
.drawer-contact__icon img{width:auto;height:20px}
.drawer-contact small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-strong)}
.drawer-contact strong{display:block;margin-top:2px;font-size:14px;font-weight:700;line-height:1.35}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}}
.home-section{padding:42px 0 34px;background:radial-gradient(circle at 83% 28%,rgba(244,190,210,.28),transparent 32%),linear-gradient(180deg,#fff8f4,var(--paper))}
.home-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);grid-template-areas:"copy art" "quote art" "schedule art";column-gap:42px;align-items:center}
.home-copy{grid-area:copy;padding:20px 0}
.taped-kicker{display:inline-flex;position:relative;margin:0 0 20px;padding:10px 22px;border:1px solid rgba(232,94,124,.13);border-radius:8px;background:rgba(255,255,255,.68);font-weight:800;font-size:14px;color:#6d5147;transform:rotate(-1deg)}
.taped-kicker::before{content:"";position:absolute;left:-16px;top:-12px;width:62px;height:28px;background:url(assets/home/decor/pink_gingham_tape.webp) center/contain no-repeat;transform:rotate(-8deg)}
.home-copy h1{margin:0;font:700 clamp(43px,4.35vw,76px)/1.08 Quicksand;letter-spacing:-.045em;color:#382720}
.home-copy h1 em{color:var(--pink);font-style:normal}
.home-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.home-copy blockquote{grid-area:quote;max-width:560px;margin:25px 0 0;padding:21px 25px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.55);font-size:14px;line-height:1.65;box-shadow:var(--shadow)}
.home-copy blockquote cite{display:block;margin-top:9px;color:var(--pink);font-size:10px;font-style:normal;font-weight:900;letter-spacing:.08em}
.home-art{grid-area:art;align-self:center;position:relative}
.home-art::after{content:"";position:absolute;inset:14% 6% 7% 11%;z-index:-1;border-radius:50%;background:rgba(255,255,255,.7);filter:blur(2px)}
.home-art img{width:100%;max-height:660px;object-fit:contain;filter:drop-shadow(0 30px 35px rgba(151,88,105,.13))}
.today-card{grid-area:schedule;margin-top:20px;padding:18px 20px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.62);box-shadow:var(--shadow)}
.today-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.today-head h2{display:flex;align-items:center;gap:8px;margin:0;font:700 15px Quicksand}
.today-head h2 img{width:23px;height:23px;object-fit:contain}
.today-head time{font-size:11px;font-weight:800;color:var(--pink)}
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot-grid button{display:grid;grid-template-columns:24px 1fr;align-items:center;column-gap:4px;min-height:60px;padding:8px;border:1px solid var(--line);border-radius:13px;background:#fffaf7;cursor:pointer}
.slot-grid img{grid-row:1/3;width:20px;height:24px;object-fit:contain}
.slot-grid strong{font:700 13px Quicksand}.slot-grid small{font-size:9px;color:var(--muted)}
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.54);overflow:hidden}
.benefit-grid article{display:grid;justify-items:center;padding:22px 18px;text-align:center;border-right:1px dashed #ebc9c7}.benefit-grid article:last-child{border:0}
.benefit-grid img{width:72px;height:62px;object-fit:contain}.benefit-grid h3{margin:7px 0 2px;font:700 14px Quicksand}.benefit-grid p{margin:0;font-size:10.5px;color:var(--muted)}
.services-section{padding:54px 0 70px;background:linear-gradient(180deg,var(--paper),#fff8f6)}
.services-hero{position:relative;min-height:420px;overflow:hidden}
.services-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.services-title{position:absolute;left:9%;top:21%;width:43%;max-height:155px;object-fit:contain;object-position:left center}
.services-subtitle{position:absolute;left:13%;top:59%;width:35%;max-height:86px;object-fit:contain}
.services-cluster{position:absolute;right:8%;top:11%;width:38%;height:76%;object-fit:contain}
.services-content{margin-top:20px}
.service-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:7px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.7);box-shadow:var(--shadow)}
.service-tabs button{min-width:0;min-height:58px;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;border:1px solid transparent;border-radius:14px;background:transparent;font:700 13px Quicksand;cursor:pointer;transition:.2s ease}
.service-tabs button:hover{background:#fff}.service-tabs button.is-active{border-color:#ee97aa;background:linear-gradient(135deg,#ef7390,var(--pink));color:#fff;box-shadow:0 14px 26px -17px rgba(217,71,109,.8)}
.service-panel{margin-top:22px;min-height:560px}
.signature-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.signature-intro{display:flex;align-items:center;min-height:250px;padding:18px 30px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(135deg,#fffaf8,#fff0f4);overflow:hidden}
.signature-cat{width:43%;max-height:220px;object-fit:contain}.signature-wordmark{max-width:350px;max-height:122px;object-fit:contain}.signature-intro p{text-align:center;margin:3px 0 0;color:var(--muted);font-weight:700}
.service-card{display:grid;grid-template-columns:1fr 42%;gap:16px;align-items:center;min-height:210px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.72);box-shadow:var(--shadow);overflow:hidden}
.service-card--featured{min-height:250px;background:linear-gradient(135deg,#fff3f5,#fffaf7)}
.service-card img{width:100%;height:168px;border-radius:17px;object-fit:cover}
.service-card h3{margin:0 0 6px;font:700 19px/1.25 Quicksand}.service-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.service-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:15px}.service-meta>span:first-child{font-size:11px;color:var(--muted)}.service-price{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}.service-price strong{font:700 18px Quicksand;color:var(--pink-strong)}.service-price del{font-size:10px;color:var(--muted)}.sale-badge{padding:3px 6px;border-radius:999px;background:#fde2e7;color:var(--pink-strong);font-size:9px;font-weight:900}
.signature-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.signature-grid .service-card{min-height:215px}
.service-note{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:18px;padding:20px;border:1px dashed #eab9c1;border-radius:22px;background:var(--lavender-soft)}.service-note img{width:85px;height:65px;object-fit:contain;align-self:flex-end}.service-note strong{font:700 20px Quicksand;color:#8a63bb}.service-note p{margin:3px 0 0;color:#725f78;font-size:13px}
.shared-service-title{display:flex;align-items:center;justify-content:center;gap:20px;padding:28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(135deg,#fffaf8,#fff1f4);text-align:left}.shared-service-title img{width:120px;height:90px;object-fit:contain}.shared-service-title h2{margin:0;font:700 clamp(30px,4vw,52px) Quicksand;color:var(--pink)}.shared-service-title p{max-width:540px;margin:5px 0 0;color:var(--muted)}
.shared-service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}.shared-service-grid .service-card{min-height:190px}.shared-service-layout .service-note{margin-top:16px}
.reveal,.reveal.is-visible{opacity:1;transform:none;transition:none}
@media(max-width:1180px){:root{--content:1080px}.paper-width{width:min(var(--content),calc(100% - 40px))}.desktop-nav a{padding-inline:7px;font-size:12px}.desktop-nav img{width:18px;height:18px}.home-grid{grid-template-columns:1fr 1fr;column-gap:24px}.services-hero{min-height:350px}.signature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){:root{--header:72px}.paper-width{width:min(100% - 32px,720px)}.desktop-nav,.header-book{display:none}.header-inner{justify-content:space-between}.menu-button{display:block}.home-section{padding-top:20px}.home-grid{display:flex;flex-direction:column}.home-copy{order:1;width:100%}.home-art{order:2;width:100%;margin-top:10px}.home-art img{max-height:520px}.today-card{order:3;width:100%}.benefit-grid{grid-template-columns:repeat(2,1fr)}.benefit-grid article:nth-child(2){border-right:0}.benefit-grid article:nth-child(-n+2){border-bottom:1px dashed #ebc9c7}.services-hero{min-height:0;aspect-ratio:1024/560}.service-tabs{display:flex;overflow-x:auto;scrollbar-width:none;padding:6px}.service-tabs button{flex:0 0 145px}.signature-layout{grid-template-columns:1fr}.signature-grid{grid-column:auto;grid-template-columns:1fr 1fr}.service-note{grid-column:auto}.shared-service-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.paper-width{width:min(100% - 28px,480px)}.brand-mark{font-size:28px}.brand img{width:40px;height:40px}.home-copy h1{font-size:clamp(39px,12vw,55px)}.taped-kicker{font-size:12px;padding-inline:14px}.home-actions>*{flex:1 1 150px}.home-copy blockquote{font-size:12.5px}.home-art img{max-height:470px}.slot-grid{grid-template-columns:repeat(3,1fr)}.slot-grid button{grid-template-columns:1fr;justify-items:center;min-height:74px}.slot-grid img{grid-row:auto}.benefit-grid img{width:60px}.services-section{padding-top:34px}.services-hero{aspect-ratio:1024/700}.services-title{left:7%;top:16%;width:53%}.services-subtitle{left:8%;top:55%;width:47%}.services-cluster{right:2%;top:12%;width:46%}.signature-intro{min-height:210px;padding:15px}.signature-cat{width:40%}.signature-grid,.shared-service-grid{grid-template-columns:1fr}.service-card{grid-template-columns:1fr 42%;min-height:175px;padding:16px}.service-card img{height:135px}.service-card h3{font-size:16px}.service-card p{font-size:11.5px}.service-meta{margin-top:10px}.service-price strong{font-size:15px}.shared-service-title{justify-content:flex-start;padding:20px}.shared-service-title img{width:82px;height:70px}.shared-service-title h2{font-size:29px}.shared-service-title p{font-size:12px}.service-note{justify-content:flex-start;padding:15px}.service-note img{width:70px}.service-note p{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.drawer-panel{animation:none}.button-primary,.button-secondary,.desktop-nav a,.service-tabs button{transition:none}}
.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}
.gallery-section{padding:70px 0;background:linear-gradient(180deg,#fff8f6,var(--paper))}
.gallery-shell{padding:42px;border:1px solid var(--line);border-radius:40px;background:rgba(255,255,255,.58);box-shadow:var(--shadow)}
.gallery-intro{margin:0;text-align:center;color:var(--muted);font-size:14px}
.gallery-filters{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:25px 0}
.gallery-filters button{min-height:42px;padding:0 22px;border:1px solid var(--line);border-radius:999px;background:#fff8f5;color:#765f55;font-weight:800;cursor:pointer}
.gallery-filters button.is-active{border-color:transparent;background:linear-gradient(135deg,#ef7893,var(--pink));color:#fff;box-shadow:0 13px 25px -17px rgba(217,71,109,.8)}
.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.gallery-tile{position:relative;aspect-ratio:4/3;margin:0;border:0;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 12px 28px -23px rgba(79,56,46,.5)}
.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.gallery-tile:hover img{transform:scale(1.035)}
.gallery-more-wrap{display:grid;justify-items:center;margin-top:28px;text-align:center}
.gallery-more{min-width:245px;min-height:57px;padding:0 28px;border:0;border-radius:999px;background:linear-gradient(135deg,#f27c98,#df4f73);color:#fff;font:700 19px Quicksand;box-shadow:0 18px 34px -20px rgba(217,71,109,.85);cursor:pointer}
.gallery-more-wrap p{margin:10px 0 0;color:var(--muted);font-size:12px}
.about-section{padding:70px 0;background:linear-gradient(180deg,var(--paper),#fffaf7)}
.about-grid{display:grid;grid-template-columns:1.02fr 1fr .85fr;grid-template-areas:"intro main story" "detail note story" "info info info" "journey journey journey";gap:17px}
.paper-card,.about-photo{position:relative;margin:0;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.66);box-shadow:var(--shadow)}
.about-intro{grid-area:intro;padding:38px 34px;overflow:hidden}
.section-label{display:inline-flex;padding:7px 15px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:11px;font-weight:900;letter-spacing:.05em}
.about-intro h2{margin:18px 0 15px;font:700 clamp(36px,3.4vw,55px)/1.08 Quicksand;letter-spacing:-.035em}.about-intro h2 em{color:var(--pink);font-style:normal}.about-intro p{margin:0;line-height:1.72;color:var(--muted)}.about-tape{position:absolute;right:-7px;top:-7px;width:90px;transform:rotate(12deg)}
.about-photo{overflow:hidden}.about-photo img{width:100%;height:100%;object-fit:cover}.about-photo--main{grid-area:main;min-height:340px}.about-photo--detail{grid-area:detail;min-height:220px}
.about-story{grid-area:story;padding:34px 30px}.story-pill{display:inline-flex;padding:8px 14px;border:1px solid #e05a78;border-radius:999px;background:transparent;color:#b74061;font-weight:800}.about-story p{margin:20px 0 0;line-height:1.75;color:#614c43}
.about-note{grid-area:note;padding:28px;background:var(--lavender-soft)}.about-note strong{font:700 20px Quicksand;color:#8e68be}.about-note p{margin:9px 0 0;line-height:1.65;color:#725f78}
.about-info-rail{grid-area:info;display:grid;grid-template-columns:repeat(3,1fr);padding:25px 10px;border:1px solid var(--line);border-radius:25px;background:rgba(255,255,255,.64)}
.about-info-rail article{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto auto;align-items:center;padding:7px 25px;border-right:1px dashed #e3bfc0}.about-info-rail article:last-child{border:0}.about-info-rail img{grid-row:1/4;width:43px;height:43px;object-fit:contain}.about-info-rail span{font-size:10px;color:var(--muted)}.about-info-rail strong{font:700 17px Quicksand;color:var(--pink)}.about-info-rail p{margin:3px 0 0;font-size:10px;line-height:1.45;color:var(--muted)}
.about-journey{grid-area:journey;padding:20px 25px;border:1px solid var(--line);border-radius:25px;background:rgba(255,255,255,.52)}.about-journey>h3{margin:0 0 14px;font:700 18px Quicksand}.about-journey>div{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.about-journey article{position:relative;display:grid;grid-template-columns:38px 64px 1fr;grid-template-rows:auto auto;align-items:center;padding:8px 12px;border-right:1px dashed #e3bfc0}.about-journey article:last-child{border:0}.about-journey b{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--pink-soft);color:var(--pink)}.about-journey img{grid-row:1/3;width:54px;height:54px;object-fit:contain}.about-journey h4{margin:0;font:700 13px Quicksand}.about-journey p{margin:3px 0 0;font-size:9.5px;color:var(--muted)}
.reviews-section{padding:74px 0;background:#fffaf7}
.centered-heading{text-align:center}.centered-heading h2{margin:0;font:700 clamp(44px,5vw,70px)/1 Quicksand;color:#ee7791;text-shadow:0 2px 0 #fff}.centered-heading p{margin:16px auto 0;line-height:1.6;color:var(--muted)}
.review-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;padding:12px 0;border-block:1px solid var(--line)}.review-stats article{display:grid;grid-template-columns:48px 1fr;align-items:center;padding:13px 28px;border-right:1px dashed #dfbdba}.review-stats article:last-child{border:0}.review-stats img{grid-row:1/3;width:40px;height:40px;object-fit:contain}
.review-list-title{width:max-content;max-width:100%;margin:34px auto 20px;text-align:center;font:800 14px Quicksand;letter-spacing:.085em;color:#5d4138;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.review-card{display:flex;flex-direction:column;min-height:230px;padding:24px;border:1px solid var(--line);border-radius:21px;background:#fff;box-shadow:var(--shadow)}.review-card>img{width:37px;height:31px;object-fit:contain}.review-card blockquote{margin:15px 0;color:#5f4c44;line-height:1.65;font-size:13px}.review-card .stars{display:flex;gap:2px;margin-top:auto}.review-card .stars img{width:15px;height:15px}.review-card cite{margin-top:12px;font-size:10px;font-style:normal;color:var(--muted);text-align:right}
.reviews-wave{position:relative;height:48px;margin-top:25px;background:linear-gradient(transparent 48%,rgba(232,94,124,.32) 49%,rgba(232,94,124,.32) 51%,transparent 52%)}.reviews-wave img{position:absolute;left:50%;top:50%;width:27px;height:27px;object-fit:contain;transform:translate(-50%,-50%);background:#fffaf7}
.booking-faq-section{padding:80px 0 65px;background:#fcf3ee}
.booking-cta{position:relative;display:grid;justify-items:center;text-align:center}.booking-eyebrow{display:inline-flex;padding:9px 20px;border:1px solid #e8a7b5;border-radius:999px;color:#b74061;font-weight:800}.booking-cta h2{margin:18px 0 10px;font:700 clamp(48px,5.3vw,76px)/1.05 Quicksand;letter-spacing:-.04em}.booking-cta h2 em{font-style:normal;color:var(--pink)}.booking-cta>p{margin:0;color:var(--muted);font-size:17px}.booking-main-cta{min-width:420px;min-height:60px;margin-top:24px;border-radius:14px;font-size:18px}.booking-heart,.booking-sparkle,.booking-flower{position:absolute;object-fit:contain;pointer-events:none}.booking-heart{left:6%;top:2%;width:35px}.booking-sparkle{right:14%;top:10%;width:30px}.booking-flower{right:5%;bottom:0;width:45px}
.faq-layout{display:grid;grid-template-columns:260px 1fr;gap:35px;margin-top:55px}.faq-heading{position:relative;padding:10px 0}.faq-heading h3{margin:0;font:700 37px/1.05 Quicksand}.faq-heading img{width:135px;height:32px;object-fit:contain;margin:6px 0}.faq-heading p{margin:0;color:var(--muted);font-size:13px}.faq-list{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;gap:10px}.faq-list article{border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.55);overflow:hidden}.faq-list h4{margin:0}.faq-list button{width:100%;min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 19px;border:0;background:transparent;text-align:left;font-weight:700;cursor:pointer}.faq-list button span{font-size:25px;color:var(--pink-strong);transition:transform .2s ease}.faq-list button[aria-expanded=true] span{transform:rotate(45deg)}.faq-answer{padding:0 19px 16px}.faq-answer p{margin:0;color:var(--muted);line-height:1.6;font-size:13px}
.manage-fab{position:fixed;right:18px;bottom:18px;z-index:75;min-height:44px;padding:0 17px;border:1px solid #ebc7cf;border-radius:999px;background:rgba(255,255,255,.94);color:#b74061;font-weight:800;box-shadow:0 14px 34px -22px rgba(79,56,46,.7);cursor:pointer;backdrop-filter:blur(12px)}
.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px}.modal-backdrop{position:absolute;inset:0;background:rgba(79,56,46,.36);backdrop-filter:blur(3px)}.modal-panel{position:relative;display:flex;flex-direction:column;width:min(1080px,100%);max-height:calc(100dvh - 48px);border:1px solid rgba(255,255,255,.7);border-radius:36px;background:var(--paper-2);box-shadow:0 45px 120px -50px rgba(79,56,46,.75);overflow:hidden;animation:modal-in .3s cubic-bezier(.2,.8,.25,1) both}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:25px 29px 18px;border-bottom:1px solid var(--line)}.modal-header span{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}.modal-header h2{margin:5px 0 0;font:700 28px Quicksand}.modal-close{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:29px;line-height:1;cursor:pointer}.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-top:1px solid var(--line);background:rgba(255,255,255,.62)}.modal-footer p{margin:0;color:var(--muted);font-size:12px}
.gallery-modal-panel{height:min(850px,calc(100dvh - 48px))}.gallery-modal-filters{justify-content:flex-start;margin:16px 28px 5px}.gallery-modal-grid{display:grid;flex:1 1 auto;grid-template-columns:repeat(4,1fr);grid-auto-rows:max-content;align-content:start;gap:12px;min-height:0;padding:14px 28px 24px;overflow-y:auto}.gallery-modal-grid .gallery-tile{height:auto;aspect-ratio:4/3}
.booking-modal-panel{height:min(850px,calc(100dvh - 48px))}.booking-modal-body{flex:1;min-height:0;padding:22px 29px;overflow:auto}.booking-footer [data-booking-summary]{flex:1;text-align:center;color:var(--muted);font-size:12px}.booking-step{display:grid;gap:17px}.booking-categories{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.booking-categories button{flex:none;min-height:42px;padding:0 17px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-weight:800}.booking-categories button.is-active{background:var(--pink);color:#fff;border-color:transparent}.booking-service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.booking-service-option{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;min-height:76px;padding:15px 17px;border:1px solid var(--line);border-radius:17px;background:#fff;text-align:left;cursor:pointer}.booking-service-option.is-selected{border-color:var(--pink);background:#fff3f5}.booking-service-option h3{margin:0;font:700 14px Quicksand}.booking-service-option p{margin:4px 0 0;color:var(--muted);font-size:10px}.booking-service-option strong{color:var(--pink-strong)}.booking-check{display:grid;place-items:center;width:23px;height:23px;border:2px solid #e5c6cd;border-radius:7px}.is-selected .booking-check{border-color:var(--pink);background:var(--pink);color:#fff}.booking-picked{display:flex;flex-wrap:wrap;gap:6px}.booking-picked button{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--lavender-soft);font-size:11px;cursor:pointer}.booking-total{display:flex;justify-content:space-between;gap:18px;padding:16px 19px;border-radius:18px;background:linear-gradient(120deg,var(--lavender-soft),#fde9ee)}.booking-total strong{color:var(--pink-strong)}
.booking-dates{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.booking-date{min-height:69px;padding:7px 3px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer}.booking-date.is-active{border-color:var(--pink);background:var(--pink);color:#fff}.booking-date span,.booking-date small{display:block;font-size:13px;line-height:1.2}.booking-date strong{display:block;font:700 18px Quicksand}.booking-calendar-field{display:flex;align-items:center;gap:10px}.booking-calendar-field input{min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--cocoa)}.booking-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.booking-slot{min-height:56px;border:1px solid var(--line);border-radius:13px;background:#fff;cursor:pointer}.booking-slot strong,.booking-slot small{display:block}.booking-slot small{margin-top:4px;font-size:12px;line-height:1.2;color:var(--muted)}.booking-slot.is-active{border-color:var(--pink);background:var(--pink);color:#fff}.booking-slot:disabled{opacity:.55;cursor:not-allowed}.booking-slot.is-blocked{background:repeating-linear-gradient(135deg,#fff 0 6px,#fbe3ea 6px 12px)}.booking-slot.is-blocked small{color:#b4233f}.booking-loading,.booking-empty{padding:34px;border:1px dashed var(--line);border-radius:17px;text-align:center;color:var(--muted)}
.booking-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.booking-form label{display:grid;gap:6px;font-weight:800;font-size:12px}.booking-form label:last-child{grid-column:1/-1}.booking-form input,.booking-form textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--cocoa);outline:none}.booking-form textarea{min-height:90px;resize:vertical}.booking-form input:focus,.booking-form textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(217,71,109,.12)}.booking-confirm-card{display:flex;justify-content:space-between;gap:20px;padding:18px;border-radius:18px;background:var(--lavender-soft)}.booking-result{display:grid;place-items:center;min-height:390px;text-align:center}.booking-result img{width:120px}.booking-result h3{margin:15px 0 7px;font:700 34px Quicksand}.booking-result p{max-width:560px;margin:0;line-height:1.65;color:var(--muted)}.booking-result code{display:inline-block;margin:16px 0;padding:10px 15px;border-radius:12px;background:#fff;font:700 17px Quicksand;color:var(--pink-strong)}.booking-result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.manager-modal-panel{width:min(1080px,100%);height:min(850px,calc(100dvh - 48px));background:var(--paper-2)}.manager-modal-panel iframe{width:100%;height:100%;border:0}.manager-close{position:absolute;right:28px;top:25px;z-index:2}
.toast{position:fixed;left:50%;bottom:24px;z-index:220;max-width:min(480px,calc(100% - 32px));padding:13px 19px;border-radius:999px;background:#4f382e;color:#fff;text-align:center;font-weight:800;box-shadow:0 18px 50px -20px #4f382e;transform:translateX(-50%)}.toast[hidden]{display:none}
@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:900px){.gallery-shell{padding:30px 22px}.gallery-grid{grid-template-columns:repeat(3,1fr)}.about-grid{grid-template-columns:1fr 1fr;grid-template-areas:"intro main" "story detail" "note note" "info info" "journey journey"}.review-grid{grid-template-columns:repeat(2,1fr)}.review-stats{grid-template-columns:repeat(2,1fr)}.review-stats article:nth-child(2){border-right:0}.review-stats article:nth-child(-n+2){border-bottom:1px dashed #dfbdba}.faq-layout{grid-template-columns:1fr}.faq-heading{text-align:center}.faq-heading img{margin-inline:auto}.gallery-modal-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.gallery-section,.about-section,.reviews-section,.booking-faq-section{padding-block:50px}.gallery-shell{padding:24px 12px;border-radius:28px}.gallery-filters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin-inline:4px;scrollbar-width:none}.gallery-filters button{flex:none;padding-inline:15px}.gallery-grid{grid-template-columns:repeat(2,1fr);gap:9px}.gallery-more{min-width:210px}.about-grid{display:flex;flex-direction:column}.about-intro{padding:30px 25px}.about-photo--main{min-height:260px}.about-story{padding:26px 23px}.about-info-rail{grid-template-columns:repeat(3,1fr);padding:14px 2px}.about-info-rail article{display:flex;flex-direction:column;padding:6px 7px;text-align:center}.about-info-rail img{width:34px;height:34px}.about-info-rail span{font-size:8px}.about-info-rail strong{font-size:12px}.about-info-rail p{font-size:7.5px}.about-journey{padding:17px 12px}.about-journey>div{grid-template-columns:repeat(2,1fr)}.about-journey article{grid-template-columns:30px 48px 1fr;padding:8px 4px;border-right:0}.about-journey img{width:42px}.about-journey h4{font-size:11px}.review-grid{grid-template-columns:1fr}.review-stats article{padding:11px 12px}.review-stats img{width:32px;height:32px}.booking-main-cta{min-width:100%}.booking-heart{left:2%}.booking-flower{right:0}.faq-list{grid-template-columns:1fr}.manage-fab{right:12px;bottom:12px}.modal{padding:10px}.modal-panel,.gallery-modal-panel,.booking-modal-panel,.manager-modal-panel{max-height:calc(100dvh - 20px);height:calc(100dvh - 20px);border-radius:25px}.modal-header{padding:19px 18px 14px}.modal-header h2{font-size:22px}.modal-close{width:42px;height:42px}.modal-footer{padding:12px 16px}.gallery-modal-filters{margin:12px 16px 3px}.gallery-modal-grid{grid-template-columns:repeat(2,1fr);padding:10px 16px 18px}.booking-modal-body{padding:17px}.booking-footer{display:grid;grid-template-columns:auto 1fr auto}.booking-footer [data-booking-summary]{display:none}.booking-service-grid{grid-template-columns:1fr}.booking-dates{grid-template-columns:repeat(4,1fr)}.booking-slots{grid-template-columns:repeat(3,1fr)}.booking-form{grid-template-columns:1fr}.booking-form label:last-child{grid-column:auto}.booking-confirm-card{flex-direction:column}.manager-close{right:17px;top:17px}}
@media(prefers-reduced-motion:reduce){.gallery-tile img,.faq-list button span,.modal-panel{transition:none;animation:none}}

/* Shared candy-pink word highlight with a paper-reference wavy underline. */
:root{
  --highlight-pink:#f36f9a;
  --highlight-wave:#f58eae;
  --highlight-wave-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M0 4 Q5.5 0 11 4 T22 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.home-copy h1 .pink-highlight,
.about-intro h2 .pink-highlight,
.about-intro p .about-inline-highlight,
.booking-cta h2 .pink-highlight{
  display:inline-block;
  position:relative;
  color:var(--highlight-pink);
  font-style:normal;
  text-decoration:none;
}
.home-copy h1 .pink-highlight::after,
.about-intro h2 .pink-highlight::after,
.about-intro p .about-inline-highlight::after,
.booking-cta h2 .pink-highlight::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.08em;
  height:.11em;
  background:var(--highlight-wave);
  pointer-events:none;
  -webkit-mask-image:var(--highlight-wave-mask);
  mask-image:var(--highlight-wave-mask);
  -webkit-mask-position:left center;
  mask-position:left center;
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
  -webkit-mask-size:.27em .10em;
  mask-size:.27em .10em;
}

/* One continuous light Paper A2 canvas matching the first Home reference. */
:root{
  --paper:#fff9f7;
  --paper-2:#fffdfb;
}
html,
body{
  min-height:100%;
  background-color:var(--paper);
}
body{
  --paper-glow-radius:clamp(300px,29vw,560px);
  background-image:
    radial-gradient(circle var(--paper-glow-radius) at 3% 6%,rgba(235,223,255,.44) 0,rgba(235,223,255,.2) 38%,transparent 73%),
    radial-gradient(circle var(--paper-glow-radius) at 97% 15%,rgba(218,242,230,.46) 0,rgba(218,242,230,.19) 40%,transparent 74%),
    radial-gradient(circle var(--paper-glow-radius) at 5% 29%,rgba(222,239,255,.4) 0,rgba(222,239,255,.17) 42%,transparent 74%),
    radial-gradient(circle var(--paper-glow-radius) at 96% 43%,rgba(247,227,255,.42) 0,rgba(247,227,255,.18) 40%,transparent 74%),
    radial-gradient(circle var(--paper-glow-radius) at 4% 57%,rgba(255,226,215,.42) 0,rgba(255,226,215,.17) 41%,transparent 74%),
    radial-gradient(circle var(--paper-glow-radius) at 97% 70%,rgba(255,226,236,.32) 0,rgba(255,226,236,.13) 40%,transparent 74%),
    radial-gradient(circle var(--paper-glow-radius) at 5% 83%,rgba(255,241,196,.34) 0,rgba(255,241,196,.14) 42%,transparent 74%),
    radial-gradient(circle var(--paper-glow-radius) at 96% 95%,rgba(221,240,255,.38) 0,rgba(221,240,255,.15) 42%,transparent 74%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.22'/%3E%3C/svg%3E");
  background-size:auto,auto,auto,auto,auto,auto,auto,auto,180px 180px;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
  background-attachment:scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,fixed;
}
main,
.home-section,
.services-section,
.gallery-section,
.about-section,
.reviews-section,
.booking-faq-section,
.contact-section{
  background-color:transparent!important;
  background-image:none!important;
}
/* Reference-aligned V3 — final Paper A2 composition. */
:root{
  --font-signature-display:Quicksand,ui-rounded,"Arial Rounded MT Bold",sans-serif;
  --font-signature-body:Nunito,system-ui,sans-serif;
  --content:1700px;
  --header:112px;
  --paper:#fff9f7;
  --paper-2:#fffdfb;
  --cocoa:#4f2f2e;
  --ink:#4f382e;
  --muted:#826b62;
  --pink:#e85e7c;
  --pink-strong:#d9476d;
  --line:rgba(232,94,124,.23);
  --shadow:0 16px 44px -34px rgba(79,47,46,.28);
}
[hidden]{display:none!important}
.paper-width{width:min(var(--content),calc(100% - clamp(40px,6vw,112px)))}
.paper-section{overflow:hidden}
.site-header{background:rgba(252,243,238,.94);border-color:rgba(232,94,124,.12)}
.header-inner{min-height:var(--header);gap:clamp(20px,2vw,42px)}
.brand{grid-template-columns:auto 64px;column-gap:7px}
.brand-mark{font-size:clamp(36px,2.5vw,50px);color:#f35d84;text-shadow:0 2px 0 rgba(255,255,255,.8)}
.brand img{width:62px;height:62px}
.brand-sub{font-size:15px;margin-top:6px;color:#35221d}
.desktop-nav{gap:clamp(3px,.8vw,14px)}
.desktop-nav a{min-height:60px;padding:0 clamp(10px,1vw,19px);font-size:clamp(14px,.9vw,17px);gap:9px;border-radius:0}
.desktop-nav img{width:30px;height:30px}
.desktop-nav a:hover,.desktop-nav a.is-active{background:transparent}
.desktop-nav a.is-active::after{left:10px;right:10px;bottom:0;height:2px}
.header-book{min-height:56px;padding-inline:28px;border-radius:17px;font-size:16px}

/* Home */
.home-section{--home-fold-height:clamp(620px,calc(100svh - var(--header) - 70px),720px);padding:28px 0 42px}
.home-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(330px,.58fr) minmax(520px,1.36fr);
  grid-template-areas:"copy copy art" "quote schedule art";
  grid-template-rows:minmax(0,1fr) 190px;
  height:var(--home-fold-height);
  gap:22px 30px;
  align-items:stretch;
}
.home-copy{grid-area:copy;align-self:center;padding:20px 0 0}
.taped-kicker{margin-bottom:26px;padding:14px 34px;font-size:20px;border-color:rgba(232,94,124,.24);background:rgba(255,249,247,.6)}
.taped-kicker::before{width:96px;height:52px;left:-42px;top:-25px}
.home-copy h1{font:700 clamp(54px,4.1vw,80px)/1.14 var(--font-signature-display);letter-spacing:-.035em;color:#40241d}
.home-lede{max-width:550px;margin:18px 0 0;color:#6b6580;font-size:17px;line-height:1.6;text-wrap:pretty}
.home-actions{gap:24px;margin-top:22px}
.home-actions>*{min-width:260px;min-height:68px;border-radius:18px;font-size:20px}
.home-quote{grid-area:quote;align-self:stretch;display:flex;flex-direction:column;justify-content:center;height:190px;min-height:0;box-sizing:border-box;margin:0;padding:22px 26px;border:1px solid rgba(232,94,124,.35);border-radius:20px;background:rgba(255,249,247,.36);font-size:15px;line-height:1.55;box-shadow:none}
.home-quote cite{display:block;margin-top:16px;color:var(--pink);font-size:14px;font-style:normal;font-weight:900;letter-spacing:.04em}
.home-art{grid-area:art;align-self:stretch;display:grid;place-items:end center;min-height:0}
.home-art::after{display:none}
.home-art img{width:min(92%,690px);height:auto;max-height:100%;object-fit:contain;object-position:center bottom;filter:none;transform:translateY(-28px)}
.today-card{grid-area:schedule;align-self:stretch;height:100%;min-height:0;box-sizing:border-box;margin:0;border-color:rgba(232,94,124,.3);border-radius:20px;background:rgba(255,249,247,.42);box-shadow:none;transform:none}
.today-head{margin-bottom:18px}
.today-head h2{font-size:17px}.today-head h2 img{width:28px;height:28px}.today-head time{font-size:13px}
.slot-grid{grid-template-columns:repeat(3,1fr);gap:12px}
.slot-grid button{min-height:72px;padding:10px 7px;border-color:rgba(232,94,124,.35);background:rgba(255,249,247,.74)}
.slot-grid strong{font-size:16px}.slot-grid small{font-size:10px}
.benefit-grid{margin-top:clamp(42px,4vw,60px);min-height:194px;border-color:rgba(232,94,124,.35);border-radius:26px;background:rgba(255,249,247,.3)}
.benefit-grid article{padding:26px 22px;border-right-color:rgba(232,94,124,.25)}
.benefit-grid img{width:92px;height:82px}.benefit-grid h3{font-size:20px;margin-top:10px}.benefit-grid p{font-size:13px}
.home-doodle{position:absolute;z-index:-1;object-fit:contain;pointer-events:none}
.home-doodle--heart{left:3%;top:47%;width:70px}
.home-doodle--flower-pink{right:3%;top:36%;width:62px}
.home-doodle--flower-lavender{right:11%;bottom:11%;width:54px}
.home-doodle--bow{right:2%;top:58%;width:58px}

/* Shared Services header */
.services-section{padding:86px 0 104px}
.services-hero{min-height:0;aspect-ratio:1920/760;overflow:visible}
.services-frame{object-fit:fill}
.services-title{left:10%;top:22%;width:39%;max-height:180px}
.services-subtitle{left:12%;top:58%;width:36%;max-height:95px}
.services-cluster{right:7%;top:7%;width:40%;height:87%}
.services-decor{position:absolute;z-index:2;object-fit:contain;pointer-events:none}
.services-decor--heart{left:6%;top:18%;width:4.2%}
.services-decor--flower-pink{left:47%;bottom:13%;width:3.5%}
.services-decor--flower-lavender{right:4%;bottom:15%;width:3.2%}
.services-decor--sparkle-orange{left:54%;top:16%;width:2.3%}
.services-decor--sparkle-purple{right:4%;top:15%;width:2.1%}
.services-decor--swirl{left:5%;bottom:14%;width:5.5%}
.services-content{margin-top:52px}
.service-tabs{
  width:min(1280px,100%);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0;
  padding:0;
  border:1px solid rgba(232,94,124,.25);
  border-radius:26px;
  background:rgba(255,249,247,.4);
  box-shadow:none;
  overflow:hidden;
}
.service-tabs button{
  position:relative;
  min-height:92px;
  gap:13px;
  padding:10px 18px;
  border:0;
  border-right:1px solid rgba(232,94,124,.2);
  border-radius:0;
  background:transparent;
  font:700 clamp(15px,1.05vw,20px) var(--font-signature-display);
}
.service-tabs button:last-child{border-right:0}
.service-tabs button:not(.is-active):hover{
  background:rgba(232,94,124,.045);
}
.service-tabs button.is-active{
  border-color:transparent;
  background:url("assets/services/shared/services_web_tab_active_paper_v3.webp") center/100% 100% no-repeat;
  color:#fff;
  box-shadow:none;
}
.service-tabs button.is-active:hover{
  background:url("assets/services/shared/services_web_tab_active_paper_v3.webp") center/100% 100% no-repeat;
}
.service-panel{margin-top:38px;min-height:0}
.signature-layout{display:block}
.signature-hero-row{display:grid;grid-template-columns:1fr 1.05fr;gap:26px;align-items:stretch}
.signature-intro{
  position:relative;
  display:grid;
  grid-template-columns:42% 1fr;
  align-items:center;
  min-height:390px;
  padding:22px 18px 18px;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.signature-cat{position:relative;z-index:1;width:100%;max-height:330px;object-fit:contain}
.signature-cat--mobile{display:none}
.signature-copy{position:relative;z-index:1;text-align:center}
.signature-wordmark{width:100%;max-width:470px;max-height:165px;margin:auto}
.signature-ribbon{display:block;margin:4px auto 16px;padding:10px 18px;color:#fff;background:linear-gradient(90deg,#f19ab0,#e85e7c,#f19ab0);font-size:15px;clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%)}
.signature-copy p{margin:0;color:var(--ink);font-size:18px;font-weight:700}
.signature-doodle{position:absolute;object-fit:contain;pointer-events:none}
.signature-doodle--heart{left:3%;top:22%;width:52px}
.signature-doodle--crown{right:18%;top:14%;width:74px}
.signature-doodle--sparkle{right:3%;top:32%;width:35px}
.service-card{
  position:relative;
  grid-template-columns:minmax(0,1fr) minmax(180px,42%);
  gap:20px;
  min-height:252px;
  padding:28px;
  border:1px solid rgba(232,94,124,.22);
  border-radius:28px;
  background:rgba(255,249,247,.55);
  box-shadow:none;
}
.service-card:nth-child(3n+2){background:rgba(255,245,235,.62)}
.service-card:nth-child(3n){background:rgba(246,239,255,.58)}
.service-card-copy{position:relative;min-width:0}
.service-icon{width:56px!important;height:56px!important;margin:0 0 18px;border:1px solid rgba(232,94,124,.22);border-radius:50%!important;background:rgba(255,255,255,.7);object-fit:contain!important;padding:8px}
.service-card h3{margin:0 0 12px;font:700 clamp(19px,1.45vw,27px)/1.2 var(--font-signature-display);color:#3f2c27}
.service-card p{font-size:15px;line-height:1.62;color:#67524a}
.service-card .service-photo-wrap{position:relative;align-self:stretch;min-height:190px;padding:9px;border-radius:20px;background:rgba(255,255,255,.76);transform:rotate(1.2deg)}
.service-card .service-photo-wrap>img:first-child{width:100%;height:100%;min-height:172px;border-radius:15px;object-fit:cover}
.service-meta{align-items:center;margin-top:20px}
.service-duration{order:2;color:#4f55a7!important;font-size:13px!important;font-weight:800}
.service-price{justify-content:flex-start;gap:9px}
.service-price strong{font-size:clamp(20px,1.45vw,28px)}
.service-price del{font-size:12px}
.price-stack{display:grid;gap:4px}
.sale-badge{padding:7px 10px;border:1px dashed var(--pink);border-radius:11px;background:#fff0f3;font-size:12px}
.service-card--featured{min-height:390px;padding:34px 30px;background:rgba(255,244,245,.62)}
.service-card--featured .service-card-copy{padding-top:66px}
.service-card--featured .service-photo-wrap{min-height:280px}
.service-card--featured .service-photo-wrap>img:first-child{min-height:260px}
.featured-badge{position:absolute;left:25px;top:22px;z-index:2;display:grid;place-items:center;width:88px;height:88px;padding:8px;border:3px double #f29ab0;border-radius:50%;background:#fff8f7;text-align:center;font-size:10px;font-weight:900;line-height:1.35;color:#6a5149}
.featured-cat-sticker{position:absolute;left:-28px!important;bottom:-20px;width:82px!important;height:82px!important;min-height:0!important;object-fit:contain!important}
.signature-grid--top{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px}
.signature-lower{position:relative;display:grid;grid-template-columns:150px 1fr 1.2fr 180px;gap:18px;align-items:end;margin-top:26px}
.signature-lower .service-card{min-height:280px}
.signature-outside{width:100%;max-height:220px;object-fit:contain}
.signature-outside--drink{align-self:end}.signature-outside--bath-cat{align-self:end}
.service-note{
  display:grid;
  grid-template-columns:240px 1fr;
  align-items:center;
  gap:28px;
  margin-top:34px;
  padding:22px 34px;
  border:1px solid rgba(232,94,124,.18);
  border-radius:26px;
  background:rgba(255,249,247,.35);
}
.service-note-label{display:flex;align-items:center;justify-content:center;gap:10px;min-height:76px;padding:14px 22px;border:1px solid rgba(232,94,124,.22);border-radius:14px;background:rgba(248,216,223,.55);transform:rotate(-1deg)}
.service-note-label strong{font:700 25px var(--font-signature-display);color:#4f382e}
.service-note ul{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.service-note li{position:relative;padding-left:28px;font-size:14px;line-height:1.45}
.service-note li::before{content:"";position:absolute;top:0;left:0;width:22px;height:22px;background:url("assets/services/notes/note-heart.svg") center/contain no-repeat}
.service-note li[data-note-tone="1"]::before{background-image:url("assets/services/signature-shared/tab_icons/design_flower_inactive.webp");background-size:188% auto}
.service-note li[data-note-tone="2"]::before{background-image:url("assets/services/notes/note-sparkle.svg")}

/* Nail Care and shared service template */
.shared-service-title{
  display:grid;
  justify-items:center;
  gap:8px;
  width:min(820px,100%);
  margin:0 auto 28px;
  padding:28px 38px;
  border:1px solid rgba(232,94,124,.24);
  border-radius:24px;
  background:rgba(255,249,247,.42);
  text-align:center;
}
.shared-service-kicker{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--pink)}
.shared-service-title h2{margin:0;font:700 clamp(42px,4vw,66px)/1 var(--font-signature-display);letter-spacing:.06em;color:#df617a}
.shared-service-title p{max-width:650px;margin:5px 0 0;font-size:17px;line-height:1.6;color:#5d463d}
.shared-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:0}
.shared-service-grid .service-card{min-height:228px}
.nail-care-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.nail-care-card{grid-template-columns:minmax(0,1fr) 190px;min-height:230px;padding:24px 24px 24px 30px}
.nail-care-card .service-card-copy{display:flex;flex-direction:column;justify-content:center}
.nail-care-card h3{font-size:24px}
.nail-care-card p{max-width:420px}
.nail-care-card .service-photo-wrap{min-height:176px}
.nail-care-card .service-photo-wrap>img:first-child{min-height:158px}
.nail-care-card .service-meta{display:grid;grid-template-columns:auto 1fr;align-items:center}
.nail-care-card .service-duration{display:none}
.nail-care-card .service-price{display:grid;grid-template-columns:auto 1fr;align-items:center;justify-content:start}
.nail-care-card .price-stack{justify-items:start}
.shared-service-grid:not(.nail-care-grid) .service-card:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 9px);justify-self:center}

/* Gallery */
.gallery-section{padding:0 0 78px}
.gallery-shell{padding:56px 38px 60px;border:1px solid rgba(232,94,124,.28);border-radius:34px;background:rgba(255,249,247,.26);box-shadow:none}
.gallery-intro{font-size:18px;color:#5b3f35}
.gallery-filters{gap:22px;margin:36px 0 42px}
.gallery-filters button{
  min-width:190px;
  min-height:78px;
  padding:0 28px;
  border:0;
  border-radius:999px;
  background:url("assets/gallery/ui_shells/gallery_tab_disabled_LOCKED.webp") center/100% 100% no-repeat;
  font:700 20px var(--font-signature-display);
  color:#6a4133;
}
.gallery-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.gallery-tile{display:block;width:100%;aspect-ratio:4/3;padding:7px;border:1px solid rgba(232,94,124,.22);border-radius:20px;background:rgba(255,249,247,.7);box-shadow:none;cursor:pointer}
.gallery-tile img{border-radius:14px}
.gallery-more-wrap{margin-top:50px}
.gallery-more{
  min-width:360px;
  min-height:82px;
  border:0;
  background:url("assets/gallery/ui_shells/gallery_button_xem_them_shell_LOCKED.webp") center/100% 100% no-repeat;
  box-shadow:none;
  font:700 28px var(--font-signature-display);
}
.gallery-more-wrap p{font-size:17px;color:#6a4133}
.gallery-lightbox-panel{width:min(1180px,100%);height:min(960px,calc(100dvh - 32px));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;padding:26px 82px 24px;background:#fff9f7}
.lightbox-close{position:absolute;right:22px;top:20px;z-index:3}
.lightbox-nav{position:absolute;top:50%;z-index:2;width:56px;height:72px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.85);font-size:42px;cursor:pointer;transform:translateY(-50%)}
.lightbox-nav--prev{left:22px}.lightbox-nav--next{right:22px}
.lightbox-figure{min-width:0;min-height:0;width:100%;height:100%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.lightbox-figure img{display:block;width:auto;height:auto;max-width:100%;max-height:min(820px,calc(100% - 34px));border-radius:24px;object-fit:contain}
.lightbox-figure figcaption{font:700 17px var(--font-signature-display);text-align:center}

/* About */
.about-section{padding:82px 0}
.about-grid{grid-template-columns:1.02fr 1.14fr .8fr;gap:22px;grid-template-areas:"intro main story" "detail note story" "info info info" "journey journey journey"}
.paper-card,.about-photo{border-color:rgba(232,94,124,.22);background:rgba(255,249,247,.46);box-shadow:none}
.about-intro{padding:42px 34px;background:transparent;border:0;box-shadow:none;overflow:visible}
.section-label{padding:12px 24px;border-color:rgba(232,94,124,.3);background:rgba(255,249,247,.48);font-size:18px;transform:rotate(-2deg)}
.about-intro h2{margin:30px 0 18px;font:700 clamp(52px,4.2vw,78px)/1.2 var(--font-signature-display);color:#3f241d}
.about-intro p{max-width:610px;font-size:20px;line-height:1.8;text-align:center;color:#5b3f35}
.about-bow-divider{width:64px;margin:4px auto 18px}
.about-tape{left:-20px;right:auto;top:-18px;width:112px;transform:rotate(-12deg)}
.about-photo--main{min-height:580px;padding:16px;border-radius:42px;transform:rotate(-1deg)}
.about-photo--main img,.about-photo--detail img{border-radius:28px}
.about-photo--detail{min-height:330px;padding:12px;border-radius:34px}
.about-story{padding:40px 34px}
.story-pill{width:100%;justify-content:center;padding:14px 18px;font-size:20px}
.about-story p{font-size:18px;line-height:1.9}
.about-note{position:relative;padding:38px 34px;background:rgba(241,232,250,.58)}
.about-note strong{font-size:26px}.about-note p{font-size:17px;line-height:1.8}
.about-info-rail{padding:28px 12px;border-radius:30px;background:rgba(255,249,247,.36)}
.about-info-rail article{grid-template-columns:80px 1fr;padding:14px 40px}
.about-info-rail img{width:64px;height:64px}.about-info-rail span{font-size:14px}.about-info-rail strong{font-size:28px}.about-info-rail p{font-size:13px}
.about-journey{position:relative;padding:34px 34px 28px;border-radius:32px;background:rgba(255,249,247,.32)}
.about-journey>h3{margin:0 0 25px;font:700 28px var(--font-signature-display)}
.about-journey>div{grid-template-columns:repeat(4,1fr);gap:10px}
.about-journey article{grid-template-columns:54px 108px 1fr;min-height:165px;padding:18px 16px}
.about-journey b{width:46px;height:46px;font-size:18px}.about-journey img{width:92px;height:92px}.about-journey h4{font-size:18px}.about-journey p{font-size:13px;line-height:1.5}
.about-floating{position:absolute;z-index:-1;pointer-events:none;object-fit:contain}
.about-floating--flower-pink{left:26%;top:4%;width:84px}
.about-floating--flower-lavender{right:3%;bottom:8%;width:90px}
.about-floating--sparkle{left:2%;top:24%;width:32px}
.about-floating--tape{right:31%;top:2%;width:120px;transform:rotate(8deg)}

/* Reviews */
.reviews-section{position:relative;padding:0;overflow:visible}
.about-reviews-transition{position:absolute;z-index:2;top:0;left:0;display:block;width:100%;height:clamp(20px,4.167vw,80px);background:url("assets/about/transition/about-reviews-torn-paper-wave-web-2172-v7-cropped.webp") center/100% 100% no-repeat;filter:none;opacity:.9;pointer-events:none}
.reviews-inner{width:min(1600px,calc(100% - 64px));margin-inline:auto;padding:clamp(88px,7.292vw,140px) 0 70px}
.reviews-header{max-width:900px;margin-inline:auto;text-align:center}
.reviews-subtitle{max-width:760px;margin:0 auto;font-size:clamp(18px,1.25vw,22px);font-weight:500;line-height:1.6}
.reviews-header-decor{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;color:var(--pink)}
.reviews-header-decor__line{width:60px;height:10px;background:var(--pink);opacity:.78;-webkit-mask-image:var(--highlight-wave-mask);mask-image:var(--highlight-wave-mask);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:28px 10px;mask-size:28px 10px}
.reviews-header-decor__heart{width:30px;height:25px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(214,101,130,.12));transform:rotate(-2deg)}
.reviews-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1380px;margin:46px auto 0;padding:0;border:0}
.reviews-stat{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:18px 38px;border-right:1px dashed rgba(232,94,124,.3)}
.reviews-stat:last-child{border-right:0}
.reviews-stat__icon{width:min(64px,100%);height:auto}
.reviews-stat__value{display:block;font:800 clamp(22px,1.5vw,26px)/1 var(--font-signature-display);white-space:nowrap}
.reviews-stat__value small{font-size:.55em}
.reviews-stat__label{display:block;margin-top:8px;font-size:14px;font-weight:600;line-height:1.4;color:#6f5651}
.reviews-stat__nowrap{white-space:nowrap}
.reviews-kicker{display:flex;align-items:center;justify-content:center;gap:12px;margin:58px auto 30px;font:800 23px/1.15 var(--font-signature-display)}
.reviews-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.review-card{min-height:330px;padding:28px 28px 25px;border:1px solid rgba(129,57,35,.16);border-radius:24px;background:rgba(255,253,251,.5);box-shadow:none}
.review-card__quote{width:48px!important;height:48px!important;margin-bottom:20px;object-fit:contain}
.review-card__text{margin:0;font-size:17px;font-weight:500;line-height:1.62;color:#4f2f2e}
.review-card__rating{display:flex;gap:5px;margin-top:auto;padding-top:24px}
.review-card__rating img{width:20px!important;height:20px!important}
.review-card__author{margin:16px 0 0;font-size:15px;font-weight:700;color:#6f5651}
.review-card__author small{display:none;margin-top:4px;font-size:11px;font-weight:500;color:var(--muted)}
.reviews-bottom{display:flex;align-items:center;justify-content:center;gap:20px;max-width:1120px;margin:58px auto 0}
.reviews-bottom__thread{flex:1;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C31 2 55 15 88 8 S145 3 178 9 S216 13 238 7' fill='none' stroke='%23ef91ab' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M8 13 C39 8 64 17 99 11 S154 7 190 11 S220 12 234 10' fill='none' stroke='%23f5b8c8' stroke-width='.9' stroke-linecap='round' opacity='.76'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.82;filter:drop-shadow(0 1px 0 rgba(255,255,255,.72))}
.reviews-bottom__thread:last-child{transform:scaleX(-1)}
.reviews-bottom__flower{width:32px;transform-origin:50% 50%;animation:reviews-divider-flower-turn 28s linear infinite;will-change:transform}
@keyframes reviews-divider-flower-turn{to{transform:rotate(360deg)}}

/* Booking CTA + FAQ */
.booking-faq-section{padding:70px 0 64px}
.booking-faq-grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;gap:clamp(38px,4vw,64px)}
.booking-cta{align-self:auto;width:min(100%,760px);max-width:760px;padding:28px clamp(54px,5vw,82px) 34px}
.booking-eyebrow{width:min(260px,100%);justify-content:center;padding:14px 32px;border-color:#e05a78;font-size:18px}
.booking-cta h2{margin:28px 0 18px;font:700 clamp(54px,4vw,76px)/.98 var(--font-signature-display)}
.booking-cta>p{max-width:590px;font-size:20px;line-height:1.5;color:#5b4037}
.booking-main-cta{width:min(440px,100%);min-height:0;margin-top:30px;border-radius:18px;background:#e05a78;font-size:27px;box-shadow:none}
.booking-heart,.booking-sparkle,.booking-flower,.booking-loop{position:absolute;object-fit:contain;pointer-events:none}
.booking-heart{left:-12%;top:0;width:64px}.booking-sparkle{right:-8%;top:4%;width:52px}.booking-flower{right:-18%;bottom:4%;width:72px}
.booking-loop{left:-20%;bottom:-5%;width:clamp(180px,22vw,360px)}
.faq-layout{display:block;width:min(100%,980px);margin:0}
.faq-heading{padding:0 0 22px;text-align:center}.faq-heading h3{margin:0;font:700 46px/1.05 var(--font-signature-display)}.faq-heading img{width:200px;height:auto;margin:8px auto}.faq-heading p{margin:0;font-size:16px;line-height:1.5;color:#5d463d}
.faq-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:12px}
.faq-list article{border-color:#f3d2d2;border-radius:16px;background:rgba(255,249,247,.3)}
.faq-list button{min-height:76px;padding:0 26px;font-size:18px}.faq-list button span{font-size:32px}
.faq-answer{padding:0 30px 24px}.faq-answer p{font-size:15px}

@media(max-width:1500px){
  :root{--content:1380px;--header:96px}
  .brand{grid-template-columns:auto 54px}.brand-mark{font-size:38px}.brand img{width:52px;height:52px}.brand-sub{font-size:12px}
  .desktop-nav a{padding-inline:9px;font-size:14px}.desktop-nav img{width:25px;height:25px}.header-book{padding-inline:20px;font-size:14px}
  .home-grid{grid-template-columns:minmax(0,.9fr) minmax(300px,.6fr) minmax(460px,1.28fr)}
  .home-art{min-height:570px}.home-actions>*{min-width:220px}
  .signature-lower{grid-template-columns:110px 1fr 1.16fr 135px}
  .service-note{grid-template-columns:200px 1fr}
  .gallery-filters button{min-width:165px}
  .about-grid{grid-template-columns:1fr 1.05fr .82fr}
}
@media(max-width:1180px){
  :root{--content:1080px}
  .home-grid{height:auto;grid-template-columns:1fr 1fr;grid-template-areas:"copy art" "quote art" "schedule schedule";grid-template-rows:auto auto auto}
  .home-art{min-height:560px}.home-art img{transform:none}.home-quote,.today-card{height:auto;min-height:auto}.today-card{transform:none}.benefit-grid{margin-top:44px}
  .service-tabs button{min-height:78px;padding-inline:9px}
  .signature-hero-row{grid-template-columns:1fr}.signature-intro{min-height:330px}
  .signature-grid--top{grid-template-columns:repeat(2,1fr)}
  .signature-lower{grid-template-columns:1fr 1fr}.signature-outside{display:none}
  .nail-care-card{grid-template-columns:1fr 150px}.nail-care-card h3{font-size:21px}
  .gallery-filters{gap:10px}.gallery-filters button{min-width:145px}
  .about-grid{grid-template-columns:1fr 1fr;grid-template-areas:"intro main" "story detail" "note note" "info info" "journey journey"}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}.reviews-stats{grid-template-columns:repeat(2,1fr);max-width:760px}.reviews-stat:nth-child(2){border-right:0}.reviews-stat:nth-child(-n+2){border-bottom:1px dashed rgba(232,94,124,.3)}
}
@media(max-width:900px){
  :root{--header:76px}
  .paper-width{width:min(100% - 32px,760px)}
  .site-header .brand{grid-template-columns:auto 48px}.site-header .brand-mark{font-size:34px}.site-header .brand img{width:46px;height:46px}.site-header .brand-sub{font-size:10px}
  .home-section{padding-top:22px}
  .home-grid{display:flex;height:auto;flex-direction:column}
  .home-copy{order:1;width:100%;padding-top:28px}.home-art{order:2;width:100%;min-height:0;place-items:center}.home-art img{width:100%;max-height:520px;object-position:center bottom;transform:none}.home-quote{order:3;width:100%;height:auto}.today-card{order:4;width:100%;height:auto}
  .home-doodle{display:none}
  .services-hero{aspect-ratio:1024/560}
  .services-content{margin-top:30px}
  .service-tabs{display:flex;overflow-x:auto;border-radius:20px}
  .service-tabs button{flex:0 0 168px;min-height:72px}
  .service-panel{margin-top:26px}
  .nail-care-grid,.shared-service-grid{grid-template-columns:1fr}
  .shared-service-grid:not(.nail-care-grid) .service-card:last-child:nth-child(odd){grid-column:auto;width:100%}
  .service-note{grid-template-columns:180px 1fr;padding:18px;gap:16px}
  .gallery-shell{padding:38px 22px}.gallery-grid{grid-template-columns:repeat(3,1fr)}.gallery-filters button{min-width:132px;min-height:62px;font-size:16px}
  .about-floating{display:none}
  .booking-faq-grid{grid-template-columns:1fr;gap:48px}
  .booking-cta{width:min(100%,760px);max-width:760px;margin-inline:auto;padding-inline:clamp(54px,9vw,96px)}
  .faq-layout{width:min(100%,980px)}.faq-heading{text-align:center}.faq-heading img{margin-inline:auto}.faq-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}
@media(max-width:600px){
  .paper-width{width:min(100% - 28px,480px)}
  .home-copy h1{font-size:clamp(41px,12vw,58px)}
  .taped-kicker{margin-bottom:25px;padding:11px 16px;font-size:13px}
  .home-lede{max-width:none;margin-top:17px;font-size:15.5px;line-height:1.6}
  .home-actions{gap:10px;margin-top:20px}.home-actions>*{min-width:0;min-height:54px;font-size:15px}
  .home-quote{min-height:0;padding:22px;font-size:13px}
  .slot-grid button{min-height:74px}
  .benefit-grid{margin-top:30px;min-height:0}.benefit-grid article{padding:18px 8px}.benefit-grid img{width:62px;height:56px}.benefit-grid h3{font-size:13px}.benefit-grid p{font-size:9px}
  .services-section{padding:52px 0 70px}.services-hero{aspect-ratio:1024/700}
  .services-decor{display:none}
  .service-tabs button{flex-basis:142px;font-size:14px}
  .signature-intro{grid-template-columns:42% 1fr;min-height:260px;padding-inline:5px}.signature-cat--web{display:none}.signature-cat--mobile{display:block}.signature-wordmark{max-height:100px}.signature-ribbon{font-size:9px;padding:7px}.signature-copy p{font-size:11px}
  .signature-doodle--crown{width:45px}.signature-doodle--heart{width:34px}
  .signature-grid--top,.signature-lower{grid-template-columns:1fr}
  .service-card,.nail-care-card{grid-template-columns:minmax(0,1fr) 42%;min-height:188px;padding:17px;gap:12px}
  .service-card h3,.nail-care-card h3{font-size:17px}.service-card p{font-size:11.5px;line-height:1.45}
  .service-card .service-photo-wrap,.nail-care-card .service-photo-wrap{min-height:142px;padding:6px}.service-card .service-photo-wrap>img:first-child,.nail-care-card .service-photo-wrap>img:first-child{min-height:130px}
  .service-icon{width:42px!important;height:42px!important;margin-bottom:10px}.service-meta{margin-top:10px}.service-price strong{font-size:17px}.sale-badge{padding:4px 6px;font-size:9px}
  .service-card--featured{min-height:230px}.service-card--featured .service-card-copy{padding-top:44px}.service-card--featured .service-photo-wrap{min-height:175px}.service-card--featured .service-photo-wrap>img:first-child{min-height:163px}.featured-badge{left:13px;top:12px;width:62px;height:62px;font-size:7px}
  .shared-service-title{padding:22px 18px}.shared-service-title h2{font-size:36px}.shared-service-title p{font-size:12px}
  .service-note{grid-template-columns:1fr;margin-top:22px;padding:14px}.service-note-label{min-height:54px;padding:8px}.service-note-label strong{font-size:17px}.service-note ul{grid-column:1/-1;gap:7px}.service-note li{font-size:11px}
  .gallery-section{padding:0 0 52px}.gallery-shell{padding:28px 12px;border-radius:28px}.gallery-intro{font-size:12px}
  .gallery-filters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:24px 3px}.gallery-filters button{flex:0 0 125px;min-height:58px;padding-inline:12px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px}.gallery-tile{padding:5px;border-radius:16px}.gallery-more{min-width:240px;min-height:64px;font-size:21px}.gallery-more-wrap{margin-top:30px}.gallery-more-wrap p{font-size:12px}
  .gallery-lightbox-panel{height:calc(100dvh - 20px);grid-template-columns:minmax(0,1fr);padding:58px 10px 18px}.lightbox-close{right:12px;top:12px}.lightbox-nav{width:38px;height:54px}.lightbox-nav--prev{left:5px}.lightbox-nav--next{right:5px}
  .about-section{padding:48px 0}.about-grid{display:flex}.about-intro{padding:28px 18px}.about-intro h2{font-size:46px}.about-intro p{font-size:15px}.about-photo--main{min-height:340px}.about-story{padding:28px 23px}.about-story p{font-size:14px}.about-photo--detail{min-height:250px}.about-note{padding:26px 22px}
  .about-info-rail{grid-template-columns:repeat(3,1fr);padding:12px 2px}.about-info-rail article{display:flex;flex-direction:column;padding:8px 5px;text-align:center}.about-info-rail img{width:42px;height:42px}.about-info-rail span{font-size:8px}.about-info-rail strong{font-size:13px}.about-info-rail p{font-size:7.5px}.about-journey{padding:22px 12px}.about-journey>div{grid-template-columns:repeat(2,1fr)}.about-journey article{grid-template-columns:34px 58px 1fr;min-height:125px;padding:8px 4px;border-right:0}.about-journey b{width:30px;height:30px;font-size:11px}.about-journey img{width:54px;height:54px}.about-journey h4{font-size:12px}.about-journey p{font-size:9px}
  .reviews-inner{width:min(100% - 28px,620px);padding:58px 0 44px}.reviews-subtitle{font-size:15px;line-height:1.5}.reviews-stats{grid-template-columns:repeat(2,1fr);margin-top:36px}.reviews-stat{padding:16px 12px;gap:10px}.reviews-stat__icon{width:45px}.reviews-stat__value{font-size:20px}.reviews-stat__label{font-size:12px}.reviews-kicker{margin:42px auto 20px;font-size:17px}.reviews-grid{grid-template-columns:1fr;gap:14px}.review-card{min-height:0;padding:19px 18px}.review-card__text{font-size:14px}.review-card__quote{width:38px!important}.reviews-bottom{margin-top:36px}
  .booking-faq-section{padding:52px 0 46px}.booking-faq-grid{gap:38px}.booking-cta{width:100%;padding:22px 18px 28px}.booking-eyebrow{padding:10px 18px;font-size:14px}.booking-cta h2{font-size:clamp(48px,13vw,66px)}.booking-cta>p{font-size:16px}.booking-main-cta{min-height:68px;margin-top:26px;font-size:21px}.booking-heart{left:0;width:40px}.booking-sparkle{right:0;width:32px}.booking-flower{right:-3%;bottom:0;width:46px}.booking-loop{left:-12%;bottom:5%;width:160px}
  .faq-layout{margin-top:0}.faq-heading h3{font-size:38px}.faq-heading img{width:180px}.faq-heading p{font-size:14px}.faq-list button{min-height:62px;padding:0 18px;font-size:14px}.faq-answer{padding:0 18px 18px}.faq-answer p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .gallery-tile img,.service-card,.lightbox-nav{transition:none}
  .reviews-bottom__flower{animation:none}
}

.button-primary > img,
.button-secondary > img {
  width: 26px;
  height: 26px;
  flex: none;
  object-fit: contain;
}

.header-book > img {
  width: 23px;
  height: 23px;
}

/* Reuse the compact floating navigation language from the original website. */
:root{--header:104px}
.site-header{
  padding:22px 0 0;
  border:0;
  background:transparent;
  backdrop-filter:none;
  pointer-events:none;
}
.mobile-drawer{pointer-events:auto}
.header-inner{
  width:min(var(--content),calc(100% - clamp(40px,6vw,112px)));
  min-height:76px;
  padding:12px 16px 12px 20px;
  gap:12px;
  border:1.5px solid rgba(224,79,116,.3);
  border-radius:999px;
  background:rgba(255,253,251,.78);
  box-shadow:0 12px 34px -22px rgba(117,62,76,.52);
  backdrop-filter:blur(18px) saturate(1.2);
  pointer-events:auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  color:var(--pink);
}
.site-header .brand img.brand-logo{width:82px;height:56px;flex:none;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-mark{font-size:23px;letter-spacing:-.02em;color:#402a24;text-shadow:none}
.brand-sub{margin-top:0;font-size:14.5px;font-weight:600;line-height:1.28;letter-spacing:.045em;white-space:nowrap;color:var(--pink-strong)}
.desktop-nav{justify-content:flex-end;gap:2px;margin-left:auto}
.desktop-nav a{
  min-height:44px;
  padding:10px 12px;
  border-radius:999px;
  color:#624f47;
  font-family:Quicksand,sans-serif;
  font-size:16px;
  font-weight:600;
  white-space:nowrap;
}
.desktop-nav a:hover,.desktop-nav a.is-active{color:var(--pink-strong);background:#fff7f8}
.desktop-nav a.is-active::after{display:none}
.header-book{
  min-width:126px;
  min-height:52px;
  padding-inline:23px;
  border-radius:999px;
  font-size:15px;
  white-space:nowrap;
}

@media(max-width:1180px){
  .header-inner{gap:8px;padding-left:14px}
  .site-header .brand img.brand-logo{width:64px;height:44px}.brand-sub{font-size:11.5px}
  .desktop-nav a{padding-inline:8px;font-size:13.5px}
  .header-book{min-width:104px;padding-inline:16px;font-size:13px}
}
@media(max-width:900px){
  :root{--header:82px}
  .site-header{padding:10px 14px 6px}
  .header-inner{width:100%;min-height:60px;padding:7px 8px 7px 14px}
  .site-header .brand{display:flex;gap:8px}
  .site-header .brand img.brand-logo{width:72px;height:48px}
  .site-header .brand-mark{font-size:18px}
  .site-header .brand-sub{margin-top:0;font-size:11.5px}
  .menu-button{display:grid;place-items:center;width:44px;height:44px;border-radius:999px}
  /* The compact menu slides in from the left edge, next to its trigger. */
  .drawer-panel{
    left:0;
    right:auto;
    top:0;
    bottom:0;
    width:min(340px,86vw);
    overflow-y:auto;
    padding:20px 16px 30px;
    border-radius:0 28px 28px 0;
    background:var(--paper-2);
    box-shadow:20px 0 60px -24px rgba(79,56,46,.5);
    animation:drawer-left .28s ease both;
  }
  .drawer-head{margin-bottom:8px;padding-inline:4px}.drawer-head strong{color:var(--pink-strong);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
  .drawer-panel>a{min-height:56px;padding-inline:20px;border-radius:20px;background:#fff}
  /* Fixed 4:1 size so the paper shell never stretches with the drawer width. */
  .drawer-book{align-self:center;width:240px;aspect-ratio:4/1;margin-top:8px}
}
@keyframes drawer-left{from{transform:translateX(-100%)}to{transform:none}}
@media(max-width:420px){
  .site-header{padding-inline:10px}
  .site-header .brand img.brand-logo{width:66px;height:44px}
  .site-header .brand-sub{font-size:10px;letter-spacing:.045em}
}

/* Services starts directly at the locked six-tab bar. */
.services-section {
  padding: 48px 0 104px;
}

.services-content {
  margin-top: 0;
}

.signature-mobile-title {
  display: none;
}

/* Only keyboard focus rings the card: a mouse click on its booking surface or photo leaves no outline. */
.service-card[data-card-variant="signature"]:has(:focus-visible:not(.is-pointer-focus-return)) {
  outline: 3px solid var(--pink);
  outline-offset: 4px;
}

@media (max-width: 1180px) {
  .service-panel {
    margin-top: 0;
  }

  .signature-layout {
    padding: 24px;
    border: 1px solid rgba(232, 94, 124, .2);
    border-radius: 28px;
    background: rgba(255, 249, 247, .3);
  }
}

@media (max-width: 600px) {
  .services-section {
    padding: 30px 0 70px;
  }

  .signature-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 10px 20px;
    border-radius: 24px;
  }

  .signature-hero-row {
    grid-column: 1 / -1;
    gap: 14px;
  }

  .signature-intro {
    grid-template-columns: 35% minmax(0, 1fr);
    min-height: 230px;
    padding: 14px 6px 8px;
  }

  .signature-wordmark {
    display: none;
  }

  .signature-mobile-title {
    display: block;
    margin: 0 0 8px;
    color: #f2789b;
    font: 800 clamp(34px, 10.5vw, 48px) / .95 var(--font-signature-display);
    letter-spacing: .035em;
    text-shadow: 0 2px 0 #fff, 0 3px 0 rgba(129, 57, 35, .16);
  }

  .signature-grid--top,
  .signature-lower {
    display: contents;
  }

  .signature-grid--top .service-card,
  .signature-lower .service-card {
    grid-template-columns: minmax(0, 1fr) 40%;
  gap: 8px;
  min-height: 174px;
  padding: 12px;
  border-radius: 18px;
}

.signature-grid--top .service-card h3,
.signature-lower .service-card h3 {
  margin-bottom: 7px;
  font-size: 14px;
}

.signature-grid--top .service-card p,
.signature-lower .service-card p {
  font-size: 9.5px;
  line-height: 1.4;
}

.signature-grid--top .service-card .service-photo-wrap,
.signature-lower .service-card .service-photo-wrap {
  min-height: 104px;
  padding: 5px;
}

.signature-grid--top .service-card .service-photo-wrap > img:first-child,
.signature-lower .service-card .service-photo-wrap > img:first-child {
  min-height: 94px;
}

.signature-grid--top .service-meta,
.signature-lower .service-meta {
  gap: 5px;
  margin-top: 8px;
}

.signature-lower .service-card:last-of-type {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 44%);
  min-height: 164px;
}

.signature-layout > .service-note {
  grid-column: 1 / -1;
}
}

/* Primary pink actions share Gallery paper through pill and generated rectangular shells. */
:root {
  --button-shell-pill: url("assets/gallery/ui_shells/gallery_tab_enabled_LOCKED.webp");
  --button-shell-rect: url("assets/gallery/ui_shells/primary_button_rounded_rect_paper_v1.webp");
  --button-shell-contact: url("assets/gallery/ui_shells/contact_button_rounded_rect_paper_189x48_v2.webp");
}

.button-primary {
  --button-shell-shape: var(--button-shell-rect);
  --button-shell-size: 103.5% 114.5%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  color: #fff;
  box-shadow: none;
}

.button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  border: 0;
  border-radius: inherit;
  background-color: transparent;
  background-image: var(--button-shell-shape);
  background-position: center;
  background-size: var(--button-shell-size);
  background-repeat: no-repeat;
  pointer-events: none;
}

.button-primary:hover {
  color: #fff;
  filter: brightness(1.025) saturate(1.05);
  transform: translateY(-1px);
}

/* Pointer-closed overlays return focus without leaving a keyboard-only ring behind. !important because each
   control's own :focus-visible ring (the About photos, the service rows) is declared later at the same weight. */
.is-pointer-focus-return:focus-visible {
  outline: none !important;
}

/* Compact header action uses the shorter Gallery tab shell. */
.header-book.button-primary {
  --button-shell-shape: var(--button-shell-pill);
  --button-shell-size: 106.5% 117%;
  height: 52px;
  min-height: 52px;
  border-radius: 999px;
  background-image: none;
}

.header-book__label {
  position: relative;
  z-index: 1;
}

/* Home CTA keeps the rounded-rectangle geometry of its secondary neighbor. */
.home-actions > .button-primary,
.home-actions > .button-secondary {
  flex: 0 0 272px;
  width: 272px;
  min-width: 0;
  height: 68px;
  min-height: 68px;
  box-sizing: border-box;
  border-radius: 18px;
}

.home-actions .button-primary {
  --button-shell-shape: var(--button-shell-rect);
  border: 0;
  border-radius: 18px;
}

@media (max-width: 600px) {
  .home-actions > .button-primary,
  .home-actions > .button-secondary {
    flex: 1 1 0;
    width: 0;
    height: 56px;
    min-height: 56px;
    padding-inline: 10px;
  }
}

/* Wide actions preserve their existing geometry while sharing Gallery paper. */
.drawer-book.button-primary,
.lightbox-book.button-primary,
.booking-footer .button-primary,
.booking-result-actions .button-primary,
.booking-main-cta.button-primary {
  --button-shell-shape: var(--button-shell-rect);
  border: 0;
  border-radius: 18px;
}

/* Booking CTA stays close to the generated shell's native 4:1 proportions. Its nine-slice corners
   scale with it (about a third of its height), keeping the thick, smooth outline of the original. */
.booking-main-cta.button-primary {
  --shell-corner: 36px;
  width: min(440px, calc(100% - 32px));
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 1;
  padding-inline: 36px;
  font-size: clamp(24px, 2.2vw, 29px);
}

@media (max-width: 600px) {
  .booking-footer .button-primary {
    --button-shell-shape: var(--button-shell-rect);
    --button-shell-size: 103.5% 114.5%;
    flex: none;
    justify-self: end;
    width: 192px;
    min-width: 192px;
    height: 48px;
    min-height: 48px;
    padding-inline: 18px;
    border-radius: 16px;
  }

  .booking-main-cta.button-primary {
    --shell-corner: 28px;
    width: min(360px, 100%);
    aspect-ratio: 4 / 1;
    padding-inline: 24px;
    font-size: 22px;
  }
}

/* The story label is an outlined, non-interactive badge rather than a button shell. */
.story-pill {
  border: 1px solid #e05a78;
  border-radius: 999px;
  background: transparent;
  color: #b74061;
  box-shadow: none;
}
/* Preserve the dedicated Gallery CTA shell and match the locked layout geometry. */
.gallery-more {
  width: min(394px, 28%);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 394 / 93;
  background-color: transparent;
}

/* Gallery and booking active tabs share paper-rendering mechanics. */
.gallery-filters button.is-active,
.booking-categories button.is-active {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  color: #fff;
  box-shadow: none;
}

.gallery-filters button.is-active::before,
.booking-categories button.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  border: 0;
  border-radius: inherit;
  background-color: transparent;
  background-image: var(--button-shell-pill);
  background-position: center;
  background-size: 106.5% 117%;
  background-repeat: no-repeat;
  pointer-events: none;
}

@media (max-width: 600px) {
  .gallery-more {
    width: min(394px, 42%);
    font-size: clamp(15px, 4.2vw, 18px);
  }

}

/* Multi-pastel rebalance: pink remains primary, supporting surfaces rotate hues. */
:root {
  --pastel-rose: #fff0f4;
  --pastel-peach: #fff1e7;
  --pastel-yellow: #fff8e2;
  --pastel-mint: #eff8f3;
  --pastel-blue: #eef7fd;
  --pastel-lavender: #f4effc;
  --line: rgba(133, 120, 158, .22);
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
  background: var(--pastel-blue);
}

.taped-kicker {
  border-color: rgba(172, 148, 205, .28);
  background: linear-gradient(135deg, var(--pastel-lavender), rgba(255, 253, 248, .82));
}
.home-quote {
  border-color: rgba(141, 194, 220, .38);
  background: rgba(238, 247, 253, .76);
}
.today-card {
  border-color: rgba(231, 178, 139, .34);
  background: rgba(255, 241, 231, .72);
}
.slot-grid button:nth-child(3n + 1) { background: var(--pastel-rose); }
.slot-grid button:nth-child(3n + 2) { background: var(--pastel-blue); }
.slot-grid button:nth-child(3n) { background: var(--pastel-lavender); }

/* Restore the original V1 hero pinboard for today's live availability. */
.today-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 11px 10px 9px;
  border: 6px solid #fffcf9;
  border-radius: 28px;
  background: #faedf3;
  box-shadow: 0 22px 44px -30px rgba(43, 36, 64, .5);
  rotate: 0deg;
  transform-origin: center;
}
.today-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}
.today-head h2 {
  margin: 0;
  color: #2b2440;
  font: 700 15px/1.2 Quicksand, sans-serif;
}
.today-head time {
  color: #7a5ad0;
  font: 600 9.5px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .1em;
}
.slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-top: 3px;
}
.slot-grid button,
.slot-grid button:nth-child(3n + 1),
.slot-grid button:nth-child(3n + 2),
.slot-grid button:nth-child(3n) {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 50px;
  padding: 9px 4px 6px;
  border: 0;
  border-radius: 0;
  /* The paper is drawn by ::after (a wavy pencil edge like the Signature cards); the shadow follows that edge. */
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 5px 5px rgba(224, 136, 95, .2));
  isolation: isolate;
  color: #5c3a2d;
  text-align: center;
  rotate: var(--slot-tilt, 0deg);
}
/* A glossy ball pin pressed in at a slant (design-assets/pins/gen-pins.py): peach on a free time, lavender on a
   taken one. Each went in at its own angle, turning about its head so only the needle swings. */
.slot-grid button::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 17px;
  margin-left: -7px;
  background: url("assets/pins/pin-peach.svg") center / contain no-repeat;
  transform-origin: 44% 34%;
  rotate: -12deg;
}
.slot-grid button:nth-child(6n + 2)::before { rotate: 9deg; }
.slot-grid button:nth-child(6n + 3)::before { rotate: -4deg; }
.slot-grid button:nth-child(6n + 4)::before { rotate: 15deg; }
.slot-grid button:nth-child(6n + 5)::before { rotate: -17deg; }
.slot-grid button:nth-child(6n)::before { rotate: 5deg; }
/* The note's wavy paper (design-assets/notes/gen-home-notes.py), behind its text and under the pin. */
.slot-grid button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 6px solid transparent;
  border-image: url("assets/notes/note-peach.svg?v=3") 44 fill / 16px / 1px stretch;
}
.slot-grid button strong {
  color: #7d4b39;
  font: 600 10.5px/1 ui-monospace, Menlo, monospace;
}
.slot-grid button small {
  color: #5c3a2d;
  font: 700 12.5px/1.05 Quicksand, sans-serif;
  white-space: nowrap;
}
.slot-grid button:disabled {
  background: none;
  filter: drop-shadow(0 4px 5px rgba(43, 36, 64, .1));
  color: #6b6580;
  cursor: default;
}
.slot-grid button:disabled::before { background-image: url("assets/pins/pin-lavender.svg"); }
.slot-grid button:disabled::after { border-image-source: url("assets/notes/note-white.svg?v=3"); }
.slot-grid button:disabled strong { color: #78718d; }
.slot-grid button:disabled small {
  color: #6b6580;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.today-note {
  margin: 0;
  padding-top: 5px;
  border-top: 1px dashed rgba(122, 90, 208, .28);
  color: #5c566f;
  font-size: 11px;
  line-height: 1.35;
}
@media (max-width: 600px) {
  .today-card { height: auto; padding: 14px 12px 12px; rotate: .6deg; }
  .slot-grid button { min-height: 58px; }
  .today-note { font-size: 11px; }
}
.benefit-grid {
  border-color: rgba(149, 137, 170, .28);
  background: rgba(255, 253, 248, .62);
}
.benefit-grid article { border-right-color: rgba(149, 137, 170, .2); }
.benefit-grid article:nth-child(1) { background: var(--pastel-rose); }
.benefit-grid article:nth-child(2) { background: var(--pastel-blue); }
.benefit-grid article:nth-child(3) { background: var(--pastel-lavender); }
.benefit-grid article:nth-child(4) { background: var(--pastel-mint); }

.service-tabs {
  border-color: rgba(159, 142, 184, .24);
  background: rgba(244, 239, 252, .58);
}
.service-tabs button { border-right-color: rgba(159, 142, 184, .2); }
.service-tabs button:not(.is-active):hover { background: var(--pastel-blue); }
.service-card {
  border-color: rgba(149, 137, 170, .2);
}
.service-card:nth-child(4n + 1) { background: var(--pastel-blue); }
.service-card:nth-child(4n + 2) { background: var(--pastel-peach); }
.service-card:nth-child(4n + 3) { background: var(--pastel-lavender); }
.service-card:nth-child(4n) { background: var(--pastel-mint); }
.signature-grid--top .service-card--featured { background: var(--pastel-rose); }
.service-icon { border-color: rgba(149, 137, 170, .2); }
.service-note {
  border-color: rgba(125, 178, 154, .26);
  background: rgba(239, 248, 243, .72);
}
.service-note-label {
  border-color: rgba(172, 148, 205, .24);
  background: rgba(236, 226, 250, .72);
}
.shared-service-title {
  border-color: rgba(141, 194, 220, .3);
  background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-lavender));
}

.gallery-shell {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.gallery-content-panel {
  margin-top: 18px;
  padding: 34px 38px 44px;
  border: 1px solid rgba(159, 142, 184, .24);
  border-radius: 34px;
  background: linear-gradient(145deg, var(--pastel-blue), rgba(255, 248, 226, .72), var(--pastel-lavender));
}
.gallery-content-panel .gallery-filters { margin-top: 0; }
.gallery-tile:nth-child(4n + 1) { border-color: rgba(235, 151, 174, .3); background: var(--pastel-rose); }
.gallery-tile:nth-child(4n + 2) { border-color: rgba(164, 145, 198, .3); background: var(--pastel-lavender); }
.gallery-tile:nth-child(4n + 3) { border-color: rgba(125, 178, 154, .3); background: var(--pastel-mint); }
.gallery-tile:nth-child(4n) { border-color: rgba(231, 178, 139, .3); background: var(--pastel-peach); }

.section-label { border-color: rgba(218, 184, 107, .28); background: var(--pastel-yellow); }
.about-photo--main { border-color: rgba(141, 194, 220, .3); background: var(--pastel-blue); }
.about-story { border-color: rgba(231, 178, 139, .3); background: var(--pastel-peach); }
.about-photo--detail { border-color: rgba(125, 178, 154, .3); background: var(--pastel-mint); }
.about-note { border-color: rgba(164, 145, 198, .3); background: var(--pastel-lavender); }
.about-info-rail {
  border-color: rgba(141, 194, 220, .26);
  background: linear-gradient(90deg, var(--pastel-blue), var(--pastel-mint), var(--pastel-lavender));
}
.about-info-rail article { border-right-color: rgba(149, 137, 170, .2); }
.about-journey { border-color: rgba(218, 184, 107, .26); background: var(--pastel-yellow); }
.about-journey article { border-right-color: rgba(149, 137, 170, .2); }

.reviews-stat { border-right-color: rgba(149, 137, 170, .26); }
.review-card:nth-child(4n + 1) { border-color: rgba(235, 151, 174, .24); background: var(--pastel-rose); }
.review-card:nth-child(4n + 2) { border-color: rgba(141, 194, 220, .26); background: var(--pastel-blue); }
.review-card:nth-child(4n + 3) { border-color: rgba(164, 145, 198, .26); background: var(--pastel-lavender); }
.review-card:nth-child(4n) { border-color: rgba(125, 178, 154, .26); background: var(--pastel-mint); }

.faq-list article:nth-child(4n + 1) { border-color: rgba(235, 151, 174, .26); background: var(--pastel-rose); }
.faq-list article:nth-child(4n + 2) { border-color: rgba(141, 194, 220, .28); background: var(--pastel-blue); }
.faq-list article:nth-child(4n + 3) { border-color: rgba(164, 145, 198, .28); background: var(--pastel-lavender); }
.faq-list article:nth-child(4n) { border-color: rgba(125, 178, 154, .28); background: var(--pastel-mint); }
.faq-list article:nth-child(5) { border-color: rgba(218, 184, 107, .32); background: var(--pastel-yellow); }
.faq-list article[data-faq-tone="blue"] { border-color: rgba(141, 194, 220, .28); background: var(--pastel-blue); }
/* FAQ answers glide open and shut instead of popping: the 0fr -> 1fr grid row animates the answer's
   natural height, and visibility only flips after a close has finished, so a collapsed answer stays
   out of the tab order and away from screen readers. aria-expanded on the button is the only state. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .32s cubic-bezier(.22, .8, .25, 1), padding-bottom .32s cubic-bezier(.22, .8, .25, 1), visibility 0s linear .32s;
}
.faq-answer > p { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .2s ease; }
.faq-list h4:not(:has(> [aria-expanded="true"])) + .faq-answer { padding-bottom: 0; }
.faq-list h4:has(> [aria-expanded="true"]) + .faq-answer { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.faq-list h4:has(> [aria-expanded="true"]) + .faq-answer > p { opacity: 1; transition-delay: .06s; }
@media (prefers-reduced-motion: reduce) {
  .faq-answer, .faq-answer > p { transition: none; }
}
/* The toggle is a soft chevron drawn by two borders: pointing down while closed, flipped up once the answer opens. */
.faq-list button span {
  flex: none;
  width: 10px;
  height: 10px;
  margin: 0 5px 5px 0;
  border: solid currentColor;
  border-width: 0 2.5px 2.5px 0;
  border-bottom-right-radius: 2px;
  font-size: 0;
  transform: rotate(45deg);
  transition: transform .25s ease, margin .25s ease;
}
.faq-list button[aria-expanded="true"] span { margin: 5px 5px 0 0; transform: rotate(225deg); }

/* Original paw runner restored between HomeView and Services; its marks can be swapped later. */
.home-service-divider.nhu-paw-runner-shell {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(70px, 5.2vw, 86px);
  overflow: hidden;
  background: transparent;
}

.home-service-divider .nhu-paw-runner-viewport {
  position: relative;
  width: min(86%, 1120px);
  height: 34px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

@media (min-width: 601px) {
  .home-service-divider .nhu-paw-runner-viewport { transform: translateY(10px); }
}

.home-service-divider .nhu-paw-runner-long-line {
  position: absolute;
  top: 17px;
  right: 0;
  left: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(232, 94, 124, .28) 0 8px, transparent 8px 17px);
}

.home-service-divider .nhu-paw-runner-track {
  position: absolute;
  top: 3px;
  left: 0;
  display: flex;
  width: 200%;
  animation: mewMarch 32s linear infinite;
  will-change: transform;
}

.home-service-divider .nhu-paw-runner-group {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 50%;
  align-items: center;
  justify-items: center;
  padding-inline: 0;
}

.home-service-divider .nhu-paw-runner-mark {
  --paw-rest-angle: 0deg;
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(92, 70, 127, .14));
  transform-origin: 50% 78%;
  transform: rotate(var(--paw-rest-angle));
  animation: mewPawSway 2.8s ease-in-out infinite alternate;
  will-change: transform;
}

.home-service-divider .nhu-paw-runner-mark:nth-child(2n) { --paw-rest-angle: 9deg; width: 25px; height: 25px; animation-delay: -1.4s; }
.home-service-divider .nhu-paw-runner-mark:nth-child(3n) { --paw-rest-angle: -8deg; animation-delay: -.7s; }

@keyframes mewMarch {
  to { transform: translateX(-50%); }
}

@keyframes mewPawSway {
  from { transform: rotate(calc(var(--paw-rest-angle) - 5deg)); }
  to { transform: rotate(calc(var(--paw-rest-angle) + 5deg)); }
}

@media (max-width: 600px) {
  .home-service-divider.nhu-paw-runner-shell { height: 58px; }
  .home-service-divider .nhu-paw-runner-viewport { width: calc(100% - 32px); }
  /* Four paws per screen instead of six, so the trail reads sparser on phones. */
  .home-service-divider .nhu-paw-runner-group { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: 0; }
  .home-service-divider .nhu-paw-runner-mark:nth-child(n+5) { display: none; }
  .home-service-divider .nhu-paw-runner-mark { width: 24px; height: 24px; }
  .home-service-divider .nhu-paw-runner-mark:nth-child(2n) { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-service-divider .nhu-paw-runner-track,
  .home-service-divider .nhu-paw-runner-mark { animation: none; }
}

/* Shared service rows enter in a measured reading order when a different shared tab opens. */
@keyframes shared-service-row-enter {
  from { opacity: .18; transform: translate3d(24px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.shared-service-layout.is-entering .shared-service-row {
  animation: shared-service-row-enter 270ms cubic-bezier(.22, .72, .28, 1) both;
}

.shared-service-layout.is-entering .shared-service-row:nth-child(2) { animation-delay: 32ms; }
.shared-service-layout.is-entering .shared-service-row:nth-child(3) { animation-delay: 64ms; }
.shared-service-layout.is-entering .shared-service-row:nth-child(4) { animation-delay: 96ms; }
.shared-service-layout.is-entering .shared-service-row:nth-child(5) { animation-delay: 128ms; }
.shared-service-layout.is-entering .shared-service-row:nth-child(6) { animation-delay: 160ms; }
.shared-service-layout.is-entering .shared-service-row:nth-child(7) { animation-delay: 192ms; }
.shared-service-layout.is-entering .shared-service-row:nth-child(8) { animation-delay: 224ms; }
.shared-service-layout.is-entering .shared-service-row:nth-child(9) { animation-delay: 256ms; }

@media (prefers-reduced-motion: reduce) {
  .shared-service-layout.is-entering .shared-service-row { animation: none; }
}

/* Paper chapter dividers restored from the original site's section rhythm. */
#dichvu,
#thuvien {
  scroll-margin-top: calc(var(--header) + 14px);
}

.chapter-divider {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.chapter-divider::after {
  content: none;
}

.chapter-divider--services {
  overflow: visible;
}

.chapter-divider__inner {
  position: relative;
  z-index: 1;
  min-height: 176px;
}

.chapter-divider--services .chapter-divider__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(310px, .72fr);
  align-items: center;
  gap: clamp(48px, 8vw, 170px);
  padding-block: 28px var(--services-heading-bottom-padding);
}

.chapter-divider__label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: #8464bd;
  font: 800 13px/1.2 Quicksand, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.chapter-divider__label img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.chapter-divider h2 {
  margin: 0;
  color: #3f304f;
  font: 750 clamp(34px, 3.15vw, 54px)/1.08 Quicksand, sans-serif;
  letter-spacing: -.035em;
}

.chapter-divider__note {
  display: flex;
  align-items: center;
  align-self: end;
  justify-self: end;
  gap: 20px;
  max-width: 500px;
  color: #736778;
}

.chapter-divider__note img {
  width: 88px;
  height: 74px;
  flex: none;
  object-fit: contain;
}

.chapter-divider__note p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.65;
}

/* Keep the note's bottom edge a fixed distance above the following card. */
.chapter-divider--services .chapter-divider__note {
  transform: translateY(calc(var(--services-card-gap) + var(--services-heading-bottom-padding) - var(--services-note-gap)));
}

@media (min-width: 901px) {
  .chapter-divider--services .chapter-divider__note-tail {
    display: block;
  }
}

.chapter-divider__decor {
  position: absolute;
  z-index: -1;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.chapter-divider__decor--service-tape {
  top: -25px;
  left: 39%;
  width: 105px;
  opacity: .7;
  transform: rotate(-7deg);
}

.chapter-divider__decor--service-sparkle {
  right: 1.5%;
  top: 25px;
  width: 34px;
}

.chapter-divider--gallery .chapter-divider__inner {
  display: flex;
  align-items: center;
  min-height: 132px;
  padding-block: 24px 14px;
  text-align: left;
}

.chapter-divider--gallery .chapter-divider__copy {
  width: 100%;
  min-width: 0;
}

.chapter-divider--gallery .chapter-divider__label {
  position: static;
  margin: 0 0 12px;
}

.chapter-divider--gallery .chapter-divider__label img {
  width: 30px;
  height: 30px;
}

.chapter-divider--gallery h2 {
  max-width: min(100%, 980px);
}

.chapter-divider__decor--gallery-flower {
  left: 2.5%;
  bottom: 12px;
  width: 94px;
}

.chapter-divider__decor--gallery-heart {
  right: 4%;
  top: 54px;
  width: 76px;
}

.chapter-divider__decor--gallery-sparkle {
  right: 17%;
  bottom: 24px;
  width: 30px;
}

.services-section {
  --services-card-gap: clamp(20px, 2vw, 28px);
  --services-heading-bottom-padding: 16px;
  --services-note-gap: 16px;
  padding: 0 0 78px;
}

.services-content {
  --services-sheet-inline-pad: clamp(24px, 2.8vw, 42px);
  container-type: inline-size;
  margin-top: var(--services-card-gap);
  padding: clamp(28px, 2.6vw, 40px) clamp(24px, 2.8vw, 42px) clamp(34px, 3.2vw, 48px);
  border: 1px solid rgba(159, 142, 184, .24);
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(238, 247, 253, .78), rgba(255, 248, 226, .68) 48%, rgba(244, 239, 252, .78));
}

.gallery-section {
  padding: 0 0 78px;
}

.gallery-shell {
  margin-top: clamp(20px, 2vw, 28px);
}

@media (max-width: 900px) {
  .services-section {
    --services-card-gap: 20px;
    --services-heading-bottom-padding: 14px;
  }

  .chapter-divider__inner {
    min-height: 156px;
  }

  .chapter-divider--services .chapter-divider__inner {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
    gap: 28px;
    padding-block: 24px var(--services-heading-bottom-padding);
  }

  .chapter-divider__note {
    gap: 12px;
  }

  .chapter-divider__note img {
    width: 66px;
    height: 58px;
  }

  .chapter-divider--gallery .chapter-divider__label {
    top: 24px;
  }

  .chapter-divider__decor--gallery-flower {
    width: 72px;
  }

  .chapter-divider__decor--gallery-heart {
    width: 60px;
  }

  .gallery-content-panel {
    padding: 28px 22px 34px;
  }

  .services-section,
  .gallery-section {
    padding-bottom: 60px;
  }

  .services-content {
    --services-sheet-inline-pad: 18px;
    margin-top: var(--services-card-gap);
    padding: 24px 18px 32px;
    border-radius: 30px;
  }

  .gallery-shell {
    margin-top: 20px;
  }
}

@media (max-width: 600px) {
  .chapter-divider--services {
    overflow: hidden;
  }

  .chapter-divider__inner {
    min-height: 0;
  }

  .chapter-divider--services .chapter-divider__inner {
    display: block;
    padding-block: 20px 4px;
  }

  .chapter-divider__label {
    margin-bottom: 9px;
    font-size: 11px;
  }

  .chapter-divider__label img {
    width: 22px;
    height: 22px;
  }

  .chapter-divider h2 {
    font-size: clamp(27px, 8.4vw, 36px);
    line-height: 1.12;
  }

  .chapter-divider__note {
    align-self: auto;
    justify-self: auto;
    max-width: none;
    margin-top: 18px;
    padding: 16px 56px 0 0;
    border-top: 1px dashed rgba(149, 137, 170, .25);
  }

  .chapter-divider--services .chapter-divider__note {
    transform: none;
  }

  .chapter-divider__note img {
    width: 64px;
    height: 56px;
  }

  .chapter-divider__note p {
    flex: 1 1 auto;
    max-width: 250px;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.55;
  }

  .chapter-divider__decor--service-tape {
    left: auto;
    right: 6%;
    width: 70px;
  }

  .chapter-divider__decor--service-sparkle {
    right: 4%;
    top: 62px;
    width: 24px;
  }

  .chapter-divider--gallery .chapter-divider__inner {
    display: block;
    min-height: 0;
    padding-block: 20px 12px;
    text-align: left;
  }

  .chapter-divider--gallery .chapter-divider__label {
    position: static;
    margin-bottom: 10px;
  }

  .chapter-divider--gallery h2 {
    max-width: 330px;
  }

  .chapter-divider__decor--gallery-flower {
    left: auto;
    right: 5%;
    bottom: 9px;
    width: 54px;
    opacity: .72;
  }

  .chapter-divider__decor--gallery-heart {
    right: 2%;
    top: 12px;
    width: 42px;
    opacity: .64;
  }

  .chapter-divider__decor--gallery-sparkle {
    display: none;
  }

  .services-section,
  .gallery-section {
    padding-bottom: 52px;
  }

  .services-content,
  .gallery-shell {
    margin-top: 16px;
  }

  .services-content {
    --services-sheet-inline-pad: 10px;
    margin-top: 8px;
    padding: 16px 10px 24px;
    border-radius: 24px;
  }

  .gallery-content-panel {
    margin-top: 14px;
    padding: 20px 12px 26px;
    border-radius: 24px;
  }
}

/* Final cascade: user-owned Paper doodles replace generic decorative accents. */
:root {
  --paper-doodle-micro: 28px;
  --paper-doodle-small: 44px;
  --paper-doodle-medium: 64px;
  --paper-doodle-accent: 84px;
  --paper-doodle-wide: 112px;
  --doodle-edge-safe: clamp(28px, 4.5vw, 86px);
}

.paper-doodle {
  --doodle-size: var(--paper-doodle-small);
  --doodle-opacity: .84;
  --doodle-rotate: 0deg;
  --doodle-optical-scale: 1;
  display: block;
  width: var(--doodle-size);
  max-width: none;
  height: auto;
  object-fit: contain;
  opacity: var(--doodle-opacity);
  transform: rotate(var(--doodle-rotate)) scale(var(--doodle-optical-scale));
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  filter: none;
}

.paper-doodle--floating {
  position: absolute;
  z-index: 0;
}

.home-grid,
.benefit-grid,
.services-content,
.gallery-shell,
.about-grid,
.reviews-inner,
.booking-faq-grid,
.booking-cta,
.faq-layout,
.footer-grid,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Home: three quiet edge accents on Web; star + flower on smaller screens. */
.paper-doodle--home-star {
  --doodle-size: var(--paper-doodle-small);
  --doodle-opacity: .78;
  --doodle-rotate: -8deg;
  left: var(--doodle-edge-safe);
  top: 62%;
}
.paper-doodle--home-polish {
  --doodle-size: 68px;
  --doodle-opacity: .8;
  --doodle-rotate: 7deg;
  right: var(--doodle-edge-safe);
  top: 12%;
}
.paper-doodle--home-bow {
  --doodle-size: 60px;
  --doodle-opacity: .78;
  --doodle-rotate: -5deg;
  right: calc(var(--doodle-edge-safe) + 8px);
  top: 68%;
}
.paper-doodle--home-flower { display: none; }

/* Services chapter and Signature use smaller component-local accents. */
.paper-doodle--services-brush {
  --doodle-size: 70px;
  --doodle-opacity: .78;
  --doodle-rotate: -9deg;
  left: 44%;
  top: auto;
  bottom: 20px;
}
.paper-doodle--services-star {
  --doodle-size: 30px;
  --doodle-opacity: .78;
  --doodle-rotate: 8deg;
  right: 40px;
  top: 24px;
}
.paper-doodle--signature-hearts {
  --doodle-size: 46px;
  --doodle-opacity: .82;
  --doodle-rotate: -7deg;
  left: 3%;
  top: 20%;
}
.paper-doodle--signature-brush {
  --doodle-size: 54px;
  --doodle-opacity: .8;
  --doodle-rotate: 8deg;
  right: 3%;
  bottom: 10%;
}
.paper-doodle--signature-star {
  --doodle-size: var(--paper-doodle-micro);
  --doodle-opacity: .82;
  --doodle-rotate: 7deg;
  right: 4%;
  top: 10%;
}
.paper-doodle--signature-teacup {
  --doodle-size: var(--paper-doodle-accent);
  --doodle-opacity: .86;
  --doodle-rotate: -4deg;
  width: var(--doodle-size);
  max-height: var(--paper-doodle-accent);
  justify-self: center;
}

/* Gallery divider: the pearl chain takes the former heart position. */
.paper-doodle--gallery-pearls {
  --doodle-size: var(--paper-doodle-wide);
  --doodle-opacity: .78;
  --doodle-rotate: -20deg;
  right: 8px;
  left: auto;
  top: 84px;
  bottom: auto;
}

/* About: distribute accents around the outer canvas, behind the cards. */
.paper-doodle--about-mirror {
  --doodle-size: var(--paper-doodle-medium);
  --doodle-opacity: .76;
  --doodle-rotate: -8deg;
  left: max(24px, calc((100% - var(--content)) / 2 - var(--doodle-size) - 12px));
  top: 13%;
}
.paper-doodle--about-stamp {
  --doodle-size: 68px;
  --doodle-opacity: .76;
  --doodle-rotate: 7deg;
  right: max(24px, calc((100% - var(--content)) / 2 - var(--doodle-size) - 12px));
  bottom: 10%;
}
.paper-doodle--about-star {
  --doodle-size: var(--paper-doodle-micro);
  --doodle-opacity: .72;
  display: none;
  left: 24px;
  top: 54%;
}
.paper-doodle--about-flower {
  --doodle-size: 56px;
  --doodle-opacity: .76;
  --doodle-rotate: 7deg;
  right: max(24px, calc((100% - var(--content)) / 2 - var(--doodle-size) - 12px));
  top: 8%;
}

/* Reviews: supporting accents stay clear of the centered introduction. */
.paper-doodle--reviews-flower {
  --doodle-size: 52px;
  --doodle-opacity: .76;
  --doodle-rotate: -7deg;
  left: var(--doodle-edge-safe);
  top: 18%;
}
.paper-doodle--reviews-star {
  --doodle-size: 30px;
  --doodle-opacity: .74;
  --doodle-rotate: 8deg;
  right: var(--doodle-edge-safe);
  bottom: 10%;
}
.paper-doodle--reviews-divider {
  --doodle-size: 32px;
  --doodle-opacity: .8;
  width: var(--doodle-size);
  height: var(--doodle-size);
}

/* Booking accents live outside the central text/CTA safe area. */
.paper-doodle--booking-scissors {
  --doodle-size: var(--paper-doodle-medium);
  --doodle-opacity: .76;
  --doodle-rotate: -11deg;
  left: 24px;
  top: 18px;
}
.paper-doodle--booking-star {
  --doodle-size: var(--paper-doodle-micro);
  --doodle-opacity: .76;
  right: 24px;
  top: 18px;
}
.paper-doodle--booking-teacup {
  --doodle-size: 68px;
  --doodle-opacity: .76;
  --doodle-rotate: 7deg;
  right: 24px;
  bottom: 8px;
}
.paper-doodle--booking-paws {
  --doodle-size: 96px;
  --doodle-opacity: .62;
  --doodle-rotate: -6deg;
  left: 24px;
  bottom: 8px;
}

@media (max-width: 1900px) {
  .paper-doodle--about-star,
  .paper-doodle--about-flower { display: none; }

  .paper-doodle--about-mirror,
  .paper-doodle--about-stamp { --doodle-size: 40px; }

  .paper-doodle--about-mirror { left: 16px; }

  .paper-doodle--about-stamp { right: 16px; }
}

@media (max-width: 1500px) {
  .paper-doodle--about-mirror,
  .paper-doodle--about-stamp,
  .paper-doodle--about-star,
  .paper-doodle--about-flower { display: none; }
}

@media (max-width: 900px) {
  .paper-doodle--home-polish,
  .paper-doodle--home-bow,
  .paper-doodle--about-mirror,
  .paper-doodle--about-stamp,
  .paper-doodle--about-star,
  .paper-doodle--about-flower,
  .paper-doodle--booking-teacup { display: none; }

  .paper-doodle--home-star { --doodle-size: 36px; left: 18px; top: 52%; }
  .paper-doodle--home-flower {
    --doodle-size: var(--paper-doodle-small);
    --doodle-opacity: .72;
    --doodle-rotate: 6deg;
    display: block;
    right: 18px;
    bottom: 4%;
  }
  .paper-doodle--services-brush { --doodle-size: 56px; left: 36%; bottom: 12px; }
  .paper-doodle--services-star { --doodle-size: 26px; right: 24px; top: 18px; }
  .paper-doodle--signature-hearts { --doodle-size: 38px; }
  .paper-doodle--signature-brush { --doodle-size: var(--paper-doodle-small); }
  .paper-doodle--signature-star { --doodle-size: 24px; }
  .paper-doodle--signature-teacup { --doodle-size: 68px; max-height: 68px; }
  .paper-doodle--gallery-pearls { --doodle-size: 90px; right: 0; top: 14px; }
  .paper-doodle--reviews-flower { --doodle-size: var(--paper-doodle-small); left: 18px; }
  .paper-doodle--reviews-star { --doodle-size: var(--paper-doodle-micro); right: 18px; }
  .paper-doodle--booking-scissors { --doodle-size: 52px; left: 18px; top: 8px; }
  .paper-doodle--booking-star { --doodle-size: 26px; right: 18px; top: 12px; }
  .paper-doodle--booking-paws { --doodle-size: 80px; left: 18px; bottom: 12px; }
}

@media (max-width: 600px) {
  .paper-doodle--home-star,
  .paper-doodle--reviews-flower,
  .paper-doodle--reviews-star,
  .paper-doodle--booking-paws { display: none; }
  .paper-doodle--home-flower { --doodle-size: 40px; }
  .paper-doodle--services-brush {
    --doodle-size: 48px;
    right: 0;
    bottom: 10px;
    left: auto;
  }
  .paper-doodle--services-star { --doodle-size: 24px; }
  .paper-doodle--signature-hearts { --doodle-size: 34px; }
  .paper-doodle--signature-brush { --doodle-size: 40px; }
  .paper-doodle--signature-star { --doodle-size: 22px; }
  .paper-doodle--gallery-pearls { --doodle-size: 60px; right: 13px; top: auto; bottom: 14px; }
  .paper-doodle--reviews-divider { --doodle-size: var(--paper-doodle-micro); }
  .paper-doodle--booking-scissors { --doodle-size: var(--paper-doodle-small); }
  .paper-doodle--booking-star { --doodle-size: 24px; }
}

@media (max-width: 360px) {
  .paper-doodle--gallery-pearls { right: 0; }
}

/* On desktop, quote and live schedule form one balanced support row below the hero copy. */
@media (min-width: 1181px) {
  .today-card {
    grid-area: schedule;
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 190px;
    margin: 0;
    padding: 8px 9px 7px;
    border-width: 5px;
    border-radius: 23px;
    transform: none;
    z-index: 2;
  }
  .today-card .slot-grid { gap: 4px; padding-top: 2px; }
  .today-card .slot-grid button { min-height: 42px; padding: 7px 4px 5px; }
  .today-card .today-note { padding-top: 3px; font-size: 9px; line-height: 1.25; }
}

@media (max-width: 1180px) {
  .today-card {
    grid-area: schedule;
    width: 100%;
    height: auto;
    margin: 0;
    transform: none;
  }
}

/* Unified Paper service list: Nail Care, Classic, Design, Eyelashes and Shampoo. */
.shared-service-layout {
  --shared-accent: #e85e7c;
  --shared-soft: rgba(255, 237, 242, .72);
}

.shared-service-title {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(420px, 1.8fr) minmax(110px, .48fr);
  align-items: center;
  gap: clamp(18px, 2.3vw, 36px);
  width: 100%;
  min-height: 244px;
  margin: 0 auto 26px;
  padding: 22px clamp(24px, 3vw, 46px) 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--shared-accent) 30%, transparent);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255, 250, 247, .9), var(--shared-soft));
  text-align: left;
}

.shared-service-title::before,
.shared-service-title::after {
  content: "✦";
  position: absolute;
  color: color-mix(in srgb, var(--shared-accent) 72%, #ffb45d);
  font-size: 24px;
  opacity: .72;
  pointer-events: none;
}

.shared-service-title::before { left: 31%; top: 28px; transform: rotate(-8deg); }
.shared-service-title::after { right: 18%; bottom: 24px; transform: rotate(10deg) scale(.78); }

.shared-service-title__tape {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 24px;
  width: 92px;
  height: auto;
  transform: rotate(-8deg);
  pointer-events: none;
}

.shared-service-title__cat {
  align-self: end;
  justify-self: center;
  width: min(100%, 236px);
  height: 192px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 10px rgba(116, 78, 66, .08));
}

.shared-service-title__paper {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 9px;
  min-height: 170px;
  padding: 24px 32px;
  border: 1px dashed color-mix(in srgb, var(--shared-accent) 42%, transparent);
  border-radius: 24px 20px 26px 18px;
  background: rgba(255, 252, 248, .82);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .34);
  text-align: center;
}

.shared-service-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  color: var(--shared-accent);
}

.shared-service-title h2 {
  margin: 0;
  font: 700 clamp(38px, 3.7vw, 60px)/1 var(--font-signature-display);
  letter-spacing: .055em;
  color: var(--shared-accent);
}

.shared-service-title p {
  max-width: 610px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #5d463d;
}

.shared-service-title__accent {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 96px;
  height: 112px;
  border: 1px dashed color-mix(in srgb, var(--shared-accent) 38%, transparent);
  border-radius: 48% 52% 46% 54%;
  background: rgba(255, 252, 248, .66);
  transform: rotate(3deg);
}

.shared-service-title__accent img {
  width: 62px;
  height: 72px;
  object-fit: contain;
}

.shared-service-list {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--shared-accent) 24%, transparent);
  border-radius: 30px;
  background: rgba(255, 251, 248, .58);
}

.shared-service-row {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(250px, 1fr) 92px minmax(142px, 164px) 148px;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  min-height: 142px;
  padding: 14px clamp(16px, 2vw, 28px);
  border-bottom: 1px dashed color-mix(in srgb, var(--shared-accent) 22%, transparent);
  background: color-mix(in srgb, var(--shared-soft) 44%, rgba(255, 252, 249, .68));
  transition: background-color .2s ease, box-shadow .2s ease;
}

.shared-service-row:nth-child(even) {
  background: color-mix(in srgb, var(--shared-soft) 66%, rgba(255, 252, 249, .58));
}

.shared-service-row:last-child { border-bottom: 0; }

.shared-service-row__copy h3 {
  margin: 0 0 8px;
  font: 700 clamp(19px, 1.7vw, 25px)/1.2 var(--font-signature-display);
  color: #49312d;
}

.shared-service-row__copy p {
  max-width: 500px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6d5750;
}

.shared-service-row__offer {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px dashed color-mix(in srgb, var(--shared-accent) 55%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--shared-soft) 68%, white);
  color: var(--shared-accent);
  font: 700 17px var(--font-signature-display);
  transform: rotate(-1deg);
}

.shared-service-row__offer.is-plain {
  min-height: 42px;
  border-style: solid;
  color: #7d675f;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.shared-service-row__pricing {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 88px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--shared-accent) 24%, transparent);
  border-radius: 17px;
  background: rgba(255, 252, 249, .75);
}

.shared-service-row__pricing del {
  font-size: 12px;
  color: #80685f;
}

.shared-service-row__pricing strong {
  font: 700 22px var(--font-signature-display);
  color: var(--shared-accent);
}

.shared-service-row__pricing small {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #7066aa;
}

/* A design priced per nail, stone or charm (price-units.js): a line under the price says how it is counted
   ("full bàn", "mỗi viên"), the per-nail price sits beside the title in brackets, and a charm's price range
   sits a size smaller to stay on one line. */
.shared-service-row__unit,
.service-price-unit { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: #80685f; white-space: nowrap; }
.service-per-nail { margin-left: .15em; color: #9a7b70; font-size: .62em; font-weight: 700; letter-spacing: 0; white-space: nowrap; vertical-align: .12em; }
.booking-service-copy h3 .service-per-nail { font-size: .7em; }
@media (max-width: 600px) { .booking-service-copy h3 .service-per-nail { font-size: 11px; vertical-align: .05em; } }
.shared-service-row__pricing strong.is-range { font-size: 15px; letter-spacing: -.02em; white-space: nowrap; }
@media (max-width: 900px) { .shared-service-row__unit { grid-column: 1 / -1; margin-top: 0; } }
@media (max-width: 600px) { .shared-service-row__unit { font-size: 11px; } .shared-service-row__pricing strong.is-range { font-size: 13px; } }

.shared-service-row__photo {
  width: 148px;
  height: 108px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--shared-accent) 22%, transparent);
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
}

.shared-service-row__photo img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
}

@media (max-width: 1180px) {
  .shared-service-title {
    grid-template-columns: minmax(160px, .62fr) minmax(360px, 1.55fr) 100px;
    min-height: 224px;
    padding-inline: 22px;
  }

  .shared-service-title__cat { width: 190px; height: 170px; }
  .shared-service-title__paper { min-height: 152px; padding: 20px 24px; }
  .shared-service-title__accent { width: 82px; height: 98px; }
  .shared-service-title__accent img { width: 54px; height: 62px; }

  .shared-service-row {
    grid-template-columns: 72px minmax(220px, 1fr) 78px 140px 126px;
    gap: 14px;
    padding-inline: 16px;
  }
  .shared-service-row__photo { width: 126px; height: 98px; }
  .shared-service-row__pricing strong { font-size: 19px; }
}

@media (max-width: 900px) {
  .shared-service-title {
    grid-template-columns: 150px minmax(0, 1fr) 82px;
    gap: 14px;
    min-height: 204px;
    padding: 18px;
    border-radius: 25px;
  }

  .shared-service-title__tape { left: 14px; width: 72px; }
  .shared-service-title__cat { width: 150px; height: 148px; }
  .shared-service-title__paper { min-height: 142px; padding: 18px; }
  .shared-service-title h2 { font-size: 36px; }
  .shared-service-title p { font-size: 12px; }
  .shared-service-title__accent { width: 70px; height: 82px; }
  .shared-service-title__accent img { width: 44px; height: 52px; }

  .shared-service-list { border-radius: 24px; }
  .shared-service-row {
    grid-template-columns: 64px minmax(0, 1fr) 118px;
    grid-template-areas:
      "icon copy photo"
      "offer pricing photo";
    gap: 9px 14px;
    min-height: 138px;
    padding: 13px 16px;
  }
  .shared-service-row__copy { grid-area: copy; align-self: end; }
  .shared-service-row__copy h3 { margin-bottom: 5px; font-size: 19px; }
  .shared-service-row__copy p { font-size: 11px; }
  .shared-service-row__offer { grid-area: offer; min-height: 34px; padding: 5px; font-size: 12px; }
  .shared-service-row__offer.is-plain { min-height: 32px; font-size: 8px; }
  .shared-service-row__pricing {
    grid-area: pricing;
    grid-template-columns: auto auto 1fr;
    justify-content: start;
    justify-items: start;
    gap: 4px 8px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .shared-service-row__pricing small { grid-column: 1 / -1; margin: 0; }
  .shared-service-row__photo { grid-area: photo; width: 118px; height: 106px; }
}

@media (max-width: 600px) {
  .shared-service-title {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 10px;
    min-height: 174px;
    margin-bottom: 16px;
    padding: 14px 10px 12px;
    border-radius: 21px;
  }

  .shared-service-title::before { left: 28%; top: 18px; font-size: 18px; }
  .shared-service-title::after { right: 8%; bottom: 12px; font-size: 17px; }
  .shared-service-title__tape { top: 8px; left: 5px; width: 58px; }
  .shared-service-title__cat { width: 100px; height: 124px; }
  .shared-service-title__paper { min-height: 126px; padding: 16px 10px; border-radius: 18px; }
  .shared-service-kicker { font-size: 7px; }
  .shared-service-title h2 { font-size: clamp(25px, 8vw, 34px); letter-spacing: .035em; }
  .shared-service-title p { font-size: 10.5px; line-height: 1.45; }
  .shared-service-title__accent {
    position: absolute;
    right: 7px;
    bottom: 6px;
    width: 42px;
    height: 46px;
    border: 0;
    background: transparent;
  }
  .shared-service-title__accent img { width: 34px; height: 38px; }

  .shared-service-list { border-radius: 19px; }
  .shared-service-row {
    grid-template-columns: 50px minmax(0, 1fr) 82px;
    gap: 8px 9px;
    min-height: 126px;
    padding: 12px 9px;
  }
  .shared-service-row__copy h3 { font-size: 15px; }
  .shared-service-row__copy p { font-size: 9.5px; line-height: 1.4; }
  .shared-service-row__offer { min-height: 30px; border-radius: 10px; font-size: 10px; }
  .shared-service-row__pricing { gap: 2px 5px; }
  .shared-service-row__pricing del { font-size: 8px; }
  .shared-service-row__pricing strong { font-size: 15px; }
  .shared-service-row__pricing small { font-size: 8px; }
  .shared-service-row__photo { width: 82px; height: 82px; padding: 4px; border-radius: 14px; }
  .shared-service-row__photo img { border-radius: 10px; }
}

@media (max-width: 390px) {
  .shared-service-title { grid-template-columns: 84px minmax(0, 1fr); }
  .shared-service-title__cat { width: 86px; height: 112px; }
  .shared-service-row { grid-template-columns: 44px minmax(0, 1fr) 72px; padding-inline: 7px; }
  .shared-service-row__photo { width: 72px; height: 76px; }
}

/* Final Signature reference alignment. */
.service-tabs {
  min-height: 86px;
  box-sizing: border-box;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(232, 94, 124, .24);
  border-radius: 24px;
  background: rgba(255, 250, 247, .58);
}

.service-tabs button {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 70px;
  min-height: 70px;
  margin: 0;
  padding: 8px 14px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
}

.service-tabs button::before {
  content: "";
  position: absolute;
  inset: 0 5px;
  z-index: 0;
  border-radius: 18px;
  background: transparent;
  pointer-events: none;
}

.service-tabs button::after {
  content: "";
  position: absolute;
  top: 19px;
  right: auto;
  bottom: 19px;
  left: 0;
  width: 2px;
  z-index: 2;
  border-radius: 999px;
  background: rgba(181, 128, 142, .34);
  pointer-events: none;
}

.service-tabs button:first-child::after { display: none; }

.service-tabs button span { position: relative; z-index: 1; }

.service-tabs button.is-active,
.service-tabs button.is-active:hover {
  height: 70px;
  margin: 0;
  min-height: 70px;
  border-color: transparent;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.service-tabs button.is-active::before,
.service-tabs button.is-active:hover::before {
  border: 2px solid #ff6f91;
  background: url("assets/services/shared/services_web_tab_active_paper_v3.webp") center / 100% 100% no-repeat;
  box-shadow: inset 0 0 0 2px rgba(255, 206, 218, .86);
}

.service-tabs button:not(.is-active):hover {
  border-radius: 18px;
  background: transparent;
}

.service-tabs button:not(.is-active):hover::before {
  background: rgba(255, 224, 233, .72);
}
.service-panel { margin-top: 24px; }

.signature-layout {
  --signature-card-height: 236px;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.signature-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 18px;
  align-items: stretch;
}

.signature-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(190px, 38%) minmax(0, 62%);
  align-items: center;
  min-height: 302px;
  padding: 0 10px;
  overflow: visible;
  border: 0;
  background: transparent;
}

/* The booking picker uses a dedicated compact paper shell, not the Gallery pill. */
.booking-categories button.is-active::before {
  background-image: url("assets/booking/ui_shells/booking_category_active_pink_paper_v1.webp");
  background-size: 100% 100%;
}

.signature-ref-doodle {
  position: absolute;
  z-index: 0;
  width: 42px;
  height: 42px;
  object-fit: contain;
  pointer-events: none;
}

.signature-ref-doodle--heart { left: 29%; top: 18%; transform: rotate(-8deg); }

.signature-cat {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: center;
  width: min(100%, 248px);
  height: 268px;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
  filter: drop-shadow(0 7px 8px rgba(91, 54, 45, .06));
  transform: translateY(55px) scale(1.07);
  transform-origin: center bottom;
}

.signature-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 0;
  text-align: center;
  transform: translateY(-15px) scale(1.05);
  transform-origin: center bottom;
}

.signature-wordmark {
  display: block;
  width: min(100%, 430px);
  max-width: none;
  max-height: 188px;
  margin: 0 auto -2px;
  object-fit: contain;
}

.signature-mobile-title { display: none !important; }

.signature-ribbon {
  display: grid;
  place-items: center;
  width: min(100%, 410px);
  min-height: 34px;
  margin: 0 auto 13px;
  padding: 7px 28px;
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
  background: linear-gradient(90deg, #f4b5c5 0%, #ea8fa9 50%, #f4b5c5 100%);
  color: #fff;
  font: 800 clamp(10px, .82vw, 13px)/1.15 var(--font-signature-body);
  letter-spacing: .025em;
  white-space: nowrap;
}

@media (min-width: 1181px) {
  .signature-ribbon { margin-top: -6px; }
}

.signature-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
}

.service-card[data-card-variant="signature"] {
  --signature-photo-size: 160px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 40%);
  gap: 16px;
  align-items: center;
  height: var(--signature-card-height);
  min-height: var(--signature-card-height);
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(232, 94, 124, .2);
  border-radius: 26px;
  box-shadow: none;
}

.service-card[data-card-variant="signature"]::after {
  content: none;
  display: none;
}

.service-card[data-card-variant="signature"] .service-card-copy {
  position: static;
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

.service-card[data-card-variant="signature"].service-card--text-only {
  grid-template-columns: minmax(0, 1fr);
}

.service-card[data-card-variant="signature"] h3 {
  margin: 0 0 8px;
  font-size: clamp(18px, 1.35vw, 24px);
}

.service-card[data-card-variant="signature"] p {
  margin: 0;
  font-size: 14px;
  line-height: 1.48;
}

.service-card[data-card-variant="signature"] .service-meta {
  display: grid;
  justify-content: start;
  align-items: start;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  margin-top: 24px;
  padding-top: 0;
}

.service-card[data-card-variant="signature"] .service-price {
  display: grid;
  grid-template-columns: max-content;
  grid-template-areas: "current";
  align-items: center;
  justify-content: start;
  width: max-content;
  max-width: 100%;
  gap: 0;
}

.service-card[data-card-variant="signature"] .service-price--sale {
  grid-template-columns: max-content max-content;
  grid-template-areas:
    "badge badge"
    "current original";
  gap: 3px 10px;
}

.service-card[data-card-variant="signature"] .service-price-current { grid-area: current; }
.service-card[data-card-variant="signature"] .service-price-original {
  grid-area: original;
  align-self: center;
  color: #876f69;
  font-size: 12px;
}
.service-card[data-card-variant="signature"] .service-duration {
  order: initial;
  justify-self: start;
  line-height: 1.25;
}

.service-card[data-card-variant="signature"] .service-photo-wrap {
  isolation: isolate;
  align-self: center;
  width: 100%;
  min-height: 176px;
  padding: 8px;
  border: 1px solid rgba(232, 94, 124, .14);
  border-radius: 20px;
  background: rgba(255, 255, 255, .78);
  transform: rotate(0deg);
}

.service-card[data-card-variant="signature"] .service-photo-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border: 1px dashed rgba(232, 94, 124, .48);
  border-radius: 23px;
  background: transparent;
  pointer-events: none;
}

.service-card[data-card-variant="signature"][data-photo-tilt="left"] .service-photo-wrap {
  transform: rotate(-1.35deg);
}

.service-card[data-card-variant="signature"][data-photo-tilt="right"] .service-photo-wrap {
  transform: rotate(1.35deg);
}

.service-card[data-card-variant="signature"] .signature-photo-pin {
  position: absolute;
  z-index: 4;
  top: -10px;
  right: 9px;
  width: 16px !important;
  height: 31px !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 3px rgba(160, 57, 91, .28));
  transform: rotate(12deg);
  pointer-events: none;
}

.service-card[data-card-variant="signature"] .service-photo-wrap > img:first-child {
  width: 100%;
  height: 100%;
  min-height: 160px;
  border-radius: 15px;
  object-fit: cover;
  object-position: center;
  transform: scale(1.12);
  transform-origin: center;
}

.service-card--featured[data-card-variant="signature"] {
  align-self: center;
  min-height: 236px;
  padding: 22px;
  background: rgba(255, 240, 238, .66);
}

.service-card--featured[data-card-variant="signature"] .service-card-copy {
  padding: 20px 0 0 112px;
}

.service-card--featured[data-card-variant="signature"] .service-photo-wrap {
  min-height: 176px;
}

.service-card--featured[data-card-variant="signature"] .service-photo-wrap > img:first-child {
  min-height: 160px;
}

.featured-badge {
  position: absolute;
  z-index: 4;
  top: 20px;
  left: 20px;
  display: grid;
  place-items: center;
  align-content: center;
  box-sizing: border-box;
  width: 110px;
  height: 138px;
  padding: 36px 15px 54px;
  border: 0;
  border-radius: 0;
  background: url("assets/services/signature-shared/decor/featured_most_chosen_badge_paper_v2.webp") center / contain no-repeat;
  box-shadow: none;
  color: #6b413d;
  text-align: center;
  line-height: 1.12;
}

.featured-badge span,
.featured-badge strong {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 8px;
  font-weight: 900;
}

.featured-badge strong { margin-top: 3px; font-size: 10px; }

.featured-cat-sticker {
  left: -9px !important;
  bottom: -10px;
  width: 56px !important;
  height: 56px !important;
  z-index: 3;
}

.signature-grid--top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.signature-service-groups { position: relative; z-index: 2; }
.service-card--featured[data-card-variant="signature"] { z-index: 2; }

.signature-lower {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, .95fr) minmax(0, 1.12fr) 118px;
  gap: 14px;
  align-items: end;
  margin-top: 18px;
}

.signature-lower .service-card { min-height: var(--signature-card-height); }

.signature-spa-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 18px;
}

.signature-spa-row .service-card { min-height: var(--signature-card-height); }

.signature-outside {
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  image-rendering: auto;
}

.signature-outside--drink { align-self: end; transform: translateY(-4px); }
.signature-outside--bath-cat { align-self: end; transform: translateY(4px); }

@media (min-width: 1181px) {
  .signature-layout {
    --signature-two-column-card-width: min(620px, calc((100% - 16px) / 2));
  }

  .service-card--featured[data-card-variant="signature"] {
    align-self: end;
  }

  .signature-grid--top {
    display: flex;
    justify-content: center;
  }

  .signature-lower {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
  }

  .signature-grid--top .service-card,
  .signature-lower .service-card {
    z-index: 1;
    flex: 0 0 var(--signature-two-column-card-width);
    width: var(--signature-two-column-card-width);
  }

  .signature-spa-row {
    display: flex;
    justify-content: center;
    gap: 16px;
  }

  .signature-spa-row .service-card {
    flex: 0 0 var(--signature-two-column-card-width);
    width: var(--signature-two-column-card-width);
  }

  .signature-lower .signature-outside {
    position: absolute;
    z-index: 0;
    bottom: 0;
  }

  .signature-outside--drink { left: 0; width: 84px; }
  .signature-outside--bath-cat { right: 0; width: 118px; }
}

@media (min-width: 1501px) {
  .signature-service-groups {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px 16px;
    margin-top: 18px;
  }

  .signature-service-groups > :is(.signature-grid--top, .signature-lower, .signature-spa-row) {
    display: contents;
  }

  .signature-service-groups .service-card {
    width: auto;
    min-width: 0;
    flex: none;
  }

  .signature-service-groups [data-service-id="gel-hn"] { grid-area: 1 / 1 / 2 / 3; }
  .signature-service-groups [data-service-id="noi-gel"] { grid-area: 1 / 3 / 2 / 5; }
  .signature-service-groups [data-service-id="noi-bot"] { grid-area: 1 / 5 / 2 / 7; }
  .signature-service-groups [data-service-id="mi-classic"] { grid-area: 2 / 2 / 3 / 4; }
  .signature-service-groups [data-service-id="goi-duongsinh"] { grid-area: 2 / 4 / 3 / 6; }
}

.signature-layout > .service-note { margin-top: 22px; }

@media (max-width: 1180px) {
  /* Same height as the Gallery and booking bars at this width (86px bar, 70px tabs). */
  .service-tabs { min-height: 86px; border-radius: 22px; }
  .service-tabs button { height: 70px; min-height: 70px; padding-inline: 9px; font-size: 15px; }
  .service-tabs button.is-active,
  .service-tabs button.is-active:hover { height: 70px; min-height: 70px; }

  .signature-hero-row { grid-template-columns: 1fr; gap: 14px; }
  .signature-intro { min-height: 267px; grid-template-columns: minmax(180px, 34%) minmax(0, 66%); }
  .signature-cat { width: min(100%, 212px); height: 243px; transform: translateY(42px) scale(1.07); }
  .signature-copy { transform: translateY(10px) scale(1.05); }
  .signature-wordmark { max-height: 170px; }
  .service-card--featured[data-card-variant="signature"] {
    min-height: 236px;
    background: var(--pastel-rose);
  }
  .service-card--featured[data-card-variant="signature"] .service-photo-wrap { min-height: 176px; }
  .service-card--featured[data-card-variant="signature"] .service-photo-wrap > img:first-child { min-height: 160px; }

  .signature-grid--top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signature-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signature-outside { display: none; }
}

@media (max-width: 900px) {
  .signature-grid--top,
  .signature-lower {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-tabs {
    display: flex;
    min-height: 76px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 20px;
    scrollbar-width: none;
  }
  .service-tabs button { flex: 0 0 158px; height: 60px; min-height: 60px; margin: 0; }
  .service-tabs button.is-active,
  .service-tabs button.is-active:hover { height: 60px; min-height: 60px; margin: 0; }
  .service-tabs button::after { top: 16px; bottom: 16px; }
}

@media (max-width: 600px) {
  .services-content { padding-inline: 10px; }
  .service-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 48px);
    gap: 4px 0;
    min-height: 0;
    padding: 6px;
    overflow: hidden;
    border-radius: 18px;
  }
  .service-tabs button,
  .service-tabs button.is-active,
  .service-tabs button.is-active:hover {
    min-width: 0;
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 5px 3px;
    border-radius: 10px;
    font-size: clamp(11.5px, 3.2vw, 13px);
    line-height: 1.15;
  }
  .service-tabs button::before { border-radius: 10px; }
  .service-tabs button:not(.is-active):hover { border-radius: 10px; }
  .service-tabs button.is-active::before,
  .service-tabs button.is-active:hover::before {
    border-width: 1px;
    border-color: rgba(255, 111, 145, .72);
    background-color: #f58ca8;
    box-shadow: inset 0 0 0 1px rgba(255, 206, 218, .62);
  }
  .service-tabs button::after { top: 13px; bottom: 13px; }
  .service-tabs button:nth-child(4)::after { display: none; }
  .service-panel { margin-top: 16px; }
  .signature-layout { --signature-card-height: 196px; display: block; padding: 0; border: 0; background: transparent; }
  .signature-hero-row { display: grid; gap: 12px; }
  .signature-intro {
    grid-template-columns: 128px minmax(0, 1fr);
    min-height: 178px;
    padding: 0 4px;
  }
  .signature-ref-doodle--heart { left: 27%; top: 12%; width: 28px; height: 28px; }
  .signature-cat { width: 100px; height: 164px; transform: translateY(24px) scale(1.07); }
  .signature-copy { transform: translateY(-1px); }
  .signature-wordmark { width: 100%; max-height: 122px; margin-bottom: 0; }
  .signature-ribbon {
    min-height: 28px;
    margin-bottom: 8px;
    padding: 5px 13px;
    font-size: 7px;
    white-space: normal;
  }
  .signature-copy p { font-size: 10px; }

  @media (max-width: 430px) {
    .signature-copy { transform: translateY(6px); }
  }

  .service-card--featured[data-card-variant="signature"] {
    /* The frame is a fixed 124px, so the column matches it and the 16px gap stays honest. */
    grid-template-columns: minmax(0, 1fr) 124px;
    min-height: 188px;
    padding: 14px;
  }
  .service-card--featured[data-card-variant="signature"] .service-card-copy { padding: 66px 0 0; }
  .service-card--featured[data-card-variant="signature"] .service-photo-wrap { min-height: 132px; }
  .service-card--featured[data-card-variant="signature"] .service-photo-wrap > img:first-child { min-height: 120px; }
  .service-card--featured[data-card-variant="signature"] h3 { margin-bottom: 3px; font-size: 15px; line-height: 1.15; }
  .service-card--featured[data-card-variant="signature"] p { font-size: 9.5px; line-height: 1.3; }
  .service-card--featured[data-card-variant="signature"] .service-meta { padding-top: 4px; }
  .featured-badge { top: 10px; left: 10px; width: 60px; height: 75px; padding: 18px 7px 28px; }
  .featured-badge span { font-size: 5.5px; }
  .featured-badge strong { margin-top: 2px; font-size: 7px; }

  .signature-grid--top,
  .signature-lower { display: grid; grid-template-columns: 1fr; gap: 11px; margin-top: 11px; }
  .signature-grid--top .service-card:last-child { grid-column: auto; }
  .signature-lower .service-card { min-height: 188px; }
  .service-card[data-card-variant="signature"] {
    grid-template-columns: minmax(0, 1fr) 124px;
    min-height: 188px;
    /* Wide enough for the dashed ring (6px outside the photo) to clear the price row. */
    gap: 16px;
    padding: 14px;
    border-radius: 19px;
  }
  .service-card[data-card-variant="signature"].service-card--text-only { grid-template-columns: minmax(0, 1fr); }
  .service-card[data-card-variant="signature"] h3 { margin-bottom: 5px; font-size: 16px; }
  .service-card[data-card-variant="signature"] p { font-size: 11px; line-height: 1.4; }
  .service-card[data-card-variant="signature"] .service-meta { margin-top: 16px; padding-top: 0; }
  .service-card[data-card-variant="signature"] .service-photo-wrap { min-height: 132px; padding: 5px; }
  /* Dashed ring concentric with the 16.8px scaled photo corners (16.8 + 5.2 gap), so the corners
     keep the same clearance as the sides instead of biting into the photo. */
  .service-card[data-card-variant="signature"] .service-photo-wrap::before { inset: -6px; border-radius: 21.5px; }
  .service-card[data-card-variant="signature"] .service-photo-wrap > img:first-child { min-height: 120px; }
  /* Single column on phones: alternate the photo side, top card first on the left.
     data-photo-tilt already runs 0..5 across the four signature rows, so "left" is every odd card. */
  .service-card[data-card-variant="signature"][data-photo-tilt="left"] { grid-template-columns: 124px minmax(0, 1fr); }
  /* The frame is a fixed 124px pinned to the column end, so flipping it also flips that anchor. */
  .service-card[data-card-variant="signature"][data-photo-tilt="left"] .service-photo-wrap { order: -1; justify-self: start; }
  .service-card--featured[data-card-variant="signature"][data-photo-tilt="left"] { grid-template-columns: 124px minmax(0, 1fr); }
  /* The badge owns the card's top-right corner, so the copy starts below it (badge bottom is
     -9px + 85px = 76px from the card top, i.e. 62px below the copy box) and the card follows
     its own text instead of clipping it on narrow phones. */
  .service-card--featured[data-card-variant="signature"][data-photo-tilt="left"] {
    height: auto;
    min-height: var(--signature-card-height);
  }
  .service-card--featured[data-card-variant="signature"][data-photo-tilt="left"] .service-card-copy {
    justify-content: flex-start;
    padding-top: 64px;
  }
  .service-card[data-card-variant="signature"] .signature-photo-pin {
    top: -8px;
    right: 3px;
    width: 14px !important;
    height: 27px !important;
  }
  .featured-cat-sticker {
    left: auto !important;
    right: -4px;
    bottom: -7px;
    width: 44px !important;
    height: 44px !important;
  }
  /* The sticker hangs off the photo's outer corner, which is the left one once the photo flips. */
  [data-photo-tilt="left"] .featured-cat-sticker {
    left: -4px !important;
    right: auto;
  }
  .service-card[data-card-variant="signature"]::after { right: 6px; bottom: 4px; font-size: 20px; }
  .signature-layout > .service-note { margin-top: 14px; }
}

/* Final shared service sheet reference alignment. */
.shared-service-layout {
  position: static; /* the note's corner stars anchor to the .services-content card, as on Signature */
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shared-service-title {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 270px) minmax(420px, 760px) minmax(82px, 96px);
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 2.6vw, 42px);
  width: 100%;
  min-height: 196px;
  margin: 0 0 14px;
  padding: 4px clamp(8px, 1.3vw, 18px) 2px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.shared-service-title::before,
.shared-service-title::after { content: none; }

.shared-service-title__mascot {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: center;
  width: min(100%, 270px);
  height: 198px;
  overflow: visible;
}

.shared-service-title__mascot .shared-service-title__cat {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
  filter: none;
}

.shared-service-title__mascot .shared-service-title__heart,
.shared-service-title > .shared-service-title__flower {
  position: absolute;
  z-index: 3;
  object-fit: contain;
  pointer-events: none;
}

.shared-service-title__mascot .shared-service-title__heart {
  top: 62px;
  right: 0;
  width: 56px;
  height: auto;
  transform: rotate(-7deg);
}

.shared-service-title > .shared-service-title__flower {
  left: calc(50% + 292px);
  top: 40px;
  width: 34px;
  height: 34px;
}

.shared-service-title__paper {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: center;
  justify-self: center;
  gap: 10px;
  width: min(100%, 760px);
  aspect-ratio: 12 / 5;
  min-height: 0;
  padding: 20px 34px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  transform: rotate(.08deg);
}

.shared-service-title__paper::before {
  content: none;
}

.shared-service-title__paper > h2,
.shared-service-title__paper > p {
  position: relative;
  z-index: 1;
}

.shared-service-title h2 {
  margin: 0;
  font: 700 clamp(38px, 3.5vw, 58px)/1 var(--font-signature-display);
  letter-spacing: .055em;
  color: var(--shared-accent);
}

.shared-service-title p {
  max-width: 620px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #523b34;
}

.shared-service-title__accent {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 96px;
  height: 118px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: rotate(4deg);
}

.shared-service-title__accent img {
  width: 88px;
  height: auto;
  max-width: none;
  object-fit: contain;
  image-rendering: auto;
}

.shared-service-list {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding: 10px 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shared-service-row,
.shared-service-row:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: stretch;
  gap: clamp(18px, 2vw, 28px);
  min-height: 122px;
  padding: 12px 8px 12px 28px;
  background: transparent;
}

.shared-service-row__copy {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.shared-service-row__copy::before {
  content: "";
  width: 28px;
  height: 30px;
  background: url("assets/services/shared/service_marker_sparkle_sunrise.png") center / contain no-repeat;
  pointer-events: none;
  transform: rotate(-5deg);
}

.shared-service-row__copy-main { min-width: 0; }

.shared-service-row__copy h3 {
  margin-bottom: 7px;
  font-size: clamp(20px, 1.7vw, 25px);
}

.shared-service-row__copy p {
  max-width: 100%;
  font-size: 15px;
  line-height: 1.48;
}

.shared-service-row__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: max-content;
}

.shared-service-row__offer-slot {
  flex: 0 0 58px;
  width: 58px;
  min-height: 42px;
  margin-right: 18px;
}

.shared-service-row__offer {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  min-height: 42px;
  padding: 5px;
  border: 2px dashed #ff8ca7;
  border-radius: 13px;
  background: #ffe5ec;
  color: #ff527b;
  font: 700 16px var(--font-signature-display);
  transform: rotate(-.7deg);
}

.shared-service-row__offer::after {
  content: "";
  position: absolute;
  top: -18px;
  right: 0;
  width: 24px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M2 14L6 2M8 16L15 8M13 19L21 17' fill='none' stroke='%23ff6f91' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateX(19px);
}

.shared-service-row__pricing {
  flex: 0 0 clamp(132px, 10vw, 150px);
  width: clamp(132px, 10vw, 150px);
  min-height: 78px;
  padding: 9px 12px;
  border-color: color-mix(in srgb, var(--shared-accent) 23%, transparent);
  border-radius: 15px;
  background: rgba(255, 252, 249, .72);
}

.shared-service-row__pricing del {
  font-size: 12px;
  line-height: 1.2;
  color: #785f57;
  text-decoration-thickness: 1px;
}

.shared-service-row__pricing strong {
  margin-top: 5px;
  font-size: 22px;
  line-height: 1.1;
  color: #ff4d78;
}

.shared-service-row:not(.has-sale) .shared-service-row__pricing strong {
  color: var(--cocoa);
}

.shared-service-row__pricing small { display: none; }

:is(.shared-service-layout, .signature-layout) > .service-note--shared {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  margin: 17px 0 0;
  padding: 8px 14px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.service-note--shared .service-note-label {
  min-height: 64px;
  padding: 12px 20px;
  border: 1px solid rgba(232, 94, 124, .2);
  border-radius: 9px 13px 8px 12px;
  background-color: #ffdfe7;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 255, 255, .38) 12px 18px),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(244, 137, 162, .14) 12px 18px);
  transform: rotate(-1.3deg);
}

.service-note--shared .service-note-label strong { font-size: 22px; }
.service-note--shared ul { gap: 8px; }
.service-note--shared li { font-size: 12px; }

@media (max-width: 1180px) {
  .shared-service-title {
    grid-template-columns: minmax(170px, 220px) minmax(340px, 650px) 76px;
    gap: clamp(18px, 2vw, 28px);
    min-height: 174px;
  }
  .shared-service-title__mascot { width: 220px; height: 164px; }
  .shared-service-title__mascot .shared-service-title__heart { top: 51px; right: 0; width: 47px; }
  .shared-service-title__paper { width: min(100%, 650px); padding: 18px 27px; }
  .shared-service-title > .shared-service-title__flower { left: calc(50% + 250px); top: 34px; }
  .shared-service-title__accent { width: 76px; height: 98px; }
  .shared-service-title__accent img { width: 72px; height: auto; }
  .shared-service-row,
  .shared-service-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
  }
  .shared-service-row__actions { gap: 12px; }
}

@media (max-width: 900px) {
  .shared-service-layout { padding: 0; border-radius: 0; }
  .shared-service-title {
    grid-template-columns: 154px minmax(0, 1fr) 62px;
    min-height: 142px;
    gap: 12px;
    padding-inline: 4px;
  }
  .shared-service-title__mascot { width: 154px; height: 116px; }
  .shared-service-title__mascot .shared-service-title__heart { top: 38px; right: 0; width: 38px; }
  .shared-service-title__paper { width: min(100%, 520px); min-height: 0; padding: 15px 20px; }
  .shared-service-title h2 { font-size: 34px; }
  .shared-service-title p { font-size: 11px; }
  .shared-service-title__flower { display: none; }
  .shared-service-title__accent { width: 62px; height: 82px; }
  .shared-service-title__accent img { width: 58px; height: auto; }
  .shared-service-list { padding: 7px 10px; }
  .shared-service-row,
  .shared-service-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: none;
    align-items: center;
    gap: 16px;
    min-height: 122px;
    padding: 14px 10px 14px 22px;
  }
  .shared-service-row__copy {
    grid-area: auto;
    width: auto;
    align-self: center;
  }
  .shared-service-row__actions {
    width: auto;
    min-width: max-content;
    flex-wrap: nowrap;
    row-gap: 0;
  }
  .shared-service-row__pricing { justify-items: center; align-content: center; }
  :is(.shared-service-layout, .signature-layout) > .service-note--shared { grid-template-columns: 170px minmax(0, 1fr); gap: 13px; padding-inline: 4px; }
  .service-note--shared .service-note-label { min-height: 54px; padding: 9px 12px; }
  .service-note--shared .service-note-label strong { font-size: 17px; }
  .service-note--shared li { font-size: 10px; }
}

@media (max-width: 600px) {
  .shared-service-layout { padding: 0; border-radius: 0; }
  .shared-service-title {
    grid-template-columns: 92px minmax(0, 1fr) 38px;
    min-height: 100px;
    margin-bottom: 10px;
    gap: 5px;
    padding: 4px 1px;
  }
  .shared-service-title__mascot { width: 100px; height: 92px; transform: translateX(-3px); }
  .shared-service-title__mascot .shared-service-title__heart { top: 32px; right: 0; width: 30px; }
  .shared-service-title__paper { aspect-ratio: auto; min-height: 90px; gap: 5px; padding: 8px 7px; }
  .shared-service-title h2 { font-size: 22px; letter-spacing: .02em; white-space: nowrap; }
  .shared-service-title p { font-size: 9px; line-height: 1.42; }
  .shared-service-title__accent { width: 38px; height: 56px; }
  .shared-service-title__accent img { width: 38px; height: auto; }
  /* Rows span the tab bar exactly; their own padding keeps the copy and price off the edges. */
  .shared-service-list { padding: 5px 0; }
  .shared-service-row,
  .shared-service-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 112px;
    grid-template-areas: none;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 18px 24px 18px 14px;
  }
  .shared-service-row__copy {
    grid-area: auto;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-self: auto;
    padding: 0 2px 0 0;
  }
  .shared-service-row__copy::before { width: 18px; height: 20px; }
  .shared-service-row__copy h3 { margin-bottom: 4px; font-size: 16px; }
  .shared-service-row__copy p { font-size: 12px; line-height: 1.42; }
  .shared-service-row__actions {
    position: relative;
    display: block;
    width: 112px;
    min-height: 64px;
    min-width: 0;
  }
  .shared-service-row__offer-slot {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: auto;
    width: 42px;
    min-height: 30px;
    margin-right: 0;
    transform: translate(20px, -14px);
  }
  .shared-service-row:not(.has-sale) .shared-service-row__offer-slot { display: none; }
  .shared-service-row__offer {
    flex-basis: 42px;
    width: 42px;
    min-height: 30px;
    padding: 3px;
    border: 2px dashed #ff8ca7;
    border-radius: 11px;
    background: #ffe5ec;
    font-size: 11px;
    transform: rotate(15deg);
  }
  .shared-service-row__offer::after { display: none; }
  .shared-service-row__pricing {
    grid-area: auto;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: center;
    gap: 2px;
    width: 112px;
    min-width: 0;
    min-height: 64px;
    padding: 7px 5px;
    border: 1px solid color-mix(in srgb, var(--shared-accent) 23%, transparent);
    border-radius: 16px;
    background: rgba(255, 252, 249, .72);
  }
  .shared-service-row__pricing del { font-size: 11px; }
  .shared-service-row__pricing strong { margin-top: 3px; font-size: 18px; }
  :is(.shared-service-layout, .signature-layout) > .service-note--shared {
    grid-template-columns: minmax(92px, 116px) minmax(0, 1fr);
    gap: 7px;
    margin-top: 10px;
    padding: 4px 2px 0;
  }
  .service-note--shared .service-note-label { min-height: 43px; padding: 6px; }
  .service-note--shared .service-note-label strong { font-size: 13px; }
  .service-note--shared ul { gap: 4px; }
  .service-note--shared li { padding-left: 14px; font-size: 7.5px; line-height: 1.35; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .service-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 60px);
    gap: 4px 0;
    min-height: 0;
    padding: 6px;
    overflow: hidden;
    border-radius: 18px;
  }
  .service-tabs button,
  .service-tabs button.is-active,
  .service-tabs button.is-active:hover {
    min-width: 0;
    width: 100%;
    height: 60px;
    min-height: 60px;
    margin: 0;
    padding: 5px 4px;
    font-size: 13px;
    line-height: 1.15;
  }
  .service-tabs button::after { top: 14px; bottom: 14px; }
  .service-tabs button:nth-child(4)::after { display: none; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .shared-service-list { padding: 6px; }
  .shared-service-row,
  .shared-service-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 124px;
    grid-template-areas: none;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding: 18px 30px 18px 16px;
  }
  .shared-service-row__copy {
    grid-area: auto;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    width: auto;
    align-self: auto;
    padding: 0;
  }
  .shared-service-row__copy::before { width: 20px; height: 22px; }
  .shared-service-row__copy h3 { margin-bottom: 5px; font-size: 18px; }
  .shared-service-row__copy p { font-size: 12.5px; line-height: 1.45; }
  .shared-service-row__actions {
    position: relative;
    display: block;
    width: 124px;
    min-width: 0;
    min-height: 70px;
  }
  .shared-service-row__offer-slot {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: auto;
    width: 44px;
    min-height: 32px;
    margin-right: 0;
    transform: translate(18px, -13px);
  }
  .shared-service-row:not(.has-sale) .shared-service-row__offer-slot { display: none; }
  .shared-service-row__offer {
    flex-basis: 44px;
    width: 44px;
    min-height: 32px;
    padding: 3px;
    border-radius: 11px;
    font-size: 12px;
    transform: rotate(12deg);
  }
  .shared-service-row__offer::after { display: none; }
  .shared-service-row__pricing {
    grid-area: auto;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: center;
    gap: 2px;
    width: 124px;
    min-width: 0;
    min-height: 70px;
    padding: 8px 6px;
    border: 1px solid color-mix(in srgb, var(--shared-accent) 23%, transparent);
    border-radius: 16px;
    background: rgba(255, 252, 249, .72);
  }
  .shared-service-row__pricing del { font-size: 11px; }
  .shared-service-row__pricing strong { margin-top: 3px; font-size: 19px; }
}

/* HomeView 16:9 relayout — matches the approved 1672 × 941 composition. */
.header-inner { position: relative; }
.header-sparkle {
  position: absolute;
  z-index: 3;
  top: -8px;
  right: -5px;
  width: 34px;
  height: 34px;
  object-fit: contain;
  pointer-events: none;
}

.home-section {
  padding: 12px 0 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 87% 22%, rgba(255, 220, 234, .56), transparent 34%),
    linear-gradient(180deg, #fffaf8 0%, #fff7f7 58%, #fff4f2 100%);
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, .92fr);
  grid-template-areas:
    "copy art"
    "support art"
    "bottom bottom";
  grid-template-rows:
    minmax(0, 1fr)
    clamp(156px, 10.8vw, 186px)
    clamp(88px, 6.3vw, 108px);
  gap: clamp(14px, 1.2vw, 20px) clamp(26px, 3vw, 54px);
  min-height: min(
    calc(100svh - var(--header) - 24px),
    calc((100vw - clamp(40px, 6vw, 112px)) / 1.91)
  );
  height: auto;
  align-items: stretch;
}

.home-copy {
  grid-area: copy;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(8px, 1.1vw, 20px) 0 0;
}

.taped-kicker {
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  margin: 0 0 clamp(14px, 1.4vw, 24px);
  padding: clamp(12px, .9vw, 16px) clamp(20px, 1.65vw, 28px);
  /* The paper of the About photo's "Tiệm nhỏ nhiều yêu thương" cloud (about_cloud_label.svg), kept rectangular:
     warm cream, a peach outline, a dashed peach line inside and a soft brown shadow. */
  border: 1px solid #f2bea7;
  border-radius: 16px;
  background: linear-gradient(135deg, #fffdf9 0%, #fff8f1 100%);
  color: #51342f;
  font: 700 clamp(14px, 1.06vw, 18px)/1.35 var(--font-signature-display);
  transform: rotate(-2deg);
  box-shadow: 0 3px 6px rgba(185, 132, 113, .12);
}

/* Corner: a small pink flower (design-assets/home/gen-corner-flower.py) stuck over the top-left corner. */
.taped-kicker::before {
  z-index: 2;
  left: -17px;
  top: -17px;
  width: 36px;
  height: 36px;
  background-image: url("assets/home/decor/corner_flower.svg");
  filter: drop-shadow(0 2px 2px rgba(185, 132, 113, .2));
  transform: rotate(-14deg);
}

.taped-kicker::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed #f6cbb8;
  border-radius: 11px;
  pointer-events: none;
}

.taped-kicker__copy { position: relative; z-index: 1; }

.home-copy h1 {
  margin: 0;
  font: 700 clamp(48px, 4.2vw, 76px) / 1.08 var(--font-signature-display);
  letter-spacing: -.042em;
  color: #40241d;
  white-space: nowrap;
}

.home-lede {
  position: relative;
  max-width: 690px;
  margin: clamp(13px, 1.25vw, 21px) 0 0;
  padding-left: 22px;
  color: #625c73;
  font-size: clamp(13px, 1vw, 17px);
  line-height: 1.58;
}

.home-lede::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .2em;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, #f58caf, #ee648a);
}

.home-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(12px, 1.6vw, 26px);
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(14px, 1.5vw, 24px);
}

.home-actions > .button-primary,
.home-actions > .button-secondary {
  display: inline-flex;
  flex: 0 1 clamp(250px, 17vw, 300px);
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: clamp(250px, 17vw, 300px);
  max-width: 300px;
  min-width: 0;
  height: clamp(54px, 4vw, 66px);
  min-height: 0;
  padding: 0 clamp(18px, 1.5vw, 28px);
  border-radius: 18px;
  font-size: clamp(15px, 1.15vw, 19px);
}

.home-actions .button-secondary img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.home-art {
  isolation: isolate;
  grid-area: art;
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: end center;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.home-art::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -4% -8% -3% -11%;
  border: 4px solid rgba(255, 255, 255, .88);
  border-radius: 48% 7% 42% 47% / 16% 7% 18% 20%;
  background:
    linear-gradient(rgba(224, 154, 183, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 154, 183, .09) 1px, transparent 1px),
    rgba(255, 225, 236, .48);
  background-size: 38px 38px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .42);
  transform: rotate(.55deg);
}

.home-art::after { display: none; }

.home-art .home-art__hero {
  position: relative;
  z-index: 1;
  width: min(103%, 790px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
  transform: translate(-1.5%, -1.5%);
}

.home-art > .home-art__badge {
  position: absolute;
  z-index: 3;
  top: 1%;
  right: -1%;
  width: clamp(86px, 7.6vw, 126px);
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform: none;
}

.home-art .paper-doodle {
  position: absolute;
  z-index: 2;
  width: auto;
  max-width: none;
  opacity: .86;
}

.home-art > .home-art__bow,
.home-art > .home-art__sparkle,
.home-art > .home-art__flower {
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: none;
}

.home-art > .home-art__bow { top: 5%; left: -4%; height: clamp(44px, 4.2vw, 68px); transform: rotate(-7deg); }
.home-art > .home-art__sparkle { top: 26%; left: 7%; height: clamp(23px, 2vw, 34px); transform: rotate(-4deg); }
.home-art > .home-art__flower { right: -2%; bottom: 15%; height: clamp(36px, 3vw, 50px); transform: rotate(5deg); }

.home-support {
  grid-area: support;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
  min-width: 0;
  min-height: 0;
}

.home-support > .home-quote,
.home-support > .today-card {
  grid-area: auto;
  grid-column: auto;
  grid-row: auto;
  order: initial;
  min-width: 0;
}

.home-quote,
.today-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
}

.home-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(12px, 1vw, 17px) clamp(14px, 1.2vw, 20px);
  border: 5px solid rgba(255, 255, 255, .88);
  border-radius: 21px;
  background: rgba(246, 238, 252, .86);
  color: #574a4b;
  font-size: clamp(11px, .82vw, 14px);
  line-height: 1.48;
  box-shadow: 0 13px 28px -25px rgba(100, 72, 89, .62);
}

.home-quote p { margin: 4px 0 8px; }

.home-quote__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
}

.home-quote__mark {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  transform: scale(1.42);
  transform-origin: center;
}

.home-quote__stars {
  display: flex;
  align-items: center;
  gap: 3px;
}

.home-quote__stars img { width: clamp(15px, 1.2vw, 20px); height: auto; }

.home-quote__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.home-quote__avatar-slot {
  display: block;
  flex: 0 0 auto;
  width: clamp(42px, 3vw, 50px);
  height: clamp(42px, 3vw, 50px);
  border: 2px dashed rgba(171, 142, 195, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .58);
  overflow: hidden;
}

.home-quote__avatar-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.home-quote cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-style: normal;
  line-height: 1.25;
}

.home-quote cite strong {
  color: var(--pink);
  font-size: clamp(9px, .72vw, 12px);
  letter-spacing: .025em;
}

.home-quote cite span { color: #9979bd; font-size: clamp(9px, .67vw, 11px); font-weight: 700; }
.home-quote__bow { position: absolute; right: 7px; bottom: 4px; width: clamp(29px, 2.3vw, 38px); height: auto; }

.home-support .today-card {
  align-self: stretch;
  justify-self: stretch;
  padding: 10px 11px 9px;
  border: 5px solid rgba(255, 255, 255, .9);
  border-radius: 21px;
  background: rgba(255, 241, 246, .86);
  box-shadow: 0 13px 28px -25px rgba(100, 72, 89, .62);
  transform: none;
}

.home-support .today-card .today-head h2 { font-size: 15px; }
.home-support .today-card .today-head time { font-size: 10px; }
.home-support .today-card .slot-grid { gap: 6px; padding-top: 3px; }
.home-support .today-card .slot-grid button { min-height: 50px; padding: 9px 5px 6px; }
.home-support .today-card .slot-grid strong { font-size: 11px; }
.home-support .today-card .slot-grid small { font-size: 13px; }
.home-support .today-card .today-note { padding-top: 5px; font-size: 10px; line-height: 1.3; }

@media (min-width: 1281px) {
  .home-quote p { margin-top: 14px; }

  .home-grid {
    grid-template-rows:
      minmax(0, 1fr)
      232px
      clamp(88px, 6.3vw, 108px);
  }

  .home-support {
    width: min(100%, 720px);
    justify-self: start;
  }

  .home-support .today-card { padding: 13px 13px 12px; }
  .home-support .today-card .slot-grid { gap: 7px; padding-top: 5px; }
  .home-support .today-card .slot-grid button { min-height: 56px; padding: 10px 6px 7px; }
  .home-support .today-card .today-note { margin-top: 12px; padding-top: 10px; }
}

.home-bottom {
  grid-area: bottom;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 11.3vw, 180px);
  gap: clamp(14px, 1.5vw, 24px);
  min-width: 0;
  min-height: 0;
}

.home-bottom .benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 5px solid rgba(255, 255, 255, .9);
  border-radius: 21px;
  background: rgba(255, 252, 250, .82);
  box-shadow: 0 13px 28px -25px rgba(100, 72, 89, .5);
  overflow: hidden;
}

@media (min-width: 901px) {
  .home-bottom .benefit-grid { outline: 1px solid rgba(241, 143, 166, .48); }
}

.home-bottom .benefit-grid article {
  display: grid;
  grid-template-columns: clamp(45px, 4vw, 64px) minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: clamp(9px, .9vw, 14px);
  padding: clamp(8px, .75vw, 13px) clamp(10px, 1vw, 17px);
  border-right: 1px dashed rgba(185, 158, 192, .32);
  background: transparent !important;
  text-align: left;
}

.home-bottom .benefit-grid article:last-child { border-right: 0; }
.home-bottom .benefit-grid img { width: 100%; height: clamp(44px, 4vw, 62px); object-fit: contain; }
.home-bottom .benefit-grid h3 { margin: 0 0 3px; color: #553a34; font-size: clamp(11px, .85vw, 14px); line-height: 1.2; }
.home-bottom .benefit-grid p { margin: 0; color: #816b67; font-size: clamp(8px, .65vw, 10.5px); line-height: 1.35; }

.home-love-note {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  padding: 16px 13px 11px;
  border: 1.5px solid rgba(241, 143, 166, .48);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff2f0 0%, #fee9e8 58%, #ffefee 100%);
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, .68),
    0 12px 30px -22px rgba(210, 104, 132, .38);
  text-align: center;
}

.home-love-note::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(241, 143, 166, .58);
  border-radius: 15px;
}

.home-love-note img { position: absolute; z-index: 2; top: -8px; right: -27px; width: clamp(50px, 3.7vw, 62px); height: auto; transform: rotate(8deg); }
.home-love-note p { position: relative; z-index: 1; margin: 0; color: #624b45; font-size: clamp(10px, .82vw, 14px); font-weight: 700; line-height: 1.45; }
.home-love-note p span { color: var(--pink); }

@media (min-width: 1281px) {
  .home-love-note {
    align-self: end;
    height: calc(100% + 26px);
  }
}

@media (max-width: 1280px) {
  .home-section { padding: 22px 0 38px; }
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "art"
      "support"
      "bottom";
    grid-template-rows: auto auto auto auto;
    height: auto;
    gap: 24px;
  }
  .home-copy { padding-top: 10px; }
  .home-copy h1 { white-space: normal; }
  .home-art { width: min(100%, 820px); aspect-ratio: 1256 / 955; margin-inline: auto; }
  .home-art .home-art__hero { width: min(98%, 760px); max-height: 100%; transform: none; }
  .home-art::before { inset: -3% -5%; }
  .home-support { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-quote,
  .home-support .today-card { height: auto; min-height: 184px; }
  .home-bottom { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-bottom .benefit-grid { min-height: 106px; }
  .home-love-note { min-height: 106px; }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .home-support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-bottom { grid-template-columns: minmax(0, 1fr) clamp(150px, 11.3vw, 180px); }
}

@media (max-width: 900px) {
  .header-sparkle { display: none; }
  .home-section { padding: 20px 0 44px; }
  .home-grid { gap: 20px; }
  .home-copy { order: initial; width: 100%; padding: 8px 0 0; }
  .home-art { order: initial; width: 100%; margin: 0 auto; }
  .home-art > .home-art__badge { width: 92px; right: 1%; }
  .home-art > .home-art__bow { left: 1%; }
  .home-support { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-quote,
  .home-support .today-card { height: auto; min-height: 184px; }
  .home-bottom { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-bottom .benefit-grid { min-height: 106px; }
  .home-love-note { min-height: 106px; }
}

@media (max-width: 600px) {
  .home-section { padding-top: 14px; }
  .home-grid { gap: 16px; }
  .taped-kicker { display: none; } /* the owner keeps the note for tablet and web only */
  .home-copy h1 { font-size: clamp(40px, 12vw, 56px); line-height: 1.09; }
  .home-lede { max-width: none; margin-top: 16px; padding-left: 16px; font-size: 14px; line-height: 1.55; }
  .home-lede br { display: none; }
  .home-actions { gap: 9px; margin-top: 18px; }
  .home-actions > .button-primary,
  .home-actions > .button-secondary { flex: 1 1 0; width: auto; max-width: none; gap: 7px; height: 56px; padding-inline: 9px; font-size: clamp(12px, 3.5vw, 15px); }
  .home-actions .button-secondary img { width: 20px; height: 20px; }
  .home-art { aspect-ratio: 1256 / 1020; }
  .home-art::before { inset: 0 -10% -2%; border-width: 3px; border-radius: 45% 9% 39% 44% / 15% 9% 17% 19%; background-size: 28px 28px; }
  .home-art .home-art__hero { width: 105%; transform: translateY(-1%); }
  .home-art > .home-art__badge { width: 68px; top: 3%; right: -1%; }
  .home-art > .home-art__bow { top: 8%; height: 38px; }
  .home-art > .home-art__sparkle { display: none; }
  .home-art > .home-art__flower { height: 32px; right: 1%; }
  .home-quote { min-height: 190px; padding: 15px; font-size: 12px; }
  .home-quote__stars img { width: 15px; }
  .home-quote__bow { right: 0; bottom: 0; width: clamp(36px, 9vw, 40px); }
  .home-support .today-card { min-height: 0; padding: 12px 10px 10px; }
  .home-support .today-card .slot-grid button { min-height: 62px; }
  .home-support .today-card .today-note { margin-top: 12px; font-size: 9px; }
  .home-bottom .benefit-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-bottom .benefit-grid article { grid-template-columns: 54px minmax(0, 1fr); min-height: 76px; padding: 10px 14px; border-right: 0; border-bottom: 1px dashed rgba(185, 158, 192, .32); }
  .home-bottom .benefit-grid article:last-child { border-bottom: 0; }
  .home-bottom .benefit-grid img { height: 52px; }
  .home-bottom .benefit-grid h3 { font-size: 13px; }
  .home-bottom .benefit-grid p { font-size: 10px; }
  .home-love-note { min-height: 112px; }
  .home-love-note img { right: -8px; }
  .home-love-note p { font-size: 13px; }
}

/* About editorial media cluster. */
.about-section {
  position: relative;
  padding: 4px 0 clamp(50px, 3.3vw, 64px);
  overflow: hidden;
  color: #4f2f2e;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: none;
  gap: clamp(20px, 1.35vw, 24px);
}

.about-feature {
  display: grid;
  align-items: stretch;
  min-width: 0;
  gap: clamp(20px, 1.35vw, 24px);
}

.about-intro,
.about-media,
.about-photo--main,
.about-story,
.about-photo--detail,
.about-info-rail,
.about-journey {
  grid-area: auto;
}

.about-feature {
  width: min(100%, 1320px);
  margin-inline: auto;
  gap: clamp(28px, 3.4vw, 54px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.about-media {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-media__photos {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: clamp(430px, 36vw, 520px);
  isolation: isolate;
}

.about-panel,
.about-photo,
.about-info-rail,
.about-journey {
  position: relative;
  margin: 0;
  border: 1px solid rgba(242, 176, 190, .58);
  border-radius: 30px;
  background: rgba(255, 249, 247, .84);
  box-shadow: 0 8px 24px rgba(129, 57, 35, .045);
}

.about-intro {
  position: relative;
  min-width: 0;
  padding: clamp(12px, 1.2vw, 22px) 0 clamp(8px, .8vw, 14px);
  text-align: center;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8464bd;
  font: 800 clamp(11px, .78vw, 13px)/1.2 Quicksand, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: none;
}

.section-label__icon {
  width: clamp(22px, 1.45vw, 26px);
  height: clamp(22px, 1.45vw, 26px);
  flex: 0 0 auto;
  object-fit: contain;
}

.about-intro__content {
  padding-inline: clamp(28px, 4vw, 72px);
}

.about-intro h2 {
  max-width: min(100%, 18ch);
  margin: 12px 0 28px;
  color: #3f304f;
  font: 750 clamp(34px, 3.15vw, 54px)/1.08 Quicksand, sans-serif;
  letter-spacing: -.035em;
  text-align: left;
  text-wrap: balance;
}

.about-intro h2 em {
  display: inline-block;
  color: #f487a7;
  font-style: normal;
  font-size: 1.08em;
  white-space: nowrap;
  text-shadow: 0 2px 0 #fff, 1px 0 0 #64352f, -1px 0 0 #64352f, 0 1px 0 #64352f, 0 -1px 0 #64352f;
}

.about-divider {
  display: grid;
  grid-template-columns: minmax(30px, 1fr) 58px minmax(30px, 1fr);
  align-items: center;
  gap: 10px;
  width: min(100%, 560px);
  margin: 10px auto 14px;
}

.about-divider i {
  height: 1px;
  background: repeating-linear-gradient(90deg, #f38aaa 0 13px, transparent 13px 23px);
}

.about-divider img {
  width: min(58px, 100%);
  max-width: 64px;
  height: auto;
}

.about-intro p {
  max-width: 70ch;
  margin: 0 auto;
  color: #5b3f35;
  font: 600 clamp(16px, 1.12vw, 20px)/1.65 var(--font-signature-body);
}

.about-inline-highlight { color: #f36f98; }
.about-intro p .about-inline-highlight::after {
  bottom: -.2em;
  height: .34em;
  -webkit-mask-size: .93em .34em;
  mask-size: .93em .34em;
}

.about-decor {
  position: absolute;
  z-index: 4;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.about-decor--sparkles {
  width: min(84px, 11vw); /* the pastel tint is baked into the asset (design-assets/doodles/gen-sparkle-cluster-pastel.py) */
}

.about-intro__sparkles { top: clamp(40px, 4.6vw, 88px); right: clamp(12px, 3.6vw, 70px); }

.about-photo {
  display: grid;
  padding: 10px;
  overflow: visible;
  background: rgba(255, 249, 247, .9);
}

.about-photo > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-area: 1 / 1;
  border-radius: 23px;
  object-fit: cover;
}

.about-photo--main {
  position: absolute;
  z-index: 2;
  top: 3%;
  left: -4.5%;
  width: 63%;
  height: 92%;
  min-height: 0;
  padding: 7px;
  border: 0;
  border-radius: 23px;
  background: #fffdfb;
  box-shadow: 0 12px 26px rgba(83, 54, 68, .12);
  transform: rotate(-6deg);
}

.about-photo--main > img:first-child {
  border-radius: 17px;
  object-position: center 43%;
}

.about-photo--fan {
  position: absolute;
  z-index: 3;
  top: calc(9% - 2px);
  right: 4%;
  width: 64%;
  height: 88%;
  min-height: 0;
  padding: 7px;
  border-color: rgba(202, 178, 222, .65);
  border-radius: 22px;
  background: #fffdfb;
  box-shadow: 0 14px 26px rgba(83, 54, 68, .12);
  transform: rotate(8deg);
}

.about-photo--fan > img:first-child {
  border-radius: 16px;
  object-position: center 30%;
}

.about-photo__sticker { left: -9px; bottom: -4px; }

.about-photo-bubble {
  position: absolute;
  z-index: 5;
  top: calc(3% - 4px);
  /* Web: out over the salon photo's top-left corner, as far as the page margin allows (the photos sit
     50vw - 660px in from the window from 1440px up; 676px leaves ~8px with a classic scrollbar). */
  left: max(-80px, min(-41px, calc(676px - 50vw)));
  display: grid;
  place-items: center;
  width: 180px;
  min-height: 116px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url("assets/about/decor/about_cloud_label.svg") center / 100% 100% no-repeat;
  color: #51342f;
  font: 800 14px/1.2 var(--font-signature-display);
  text-align: center;
  transform: rotate(-7deg);
  pointer-events: none;
}
.about-photo-bubble > span {
  display: block;
  width: 100%;
  /* Inside the cloud's dashed line: its widest band is ~68% of the width, and the cloud's middle sits ~2% left. */
  max-width: 68%;
  margin-right: 4%;
  text-align: center;
  transform: rotate(1deg);
  transform-origin: center;
}

.about-story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
  padding: clamp(28px, 2.2vw, 40px) clamp(24px, 2vw, 36px) clamp(22px, 1.7vw, 28px);
  overflow: hidden;
  border-color: rgba(231, 178, 139, .48);
  background: rgba(255, 249, 243, .92);
}

.story-pill {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 18px;
  border: 1px solid #e05a78;
  border-radius: 999px;
  background: transparent;
  color: #b74061;
  font: 700 clamp(15px, 1.2vw, 22px)/1.2 var(--font-signature-display);
  white-space: nowrap;
  box-shadow: none;
}

.story-pill__icon { flex: none; width: 22px; height: 22px; object-fit: contain; }

.about-story p {
  margin: clamp(18px, 1.35vw, 24px) 0 0;
  color: #4f302d;
  font: 600 clamp(15px, 1.02vw, 18px)/1.72 var(--font-signature-body);
}

.about-divider--story {
  grid-template-columns: minmax(20px, 1fr) 44px minmax(20px, 1fr);
  gap: 8px;
  width: 100%;
  margin: 18px 0 14px;
}

.about-divider--story img { width: 44px; }
.about-divider--story + p { margin-top: 0; }

.about-story .about-story__owner {
  margin-top: clamp(10px, .8vw, 14px);
  color: #73514b;
  font-size: clamp(14px, .95vw, 16px);
  line-height: 1.55;
}

.about-photo--detail {
  position: absolute;
  z-index: 4;
  right: 0;
  /* Hung from the large photo's top edge: under the clip that rotated edge sits at
     8.57% of the collage height + 5.06% of its width (margin % follow the width). */
  top: calc(8.57% - 8px);
  margin-top: 5.06%;
  width: clamp(138px, 11.5vw, 176px);
  height: clamp(150px, 12.5vw, 184px);
  min-height: 0;
  padding: 6px;
  border: 1px solid rgba(242, 176, 190, .58);
  border-radius: 18px;
  background: #fffdfb;
  box-shadow: 0 12px 24px rgba(83, 54, 68, .17);
  transform: rotate(3deg);
}

.about-photo--detail > .about-photo__crop {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 12px;
}

.about-photo__crop > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.3);
  transform-origin: 70% 16%;
}

.about-photo > .about-paperclip {
  position: absolute;
  z-index: 5;
  top: -16px;
  right: 12px;
  left: auto;
  width: 20px;
  height: auto;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(91, 78, 128, .2));
  transform: rotate(12deg);
  pointer-events: none;
}

/* Each About photo opens in the site's photo lightbox: the whole card is the button, and it lifts on hover. */
.about-photo__zoom {
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
}

.about-photo__zoom:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 4px;
}

/* The cloud and the cat sticker belong to the salon photo, the paperclip to Nhu Nhi's snapshot: hovering one
   lifts its group, and a click opens its photo. */
.about-media__photos [data-photo-zoom] {
  pointer-events: auto;
  cursor: zoom-in;
}

/* Two hover groups: the salon photo with its cloud, and the nail photo with Nhu Nhi's clipped snapshot.
   A group lifts together; translate only, so the cloud and the clipped snapshot stay where they sit. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .about-photo,
  .about-photo-bubble { transition: translate .25s ease, box-shadow .25s ease; }

  .about-media__photos:has(.about-photo--main:hover, .about-photo-bubble:hover) :is(.about-photo--main, .about-photo-bubble),
  .about-media__photos:has(.about-photo--fan:hover, .about-photo--detail:hover) :is(.about-photo--fan, .about-photo--detail) {
    translate: 0 -8px;
  }

  .about-media__photos:has(.about-photo--main:hover, .about-photo-bubble:hover) .about-photo--main,
  .about-media__photos:has(.about-photo--fan:hover, .about-photo--detail:hover) :is(.about-photo--fan, .about-photo--detail) {
    box-shadow: 0 22px 40px rgba(83, 54, 68, .22);
  }
}

.about-info-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  height: auto;
  padding: 14px 8px;
  overflow: hidden;
}

.about-info-rail article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 10px clamp(16px, 1.5vw, 28px);
  border-right: 1px dashed rgba(246, 111, 152, .34);
  text-align: center;
}

.about-info-rail article:last-child { border-right: 0; }

.about-info-rail img {
  grid-row: auto;
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.about-info-rail span {
  color: #513b39;
  font: 700 clamp(11px, .85vw, 16px)/1.2 var(--font-signature-body);
}

.about-info-rail strong {
  color: #f36f98;
  font: 800 clamp(20px, 1.65vw, 31px)/1.15 var(--font-signature-display);
}

.about-info-rail p {
  display: none;
}

.about-story > .about-info-rail {
  width: 100%;
  margin: 18px 0 0;
  padding: clamp(22px, 1.7vw, 28px) 0 0;
  border: 0;
  border-top: 1px dashed rgba(246, 111, 152, .34);
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.about-story > .about-info-rail article {
  gap: 3px;
  padding: 0 6px;
  border-right: 1px dashed rgba(246, 111, 152, .34);
  border-bottom: 0;
}

.about-story > .about-info-rail article:last-child { border-right: 0; }
.about-story > .about-info-rail img { width: 42px; height: 42px; }
.about-story > .about-info-rail span { font-size: 12px; }
.about-story > .about-info-rail strong { font-size: clamp(17px, 1.2vw, 20px); }


.about-journey {
  min-width: 0;
  margin-top: clamp(48px, 4vw, 72px);
  padding: 20px;
  overflow: visible;
}

.about-journey > .about-journey__heading {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 24px;
  display: block;
  width: auto;
  transform: translateY(-50%);
}

.about-journey h3 {
  margin: 0;
  padding: 9px 26px;
  border: 1px solid rgba(242, 176, 190, .6);
  border-radius: 10px 14px 9px 13px;
  background: rgba(255, 252, 249, .96);
  color: #4b2d28;
  font: 800 clamp(18px, 1.45vw, 28px)/1.1 var(--font-signature-display);
  transform: rotate(-1deg);
}

.about-journey h3 span { color: #f36f98; }

.about-journey-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  height: 100%;
  padding-top: 0;
}

.about-journey-grid article {
  --journey-icon-scale: 1;
  --journey-icon-shift: 0px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 96px auto;
  place-items: start center;
  align-content: center;
  min-width: 0;
  min-height: 190px;
  padding: 16px clamp(18px, 1.35vw, 26px);
  border-right: 1px dashed rgba(246, 111, 152, .28);
  text-align: center;
}

.about-journey-grid article:last-child { border-right: 0; }

.about-journey-grid b {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: clamp(18px, 1.7vw, 32px);
  left: auto;
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 11px 15px 10px 14px;
  background: #f486a6;
  color: #fff;
  font: 800 14px/1 var(--font-signature-body);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .42);
  transform: rotate(-7deg);
  transform-origin: center;
}

.about-journey-grid article:nth-child(2) b { background: #a984dd; }
.about-journey-grid article:nth-child(3) b { background: #ef9657; }
.about-journey-grid article:nth-child(even) b {
  transform: rotate(7deg);
}
.about-journey-grid article:nth-child(3) { --journey-icon-scale: 1.04; }
.about-journey-grid article:nth-child(4) { --journey-icon-scale: 1.08; }

.about-journey-grid img {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: 92px;
  height: 92px;
  object-fit: contain;
  transform: translateX(var(--journey-icon-shift)) scale(var(--journey-icon-scale));
  transform-origin: center;
}

.about-journey-grid article > div {
  grid-column: 1;
  grid-row: 2;
  width: min(100%, 270px);
  min-width: 0;
}

.about-journey-grid h4 {
  display: grid;
  place-items: center;
  min-height: 1.2em;
  margin: 0;
  color: #f36f98;
  font: 800 clamp(13px, 1.05vw, 20px)/1.2 var(--font-signature-display);
}

.about-journey-grid article:nth-child(2) h4 { color: #9f79d2; }
.about-journey-grid article:nth-child(3) h4 { color: #ed8850; }

.about-journey-grid p {
  margin: 7px 0 0;
  color: #4f3b38;
  font: 600 clamp(10px, .72vw, 14px)/1.45 var(--font-signature-body);
}

@media (max-width: 1180px) {
  .about-section { padding: 10px 0 52px; }
  .about-grid {
    display: grid;
    gap: clamp(16px, 2vw, 22px);
  }
  .about-feature {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .about-intro { padding: 14px 0 8px; }
  .about-intro h2 { margin-bottom: 24px; }
  .about-intro__content { padding-inline: 22px; }
  .about-intro p { max-width: 62ch; font-size: clamp(15px, 1.8vw, 18px); }
  .about-intro__sparkles { right: clamp(10px, 2.4vw, 30px); }
  .about-photo-bubble { top: calc(3% - 4px); left: -28px; width: 146px; min-height: 94px; font-size: 12px; line-height: 1.16; transform: rotate(-3deg); }
  .about-story {
    padding: 22px 24px 17px;
  }
  .about-story p { font-size: clamp(14px, 1.55vw, 17px); line-height: 1.68; }
  .about-divider--story { margin: 14px 0 10px; }
  .about-story > .about-info-rail { margin-top: 14px; padding-top: 17px; }
  .about-story > .about-info-rail article { padding-inline: 4px; }
  .about-story > .about-info-rail img { width: 34px; height: 34px; }
  .about-story > .about-info-rail span { font-size: 11px; }
  .about-story > .about-info-rail strong { font-size: 16px; }
  .about-story .about-story__owner { font-size: clamp(13px, 1.45vw, 15px); }
  .about-journey { padding: 22px 14px; }
  .about-journey-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .about-journey-grid article { min-height: 100px; }
}

@media (max-width: 900px) {
  .about-feature {
    max-width: 560px;
    grid-template-columns: minmax(0, 1fr);
  }
  .about-media__photos { flex: none; height: clamp(320px, 55vw, 430px); min-height: 0; }
  .about-photo--detail { width: clamp(125px, 21vw, 160px); height: clamp(135px, 23vw, 170px); }
  .about-story { height: auto; }
}

@media (max-width: 600px) {
  .about-section { padding: 10px 0 42px; }
  .about-grid { gap: 12px; }
  .about-feature { max-width: 440px; gap: 12px; }
  .about-media { border-radius: 0; }
  .about-intro { padding: 10px 0 8px; }
  .about-intro__content { padding-inline: 10px; }
  .section-label { padding: 0; font-size: 11px; }
  .about-intro h2 { margin: 12px 0 20px; font-size: clamp(27px, 8.4vw, 36px); line-height: 1.12; }
  .about-divider {
    grid-template-columns: minmax(14px, 1fr) 36px minmax(14px, 1fr);
    gap: 5px;
    margin: 10px auto 12px;
  }
  .about-divider img { width: 36px; }
  .about-intro p { font-size: clamp(14px, 3.8vw, 16px); line-height: 1.58; }
  /* Phones: at the top right, level with the section label's line. */
  .about-intro__sparkles { top: -8px; right: 28px; width: 54px; }
  .about-media__photos { height: clamp(338px, 92vw, 400px); }
  .about-photo--main { top: 3%; left: 1%; width: 62%; height: 89%; padding: 5px; border-radius: 18px; }
  .about-photo--main > img:first-child { border-radius: 13px; }
  .about-photo--fan { top: 12%; right: .5%; width: 66%; height: 85%; padding: 5px; border-radius: 17px; transform: rotate(4deg); }
  .about-photo--fan > img:first-child { border-radius: 12px; }
  .about-photo-bubble { top: 6px; left: -14px; width: 108px; min-height: 70px; font-size: 10px; line-height: 1.14; }
  .about-photo__sticker { width: 38px; left: -5px; bottom: -5px; }
  .story-pill { gap: 8px; padding: 10px 12px; font-size: clamp(14px, 4vw, 16px); }
  .story-pill__icon { width: 18px; height: 18px; }
  .about-story { padding: 24px 20px 18px; border-radius: 24px; }
  .about-story p { margin-top: 16px; font-size: 15px; line-height: 1.62; }
  .about-divider--story {
    grid-template-columns: minmax(10px, 1fr) 30px minmax(10px, 1fr);
    margin: 14px 0 12px;
  }
  .about-divider--story img { width: 30px; }
  .about-photo--detail { right: -1%; top: calc(11.9% - 3px); margin-top: 2.41%; width: clamp(96px, 26vw, 114px); height: clamp(108px, 29vw, 128px); padding: 4px; border-radius: 14px; }
  .about-photo--detail > .about-photo__crop { border-radius: 10px; }
  .about-photo__crop > img { transform: scale(1.45); }
  .about-story .about-story__owner { margin-top: 10px; font-size: 14px; line-height: 1.55; }
  .about-photo > .about-paperclip { top: -14px; right: 10px; width: 20px; }
  .about-story > .about-info-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; padding: 18px 0 0; }
  .about-story > .about-info-rail article { display: flex; padding: 0 3px; text-align: center; }
  .about-story > .about-info-rail img { width: 28px; height: 28px; }
  .about-story > .about-info-rail span { font-size: 12px; }
  .about-story > .about-info-rail strong { font-size: 15px; }
  .about-journey { padding: 18px 7px; border-radius: 22px; }
  .about-journey > .about-journey__heading { left: 9px; }
  .about-journey h3 { padding: 7px 11px; font-size: clamp(14px, 4.1vw, 18px); }
  .about-journey-grid { padding-top: 0; }
  .about-journey-grid article {
    --journey-icon-shift: 0px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 62px auto;
    min-height: 154px;
    padding: 10px 6px 9px;
  }
  .about-journey-grid b {
    top: 9px;
    right: 8px;
    left: auto;
    min-width: 32px;
    height: 24px;
    padding: 0 6px;
    border-radius: 8px 11px 7px 10px;
    font-size: 9px;
    transform: rotate(-7deg);
  }
  .about-journey-grid article:nth-child(even) b { transform: rotate(7deg); }
  .about-journey-grid img { width: 58px; height: 58px; }
  .about-journey-grid article > div { width: min(100%, 150px); }
  .about-journey-grid h4 { min-height: 2.4em; font-size: clamp(10px, 2.8vw, 12px); }
  .about-journey-grid p { margin: 4px auto 0; font-size: clamp(7.5px, 2.05vw, 9px); line-height: 1.38; }
}

/* Tablets and small laptops: from 901px to 1439px the salon photo's tilted corner bled past the window's left edge,
   so the whole collage steps in, the salon photo hangs a touch further out to keep half of each big photo in view,
   and the pinned photo follows the fan's tilted edge. The cloud sits right on the salon photo's corner, which its
   -6deg tilt pushes ~22px past its box. */
@media (min-width: 901px) and (max-width: 1439px) {
  .about-media__photos { margin-left: 24px; }
  .about-photo--main { left: -5%; }
  .about-photo--detail { right: -2px; }
  .about-photo-bubble { left: calc(-5% - 22px); }
}

@media (min-width: 601px) and (max-width: 900px) {
  .about-photo-bubble { left: calc(-4.5% - 22px); }
}



/* About editorial decorative sizing. */
.about-photo > .about-decor.about-photo__sticker {
  width: min(72px, 9vw);
  height: auto;
  object-fit: contain;
}

@media (max-width: 1180px) {
  .about-journey > .about-journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .about-photo > .about-decor.about-photo__sticker { width: 42px; }
}

@media (max-width: 720px) {
  .gallery-more {
    width: min(260px, 62%);
    min-width: 210px;
    font-size: clamp(18px, 3.8vw, 22px);
    line-height: 1;
    white-space: nowrap;
  }
  .gallery-more-wrap p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
  }
}


/* About Journey — reference composition with only the four V5 card textures retained. */
.about-journey {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  justify-self: center;
  width: 100%;
  margin-top: calc(clamp(48px, 4vw, 72px) + 8px);
  padding: clamp(44px, 3vw, 52px) clamp(28px, 2.3vw, 38px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-journey::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -8px -10px -12px;
  border: 1px solid rgba(255, 139, 165, .62);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255, 250, 248, .96), rgba(255, 253, 248, .9) 55%, rgba(250, 247, 255, .88));
  box-shadow: 0 7px 16px rgba(210, 98, 128, .13);
  pointer-events: none;
}

.about-journey::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px 0 -2px;
  border: 1px dashed rgba(255, 119, 153, .58);
  border-radius: 27px;
  pointer-events: none;
}

.about-journey > .about-journey__heading {
  position: absolute;
  z-index: 4;
  top: 0;
  left: clamp(-8px, -.45vw, -4px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  gap: 0;
  width: min(310px, 23vw);
  aspect-ratio: 588 / 177;
  transform: translateY(-50%) rotate(-1.1deg);
}

.about-journey__heading > .about-journey__title-shell {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* The label's three pink emphasis marks, cut out of its art (design-assets/about/split-journey-label.py), jitter one
   by one like a hand-drawn doodle, each on its own beat (the ticket's doodle keyframes). */
.about-journey__marks { position: absolute; inset: 0; pointer-events: none; }
.about-journey__marks img { position: absolute; height: auto; animation: booking-ticket-doodle 1s steps(1) infinite; }
.about-journey__marks img:nth-child(1) { left: 90.31%; top: 12.99%; width: 4.93%; }
.about-journey__marks img:nth-child(2) { left: 92.18%; top: 29.94%; width: 7.48%; animation-duration: 1.3s; animation-delay: -.4s; animation-direction: reverse; }
.about-journey__marks img:nth-child(3) { left: 92.01%; top: 48.02%; width: 6.12%; animation-duration: 1.6s; animation-delay: -.9s; animation-direction: alternate; }
@media (prefers-reduced-motion: reduce) { .about-journey__marks img { animation: none; } }

.about-journey h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 15% 1%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5b2f25;
  font: 800 clamp(18px, 1.4vw, 26px)/1.08 var(--font-signature-display);
  text-align: center;
  white-space: nowrap;
  transform: translateX(clamp(-11px, -.75vw, -7px)) rotate(-3.5deg);
}

.about-journey > .about-journey__microcopy {
  position: absolute;
  z-index: 3;
  top: clamp(-80px, -5.4vw, -64px);
  right: clamp(24px, 2.5vw, 36px);
  left: auto;
  width: min(235px, 15.5vw);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.about-journey > .about-journey-grid {
  --journey-gap: clamp(14px, 1.5vw, 24px);
  --journey-half-gap: clamp(7px, .75vw, 12px);
  --journey-visual-gap: max(var(--journey-gap), calc(20cqw - 230.4px));
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 300px));
  justify-content: space-evenly;
  gap: var(--journey-gap);
  container-type: inline-size;
  height: auto;
  padding: 0;
}

.about-journey-grid article {
  --journey-card-bg: rgba(255, 246, 249, .84);
  --journey-card-border: rgba(239, 121, 156, .3);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(108px, 1.08fr) minmax(0, .92fr);
  place-items: start center;
  align-content: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1.02;
  padding: clamp(16px, 1.25vw, 21px) clamp(14px, 1.05vw, 18px) clamp(14px, 1.1vw, 19px);
  border: 1px solid var(--journey-card-border);
  border-radius: clamp(24px, 2vw, 32px);
  background: var(--journey-card-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68);
  text-align: center;
}

.about-journey-grid article:nth-child(1) {
  --journey-card-bg: rgba(255, 246, 249, .84);
  --journey-card-border: rgba(239, 121, 156, .3);
}
.about-journey-grid article:nth-child(2) {
  --journey-card-bg: rgba(249, 246, 255, .88);
  --journey-card-border: rgba(157, 119, 222, .3);
}
.about-journey-grid article:nth-child(3) {
  --journey-card-bg: rgba(255, 249, 244, .9);
  --journey-card-border: rgba(235, 139, 88, .3);
}
.about-journey-grid article:nth-child(4) {
  --journey-card-bg: rgba(241, 248, 255, .92);
  --journey-card-border: rgba(95, 143, 201, .32);
}
.about-journey-grid article:last-child { border: 1px solid var(--journey-card-border); }

.about-journey-grid b.sr-only {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  transform: none;
}

.about-journey-grid article:nth-child(even) b.sr-only { transform: none; }

.about-journey-grid .about-journey__badge {
  position: absolute;
  z-index: 3;
  top: -5px;
  right: -5px;
  left: auto;
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  justify-self: auto;
  display: block;
  width: clamp(52px, 4vw, 72px);
  height: auto;
  object-fit: contain;
  transform: none;
  pointer-events: none;
}

.about-journey-grid article > img:not(.about-journey__badge) {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: center;
  width: clamp(104px, 10vw, 144px);
  height: clamp(104px, 10vw, 144px);
  object-fit: contain;
  transform: none;
}

.about-journey-grid article > div {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  width: min(100%, 230px);
  min-width: 0;
  transform: translateY(5px);
}

.about-journey-grid h4 {
  display: block;
  min-height: 0;
  margin: 4px 0 0;
  padding: 6px 8px;
  border: 1px solid rgba(237, 82, 123, .28);
  border-radius: 999px;
  background: rgba(255, 250, 249, .48);
  color: #ed527b;
  font: 800 clamp(16px, 1.08vw, 19px)/1.15 var(--font-signature-display);
}

.about-journey-grid article:nth-child(2) h4 { border-color: rgba(150, 91, 208, .28); color: #965bd0; }
.about-journey-grid article:nth-child(3) h4 { border-color: rgba(236, 116, 58, .28); color: #ec743a; }
.about-journey-grid article:nth-child(4) h4 { border-color: rgba(95, 143, 201, .3); color: #5f8fc9; }
.about-journey-grid article:nth-child(4) .about-journey__badge {
  filter: hue-rotate(225deg) saturate(.72) brightness(1.04);
}

.about-journey-grid p {
  margin: 10px auto 0;
  color: #5a3a36;
  font: 600 clamp(11.5px, .78vw, 13.5px)/1.42 var(--font-signature-body);
}

.about-journey__connector {
  position: absolute;
  z-index: 3;
  top: 43%;
  right: auto;
  left: calc(100% + max(var(--journey-half-gap), calc(10cqw - 115.2px)));
  display: grid;
  place-items: center;
  width: clamp(92px, calc(var(--journey-visual-gap) + 30px), 132px);
  height: auto;
  aspect-ratio: 2172 / 724;
  background: url("assets/about/journey/heart_arrow_left_to_right.webp") center / contain no-repeat;
  filter: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.about-journey__connector::before { content: none; }

.about-journey__connector::after { content: none; }

@media (min-width: 1181px) {
  .about-journey > .about-journey__heading { top: -5px; }
  .about-journey > .about-journey__microcopy { transform: translateY(-5px); }
  .about-journey-grid p { margin-top: 16px; }
}

@media (max-width: 1180px) {
  .about-journey {
    width: calc(100% - 20px);
    margin-inline: auto;
    margin-top: 72px;
    padding: 76px 22px;
  }
  .about-journey > .about-journey__heading { left: -4px; width: min(286px, 38vw); }
  .about-journey > .about-journey__microcopy { display: none; }
  .about-journey > .about-journey-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
  }
  .about-journey-grid article {
    justify-self: center;
    width: min(100%, 340px);
    grid-template-rows: minmax(112px, 1.05fr) minmax(0, .95fr);
  }
  .about-journey-grid article:nth-child(odd) .about-journey__badge { right: auto; left: -5px; }
  .about-journey-grid article:nth-child(even) .about-journey__badge { right: -5px; left: auto; }
  .about-journey-grid article > img:not(.about-journey__badge) { width: clamp(104px, 15vw, 136px); height: clamp(104px, 15vw, 136px); }
  .about-journey__connector { display: none; }
}

@media (min-width: 901px) and (max-width: 1024px) {
  .about-journey { padding: 52px 22px; }
  .about-journey > .about-journey-grid { gap: 20px; }
  .about-journey-grid article {
    width: 100%;
    height: clamp(306px, 34vw, 348px);
    aspect-ratio: auto;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 10px;
    padding: 18px;
  }
  .about-journey-grid article > div {
    align-self: center;
    transform: none;
  }
}

@media (max-width: 600px) {
  .about-journey {
    width: 100%;
    margin-top: 56px;
    padding: 52px 22px;
  }
  .about-journey::before {
    inset: -5px 0;
    border-radius: 30px;
  }
  .about-journey::after { inset: 2px 7px; border-radius: 23px; }
  .about-journey > .about-journey__heading {
    left: 50%;
    width: min(232px, 72vw);
    transform: translate(-50%, -50%) rotate(-1.1deg);
  }
  .about-journey h3 { font-size: clamp(16px, 4.7vw, 19px); }
  .about-journey > .about-journey-grid {
    --journey-mobile-column-gap: 12px;
    --journey-mobile-row-gap: 16px;
    width: 100%;
    margin-inline: auto;
    gap: var(--journey-mobile-row-gap) var(--journey-mobile-column-gap);
  }
  .about-journey-grid article {
    grid-template-rows: 64px auto;
    align-content: center;
    gap: 4px;
    aspect-ratio: 1.04 / 1;
    padding: 10px;
    border-radius: 24px;
  }
  .about-journey-grid .about-journey__badge {
    top: -10px;
    left: -9px;
    right: auto;
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    justify-self: auto;
    width: 44px;
  }
  .about-journey-grid article:nth-child(odd) .about-journey__badge { right: auto; left: -9px; }
  .about-journey-grid article:nth-child(even) .about-journey__badge { right: -9px; left: auto; }
  .about-journey-grid article > img:not(.about-journey__badge) { width: 64px; height: 64px; }
  .about-journey-grid article > div {
    align-self: start;
    width: min(100%, 142px);
    margin-bottom: 0;
    transform: translateY(-1px);
  }
  .about-journey-grid h4 { margin-top: 0; padding: 4px 5px; font-size: clamp(10px, 3vw, 11.5px); }
  .about-journey-grid p { margin-top: 9px; font-size: clamp(9.5px, 2.35vw, 10.5px); line-height: 1.26; }
  .about-journey-grid article:nth-child(1) { grid-column: 1; grid-row: 1; }
  .about-journey-grid article:nth-child(2) { grid-column: 2; grid-row: 1; }
  .about-journey-grid article:nth-child(3) { grid-column: 1; grid-row: 2; }
  .about-journey-grid article:nth-child(4) { grid-column: 2; grid-row: 2; }
  .about-journey__connector {
    display: none;
    width: 72px;
    height: auto;
  }
  .about-journey-grid article:nth-child(1) .about-journey__connector {
    top: 50%;
    left: calc(100% + var(--journey-mobile-column-gap) / 2);
    transform: translate(-50%, -50%);
  }
  .about-journey-grid article:nth-child(2) .about-journey__connector {
    top: calc(100% + var(--journey-mobile-row-gap) / 2);
    left: 50%;
    width: 48px;
    aspect-ratio: 1024 / 1536;
    background-image: url("assets/about/journey/heart_arrow_top_to_bottom_curved.webp");
    transform: translate(-50%, -50%);
  }
  .about-journey-grid article:nth-child(3) .about-journey__connector {
    top: 50%;
    left: calc(var(--journey-mobile-column-gap) / -2);
    width: 72px;
    aspect-ratio: 1163 / 294;
    background-image: url("assets/about/journey/heart_arrow_right_to_left.webp");
    transform: translate(-50%, -50%);
  }
}

@media (min-width: 361px) and (max-width: 420px) {
  .about-journey-grid article {
    grid-template-rows: 60px auto;
    aspect-ratio: .88 / 1;
    min-height: 158px;
  }
  .about-journey-grid article > img:not(.about-journey__badge) { width: 60px; height: 60px; }
  .about-journey-grid p { margin-top: 7px; }
}

@media (max-width: 360px) {
  .about-journey { padding-inline: 18px; }
  .about-journey > .about-journey-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
  .about-journey-grid article {
    grid-template-rows: 72px auto;
    aspect-ratio: auto;
    min-height: 170px;
    padding: 14px;
  }
  .about-journey-grid article:nth-child(n) { grid-column: auto; grid-row: auto; }
  .about-journey-grid article > img:not(.about-journey__badge) { width: 72px; height: 72px; }
  .about-journey-grid article > div { width: min(100%, 210px); }
  .about-journey-grid h4 { font-size: 13px; }
  .about-journey-grid p { font-size: 11.5px; line-height: 1.35; }
}


/* V62 - organic Home backdrop, expanded Signature assets, and balanced service note. */
.home-art::before { display: none; }

.home-art__backdrop {
  position: absolute;
  z-index: -2;
  inset: -4% -8% -4% -20%;
  width: 127%;
  height: 104%;
  overflow: visible;
  pointer-events: none;
}

.home-art__backdrop-outline,
.home-art__backdrop-paper,
.home-art__backdrop-surface {
  vector-effect: non-scaling-stroke;
}

.home-art__backdrop [data-backdrop-shape="compact"] { display: none; }

.home-art__backdrop-outline {
  fill: none;
  stroke: rgba(239, 145, 171, .38);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 23;
}

.home-art__backdrop-paper {
  fill: none;
  stroke: rgba(255, 255, 255, .94);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 21;
}

.home-art__backdrop-surface {
  fill: url("#home-gingham-pattern");
  stroke: rgba(241, 192, 207, .72);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.signature-intro {
  grid-template-columns: minmax(170px, 34%) minmax(0, 66%);
}

.signature-wordmark {
  width: min(95%, 475px);
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0 auto -2px;
  object-fit: contain;
  transform: translateY(-8px);
}

.service-card--featured[data-card-variant="signature"] .service-card-copy {
  padding: 20px 0 0 142px;
}

.featured-badge {
  top: -17px; /* the ribbon's two curled tips (10.6% down the art) sit on the card's top outline */
  left: 16px;
  width: 144px;
  height: 180px;
  padding: 51px 20px 62px;
  background-image: url("assets/services/signature-shared/decor/featured_most_chosen_badge_kawaii_v7.webp");
  background-size: auto 100%;
  color: #53302d;
  filter: drop-shadow(0 9px 14px rgba(218, 91, 124, .24));
}

.featured-badge span {
  font-size: 10px;
  line-height: 1.08;
}

.featured-badge strong {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.05;
}

@media (min-width: 601px) {
  .service-card--featured[data-card-variant="signature"] {
    grid-template-columns: var(--signature-photo-size) minmax(0, 1fr);
    column-gap: clamp(26px, 2.25vw, 32px);
  }

  .service-card--featured[data-card-variant="signature"] .service-photo-wrap {
    grid-column: 1;
    grid-row: 1;
  }

  .service-card--featured[data-card-variant="signature"] .service-card-copy {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
    padding: 20px 158px 0 0;
    text-align: left;
  }

  .service-card--featured[data-card-variant="signature"] > .featured-badge {
    right: 16px;
    left: auto;
  }
}

@media (min-width: 901px) {
  .service-card[data-card-variant="signature"] .service-photo-wrap {
    box-sizing: border-box;
    width: 160px;
    height: 196px;
    min-height: 0;
    justify-self: end;
  }

  .service-card--featured[data-card-variant="signature"] .service-photo-wrap {
    justify-self: start;
  }

  .service-card[data-card-variant="signature"] .service-photo-wrap > img:first-child {
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 900px) {
  .service-card[data-card-variant="signature"] {
    --signature-photo-size: 124px;
  }

  .service-card[data-card-variant="signature"] .service-photo-wrap {
    box-sizing: border-box;
    width: 124px;
    height: 150px;
    min-height: 0;
    justify-self: end;
  }

  .service-card[data-card-variant="signature"] .service-photo-wrap > img:first-child {
    height: 100%;
    min-height: 0;
  }
}

:is(.shared-service-layout, .signature-layout) > .service-note--shared {
  width: min(1280px, 100%);
  grid-template-columns: minmax(205px, 225px) minmax(420px, 1fr) 70px;
  grid-template-areas: "label notes decor";
  align-items: center;
  justify-content: start;
  gap: 22px;
  margin: 4px 0 0; /* anchored to the left edge; auto margins centred the 1280px box on wide screens */
  padding: 8px 18px 12px 1px;
}

.service-note-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 16px auto 0;
}

.service-note-divider i {
  display: block;
  height: 1px;
  background: repeating-linear-gradient(90deg, #efa0b5 0 10px, transparent 10px 18px);
}

.service-note-divider img {
  display: block;
  width: 36px;
  height: auto;
}

.service-note--shared .service-note-label {
  grid-area: label;
  width: 100%;
  min-height: 68px;
  padding: 12px 22px;
}

.service-note--shared .service-note-label strong { font-size: 23px; }

.service-note--shared ul {
  grid-area: notes;
  align-self: center;
  gap: 9px;
  min-width: 0;
}

.service-note--shared li {
  min-width: 0;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.42;
}

/* Web: a big and a small star sit in the services card's bottom-right corner (.services-content is the
   nearest positioned box); phones put them back in the note's grid. */
.service-note-decor {
  grid-area: decor;
  position: absolute;
  right: 22px;
  bottom: 16px;
  display: block;
  width: 72px;
  height: 64px;
  pointer-events: none;
}

.service-note-decor img {
  position: absolute;
  display: block;
  object-fit: contain;
}

.service-note .service-note-decor__sparkle {
  right: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  max-width: none;
  transform: rotate(12deg);
}

.service-note .service-note-decor__sparkle--small {
  right: 40px;
  bottom: 34px;
  width: 24px;
  height: 24px;
  transform: rotate(-10deg);
}

@media (max-width: 1280px) {
  .home-art__backdrop [data-backdrop-shape="desktop"] { display: none; }
  .home-art__backdrop [data-backdrop-shape="compact"] { display: block; }

  .home-art__backdrop {
    inset: -3.5% -5% -4% -17%;
    width: 121%;
    height: 103.5%;
  }
}

@media (max-width: 1180px) {
  .signature-intro {
    grid-template-columns: minmax(180px, 34%) minmax(0, 66%);
  }

  .signature-wordmark {
    width: min(100%, 470px);
    height: auto;
    max-height: none;
  }

  :is(.shared-service-layout, .signature-layout) > .service-note--shared {
    width: 100%;
    grid-template-columns: 164px minmax(220px, 1fr) 70px;
    grid-template-areas: "label notes decor";
    gap: 13px;
    padding: 6px 4px 10px;
  }

  .service-note--shared .service-note-label { min-height: 56px; padding: 9px 12px; }
  .service-note--shared .service-note-label strong { font-size: 18px; }
  .service-note--shared li { font-size: 12px; }
}

@media (max-width: 600px) {
  .home-art__backdrop {
    inset: -3% -10% -3%;
    width: 118%;
    height: 102.5%;
  }

  .home-art__backdrop-outline { stroke-width: 18; }
  .home-art__backdrop-paper { stroke-width: 16; }
  .home-art__backdrop-surface { stroke-width: 1.5; }

  .signature-intro {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    min-height: 156px;
    margin-bottom: 4px;
    padding-inline: 4px;
  }

  .signature-cat {
    display: none;
  }

  .signature-copy {
    width: min(100%, 320px);
    justify-self: center;
    transform: translateY(0);
  }

  .signature-wordmark {
    width: min(94%, 290px);
    height: auto;
    max-height: none;
    margin-bottom: 0;
    transform: translateY(-4px);
  }

  .service-card--featured[data-card-variant="signature"][data-photo-tilt="left"] .service-card-copy {
    justify-content: flex-start;
    padding: 35px 0 0;
  }

  .service-card--featured[data-card-variant="signature"] {
    overflow: visible;
  }

  .featured-badge {
    z-index: 9;
    top: -52px;
    right: -8px;
    left: auto;
    box-sizing: border-box;
    width: 72px;
    height: 90px;
    padding: 31px 8px 24px;
    overflow: visible;
    background-image: url("assets/services/signature-shared/decor/featured_most_chosen_badge_mobile_ribbons_v1.webp");
    background-position: center;
    background-size: contain;
    transform: rotate(7deg);
    transform-origin: 78% 22%;
  }

  .featured-badge span { font-size: 6px; }
  .featured-badge strong { margin-top: 2px; font-size: 7.5px; }

  :is(.shared-service-layout, .signature-layout) > .service-note--shared {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-template-areas:
      "label decor"
      "notes notes";
    column-gap: 8px;
    row-gap: 20px;
    margin-top: 4px;
    padding: 7px 4px 10px;
  }

  .service-note-divider {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 7px;
    margin-top: 12px;
  }

  .service-note-divider img { width: 28px; }

  .service-note--shared .service-note-label {
    grid-area: label;
    justify-self: start;
    width: min(100%, 178px);
    min-height: 46px;
    padding: 7px 9px;
  }

  .service-note--shared .service-note-label strong { font-size: 16px; }

  .service-note--shared ul {
    grid-area: notes;
    gap: 7px;
    width: 100%;
  }

  .service-note--shared li {
    padding-left: 26px;
    font-size: 11.5px;
    line-height: 1.45;
  }

  .service-note--shared li::before { top: -1px; width: 18px; height: 18px; }

  .service-note-decor {
    grid-area: decor;
    position: relative;
    right: auto;
    bottom: auto;
    align-self: end;
    width: 48px;
    height: 40px;
  }

  .service-note .service-note-decor__sparkle { right: 8px; width: 30px; height: 30px; }
  .service-note .service-note-decor__sparkle--small { right: 34px; bottom: 20px; width: 16px; height: 16px; }
}

/* Booking/FAQ decor field: four quiet edge beats across the full vertical composition. */
.booking-decor-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.booking-faq-grid > .faq-layout,
.booking-faq-grid > .booking-cta {
  position: relative;
  z-index: 1;
}

.booking-decor-field .paper-doodle--booking-scissors {
  --doodle-size: 72px;
  left: max(12px, calc(50% - 690px));
  top: 38px;
}

.booking-decor-field .paper-doodle--booking-star {
  --doodle-size: 34px;
  right: max(18px, calc(50% - 650px));
  top: 22%;
}

.booking-cta .paper-doodle--booking-paws {
  --doodle-size: 104px;
  left: -160px;
  top: 44px;
  bottom: auto;
}

.booking-cta .paper-doodle--booking-teacup {
  --doodle-size: 74px;
  right: -150px;
  bottom: 42px;
}

@media (max-width: 1180px) {
  .booking-decor-field .paper-doodle--booking-scissors {
    --doodle-size: 54px;
    left: 12px;
    top: 74px;
  }

  .booking-decor-field .paper-doodle--booking-star {
    --doodle-size: 28px;
    right: 18px;
    top: 126px;
  }

  .booking-cta .paper-doodle--booking-paws {
    --doodle-size: 58px;
    left: 10px;
    top: 28px;
    bottom: auto;
  }

  .booking-cta .paper-doodle--booking-teacup {
    --doodle-size: 62px;
    display: block;
    right: 10px;
    bottom: 28px;
  }
}

@media (max-width: 600px) {
  .booking-decor-field .paper-doodle--booking-scissors {
    --doodle-size: 38px;
    left: 0;
    top: 84px;
  }

  .booking-decor-field .paper-doodle--booking-star {
    --doodle-size: 22px;
    right: 4px;
    top: 116px;
  }

  .booking-cta .paper-doodle--booking-paws {
    --doodle-size: 44px;
    display: block;
    left: 0;
    top: 22px;
    bottom: auto;
  }

  .booking-cta {
    padding-bottom: 56px;
  }

  .booking-cta .paper-doodle--booking-teacup {
    --doodle-size: 46px;
    right: 2px;
    bottom: 4px;
  }
}

/* Review carousel: preserve the four-card composition while cycling through all reviews. */
.reviews-carousel {
  position: relative;
}

.reviews-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 58px;
  padding: 0 0 4px;
  border: 1px solid rgba(232, 94, 124, .48);
  border-radius: 18px;
  background: rgba(255, 250, 247, .96);
  box-shadow: 0 12px 28px -18px rgba(126, 76, 67, .72), inset 0 0 0 3px rgba(255, 255, 255, .72);
  color: var(--pink-strong);
  font: 700 36px/1 var(--font-signature-display);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.reviews-nav:hover {
  border-color: rgba(232, 94, 124, .78);
  background: #fff0f4;
  box-shadow: 0 14px 30px -17px rgba(181, 74, 103, .72), inset 0 0 0 3px rgba(255, 255, 255, .78);
}

.reviews-nav--prev {
  left: -2px;
  transform: translate(-50%, -50%);
}

.reviews-nav--next {
  right: -2px;
  transform: translate(50%, -50%);
}

.reviews-grid {
  --review-carousel-gap: 28px;
  display: block;
  overflow: hidden;
}

.reviews-track {
  display: flex;
  align-items: stretch;
  gap: var(--review-carousel-gap);
  will-change: transform;
  transition: transform .62s cubic-bezier(.45, .05, .2, 1);
}

.reviews-track.is-snapping {
  transition: none;
}

.reviews-track .review-card {
  flex: 0 0 calc((100% - (3 * var(--review-carousel-gap))) / 4);
  box-sizing: border-box;
}

.reviews-track .review-card--tone-1 { border-color: rgba(235, 151, 174, .24); background: var(--pastel-rose); }
.reviews-track .review-card--tone-2 { border-color: rgba(141, 194, 220, .26); background: var(--pastel-blue); }
.reviews-track .review-card--tone-3 { border-color: rgba(164, 145, 198, .26); background: var(--pastel-lavender); }
.reviews-track .review-card--tone-4 { border-color: rgba(125, 178, 154, .26); background: var(--pastel-mint); }
.reviews-track .review-card--tone-5 { border-color: rgba(231, 178, 139, .28); background: var(--pastel-peach); }

@media (max-width: 1180px) {
  .reviews-track .review-card {
    flex-basis: calc((100% - var(--review-carousel-gap)) / 2);
  }
}

@media (max-width: 600px) {
  .reviews-nav {
    display: none;
  }

  /* Two full reviews (2 x 208px + 2 x 12px = 440px) plus half of the next one, softened only at the bottom. */
  .reviews-grid {
    --review-carousel-gap: 12px;
    --review-carousel-preview: 0px;
    height: 544px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 81%, rgba(0, 0, 0, .38) 92%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 81%, rgba(0, 0, 0, .38) 92%, rgba(0, 0, 0, 0) 100%);
  }

  .reviews-track {
    flex-direction: column;
    align-items: stretch;
  }

  .reviews-track .review-card {
    flex: 0 0 208px;
    width: 100%;
    height: 208px;
    min-height: 0;
    padding: 16px 18px;
  }

  .reviews-track .review-card__quote {
    width: 32px!important;
    height: 32px!important;
    margin-bottom: 8px;
  }

  .reviews-track .review-card__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.5;
  }

  .reviews-track .review-card__rating {
    padding-top: 10px;
  }

  .reviews-track .review-card__rating img {
    width: 18px!important;
    height: 18px!important;
  }

  .reviews-track .review-card__author {
    margin-top: 9px;
    font-size: 14px;
  }

  .reviews-track .review-card__author small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track { transition: none; }
}

/* Gallery empty state shared by the page preview and full-library modal. */
.gallery-grid.is-empty,
.gallery-modal-grid.is-empty {
  grid-template-columns: minmax(0, 1fr);
}

.gallery-grid.is-empty {
  min-height: clamp(430px, 34vw, 560px);
}

.gallery-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 0;
  padding: 26px 24px 48px;
  color: #67483d;
  text-align: center;
}

.gallery-empty__art {
  display: block;
  width: min(460px, 48vw);
  margin-bottom: 8px;
  filter: drop-shadow(0 14px 18px rgba(119, 79, 65, .08));
}

.gallery-empty__art img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-empty h3 {
  margin: 0;
  font: 800 clamp(28px, 2.1vw, 40px) / 1.15 var(--font-signature-display);
  letter-spacing: -.015em;
}

.gallery-empty p {
  max-width: 680px;
  margin: 18px 0 0;
  font: 600 clamp(16px, 1.25vw, 22px) / 1.7 var(--font-signature-body);
}

/* In the full-library popup the empty note sits in the middle of the space between the tabs and the footer. */
.gallery-modal-grid.is-empty {
  grid-template-rows: minmax(min-content, 1fr);
  align-content: stretch;
}

.gallery-modal-grid.is-empty .gallery-empty {
  align-content: center;
  min-height: 0;
  padding: 0 18px;
}

.gallery-modal-panel > .modal-footer p {
  font-size: 15px;
}

.gallery-modal-grid.is-empty .gallery-empty__art {
  width: min(250px, 35vw);
}

@media (max-width: 600px) {
  .gallery-grid.is-empty {
    min-height: 400px;
  }

  .gallery-empty {
    padding: 18px 12px 34px;
  }

  .gallery-empty__art {
    width: min(330px, 84vw);
    margin-bottom: 8px;
  }

  .gallery-empty h3 {
    font-size: clamp(23px, 7vw, 30px);
  }

  .gallery-empty p {
    margin-top: 12px;
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1.6;
  }

  .gallery-modal-grid.is-empty .gallery-empty__art {
    width: min(230px, 70vw);
  }

  .gallery-modal-panel > .modal-footer p {
    font-size: 13.5px;
  }
}
/* Mobile navigation trigger sits before the brand and uses a cleaner Paper control. */
@media (max-width: 900px) {
  /* Drawer trigger left, wordmark centred, call button right. */
  .header-inner {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    /* Corners concentric with the 16px buttons (16px + 8px inset) and a firmer pink outline,
       so the bar reads against the page instead of melting into it. */
    border: 1.5px solid rgba(224, 79, 116, .3);
    border-radius: 24px;
    background: rgba(255, 253, 251, .94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 30px -20px rgba(117, 62, 76, .6);
  }

  /* grid-row pins all three to one row; otherwise the order: 1 trigger auto-places on a second row. */
  .site-header .brand {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
    min-width: 0;
    margin: 0;
  }

  .site-header .brand-copy { display: none; }

  .menu-button {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    order: 1;
    display: flex;
    flex: 0 0 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(224, 79, 116, .32);
    border-radius: 16px;
    background:
      radial-gradient(circle at 27% 24%, rgba(255, 255, 255, .95) 0 3px, transparent 4px),
      linear-gradient(145deg, rgba(255, 250, 251, .98), rgba(250, 211, 223, .94));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      0 9px 20px -14px rgba(188, 61, 96, .78);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  .menu-button span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0;
    border-radius: 999px;
    background: #dc4f74;
    transform-origin: center;
    transition: width .18s ease, opacity .18s ease, transform .18s ease;
  }

  .menu-button span:nth-child(2) { width: 13px; }
  .menu-button:hover {
    border-color: rgba(217, 71, 109, .48);
    box-shadow: inset 0 1px 0 #fff, 0 11px 22px -14px rgba(188, 61, 96, .92);
    transform: translateY(-1px);
  }
  .menu-button:active { transform: scale(.97); }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { width: 2px; opacity: 0; }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }
}

.header-call { display: none; }

@media (max-width: 900px) {
  .header-call {
    grid-row: 1;
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(224, 79, 116, .32);
    border-radius: 16px;
    background:
      radial-gradient(circle at 27% 24%, rgba(255, 255, 255, .95) 0 3px, transparent 4px),
      linear-gradient(145deg, rgba(255, 250, 251, .98), rgba(250, 211, 223, .94));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      0 9px 20px -14px rgba(188, 61, 96, .78);
    color: #dc4f74;
  }

  .header-call svg { width: 20px; height: 20px; }
}

@media (max-width: 420px) {
  .header-inner { grid-template-columns: 42px minmax(0, 1fr) 42px; padding-inline: 7px; border-radius: 22px; }
  .menu-button,
  .header-call {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-button,
  .menu-button span { transition: none; }
}
/* Equal visual geometry for paired Paper controls and Gallery filter states. */
.gallery-filters button:not(.is-active) {
  background-size: 106.5% 117%;
}

@media (max-width: 600px) {
  .gallery-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
    margin-inline: 0;
    overflow: visible;
  }

  .gallery-filters button {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: clamp(48px, 11vw, 58px);
    box-sizing: border-box;
    padding-inline: 6px;
  }

  .gallery-modal-filters {
    flex: 0 0 auto;
    margin: 12px 16px 6px;
  }

  .home-actions {
    --paired-action-gap: 9px;
    width: 100%;
    gap: var(--paired-action-gap);
  }
  .home-actions > .button-primary,
  .home-actions > .button-secondary {
    flex: 0 0 calc((100% - var(--paired-action-gap)) / 2);
    width: calc((100% - var(--paired-action-gap)) / 2);
    box-sizing: border-box;
    /* Keep the primary action's authored pink perimeter inside the mobile clip. */
    --button-shell-size: 102% 108%;
  }
}
/* Keep the white fill solid while a rose shadow draws the outline outside it. */
.button-primary,
.gallery-more,
.gallery-filters button.is-active,
.booking-categories button.is-active,
.service-tabs button.is-active,
.booking-date.is-active,
.booking-slot.is-active strong {
  --pink-button-text-outline: rgba(183, 68, 101, .78);
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0 transparent;
  text-shadow:
    -1px 0 0 var(--pink-button-text-outline),
    1px 0 0 var(--pink-button-text-outline),
    0 -1px 0 var(--pink-button-text-outline),
    0 1px 0 var(--pink-button-text-outline),
    -.72px -.72px 0 var(--pink-button-text-outline),
    .72px -.72px 0 var(--pink-button-text-outline),
    -.72px .72px 0 var(--pink-button-text-outline),
    .72px .72px 0 var(--pink-button-text-outline);
}

/* Booking service choices echo the main-page service rows on desktop. */
.booking-category-short { display: none; }
.booking-service-copy { min-width: 0; }

.booking-service-side,
.booking-service-price,
.booking-service-price-card {
  display: flex;
  align-items: center;
}

.booking-service-side { gap: 10px; min-width: 0; }
.booking-service-price { position: relative; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.booking-service-price-card { justify-content: center; gap: 5px; }
.booking-service-offer-slot {
  position: absolute;
  z-index: 2;
  top: -7px;
  right: -10px;
  display: grid;
  place-items: center;
}
.booking-service-offer-slot:empty { display: none; }
.booking-service-price .sale-badge { display: inline-grid; flex: none; place-items: center; }
.booking-service-price-card del { color: var(--muted); font-size: 9px; }
.booking-service-price-card strong { color: #ff4d78; font-size: 10px; }
.booking-service-option:not(.has-sale) .booking-service-price-card strong { color: var(--cocoa); }
/* Designs priced per nail, stone or charm (price-units.js): the unit after the price, the per-nail price by the
   duration, and "Tạm tính" over the total with one line on how it adds up. */
.booking-service-unit { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.booking-service-price-card strong.is-range { font-size: .72em; }
.booking-estimate-label { display: block; margin-bottom: 3px; color: var(--muted); font: 800 10px/1 Nunito, system-ui, sans-serif; letter-spacing: .06em; text-align: right; text-transform: uppercase; }
.booking-estimate-note { margin: -8px 4px 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

@media (min-width: 601px) and (max-width: 900px) {
  .booking-service-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 601px) {

  .booking-service-option {
    min-height: 104px;
    padding: 12px 20px;
    border-radius: 20px;
  }

  .booking-service-copy {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 0 18px;
  }

  .booking-service-copy::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 3;
    width: 28px;
    height: 30px;
    background: url("assets/services/shared/service_marker_sparkle_sunrise.png") center / contain no-repeat;
    pointer-events: none;
    transform: rotate(-5deg);
  }

  .booking-service-copy h3,
  .booking-service-copy p { grid-column: 2; }

  .booking-service-copy h3 { font: 700 clamp(20px, 1.7vw, 25px) Quicksand; }
  .booking-service-copy p { margin-top: 7px; font-size: 13px; line-height: 1.48; }
  .booking-service-side { gap: 18px; min-width: max-content; }

  .booking-service-price .sale-badge {
    position: relative;
    width: 46px;
    min-height: 33px;
    padding: 4px;
    border: 2px dashed #ff8ca7;
    border-radius: 11px;
    background: #ffe5ec;
    color: #ff527b;
    font: 700 13px var(--font-signature-display);
    transform: rotate(15deg);
  }

  .booking-service-price-card {
    display: grid;
    flex: 0 0 clamp(132px, 10vw, 150px);
    justify-items: center;
    align-content: center;
    width: clamp(132px, 10vw, 150px);
    min-height: 78px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 77, 120, .23);
    border-radius: 15px;
    background: rgba(255, 252, 249, .72);
  }

  .booking-service-price-card del {
    color: #785f57;
    font-size: 12px;
    line-height: 1.2;
    text-decoration-thickness: 1px;
  }

  .booking-service-price-card strong {
    margin-top: 5px;
    color: #ff4d78;
    font-size: 22px;
    line-height: 1.1;
  }
}

@media (min-width: 901px) {
  .booking-service-copy h3 {
    font-size: clamp(18px, 1.2vw, 20px);
  }
}

@media (max-width: 600px) {
  .booking-service-option {
    gap: 8px;
    min-height: 104px;
    padding: 12px;
  }

  .booking-service-offer-slot { top: -10px; }

  .booking-service-copy {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 0 12px;
  }

  .booking-service-copy::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 3;
    width: 18px;
    height: 20px;
    background: url("assets/services/shared/service_marker_sparkle_sunrise.png") center / contain no-repeat;
    pointer-events: none;
    transform: rotate(-5deg);
  }

  .booking-service-copy h3,
  .booking-service-copy p { grid-column: 2; }

  .booking-service-copy h3 { font-size: 16px; }
  .booking-service-copy p { margin-top: 4px; font-size: 10px; line-height: 1.4; }
  .booking-service-side { gap: 16px; min-width: max-content; }

  .booking-service-price {
    position: relative;
    display: block;
    flex: 0 0 112px;
    width: 112px;
    min-height: 64px;
  }

  .booking-service-price-card {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    width: 112px;
    min-height: 64px;
    padding: 7px 5px;
    border: 1px solid rgba(255, 77, 120, .23);
    border-radius: 16px;
    background: rgba(255, 252, 249, .72);
  }

  .booking-service-price-card del { color: #785f57; font-size: 11px; }
  .booking-service-price-card strong { margin-top: 3px; font-size: 18px; line-height: 1.1; }

  .booking-service-price .sale-badge {
    width: 34px;
    min-height: 20px;
    padding: 2px;
    border: 2px dashed #ff8ca7;
    border-radius: 11px;
    background: #ffe5ec;
    color: #ff527b;
    font: 700 9px var(--font-signature-display);
    transform: rotate(15deg);
  }
}

/* Mobile booking keeps every category in one shared segmented control. */
@media (max-width: 600px) {
  #booking-modal-v2 .modal-header { gap: 10px; padding: 15px 16px 12px; }
  #booking-modal-v2 .modal-header h2 { font-size: 20px; line-height: 1.2; }
  #booking-modal-v2 .modal-close { width: 40px; height: 40px; }
  .booking-modal-body { padding: 12px 14px; }
  .booking-step[data-booking-step="1"] { gap: 9px; }
  .booking-service-grid { gap: 8px; }
  .booking-service-option {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 82px;
    padding: 9px 10px;
    border-radius: 15px;
  }
  .booking-service-copy { grid-template-columns: 16px minmax(0, 1fr); gap: 0 8px; }
  .booking-service-copy::before { width: 16px; height: 18px; }
  .booking-service-copy h3 { font-size: 14px; line-height: 1.2; }
  .booking-service-copy p { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; margin-top: 3px; }
  .booking-service-side { gap: 9px; }
  .booking-service-price { flex-basis: 96px; width: 96px; min-height: 52px; }
  .booking-service-price-card { width: 96px; min-height: 52px; border-radius: 13px; }
  .booking-service-price-card del { font-size: 10px; }
  .booking-service-price-card strong { font-size: 16px; }
  .booking-check { width: 22px; height: 22px; }
  #booking-modal-v2 .booking-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px; padding: 9px 12px; }
  #booking-modal-v2 .booking-footer [data-booking-back] { min-width: 0; min-height: 44px; padding-inline: 8px; }
  #booking-modal-v2 .booking-footer [data-booking-next] { width: 100%; min-width: 0; min-height: 44px; height: 44px; padding-inline: 8px; font-size: 16px; }
}

@media (max-width: 420px) {
  .booking-categories .booking-category-label { display: none; }
  .booking-categories .booking-category-short { display: inline; }
}

/* The portrait stays in the card; the transparent spa cat sits beside it. */
.signature-spa-row {
  --spa-cat-size: clamp(200px, 18vw, 260px);
  --spa-cat-gap: clamp(12px, 1.7vw, 28px);
}

.service-card[data-card-variant="signature"].service-card--spa {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 34%);
  overflow: visible;
}

.service-card[data-card-variant="signature"] > .signature-spa-cat {
  position: absolute;
  z-index: 2;
  bottom: -12px;
  left: calc(100% + var(--spa-cat-gap));
  width: var(--spa-cat-size);
  height: auto;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(160, 78, 105, .12));
  pointer-events: none;
}

.service-card[data-card-variant="signature"][data-service-id="noi-bot"] { background: var(--pastel-lavender); }
.service-card[data-card-variant="signature"][data-service-id="mi-classic"] { background: var(--pastel-peach); }
.service-card[data-card-variant="signature"][data-service-id="goi-duongsinh"] { background: var(--pastel-lavender); }

/* The hair-wash photo shares the other Signature frames (mat, 1.12 zoom, 15px corners, dashed ring);
   only its crop sits a little higher so the face stays in view. */
.service-card[data-card-variant="signature"] .service-photo-wrap--spa {
  width: min(100%, var(--signature-photo-size));
  height: 196px;
  min-height: 0;
  aspect-ratio: auto;
  box-sizing: border-box;
  justify-self: end;
  overflow: visible;
}

.service-card[data-card-variant="signature"] .service-photo-wrap--spa > img:first-child {
  min-height: 0;
  object-position: center 40%;
}

@media (max-width: 1180px) {
  .signature-spa-row {
    --spa-cat-size: clamp(130px, 17vw, 175px);
    --spa-cat-gap: 8px;
    padding-right: calc(var(--spa-cat-size) + 2 * var(--spa-cat-gap));
  }
  .service-card[data-card-variant="signature"] > .signature-spa-cat { bottom: -8px; }
}

@media (max-width: 900px) {
  .service-card[data-card-variant="signature"].service-card--spa {
    grid-template-columns: minmax(0, 1fr) minmax(112px, 40%);
  }
  .service-card[data-card-variant="signature"] .service-photo-wrap--spa { height: 150px; }
}

@media (max-width: 600px) {
  .signature-spa-row {
    padding-right: 0;
  }
  .service-card[data-card-variant="signature"] > .signature-spa-cat { display: none; }
  .service-card[data-card-variant="signature"].service-card--spa {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 38%);
    gap: 16px;
    padding: 12px;
  }
}

/* Keep the note's lower inset consistent when switching service tabs. */
.services-content:has(> .service-panel > .shared-service-layout) {
  padding-bottom: 8px;
}

.services-content:has(> .service-panel > .signature-layout) {
  padding-bottom: 8px;
}

.services-content:has(> .service-panel > .shared-service-layout) .shared-service-list {
  padding-bottom: 0;
}
/* Footer V2 follows the locked web reference; the cat cluster is omitted until its asset exists. */
.contact-section {
  position: relative;
  padding: clamp(118px, 7.6vw, 150px) 0 32px;
  color: #4f2f2e;
}

.footer-paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #fdf0ef, #fcebec) 0 90px / 100% calc(100% - 90px) no-repeat;
}

.footer-paper svg {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: visible;
}

.footer-paper__wave { top: 0; height: 92px; }
.footer-paper__wave-mobile { display: none; }
.footer-paper__hills { bottom: 0; height: clamp(240px, 19vw, 360px); }
.footer-paper__fill { fill: #fdf0ef; }
.footer-paper__hill { fill: #ece0f5; }
.footer-paper__band { fill: #fbe6e9; }

.footer-paper__edge,
.footer-paper__hill-edge,
.footer-paper__band-edge,
.footer-paper__stitch {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-paper__edge { stroke: #f0bfcb; stroke-width: 2; }
.footer-paper__hill-edge {
  stroke: #c3a8da;
  stroke-width: 1.6;
}
.footer-paper__band-edge {
  stroke: #f0bfcb;
  stroke-width: 1.8;
  filter: drop-shadow(0 3px 2px rgba(185, 132, 184, .16));
}
.footer-paper__stitch { stroke: #eeb0c1; stroke-width: 1.6; stroke-dasharray: 9 7; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.footer-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-right: clamp(12px, 2vw, 40px);
}

.footer-brand__logo { display: block; }
.footer-brand__logo img { display: block; width: clamp(210px, 14.6vw, 286px); height: auto; }

.footer-social {
  display: flex;
  gap: clamp(16px, 1.5vw, 26px);
  margin-top: 6px;
}

.footer-social__link {
  display: grid;
  place-items: center;
  width: 68px;
  height: 64px;
  border: 1px solid #f2cfd8;
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 22px -18px rgba(121, 62, 78, .55);
  transition: transform .2s ease;
}

.footer-social__link[href]:hover { transform: translateY(-2px); }
.footer-social__link img { width: auto; height: 36px; }
.footer-social__link[aria-label="Zalo"] img { transform: translate(-5px, -1px); }
.footer-brand__sleeping-cat {
  align-self: flex-start;
  width: clamp(280px, 20vw, 350px);
  height: auto;
  margin: 4px 0 0 clamp(8px, 1.2vw, 22px);
  filter: drop-shadow(0 10px 14px rgba(121, 62, 78, .12));
}

.footer-contact {
  align-self: stretch;
  /* Wide enough at 1440px for both 189px contact actions on one row. */
  padding-inline: clamp(24px, 2.4vw, 64px);
  border-inline: 1px solid rgba(232, 94, 124, .2);
}

.footer-map {
  position: relative;
  z-index: 0;
  isolation: isolate;
  padding-left: clamp(28px, 3.6vw, 72px);
}

.footer-title {
  position: relative;
  width: fit-content;
  margin: 0 0 38px;
  font: 700 clamp(23px, 1.45vw, 28px)/1.2 var(--font-signature-display);
  letter-spacing: -.02em;
  color: #4f2f2e;
}

.footer-title::after {
  content: "";
  position: absolute;
  /* The wavy underline spans the full title text. */
  left: 0;
  right: 0;
  bottom: -16px;
  height: 8px;
  background: var(--pink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M0 4 Q5.5 0 11 4 T22 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 22px 8px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M0 4 Q5.5 0 11 4 T22 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 22px 8px repeat-x;
}

.footer-contact__list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-contact .footer-social {
  justify-content: flex-start;
  margin-top: 24px;
}

.footer-contact__list li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 1.6vw, 28px);
  font-size: clamp(16px, 1.02vw, 20px);
  line-height: 1.5;
  color: #4f382e;
}

.footer-contact__list a { color: inherit; text-decoration: none; }
.footer-contact__phone-link { display: none; }

.footer-contact__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 24px -18px rgba(121, 62, 78, .6);
}

.footer-contact__icon img { width: auto; height: 32px; }

.footer-map__card {
  position: relative;
  z-index: 1;
  /* Grid stretch sizes the map to the card's final height. Safari resolved the old height: 100%
     against the aspect-ratio height, ignoring min-height, which left a thick blank band at the bottom. */
  display: grid;
  width: calc(100% - clamp(0px, 2.2vw, 42px));
  aspect-ratio: 526 / 330;
  min-height: clamp(320px, 20vw, 380px);
  padding: 10px;
  border: 0;
  border-radius: 30px;
  background: #f7f1fa;
  box-shadow: 0 18px 38px -29px rgba(121, 62, 78, .48);
}

.footer-map__viewport {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 23px;
  background: #f7f1fa;
}

/* Restore the original hand-drawn map frame without its corner heart or cat mascot. */
.footer-map__outline {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.footer-map__outline path {
  fill: none;
  stroke: #e29bb9;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .92));
}

/* Leaflet owns the map surface so its marker stays attached to the salon coordinate. */
.footer-map__live {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: auto;
  cursor: grab;
}

.footer-map__live:active { cursor: grabbing; }
/* Tiles still loading show the OSM land colour instead of Leaflet's grey #ddd. */
.footer-map__live.leaflet-container { background: #f2efe9; }
/* Tint the tiles, not the container: a filter on the Leaflet container re-rendered the whole map
   surface on every frame of a drag or pinch, which stuttered on phones and could drop the layer to
   a flat grey. Filtered tiles are rasterised once and then just moved. */
.footer-map__live .leaflet-tile { filter: saturate(.72) hue-rotate(-8deg) brightness(1.03); }
/* Zoom buttons: Leaflet's control in the "Mở trong Google Maps" pill's paper. Leaflet's stylesheet
   loads after this one, so these selectors carry an extra class to win. */
.footer-map__live .leaflet-control-zoom.leaflet-bar {
  margin: 8px 10px 0 0;
  overflow: hidden;
  border: 1px solid rgba(211, 158, 183, .28);
  border-radius: 999px;
  background: rgba(255, 252, 253, .96);
  box-shadow: 0 10px 22px -15px rgba(79, 47, 75, .5);
}
.footer-map__live .leaflet-control-zoom.leaflet-bar a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ef7ea7;
  font: 700 22px/1 var(--font-signature-body);
  text-decoration: none;
}
.footer-map__live .leaflet-control-zoom.leaflet-bar a + a { border-top: 1px solid rgba(211, 158, 183, .28); }
.footer-map__live .leaflet-control-zoom.leaflet-bar a:hover,
.footer-map__live .leaflet-control-zoom.leaflet-bar a:focus-visible { background: #fff0f5; }
.footer-map__live .leaflet-control-zoom.leaflet-bar a.leaflet-disabled { background: transparent; color: #ef7ea7; opacity: .38; }
@media (max-width: 600px) {
  .footer-map__live .leaflet-control-zoom.leaflet-bar { margin: 7px 9px 0 0; }
  .footer-map__live .leaflet-control-zoom.leaflet-bar a { width: 38px; height: 38px; font-size: 20px; }
}
.footer-map__geo-marker {
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* Restore the original pink cat-face pin from the production footer sprite sheet. */
.footer-map__pin {
  position: relative;
  z-index: 3;
  display: block;
  width: 58px;
  height: 65px;
  background: transparent url("footer-doodle-asset-sheet.webp?v=20260810footer-assets1") no-repeat;
  background-size: 696.667% 627%;
  background-position: 2.793% 54.08%;
  filter: drop-shadow(0 5px 5px rgba(79, 47, 70, .2));
  pointer-events: none;
}

.footer-map__directions {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(211, 158, 183, .28);
  border-radius: 999px;
  background: rgba(255, 252, 253, .96);
  color: #77727d;
  font: 700 13px/1 var(--font-signature-body);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 22px -15px rgba(79, 47, 75, .5);
}

.footer-map__directions-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #ef7ea7;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-map__attribution {
  position: absolute;
  bottom: 14px;
  left: 18px;
  z-index: 3;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255, 250, 250, .88);
  color: rgba(79, 47, 46, .72);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.footer-map__sign-wrap {
  position: absolute;
  right: clamp(-100px, -3.6vw, -24px);
  bottom: clamp(-130px, -5.4vw, -50px);
  z-index: 4;
  width: clamp(160px, 13.9vw, 273px);
  pointer-events: none;
}

.footer-map__sign {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(1.075) drop-shadow(0 3px 1px rgba(107, 66, 61, .18)) drop-shadow(0 12px 10px rgba(102, 68, 82, .2));
  pointer-events: none;
}

.footer-features {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(956px, calc(100% - 40px));
  margin: clamp(56px, 4vw, 80px) auto 0;
  padding: 16px clamp(20px, 3vw, 56px);
  list-style: none;
  --features-radius: 999px;
  border: 1px solid #f2c9d3;
  border-radius: var(--features-radius);
  background: #fff8f8;
  box-shadow: 0 16px 34px -28px rgba(121, 62, 78, .55);
}

.footer-features::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px dashed #efbccb;
  /* Concentric with the outer edge so the corners never look pinched. */
  border-radius: max(0px, calc(var(--features-radius) - 7px));
  pointer-events: none;
}

.footer-features li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 14px;
  font-size: clamp(14px, .9vw, 17px);
  font-weight: 600;
  line-height: 1.45;
  color: #4f382e;
}

.footer-features li + li { border-left: 1.5px solid #f0cad3; }
/* Equal icon boxes keep the three labels starting on the same column. */
.footer-features img { flex: none; width: clamp(58px, 4.3vw, 84px); height: clamp(46px, 3.4vw, 64px); object-fit: contain; }

.site-footer {
  margin-top: clamp(30px, 2.6vw, 48px);
  text-align: left;
}

.site-footer p { margin: 0; font-size: 12.5px; color: #7c7791; }

/* Keep the wide footer visually supporting rather than oversized on desktop. */
@media (min-width: 1181px) {
  .booking-faq-section { padding-bottom: 12px; }
  .booking-cta { padding-bottom: 24px; }
  .contact-section { padding: clamp(56px, 2.92vw, 60px) 0 12px; }
  .footer-paper__hills { bottom: -22.5px; height: clamp(216px, 14.1vw, 270px); }
  .footer-paper__band,
  .footer-paper__band-edge,
  .footer-paper__hills .footer-paper__stitch { transform: translateY(20px); }

  .footer-grid {
    --footer-column-gutter: clamp(20px, 1.5vw, 28px);
    --footer-decor-overhang: clamp(24px, 3.6vw, 100px);
    --footer-content-drop: clamp(90px, 6vw, 116px);
  }

  .footer-grid {
    width: min(1500px, calc(100% - clamp(80px, 10.5vw, 160px)));
    transform: translateY(-24px);
  }
  .site-footer { width: min(var(--content), calc(100% - clamp(40px, 6vw, 112px))); }

  .footer-brand {
    gap: 15px;
    padding-inline: var(--footer-column-gutter);
    /* Centre the logo and cat between the paper's left edge and the column divider: shift by half the
       grid's side inset, max((100vw - 1500px) / 2, clamp(80px, 10.5vw, 160px) / 2), plus 10px to
       cancel the logo's own nudge. */
    transform: translateX(calc(10px - max(25vw - 375px, clamp(20px, 2.625vw, 40px))));
  }
  .footer-brand__logo img {
    width: clamp(204px, 14vw, 270px);
    transform: scale(1.25);
    transform-origin: bottom center;
  }
  .footer-social { gap: clamp(14px, 1.25vw, 22px); margin-top: 4px; }
  .footer-brand__logo,
  .footer-contact,
  .footer-map { transform: translateY(var(--footer-content-drop)); }
  /* 34px below the column headings centres the logo between the paper wave and the cat. */
  .footer-brand__logo { transform: translate(-10px, calc(var(--footer-content-drop) + 50px)); }
  .footer-social__link { width: 60px; height: 56px; }
  .footer-social__link img { height: 32px; }
  .footer-brand__sleeping-cat {
    align-self: center;
    width: clamp(310px, 22vw, 385px);
    margin: 63px 0 0;
    /* -10px matches the logo's nudge, so both sit on the brand column's centre. */
    transform: translate(-10px, calc(clamp(48px, 3.2vw, 62px) + 69px));
  }

  .footer-contact { padding-inline: var(--footer-column-gutter); }
  .footer-title {
    margin-bottom: 32px;
    font-size: clamp(21px, 1.2vw, 25px);
  }
  .footer-contact__list { gap: 14px; }
  .footer-contact__list li {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: clamp(14px, 1.3vw, 22px);
    font-size: clamp(16px, .9vw, 18px);
  }
  .footer-contact__icon { width: 56px; height: 56px; }
  .footer-contact__icon img { height: 28px; }

  .footer-map {
    padding-inline: var(--footer-column-gutter);
  }
  .footer-map__card {
    width: 92%;
    min-height: clamp(264px, 15.75vw, 310px);
    padding: 9px;
    border-radius: 28px;
  }
  .footer-map__directions { min-height: 42px; padding-inline: 15px; font-size: 12.5px; }
  .footer-map__sign-wrap::after {
    content: "";
    position: absolute;
    right: -1%;
    bottom: 3%;
    z-index: 0;
    width: 80%;
    height: 14%;
    border-radius: 61% 39% 57% 43% / 48% 56% 44% 52%;
    background: radial-gradient(ellipse at 56% 46%, rgba(105, 72, 103, .23) 0 18%, rgba(105, 72, 103, .13) 40%, rgba(105, 72, 103, .045) 63%, transparent 80%);
    filter: blur(6px);
    transform: rotate(12deg) skewX(-4deg);
    transform-origin: 88% 50%;
    pointer-events: none;
  }
  .footer-map__sign-wrap {
    right: calc(0px - var(--footer-decor-overhang));
    bottom: calc(clamp(-82px, -4.1vw, -58px) + 8px);
    width: clamp(144px, 12.2vw, 240px);
  }
  .footer-map__sign {
    filter: contrast(1.075);
  }

  .footer-features {
    /* Stays centred on the page; on narrower desktops it tucks slightly over the centred cat's books. */
    width: min(900px, calc(100% - 48px));
    margin-top: clamp(52px, 3.7vw, 72px);
    padding: 14px clamp(18px, 2.4vw, 42px);
  }
  .footer-features li { gap: 16px; padding: 5px 12px; font-size: clamp(13px, .8vw, 15px); }
  .footer-features img { width: clamp(52px, 3.8vw, 72px); height: clamp(42px, 3vw, 58px); }
  .site-footer { margin-top: clamp(8px, .55vw, 12px); }
}

@media (max-width: 1180px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas: "brand brand" "contact map";
    row-gap: 44px;
  }
  .footer-brand {
    grid-area: brand;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 32px;
    padding-right: 0;
  }
  .footer-brand__sleeping-cat { display: none; }
  .footer-contact { grid-area: contact; padding-left: 0; border-left: 0; }
  .footer-map { grid-area: map; }
}

@media (min-width: 601px) and (max-width: 1180px) {
  .footer-brand__logo img { width: clamp(280px, 31vw, 340px); }
}

@media (max-width: 900px) {
  .contact-section { padding: 104px 0 28px; }
  .footer-contact__phone-text { display: none; }
  .footer-contact__phone-link { display: inline; }
  .footer-map__card { min-height: clamp(310px, 40vw, 340px); }
}

@media (max-width: 600px) {
  .booking-faq-section { padding-bottom: 8px; }
  .footer-paper__wave-desktop { display: none; }
  .footer-paper__wave-mobile { display: inline; }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "contact" "map";
    row-gap: 34px;
  }
  .footer-brand { flex-direction: column; }
  .footer-contact { padding: 34px 0 0; border: 0; border-top: 1px dashed rgba(232, 94, 124, .3); }
  .footer-contact__list li { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; font-size: 16px; }
  .footer-contact__icon { width: 52px; height: 52px; }
  .footer-contact__icon img { height: 26px; }
  .footer-map { padding: 34px 0 0; border-top: 1px dashed rgba(232, 94, 124, .3); }
  .footer-map__card { width: 100%; min-height: clamp(285px, 76vw, 340px); }
  .footer-map__directions { top: 7px; left: 9px; min-height: 40px; padding: 0 14px; font-size: 12px; }
  .footer-map__directions-icon { width: 16px; height: 16px; }
  .footer-map__sign-wrap { right: -10px; bottom: -60px; width: 150px; }
  .footer-features {
    --features-radius: 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100% - 28px);
    /* 16px below the thank-you sign, which hangs 60px under the map card. */
    margin-top: 76px;
    padding: 12px 14px;
  }
  .footer-features li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 5px;
    text-align: center;
    font-size: clamp(10px, 2.75vw, 11.5px);
    line-height: 1.35;
  }
  .footer-features img { width: 46px; height: 42px; }
  .footer-features li > img,
  .footer-features li > span { grid-column: 1; }
  .footer-features li > span { padding-left: 0; }
  .footer-features li + li { border-top: 0; border-left: 1.5px solid #f0cad3; }
}

/* A card books from its open surface; the Signature photo independently opens the lightbox. */
.service-booking-hitarea {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.service-booking-hitarea:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

/* Hovering only lifts the card a touch, and only on pointer devices so a tap does not leave it raised;
   keyboard focus shows the ring above instead. */
.service-card[data-card-variant="signature"] {
  transition: transform .22s cubic-bezier(.22, .8, .25, 1);
}
@media (hover: hover) {
  .service-card[data-card-variant="signature"]:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .service-card[data-card-variant="signature"] { transition: none; }
}

.shared-service-row {
  isolation: isolate;
}

/* The pastel wash spans the whole service sheet; the row's text and booking hit area stay in place. */
.shared-service-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 2px;
  left: 50%;
  width: calc(100cqw + 2 * var(--services-sheet-inline-pad));
  background: color-mix(in srgb, var(--shared-accent) 9%, rgba(255, 252, 249, .8));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .2s ease;
  pointer-events: none;
}

.shared-service-row:is(:hover, :has(.service-booking-hitarea:focus-visible:not(.is-pointer-focus-return)))::before {
  opacity: 1;
}

.service-card[data-card-variant="signature"] .service-photo-wrap {
  z-index: 7;
}

.service-card[data-card-variant="signature"] .service-photo-zoom {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
}

#gallery-lightbox[data-single] .lightbox-nav {
  display: none;
}

/* The page Gallery uses the same shared, segmented paper bar as Services. */
:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 86px;
  box-sizing: border-box;
  margin: 0 0 24px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(232, 94, 124, .24);
  border-radius: 24px;
  background: rgba(255, 250, 247, .58);
}

:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button,
:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button.is-active {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 70px;
  min-height: 70px;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 14px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button:not(.is-active) {
  color: var(--cocoa);
}

:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button.is-active::before {
  border: 2px solid #ff6f91;
  border-radius: 18px;
  background: url("assets/services/shared/services_web_tab_active_paper_v3.webp") center / 100% 100% no-repeat;
  box-shadow: inset 0 0 0 2px rgba(255, 206, 218, .86);
}


:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button::after {
  content: "";
  position: absolute;
  top: 19px;
  bottom: 19px;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: rgba(181, 128, 142, .34);
  pointer-events: none;
}

:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button:first-child::after { display: none; }
:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button:not(.is-active):hover { background: rgba(232, 94, 124, .045); }
:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button:focus-visible { outline: 2px solid #b75676; outline-offset: -4px; }

@media (min-width: 901px) {
  /* Half the six Services segments, accounting for Gallery's 38px inset and each bar's 1px side border
     (both bars pad only top and bottom). */
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) {
    width: min(648px, calc(50% + 38px + 1px - clamp(24px, 2.8vw, 42px)));
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) { min-height: 76px; border-radius: 20px; }
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button,
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button.is-active {
    height: 60px;
    min-height: 60px;
    padding-inline: 8px;
    font-size: 16px;
  }
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button::after { top: 16px; bottom: 16px; }
}

@media (max-width: 600px) {
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) {
    min-height: 62px;
    margin-bottom: 16px;
    padding: 6px;
    border-radius: 18px;
  }
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button,
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button.is-active {
    height: 48px;
    min-height: 48px;
    padding: 5px 3px;
    border-radius: 10px;
    font-size: clamp(12px, 3.5vw, 14px);
  }
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button.is-active::before {
    border-width: 1px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 206, 218, .62);
  }
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button::after { top: 12px; bottom: 12px; }
}

/* Nine-slice the pink paper shells so their corners keep the painted proportions at any button size;
   only the edges and the centre stretch. The rect shell (1200x320) has 20px of transparent margin and
   72px painted corners, so slices of 92px drawn 20px wide round each corner at ~15.6px, pushed out by
   the margin (20 * 20 / 92 = 4.35px) to sit on the button edge; --shell-corner (about a third of the
   button height) enlarges them on taller buttons. The booking tab shell (512x256) paints
   58px corners edge to edge. border-image ignores border-radius and nothing clips these buttons, so
   the dark outline stays whole on all four corners; border-radius now only shapes the focus ring. */
.button-primary:not(.header-book) { overflow: visible; border-radius: 15px; }
.button-primary:not(.header-book)::before {
  background-image: none;
  border-image: var(--button-shell-rect) var(--button-shell-slice, 92) fill / var(--shell-corner, 20px) / calc(var(--shell-corner, 20px) * 20 / 92) stretch;
}
.booking-categories button.is-active { overflow: visible; }
/* The full Gallery's "Đặt hẹn" takes the big booking CTA's 4:1 rounded rectangle at footer size: corners a quarter of
   its height (15px of shell paints a ~12px radius), not the near-pill of a short 20px-corner button. */
#gallery-modal .button-primary[data-gallery-book] { --shell-corner: 15px; width: 192px; min-width: 192px; height: 48px; min-height: 48px; }
/* On 1x-1.5x screens a 15-20px corner cut from the 1200x320 shell's 92px slice is a 4-6x downscale, which
   border-image does without smoothing, so the pink outline came out jagged. Small buttons there use a quarter-size
   copy (300x80, the same 23px corner in a 92 -> 23 slice), at most a 1.5x downscale; the big booking CTA keeps the
   full shell. Retina screens draw every slice at 2-3x and stay on the full shell. */
@media (max-resolution: 1.5dppx) {
  :root {
    --button-shell-rect: url("assets/gallery/ui_shells/primary_button_rounded_rect_paper_v1_quarter.webp");
    --button-shell-slice: 23;
  }
  .button-primary.booking-main-cta {
    --button-shell-rect: url("assets/gallery/ui_shells/primary_button_rounded_rect_paper_v1.webp");
    --button-shell-slice: 92;
  }
}

/* Signature cards are hand-drawn paper: the fill and the pencil outline come from one nine-slice SVG
   per tone (44-unit corners drawn 30px, 24px on phones; the wobbly edge tile repeats), pushed out 3px
   so the line sits on the card edge. Every card in the tab gets its own tone and its own set of pink
   line-art doodles, drawn in the free bottom corner on the text side (the right side when the photo
   is on the left). */
.signature-layout .service-card[data-card-variant="signature"] {
  --card-shell: url("assets/services/signature-shared/decor/signature_card_shell_blue.svg?v=2");
  --card-pill: #dcebf9;
  --card-pill-ink: #2d68a4;
  --card-doodles: url("assets/services/signature-shared/decor/signature_card_doodles_sparkle.svg?v=2");
  --card-shell-corner: 30px;
  isolation: isolate;
  overflow: visible;
  border: 0;
  background: transparent;
}
.signature-layout .service-card--featured[data-card-variant="signature"] {
  --card-shell: url("assets/services/signature-shared/decor/signature_card_shell_rose.svg?v=2");
  --card-pill: #fde1e9;
  --card-pill-ink: #ad3a58;
  --card-doodles: url("assets/services/signature-shared/decor/signature_card_doodles_hearts.svg");
}
.signature-layout .service-card[data-card-variant="signature"][data-service-id="noi-gel"] {
  --card-shell: url("assets/services/signature-shared/decor/signature_card_shell_peach.svg?v=2");
  --card-pill: #fde2d2;
  --card-pill-ink: #9c4b29;
  --card-doodles: url("assets/services/signature-shared/decor/signature_card_doodles_flower.svg?v=2");
}
.signature-layout .service-card[data-card-variant="signature"][data-service-id="noi-bot"] {
  --card-shell: url("assets/services/signature-shared/decor/signature_card_shell_lavender.svg?v=2");
  --card-pill: #e8def8;
  --card-pill-ink: #6547a3;
  --card-doodles: url("assets/services/signature-shared/decor/signature_card_doodles_powder.svg");
}
.signature-layout .service-card[data-card-variant="signature"][data-service-id="mi-classic"] {
  --card-shell: url("assets/services/signature-shared/decor/signature_card_shell_mint.svg?v=2");
  --card-pill: #d8efe2;
  --card-pill-ink: #2b7350;
  --card-doodles: url("assets/services/signature-shared/decor/signature_card_doodles_lash.svg");
}
.signature-layout .service-card[data-card-variant="signature"][data-service-id="goi-duongsinh"] {
  --card-shell: url("assets/services/signature-shared/decor/signature_card_shell_yellow.svg?v=2");
  --card-pill: #faecc2;
  --card-pill-ink: #7d5f10;
  --card-doodles: url("assets/services/signature-shared/decor/signature_card_doodles_bubbles.svg?v=2");
}
.signature-layout .service-card[data-card-variant="signature"]::before,
.signature-layout .service-card[data-card-variant="signature"]::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.signature-layout .service-card[data-card-variant="signature"]::before {
  inset: 0;
  border-image: var(--card-shell) 44 fill / var(--card-shell-corner) / 3px round;
}
.signature-layout .service-card[data-card-variant="signature"]::after {
  inset: auto auto 4px 12px;
  width: 60px;
  height: 34px;
  background: var(--card-doodles) center / contain no-repeat;
}
.signature-layout .service-card--featured[data-card-variant="signature"]::after {
  inset: auto 16px 10px auto;
}
/* Web and tablet keep the corner doodles on the featured card only; phones show them on every card. */
@media (min-width: 601px) {
  .signature-layout .service-card[data-card-variant="signature"]:not(.service-card--featured)::after { display: none; }
}
/* The 196px photo frame (200px with its mat) needs 244px cards to sit centred inside the 22px padding;
   at 236px it overflowed 8px and crowded the bottom outline. */
.signature-layout { --signature-card-height: 244px; }
@media (max-width: 600px) {
  .signature-layout .service-card[data-card-variant="signature"] { --card-shell-corner: 24px; }
  .signature-layout .service-card[data-card-variant="signature"]::after {
    inset: auto auto 12px 9px;
    width: 50px;
    height: 28px;
  }
  .signature-layout .service-card[data-card-variant="signature"]:is(.service-card--featured, [data-photo-tilt="left"])::after {
    inset: auto 12px 15px auto;
  }
  /* Phone badge: sits low on the card's top-right corner with its 7deg tilt, its two lines centred on
     the cream disc (51% across, 45% down the art, about 65% of its width wide). The featured copy is
     centred like the other cards; its title box hugs the text, and below 420px it wraps ("Nail
     design / vẽ tay") so it stays clear of the badge. The card sits 18px below the subtitle so the badge clears the banner tip.
     The Signature wordmark is a little larger (316px, was 290px) and 8px lower. */
  .signature-layout { --signature-card-height: 200px; }
  /* Roomier phone cards, as the owner asked: 18px above and below, 22px on the photo side (photos sit
     on the left of tilt-left cards on phones), 20px on the text side and 22px between photo and copy. */
  .signature-layout .service-card[data-card-variant="signature"] { padding: 18px 22px 18px 20px; column-gap: 22px; }
  .signature-layout .service-card[data-card-variant="signature"][data-photo-tilt="left"] { padding: 18px 20px 18px 22px; }
  /* The hair-wash card shares the other cards' 124px photo column (its desktop 34% column left a
     wider gap on phones), and prices read larger (21px). */
  .signature-layout .service-card--spa[data-card-variant="signature"] { grid-template-columns: minmax(0, 1fr) 124px; }
  .signature-layout .service-card[data-card-variant="signature"] .service-price-current { font-size: 21px; }
  /* The copy spans the photo's 152px height with larger type. The gap between description and prices
     grows from 12px to at most 24px (a capped flex spacer); any height left after that is split above
     and below, so short copy stays centred on the photo instead of opening a wide gap. */
  .signature-layout .service-card[data-card-variant="signature"] .service-card-copy { align-self: center; justify-content: center; height: auto; min-height: 152px; }
  .signature-layout .service-card[data-card-variant="signature"] .service-card-copy::after { content: ""; order: 3; flex: 1 1 0; max-height: 12px; }
  .signature-layout .service-card[data-card-variant="signature"] h3 { margin-bottom: 6px; font-size: 18px; }
  .signature-layout .service-card[data-card-variant="signature"] .service-card-copy > p { margin-bottom: 12px; font-size: 12.5px; line-height: 1.45; }
  .signature-layout .service-card[data-card-variant="signature"] .service-meta { order: 4; margin-top: 0; }
  /* Trial: cards with the photo on the right align their copy, prices and pill towards the photo. */
  .signature-layout .service-card[data-card-variant="signature"][data-photo-tilt="right"] .service-card-copy { align-items: flex-end; text-align: right; }
  .signature-layout .service-card[data-card-variant="signature"][data-photo-tilt="right"] .service-meta { justify-items: end; }
  .signature-layout .service-card[data-card-variant="signature"][data-photo-tilt="right"] :is(.service-price--sale, .service-duration-row) { justify-content: flex-end; }
  .signature-layout .service-card[data-card-variant="signature"] .service-price--sale { column-gap: 12px; }
  .signature-layout .signature-wordmark { width: min(100%, 316px); margin-top: 8px; }
  .signature-layout .service-card--featured[data-card-variant="signature"] { margin-top: 18px; }
  .signature-layout .service-card--featured[data-card-variant="signature"] .service-card-copy { padding-top: 0; }
  .signature-layout .service-card--featured[data-card-variant="signature"] h3 { width: fit-content; }
  .signature-layout .service-card--featured[data-card-variant="signature"] > .featured-badge {
    top: -31px;                 /* out toward the card's top-right corner, as the owner asked */
    right: -10px;
    width: 78px;
    height: 97.5px;
    padding: 28px 7px 37.75px 8.5px;
  }
  .signature-layout .featured-badge span { font-size: 6.5px; }
  .signature-layout .featured-badge strong { margin-top: 2px; font-size: 7px; }
}
@media (max-width: 359px) {
  /* Too little room beside the duration pill on the smallest phones. */
  .signature-layout .service-card[data-card-variant="signature"]::after { display: none; }
}
@media (max-width: 479px) {
  .signature-layout .service-card--featured[data-card-variant="signature"] h3 { max-width: 96px; }
}
@media (min-width: 480px) and (max-width: 600px) {
  /* Wider phones: the featured title and description flow around a float that keeps the badge's
     corner clear, and the prices and pill hold the bottom of the photo-high copy box. */
  .signature-layout .service-card--featured[data-card-variant="signature"] .service-card-copy { display: block; position: relative; padding-bottom: 66px; }
  .signature-layout .service-card--featured[data-card-variant="signature"] .service-card-copy::before { content: ""; float: right; width: 70px; height: 52px; }
  .signature-layout .service-card--featured[data-card-variant="signature"] .service-meta { position: absolute; bottom: 0; left: 0; }
}
@media (max-width: 389px) {
  /* Narrow phones keep most of the extra room but a 112px photo column, so the copy stays ~150px wide. */
  .signature-layout .service-card[data-card-variant="signature"] { grid-template-columns: minmax(0, 1fr) 112px; padding: 16px 18px 16px 16px; column-gap: 18px; }
  .signature-layout .service-card[data-card-variant="signature"][data-photo-tilt="left"] { grid-template-columns: 112px minmax(0, 1fr); padding: 16px 16px 16px 18px; }
  .signature-layout .service-card[data-card-variant="signature"] .service-photo-wrap { width: 112px; }
  /* Narrow phones: hang the badge 8px further past the card edge so "design" keeps clear of it. */
  .signature-layout .service-card--featured[data-card-variant="signature"] > .featured-badge { right: -18px; }
}
@media (max-width: 374px) {
  .signature-layout .service-card--featured[data-card-variant="signature"] > .featured-badge { right: -23px; }
  /* Keeps the duration pill and sale ticket on one row on 360px Android phones. */
  .signature-layout .service-card[data-card-variant="signature"] .service-duration-row > .service-duration { padding-inline: 7px 9px; }
  .signature-layout .service-card[data-card-variant="signature"]::after { width: 44px; height: 25px; }
}
@media (max-width: 359px) {
  /* The smallest phones have no room beside the badge, so the copy starts below it instead. */
  .signature-layout .service-card--featured[data-card-variant="signature"] .service-card-copy { justify-content: flex-start; padding-top: 61px; }
}

/* Signature sale sticker from the owner's reference: a pink scalloped cloud with a white dashed inner
   edge and sparkles, stuck on every sale card's top-left corner, as the owner asked - over the photo's
   corner when the photo sits on the left, hence above the photo's z-index 7. The -N% stays real text. */
.signature-layout .service-card[data-card-variant="signature"] > .signature-sale {
  position: absolute;
  z-index: 8;
  /* Partly above the card: the cloud fits between the 18px row gap above and the title (45px down). */
  top: -22px;
  left: -14px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 88px;
  height: 73px;
  padding-top: 1px;
  background: url("assets/services/signature-shared/decor/signature_sale_cloud.svg") center / contain no-repeat;
  color: #fff;
  font: 700 18px/1 var(--font-signature-display);
  letter-spacing: -.02em;
  text-shadow: 0 1px 0 rgba(201, 49, 94, .35);
  filter: drop-shadow(0 5px 7px rgba(233, 75, 119, .24));
  transform: rotate(-7deg);
  pointer-events: none;
}
@media (max-width: 900px) {
  /* The cards stack in one column here: a card with a sticker gets a little more room above it, so the
     sticker never touches the card or heading above, and it drops its corner doodles, which the longer
     sale price row would otherwise crowd. */
  .signature-layout .service-card[data-card-variant="signature"]:not(.service-card--featured):has(> .signature-sale) { margin-top: 16px; }
  .signature-layout .service-card[data-card-variant="signature"]:not(.service-card--featured):has(> .signature-sale)::after { display: none; }
}
@media (max-width: 600px) {
  /* The smaller phone sticker hangs higher, over the extra room its card gets above it (7px lower than it
     first was, as the owner asked). */
  .signature-layout .service-card[data-card-variant="signature"] > .signature-sale {
    top: -23px;
    left: -12px;
    width: 72px;
    height: 60px;
    font-size: 15px;
  }
  .signature-layout .service-card[data-card-variant="signature"]:not(.service-card--featured):has(> .signature-sale) { margin-top: 22px; }
}

/* Duration pill from the owner's reference: a clock and the minutes on a deeper tint of the card's tone. */
.signature-layout .service-card[data-card-variant="signature"] .service-duration {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  margin-top: 3px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  background: var(--card-pill);
  color: var(--card-pill-ink) !important;
  line-height: 1.2;
}
.signature-layout .service-card[data-card-variant="signature"] .service-duration::before {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  -webkit-mask: var(--clock-icon) center / contain no-repeat;
  mask: var(--clock-icon) center / contain no-repeat;
  --clock-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}

/* Sale details: the struck-through original sits 14px after the current price (12px on phones), and
   the ticket follows the duration pill on its row, as the owner asked, so it never pushes the copy
   down; it wraps under the pill only when a card is too narrow (the meta column may shrink for that). */
.signature-layout .service-card[data-card-variant="signature"] .service-meta { grid-template-columns: minmax(0, max-content); }
.signature-layout .service-card[data-card-variant="signature"] .service-price--sale {
  display: flex;
  align-items: center;
  column-gap: 14px;
}
.signature-layout .service-card[data-card-variant="signature"] .service-duration-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
  gap: 4px 12px;
  margin-top: 3px;
}
.signature-layout .service-card[data-card-variant="signature"] .service-duration-row > .service-duration { margin-top: 0; }
@media (max-width: 419px) {
  /* Narrower pill-to-ticket gaps on narrow phones so the pair stays on one row. */
  .signature-layout .service-card[data-card-variant="signature"] .service-duration-row { column-gap: 10px; }
}
@media (max-width: 374px) {
  .signature-layout .service-card[data-card-variant="signature"] .service-duration-row { column-gap: 8px; }
}

@media (min-width: 601px) {
  /* A touch larger than the shared clamp(20px, 1.45vw, 28px) so the price holds its own beside the
     larger titles, pill and ticket. */
  .signature-layout .service-card[data-card-variant="signature"] .service-price-current { font-size: clamp(22px, 1.6vw, 26px); }
}

/* The sale ticket of the service lists and the booking picker: a dashed pink ticket with three burst
   strokes off its top-right corner. The strokes are sized in em so they follow each context's ticket
   size (24x22px beside the 16px list ticket). Signature cards use their own sticker (below). */
.shared-service-row__offer,
.booking-service-price .sale-badge {
  position: relative;
  overflow: visible;
  border: 2px dashed #ff8ca7;
  border-radius: 11px;
  background: #ffe5ec;
  color: #ff527b;
  font-family: var(--font-signature-display);
  font-weight: 700;
  line-height: 1;
  transform: rotate(-.7deg);
}
.shared-service-row__offer::after,
.booking-service-price .sale-badge::after {
  content: "";
  display: block;
  position: absolute;
  top: -1.1em;
  right: -1.2em;
  width: 1.5em;
  height: 1.375em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M2 14L6 2M8 16L15 8M13 19L21 17' fill='none' stroke='%23ff6f91' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
  pointer-events: none;
}
@media (max-width: 600px) {
  /* The burst strokes stick out to the right of the ticket; tuck the phone ticket 7.5px further onto the
     price card (it still covers only the card's outer 30px) and hold the strokes 2px closer, so they
     stay inside the row. */
  .shared-service-row__offer-slot { transform: translate(12.5px, -14px); }
  .shared-service-row__offer::after { right: -1em; }
}

/* Trial: on the web the shared service lists (Nail Care, Classic, ...) run in two columns, read row by
   row. Each column is about 600px at 1440px, which keeps copy, sale ticket and price card on one line;
   the hover wash stays inside its own row, and the bottom row of each column drops its dashed rule. */
@media (min-width: 1181px) {
  /* Full panel width like the Signature cards, so the left-anchored note lines up with the list. */
  .shared-service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; width: 100%; }
  .shared-service-row:is(:last-child, :nth-last-child(2):nth-child(odd)) { border-bottom: 0; }
  .shared-service-row::before { left: 0; width: 100%; transform: none; }
  /* A dashed rule down the middle of the 48px gap, in the same ink as the dashed rules between rows. */
  .shared-service-list { position: relative; }
  .shared-service-list::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 50%;
    border-left: 1px dashed color-mix(in srgb, var(--shared-accent) 22%, transparent);
    pointer-events: none;
  }
}

/* Around 1181-1279px the featured card sits beside the Signature intro at only ~520-560px wide, and the
   144px badge plus its 158px reserved column left the copy ~133px, spilling price and pill out of the
   card. There the badge shrinks to 80% (its text scales with it), reserves 124px, and the card may grow
   instead of overflowing. */
@media (min-width: 1181px) and (max-width: 1279px) {
  .signature-layout .service-card--featured[data-card-variant="signature"] { height: auto; min-height: var(--signature-card-height); }
  .signature-layout .service-card--featured[data-card-variant="signature"] .service-card-copy { padding-right: 124px; }
  .signature-layout .service-card--featured[data-card-variant="signature"] > .featured-badge { top: -14px; width: 116px; height: 145px; padding: 41px 16px 50px; }
  .signature-layout .service-card--featured[data-card-variant="signature"] > .featured-badge span { font-size: .8em; }
}

/* Tablet (601-900px): the Signature cards already stack in one column, so they follow the phone layout.
   Photos alternate sides (left on tilt-left cards), sit in a 124px column 22px from the copy, cards with
   the photo on the right align their copy towards it, the hair-wash card drops its outside cat and fills
   the row, and every card keeps its corner doodles. */
@media (min-width: 601px) and (max-width: 900px) {
  .signature-layout .service-card[data-card-variant="signature"]:not(.service-card--featured) { grid-template-columns: minmax(0, 1fr) 124px; column-gap: 22px; }
  .signature-layout .service-card[data-card-variant="signature"][data-photo-tilt="left"]:not(.service-card--featured) { grid-template-columns: 124px minmax(0, 1fr); }
  .signature-layout .service-card[data-card-variant="signature"][data-photo-tilt="left"] .service-photo-wrap { order: -1; justify-self: start; }
  .signature-layout .service-card[data-card-variant="signature"][data-photo-tilt="right"] .service-card-copy { align-items: flex-end; text-align: right; }
  .signature-layout .service-card[data-card-variant="signature"][data-photo-tilt="right"] .service-meta { justify-items: end; }
  .signature-layout .service-card[data-card-variant="signature"][data-photo-tilt="right"] :is(.service-price--sale, .service-duration-row) { justify-content: flex-end; }
  .signature-layout .signature-spa-row { padding-right: 0; }
  .signature-layout .service-card[data-card-variant="signature"] > .signature-spa-cat { display: none; }
  /* Corner doodles on every card, as on phones: bottom-left beside a right photo, bottom-right beside a
     left photo, lifted off the outline like the phone insets. */
  .signature-layout .service-card[data-card-variant="signature"]:not(.service-card--featured)::after { display: block; inset: auto auto 14px 16px; }
  .signature-layout .service-card[data-card-variant="signature"][data-photo-tilt="left"]:not(.service-card--featured)::after { inset: auto 18px 16px auto; }
}

/* Booking step 2 day chips read "weekday / DD/MM" on two lines (was three with "th M"), so they are shorter. */
.booking-date { min-height: 54px; padding-block: 7px; }
.booking-date strong { font-size: 17px; line-height: 1.2; }

/* Booking step 2: a chosen time shares the step-1 total box's lavender-to-pink wash, with pink-strong
   text (as on "1/8 dịch vụ") and a pink rim. Chosen days (the chips and the calendar) keep the pink paper
   shell of the step-1 category tab, with white outlined text. */
.booking-slot.is-active {
  border: 1px solid #f09bb3;
  background: linear-gradient(120deg, var(--lavender-soft), #fde9ee);
  box-shadow: none;
}
.booking-slot.is-active strong {
  color: var(--pink-strong);
  -webkit-text-fill-color: var(--pink-strong);
  text-shadow: none;
}
.booking-slot.is-active small { color: var(--muted); -webkit-text-fill-color: var(--muted); }
.booking-date.is-active,
.booking-calendar__day.is-active {
  border-color: transparent;
  background: transparent;
  border-image: url("assets/booking/ui_shells/booking_category_active_pink_paper_v1.webp") 64 fill / 18px stretch;
}
.booking-calendar__day.is-active { border-image-width: 12px; }
.booking-date.is-active :is(span, small) { color: #fff; -webkit-text-fill-color: #fff; opacity: .92; }
.booking-calendar__day.is-active {
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 0 1px rgba(183, 68, 101, .9), 0 1px 0 rgba(183, 68, 101, .7);
}

/* The service tick is drawn as a centred SVG mark: the text "✓" sat about 3px low in its box. */
.booking-check { font-size: 0; line-height: 0; }
.is-selected .booking-check::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--booking-tick) center / contain no-repeat;
  mask: var(--booking-tick) center / contain no-repeat;
  --booking-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.3l4.6 4.6L19 7.3' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Booking step 2 "Ngày khác": a month grid in the site's paper style instead of the browser's picker. */
.booking-calendar-field { position: relative; }
.booking-calendar-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--cocoa);
  font: 700 14px var(--font-signature-display);
  cursor: pointer;
}
.booking-calendar-trigger::before {
  content: "";
  width: 17px;
  height: 17px;
  background: var(--pink-strong);
  -webkit-mask: var(--calendar-icon) center / contain no-repeat;
  mask: var(--calendar-icon) center / contain no-repeat;
  --calendar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.booking-calendar-trigger[aria-expanded="true"] { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(217, 71, 109, .12); }
.booking-calendar {
  position: absolute;
  z-index: 6;
  top: calc(100% + 8px);
  left: 0;
  width: min(308px, calc(100vw - 48px));
  padding: 14px 14px 12px;
  border: 1px solid color-mix(in srgb, var(--pink) 28%, transparent);
  border-radius: 20px;
  background: #fffaf8;
  box-shadow: 0 18px 36px -18px rgba(131, 75, 96, .45);
}
.booking-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.booking-calendar__head strong { font: 700 16px var(--font-signature-display); color: var(--cocoa); }
.booking-calendar__head button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--pink-strong);
  font: 700 18px/1 var(--font-signature-display);
  cursor: pointer;
}
.booking-calendar__head button:disabled { opacity: .35; cursor: default; }
.booking-calendar__dows,
.booking-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.booking-calendar__dows span { padding-bottom: 4px; color: var(--muted); font: 800 11px var(--font-signature-body); }
.booking-calendar__day {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--cocoa);
  font: 700 14px var(--font-signature-display);
  cursor: pointer;
}
.booking-calendar__day:hover:not(:disabled) { background: #ffe5ec; }
.booking-calendar__day.is-out { color: #b9a7a2; }
.booking-calendar__day.is-today { outline: 1.5px dashed #ff8ca7; outline-offset: -3px; }
.booking-calendar__day.is-active { outline: 0; }
.booking-calendar__day:disabled { color: #d9ccc8; cursor: default; }

/* Phone booking footer: the 44px pink button matches "Để sau" (15px corners, 16px text). The shell is a
   shorter cut of the paper (1200x250, middle band removed) so 19px slices round the corners at ~15px
   (72 * 19 / 92) while the texture still scales evenly instead of flattening. */
@media (max-width: 600px) {
  .booking-footer [data-booking-next] {
    --button-shell-rect: url("assets/gallery/ui_shells/primary_button_rounded_rect_paper_short_v1.webp");
    --button-shell-slice: 92;
    --shell-corner: 19px;
  }
}

/* Touch devices: iOS zooms into any field whose text is under 16px when it gains focus. */
@media (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="range"]),
  textarea,
  select { font-size: max(16px, 1em); }
}

/* The page Gallery bar mirrors the Services bar: every segment owns a pill (5px in on the first, 7/3px
   between the dividers on the others) that tints on hover, instead of washing the whole segment. */
:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 18px;
  background: transparent;
  pointer-events: none;
}
:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button:not(.is-active):hover { background: transparent; }
:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button:not(.is-active):hover::before { background: rgba(255, 224, 233, .72); }
@media (max-width: 600px) {
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button::before { border-radius: 10px; }
}

/* The full-gallery popup uses the page Gallery's segmented bar, inset from the popup's edges. */
.gallery-modal-panel > .gallery-modal-filters { flex: 0 0 auto; width: auto; margin: 16px 28px 10px; }
@media (min-width: 901px) {
  .gallery-modal-panel > .gallery-modal-filters { width: min(648px, calc(100% - 56px)); margin: 18px auto 12px; }
}
@media (max-width: 600px) {
  .gallery-modal-panel > .gallery-modal-filters { margin: 12px 16px 8px; }
}

/* One pill per tab bar (Services, page Gallery, the gallery popup) glides to the chosen tab: experience.js positions it on
   the active tab's pill and copies that pill's look, and the tab's own pill stays hidden underneath. */
.has-tab-slider { position: relative; isolation: isolate; }
.has-tab-slider > .tab-slider {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  box-sizing: border-box;
  pointer-events: none;
  transition: transform .26s cubic-bezier(.22, .8, .25, 1), width .26s cubic-bezier(.22, .8, .25, 1), height .26s cubic-bezier(.22, .8, .25, 1);
}
.has-tab-slider > .is-active::before { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .has-tab-slider > .tab-slider { transition: none; }
}

/* Reference photos in the booking form: up to three tiles (uploads or gallery picks) and two dashed
   paper buttons; the gallery picker reuses the booking category tabs above a photo grid. */
.booking-photos { display: grid; gap: 10px; margin-top: 16px; }
.booking-photos__label { font-weight: 800; font-size: 12px; color: var(--cocoa); }
.booking-photos__label small { margin-left: 6px; font-weight: 600; color: var(--muted); }
.booking-photo-row { display: flex; flex-wrap: wrap; gap: 10px; }
.booking-photo {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.booking-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.booking-photo figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 10px 5px 3px;
  overflow: hidden;
  background: linear-gradient(transparent, rgba(58, 32, 40, .62));
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.booking-photo button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--pink-strong);
  font: 700 15px/1 var(--font-signature-body);
  box-shadow: 0 2px 6px rgba(58, 32, 40, .18);
  cursor: pointer;
}
.booking-photo.is-busy {
  background: linear-gradient(110deg, #fdeef2 25%, #fff 45%, #fdeef2 65%) 0 0 / 200% 100%;
  animation: booking-photo-busy 1.1s linear infinite;
}
@keyframes booking-photo-busy { to { background-position: -200% 0; } }
.booking-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.booking-photo-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1.5px dashed rgba(232, 94, 124, .55);
  border-radius: 999px;
  background: #fff7f9;
  color: var(--pink-strong);
  font: 700 13px/1 var(--font-signature-body);
  cursor: pointer;
}
.booking-photo-button:hover,
.booking-photo-button:focus-within { background: #ffe9ef; }
.booking-photo-button:focus-within { outline: 2px solid var(--pink); outline-offset: 2px; }
.booking-photo-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.booking-photo-error { margin: 0; color: #c2385f; font-size: 12px; line-height: 1.45; }
.booking-result .booking-photo-error { max-width: 460px; margin-bottom: 14px; }
.booking-picker__hint { margin: 12px 0; color: var(--muted); font-size: 13px; }
.booking-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.booking-pick {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border: 1.5px solid transparent;
  border-radius: 18px;
  background: #fff;
  color: var(--cocoa);
  font: 700 12px/1.25 var(--font-signature-body);
  text-align: left;
  cursor: pointer;
}
.booking-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 13px; }
.booking-pick span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.booking-pick i {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  color: #fff;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(58, 32, 40, .2);
}
.booking-pick.is-selected { border-color: var(--pink); background: #fff0f4; }
.booking-pick.is-selected i { background: var(--pink); }
.booking-pick:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) {
  .booking-pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .booking-photo { width: 68px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-photo.is-busy { animation: none; }
}

/* Booking confirmed: the form steps aside (it goes inert in booking-v2.js), a spinner shows while the
   booking is sent, turns into a drawn tick, then the paper ticket flies in. The ticket's outline is
   an SVG traced at the card's measured size (notches, perforations, gingham band). */
.booking-modal-panel { transition: opacity .25s ease, transform .25s ease; }
.modal.is-sending .booking-modal-panel,
.modal.is-ticket .booking-modal-panel {
  /* No entrance animation: it would override the fade and flash the form behind a ticket that lands as the
     popup opens. */
  animation: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.94);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.modal.is-sending .modal-backdrop { pointer-events: none; }

.booking-sending {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.25);
}
.modal.is-sending .booking-sending { opacity: 1; transform: none; transition-delay: .12s; }
.booking-sending__badge {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 20px 44px -20px rgba(233, 75, 119, .6);
  transition: background-color .3s ease, transform .4s cubic-bezier(.2, .9, .3, 1.4);
}
.booking-sending__badge svg { width: 84px; height: 84px; overflow: visible; }
.booking-sending__track { fill: none; stroke: #fde1e9; stroke-width: 6; }
.booking-sending__ring {
  fill: none;
  stroke: #f47ea0;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 64 150;
  transform-origin: 40px 40px;
  animation: booking-sending-spin .85s linear infinite;
}
.booking-sending__tick {
  fill: none;
  stroke: #fff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}
.booking-sending__label {
  margin: 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 252, 253, .94);
  color: #6b4a44;
  font: 700 14px/1.2 var(--font-signature-body);
}
.modal.is-confirmed .booking-sending__badge { background: #f47ea0; transform: scale(1.08); }
.modal.is-confirmed .booking-sending__ring { stroke: rgba(255, 255, 255, .55); stroke-dasharray: 214 0; animation: none; transition: stroke-dasharray .3s ease; }
.modal.is-confirmed .booking-sending__track { stroke: transparent; }
.modal.is-confirmed .booking-sending__tick { stroke-dashoffset: 0; transition: stroke-dashoffset .45s .15s cubic-bezier(.4, 0, .2, 1); }
@keyframes booking-sending-spin { to { transform: rotate(360deg); } }

/* The ticket is sized by the screen's height as well as its width, so the cat, the ticket and a little
   breathing room always fit on one screen (100dvh follows a phone's visible area under its browser bars).
   The landscape ticket plus the cat and its -6deg tilt is about 0.66 of its width tall. */
/* The ticket's words in a round, hand-lettered face (Baloo 2, OFL; Vietnamese and Latin subsets only); the
   booking code and time keep the plain rounded face so they stay easy to read and copy. */
.booking-ticket {
  --font-ticket-hand: "Baloo 2", var(--font-signature-display);
  --ticket-w: min(900px, calc(100vw - 72px), calc((100vh - 36px) * 1.35));
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: calc(var(--ticket-w) * .15) 36px 36px;
  overflow: hidden auto;
  pointer-events: none;
}
@supports (height: 100dvh) {
  .booking-ticket { --ticket-w: min(900px, calc(100vw - 72px), calc((100dvh - 36px) * 1.35)); }
}
.booking-ticket:empty { display: none; }
/* Everything on the ticket is sized in cqw, so the whole composition scales with it. Wide screens: the
   owner's landscape paper shell, perforation at 74.65%; phones and tablets: the portrait shell. Both wear
   the same separate cat, bow, hearts and close button, so the two look alike. */
.booking-ticket__card {
  --ticket-tilt: -4deg;
  --ticket-from: 90px, 0;         /* a short way along its own tilt: from the right, a little high, down to the left */
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: 74.65% 25.35%;
  width: var(--ticket-w);
  aspect-ratio: 1800 / 852;
  background: url("assets/booking/confirmation/ticket-shell-desktop.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1px rgba(79, 47, 46, .22)) drop-shadow(0 22px 30px rgba(79, 47, 46, .26));   /* paper's edge, then its lift */
  color: #4a2a26;
  transform: rotate(var(--ticket-tilt));
  pointer-events: auto;
  outline: none;
}
/* The ticket lands like a sheet of paper: no zoom, it slides a short way along its own tilt (the translate sits
   after the rotate, so it runs along the card's axes), turned a little more at first. One from-to move whose
   easing curve overshoots (y > 1), so it glides a touch past its place and settles back in one continuous
   motion; a separate, shorter fade. Wide screens: from the right down to the left; phones: up from below, a little right. */
.modal.is-ticket .booking-ticket__card {
  animation: booking-ticket-in .75s cubic-bezier(.22, 1.18, .36, 1) both, booking-ticket-fade .28s ease-out both;
}
@keyframes booking-ticket-in {
  from { transform: rotate(var(--ticket-tilt)) translate(var(--ticket-from)) rotate(-2.5deg); }
  to { transform: rotate(var(--ticket-tilt)) translate(0, 0) rotate(0deg); }
}
@keyframes booking-ticket-fade { from { opacity: 0; } }
/* While the ticket slides in it may poke past its holder; the holder still scrolls when a short screen needs it,
   but shows no scrollbar, which used to blink in during the landing. */
.booking-ticket { scrollbar-width: none; }
.booking-ticket::-webkit-scrollbar { display: none; }
.booking-ticket__main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 3.2cqw 3.4cqw 2.6cqw 5cqw;               /* centred on the paper between its lines, nips and perforation */
  text-align: center;
}
.booking-ticket__heading { display: grid; justify-items: center; }
.booking-ticket__eyebrow {
  margin: 0 0 .6cqw;
  color: #e0527f;
  font: 700 max(10px, 1.45cqw)/1.2 var(--font-ticket-hand);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.booking-ticket__main h2 {
  display: inline-flex;
  align-items: center;
  gap: .8cqw;
  margin: 0;
  font: 700 5.6cqw/1.1 var(--font-ticket-hand);
  letter-spacing: 0;
  white-space: nowrap;
  color: #6f3b2f;
}
.booking-ticket__thanks { margin: 1.4cqw 0 0; font: 600 max(12px, 2.1cqw)/1.35 var(--font-ticket-hand); color: #354a63; }
.booking-ticket__note { margin: .5cqw 0 0; font: 500 max(11px, 1.75cqw)/1.4 var(--font-ticket-hand); color: #4b566a; }
.booking-ticket__note-heart { width: 1.8cqw; height: 1.6cqw; vertical-align: -.1em; }
.booking-ticket__nowrap { white-space: nowrap; }
.booking-ticket__info {
  display: grid;
  grid-auto-flow: column;                        /* the code, the time and the total: each column as wide */
  grid-auto-columns: auto;                       /* as its value, the rest of the room shared out */
  width: 100%;
  margin: 2.8cqw 0 0;
  padding: 2cqw .8cqw;
  border: 1.5px dashed #f0a3b8;
  border-radius: 2.6cqw;
  background: rgba(252, 222, 232, .55);
}
.booking-ticket__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);   /* icon and label centred on one line, */
  align-items: center;                                               /* the value centred under them */
  align-content: start;                          /* labels line up across the three columns */
  column-gap: .9cqw;
  row-gap: .7cqw;
  min-width: 0;
  padding: 0 1cqw;
  text-align: center;
}
.booking-ticket__row + .booking-ticket__row { border-left: 1.5px dashed #f0a3b8; }
.booking-ticket__row-icon { grid-column: 2; width: 3.3cqw; height: auto; }
.booking-ticket__row dt { grid-column: 3; font: 700 max(10px, 1.45cqw)/1.2 var(--font-ticket-hand); letter-spacing: .06em; text-transform: uppercase; color: #6b4f52; }
.booking-ticket__row dd { grid-column: 1 / -1; justify-self: center; margin: 0; white-space: nowrap; font: 700 max(12px, 1.95cqw)/1.3 var(--font-signature-body); color: #4a2a26; }
.booking-ticket__total { color: #d94a76; }
.booking-ticket__sale { display: block; margin-top: .3cqw; white-space: normal; font: 700 max(10px, 1.3cqw)/1.3 var(--font-signature-body); color: #c2336a; }
.booking-ticket__code {
  display: inline-block;
  padding: .5cqw 1.3cqw;
  border-radius: 999px;
  background: #f9c9d8;
  color: #c2336a;
  font-family: var(--font-signature-display);
  white-space: nowrap;
}
/* "Xem lịch của bạn" and "Tải phiếu" (the bill picture, bill.js) side by side, stacked on phones. */
.booking-ticket__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6cqw; margin-top: 2.8cqw; }
/* The site's pink paper button (.button-primary, nine-sliced), at the ticket's size: the shorter cut of the
   paper suits this flat button, with corners about a third of its height, as on the booking footer. */
.booking-ticket__cta {
  --button-shell-rect: url("assets/gallery/ui_shells/primary_button_rounded_rect_paper_short_v1.webp");
  --button-shell-slice: 92;
  --shell-corner: 2.3cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
  min-width: 36cqw;
  min-height: 5.6cqw;
  padding: 0 4cqw;
  font: 700 max(13px, 2.1cqw)/1 var(--font-signature-display);
  cursor: pointer;
}
.booking-ticket__cta svg { width: 2.8cqw; height: 2.8cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.booking-ticket__cta:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.booking-ticket__download {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  min-height: 5.6cqw;
  padding: 0 2.6cqw;
  border: 1.5px solid #ec8fad;
  border-radius: 999px;
  background: rgba(255, 251, 247, .92);
  color: #c2336a;
  font: 700 max(12px, 1.9cqw)/1 var(--font-signature-display);
  cursor: pointer;
}
.booking-ticket__download svg { width: 2.6cqw; height: 2.6cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.booking-ticket__download:hover { background: #fff; }
.booking-ticket__download:disabled { opacity: .6; cursor: progress; }
.booking-ticket__download:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.booking-ticket__stub {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr 1fr;                     /* two equal halves: their seam is the stub's middle */
  align-items: center;
  justify-items: center;
  /* Top and bottom stop at the pink lines, so the seam (the divider) is midway down the paper; the centre
     line is 86.1%, midway between the perforation and the right pink line. */
  padding: 1.45cqw 4.05cqw 1.5cqw 1.6cqw;
  color: #4a2a26;
}
.booking-ticket__brand { display: grid; justify-items: center; gap: .5cqw; }
/* The crown and 1M65 drawn like the ticket's watercolour outline, in the stub's cocoa ink (booking-v2.js inkSvg):
   hand-drawn curves, a stronger line over a pale wash, offset and softened. */
.booking-ticket__crown { width: 8.4cqw; }
.booking-ticket__crown,
.booking-ticket__wordmark { display: block; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.booking-ticket__wordmark { width: 17cqw; }
.booking-ticket__ink-wash { stroke: #d4bdb3; stroke-width: 5.4; opacity: .7; filter: url(#booking-ticket-wash); }
.booking-ticket__ink-line { stroke: #4a2a26; stroke-width: 3.1; opacity: .92; }
.booking-ticket__ink-line circle { fill: #4a2a26; stroke: none; }
.booking-ticket__wordmark .booking-ticket__ink-wash { stroke-width: 5.2; }
.booking-ticket__wordmark .booking-ticket__ink-line { stroke-width: 2.9; }
/* The crown and the lettering wobble a little, as if drawn by hand (the SVG filter is in the stub's markup). */
.booking-ticket__filters { position: absolute; width: 0; height: 0; }
.booking-ticket__brand strong { position: relative; display: block; }
.booking-ticket__brand-heart { position: absolute; top: -4cqw; right: 1.6cqw; width: 2cqw; transform: rotate(14deg); }  /* up by the crown's right side */
.booking-ticket__brand small { font: 800 max(9px, 1.3cqw)/1 var(--font-signature-body); letter-spacing: .06em; white-space: nowrap; text-shadow: .06em .05em .08em #d4bdb3; }
/* The barcode fills the lower half, centred in it; the divider sits on the half's top edge. */
.booking-ticket__scan { position: relative; display: grid; align-self: stretch; align-content: center; justify-items: center; width: 100%; }
/* The divider is as long as the barcode and on the same centre line, clear of the perforation and the nips. */
.booking-ticket__scan::before { content: ""; position: absolute; top: 0; left: 50%; width: 17cqw; translate: -50% 0; border-top: 1.5px dashed #f0a3b8; }
.booking-ticket__barcode { width: 17cqw; height: 11cqw; fill: #4a2a26; }
/* The QR opens this booking's bill (bill.html); a stub without it keeps the drawn barcode. */
.booking-ticket__qr { width: 14cqw; height: 14cqw; }
.booking-ticket__card > .booking-ticket__deco { position: absolute; z-index: 2; height: auto; pointer-events: none; }
/* The phone layout's cat corner, scaled to the wide ticket: the cat's paws over the top edge, the bow on the
   corner, hearts off its ear. */
.booking-ticket__cat { top: -9.4cqw; left: 6cqw; width: 19cqw; }
/* The bow's knot (49%, 33% of the art, before its -16deg turn) sits on the paper's outline where the corner
   diagonal crosses it: 2.2cqw in on this shell's cut corner. Phones tuck it further in, knot about 9cqw in. */
.booking-ticket__bow { top: -.72cqw; left: -2.35cqw; width: 10cqw; transform: rotate(-16deg); }
.booking-ticket__hearts { top: -8.2cqw; left: 24.2cqw; width: 6.8cqw; }
.booking-ticket__sparkles--title { top: 21%; left: 2.4cqw; width: 4.4cqw; }
/* The star and two hearts by the cat, cut from one sticker, jitter one by one like a hand-drawn doodle: a few
   held frames of tilt and size, each on its own beat so they never move together. The icons on the paper stay
   still. */
.booking-ticket__hearts { aspect-ratio: 240 / 234; }
.booking-ticket__heart-piece { position: absolute; height: auto; animation: booking-ticket-doodle 1.2s steps(1) infinite; }
.booking-ticket__heart-piece--star { top: 0; left: 0; width: 41.25%; animation-duration: 1s; }
.booking-ticket__heart-piece--heart-big { top: 32.91%; left: 42.08%; width: 57.92%; animation-duration: 1.3s; animation-delay: -.4s; animation-direction: reverse; }
.booking-ticket__heart-piece--heart-small { top: 63.25%; left: 1.67%; width: 38.33%; animation-duration: 1.6s; animation-delay: -.9s; animation-direction: alternate; }
@keyframes booking-ticket-doodle {
  0%, 100% { rotate: -5deg; scale: 1; }
  25% { rotate: 4deg; scale: 1.07; }
  50% { rotate: -2deg; scale: .96; }
  75% { rotate: 6deg; scale: 1.03; }
}
.booking-ticket__close {
  position: absolute;
  z-index: 4;
  top: -2.4cqw;
  right: -1.8cqw;
  width: 6.4cqw;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.booking-ticket__close img { display: block; width: 100%; height: auto; }
/* Three short, thin strokes (a pink edge round a pastel core) fan out from the close button's top right, like a
   doodle's emphasis marks, each jittering on its own beat like the hearts by the cat (animated inside the SVG). */
.booking-ticket__close::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200" fill="none" stroke-linecap="round"><style>g{transform-box:fill-box;transform-origin:center;animation:d 1s steps(1) infinite}g+g{animation-duration:1.3s;animation-delay:-.4s;animation-direction:reverse}g+g+g{animation-duration:1.6s;animation-delay:-.9s;animation-direction:alternate}%40keyframes d{0%25,100%25{transform:rotate(-5deg) scale(1)}25%25{transform:rotate(4deg) scale(1.07)}50%25{transform:rotate(-2deg) scale(.96)}75%25{transform:rotate(6deg) scale(1.03)}}</style><g><path d="M31.8 -50.9L38.7 -61.9" stroke="%23ec7fa2" stroke-width="7.5"/><path d="M31.8 -50.9L38.7 -61.9" stroke="%23fbcdda" stroke-width="3.2"/></g><g><path d="M55.2 -28.1L69.5 -35.4" stroke="%23ec7fa2" stroke-width="7.5"/><path d="M55.2 -28.1L69.5 -35.4" stroke="%23fbcdda" stroke-width="3.2"/></g><g><path d="M61.8 4.3L75.8 5.3" stroke="%23ec7fa2" stroke-width="7.5"/><path d="M61.8 4.3L75.8 5.3" stroke="%23fbcdda" stroke-width="3.2"/></g></svg>') center / 100% 100% no-repeat;
  pointer-events: none;
}
.booking-ticket__close:hover { filter: brightness(1.03) saturate(1.1); }
.booking-ticket__close:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
@media (max-width: 899px) and (orientation: portrait) {
  /* Portrait ticket: the cat above it (.23 of its width) plus the ticket (1.887) and its tilt take about 80%
     of the visible height, with room around it. Landscape phones keep the landscape ticket, capped above. */
  .booking-ticket {
    --ticket-w: min(320px, calc(100vw - 72px), calc((100vh - 24px) * .4));
    padding: calc(var(--ticket-w) * .23) 18px 24px;
  }
  @supports (height: 100dvh) {
    .booking-ticket { --ticket-w: min(320px, calc(100vw - 72px), calc((100dvh - 24px) * .4)); }
  }
  .booking-ticket__card {
    --ticket-tilt: -2.5deg;
    --ticket-from: 14px, 64px;    /* phones: a short way up from below, a little toward the right edge */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 80.6% 19.4%;
    width: var(--ticket-w);
    aspect-ratio: 763 / 1440;
    background-image: url("assets/booking/confirmation/ticket-shell-mobile.webp");
  }
  .booking-ticket__main { justify-content: center; padding: 9cqw 6.5cqw .5cqw; }
  .booking-ticket__eyebrow { margin-bottom: 1.8cqw; font-size: max(10px, 3.3cqw); }
  .booking-ticket__main h2 { gap: 1.5cqw; font-size: 8.6cqw; }
  .booking-ticket__thanks { margin-top: 5cqw; font-size: max(12px, 4.4cqw); }
  .booking-ticket__note { margin-top: .8cqw; font-size: max(10.5px, 3.6cqw); text-wrap: balance; }
  .booking-ticket__note-heart { width: 3.6cqw; height: 3.2cqw; }
  .booking-ticket__info { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); margin-top: 5.5cqw; padding: .6cqw 3.4cqw; border-radius: 5cqw; }
  .booking-ticket__row { grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 4cqw; row-gap: .6cqw; padding: 3.4cqw .6cqw; text-align: left; }
  .booking-ticket__row + .booking-ticket__row { border-top: 1.5px dashed #f0a3b8; border-left: 0; }
  .booking-ticket__row-icon { grid-row: 1 / 4; grid-column: 1; width: 8cqw; }
  .booking-ticket__row dt { grid-column: 2; font-size: max(9px, 3.5cqw); }
  .booking-ticket__row dd { grid-column: 2; justify-self: stretch; font-size: max(11px, 4.9cqw); }
  .booking-ticket__code { padding: 1cqw 3.4cqw; }       /* room either side of the code on phones */
  .booking-ticket__sale { margin-top: .4cqw; font-size: max(9.5px, 3.3cqw); }
  .booking-ticket__actions { flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 2.4cqw; margin-top: 5cqw; }
  .booking-ticket__cta { --shell-corner: 6.2cqw; width: 100%; min-width: 0; min-height: 15cqw; font-size: max(13px, 4.8cqw); gap: 3cqw; }
  .booking-ticket__download { width: 100%; justify-content: center; min-height: 11cqw; gap: 2cqw; font-size: max(12px, 4.2cqw); }
  .booking-ticket__download svg { width: 5.4cqw; height: 5.4cqw; }
  .booking-ticket__cta svg { width: 7cqw; height: 7cqw; }
  .booking-ticket__stub { grid-template-columns: 1fr 1fr; grid-template-rows: none; align-items: center; gap: 0; padding: 2.8cqw 7cqw 8.1cqw; }
  .booking-ticket__brand { gap: .6cqw; margin-right: 4.6cqw; }        /* centred in its half, a touch left for the heart */
  .booking-ticket__crown { width: 11cqw; }
  .booking-ticket__wordmark { width: 26cqw; }
  .booking-ticket__ink-wash { stroke-width: 5.8; }
  .booking-ticket__ink-line { stroke-width: 3.4; }
  .booking-ticket__wordmark .booking-ticket__ink-wash { stroke-width: 5.4; }
  .booking-ticket__wordmark .booking-ticket__ink-line { stroke-width: 3.1; }
  .booking-ticket__brand-heart { top: -6cqw; right: 2.6cqw; width: 4cqw; }
  .booking-ticket__brand small { font-size: max(8px, 2.8cqw); }
  .booking-ticket__scan { align-self: stretch; align-content: center; padding: 0 0 0 4cqw; }
  /* Upright, about as tall as the QR, midway between the brand and the QR: clear of the bottom punch. */
  .booking-ticket__scan::before { top: 50%; left: 0; width: 0; height: 20cqw; translate: 0 -50%; border-top: 0; border-left: 1.5px dashed #f0a3b8; }
  .booking-ticket__barcode { width: 30cqw; height: 12cqw; }
  .booking-ticket__qr { width: 22cqw; height: 22cqw; }
  .booking-ticket__cat { top: -21cqw; left: 16%; width: 42cqw; }
  .booking-ticket__bow { top: -2.6cqw; left: -1cqw; width: 22cqw; transform: rotate(-16deg); }   /* tucked into the corner */
  .booking-ticket__hearts { top: -18cqw; left: 58%; width: 15cqw; }
  .booking-ticket__sparkles--title { top: 10.5%; left: 3cqw; width: 8cqw; }
  .booking-ticket__close { top: -5cqw; right: -4cqw; width: 14cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-sending,
  .booking-sending__badge,
  .modal.is-sending .booking-modal-panel,
  .modal.is-ticket .booking-modal-panel,
  .modal.is-confirmed .booking-sending__tick { transition: none; }
  .booking-sending__ring,
  .modal.is-ticket .booking-ticket__card,
  .booking-ticket__heart-piece { animation: none; }
  .booking-ticket__close::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200" fill="none" stroke-linecap="round"><g><path d="M31.8 -50.9L38.7 -61.9" stroke="%23ec7fa2" stroke-width="7.5"/><path d="M31.8 -50.9L38.7 -61.9" stroke="%23fbcdda" stroke-width="3.2"/></g><g><path d="M55.2 -28.1L69.5 -35.4" stroke="%23ec7fa2" stroke-width="7.5"/><path d="M55.2 -28.1L69.5 -35.4" stroke="%23fbcdda" stroke-width="3.2"/></g><g><path d="M61.8 4.3L75.8 5.3" stroke="%23ec7fa2" stroke-width="7.5"/><path d="M61.8 4.3L75.8 5.3" stroke="%23fbcdda" stroke-width="3.2"/></g></svg>'); }
}

/* Popups answer a tap on its first frame: a loading paw shows while the booking grid is built (next frame) or
   while the manager's own page loads in its iframe. */
.popup-loading { display: grid; place-items: center; min-height: min(360px, 55vh); }
.popup-loading img,
.manager-modal-panel.is-loading::after { animation: popup-loading-paw .7s ease-in-out infinite alternate; }
.popup-loading img { width: 58px; height: auto; }
/* The cream cover stays still (::before); only the paw on it (::after) wobbles. With both on one layer the whole
   cover tilted ±8° and its slanted edges streaked across the popup while the page loaded. */
.manager-modal-panel.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;               /* over the loading page, under the close button (2) */
  background: #fffcf9;
  pointer-events: none;
}
.manager-modal-panel.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background: url("assets/ui/cat_paw_cursor_upright.webp") center / contain no-repeat;
  pointer-events: none;
}
@keyframes popup-loading-paw {
  from { transform: translateY(4px) rotate(-8deg); opacity: .75; }
  to { transform: translateY(-6px) rotate(8deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .popup-loading img,
  .manager-modal-panel.is-loading::after { animation: none; }
}

/* Segmented bars (Services tabs, Gallery filters): every hover and active pill keeps one gap, --seg-gap, on all
   four sides: to the bar's edge, to the 2px divider at a segment's left edge, and on the two-row phone bar to
   the line between the rows. The bar pads only top and bottom; a row's first pill starts --seg-gap in and the
   others 2px further for their divider; two rows sit twice --seg-gap apart. Segments carry no border of their
   own, so these gaps are the whole distance. */
.service-tabs button { border: 0; }
.service-tabs,
:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) {
  --seg-gap: 7px;
  padding: var(--seg-gap) 0;
}
.service-tabs button::before,
:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button::before {
  inset: 0 var(--seg-gap) 0 calc(var(--seg-gap) + 2px);
}
.service-tabs button:first-child::before,
:is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) button:first-child::before { left: var(--seg-gap); }
@media (max-width: 900px) {
  .service-tabs { --seg-gap: 6px; row-gap: calc(var(--seg-gap) * 2); }
  .service-tabs button:nth-child(4)::before { left: var(--seg-gap); }
}
@media (max-width: 600px) {
  :is(.gallery-content-panel > .gallery-filters, .gallery-modal-panel > .gallery-modal-filters, .booking-modal-panel .booking-categories) { --seg-gap: 6px; }
}

/* Touch screens: a button sinks the moment it is pressed, before its action runs, so taps feel instant. The
   scale property stacks on each button's own transform (tilted slots, sliding pills keep theirs). */
@media (hover: none) {
  :is(button, a, [role="button"]):not(:disabled):active { scale: .97; }
}

/* The call-or-Zalo popup that "1M65" opens on phones in the "Xem lịch của bạn" popup (same as manage-booking-v2.css). */
.contact-dialog { width: min(320px, calc(100vw - 48px)); padding: 22px 18px 14px; border: 0; border-radius: 24px; background: #fffdfb; color: #4f382e; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45); }
.contact-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.contact-dialog__title { margin: 0 0 14px; font: 700 18px/1.2 Quicksand, sans-serif; text-align: center; }
.contact-dialog__option { display: flex; align-items: center; gap: 12px; min-height: 54px; margin-top: 8px; padding: 0 16px; border: 1px solid rgba(232, 94, 124, .22); border-radius: 16px; background: #fff; color: #4f382e; font: 700 16px/1.2 Quicksand, sans-serif; text-decoration: none; }
.contact-dialog__option:hover, .contact-dialog__option:focus-visible { border-color: #df7c94; background: #fde8ed; color: #a33758; outline: none; }
.contact-dialog__option img { width: 30px; height: 30px; object-fit: contain; }
.contact-dialog__close { display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 0; background: none; color: #806c63; font: 700 14px/1 Quicksand, sans-serif; cursor: pointer; }

/* The popups' and the menu's close buttons and the contact icons (menu and footer) take the header call button's
   soft pink tile (.header-call): a pink rim, a pale-pink gradient with a glossy dot, a rose shadow, pink marks. */
.modal-close,
.drawer-head button,
.drawer-contact__icon,
.footer-contact__icon {
  border: 1px solid rgba(224, 79, 116, .32);
  background: radial-gradient(circle at 27% 24%, rgba(255, 255, 255, .95) 0 3px, transparent 4px), linear-gradient(145deg, rgba(255, 250, 251, .98), rgba(250, 211, 223, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 9px 20px -14px rgba(188, 61, 96, .78);
  color: #dc4f74;
}

/* The booking popup's categories wear the same segmented paper bar as Services and the Gallery (the shared
   :is() rules above): five segments across the step, flush in its grid. */
.booking-modal-panel .booking-categories { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; margin: 0; }
.booking-modal-panel .booking-categories button { white-space: nowrap; }

/* Notices sit at the top edge, clear of the popups' footers and their buttons. On phones the text is smaller so the
   usual one-sentence notice fits one line (a rare long one may still wrap). */
/* A fixed box at left: 50% shrink-wraps to half the window, which is what wrapped short notices; max-content
   lets it take its text's width up to the window's. */
.toast { top: max(16px, env(safe-area-inset-top)); bottom: auto; width: max-content; }
@media (max-width: 600px) {
  .toast { max-width: calc(100% - 20px); padding: 10px 16px; font-size: clamp(11.5px, 3.3vw, 13px); line-height: 1.3; }
}

/* Time-window sales in the booking popup: a pink tag on sale slots, a dot on days that have them, a hint above the
   slots and the cut under the total. */
.booking-slot { position: relative; }
.booking-slot__sale {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e85e7c;
  color: #fff;
  font: 800 10.5px/1.35 var(--font-signature-body);
  font-style: normal;
}
@media (max-width: 600px) {
  /* Phone slots are narrow: the tag sits on the slot's top edge instead of over the time. */
  .booking-slot__sale { top: -7px; right: -3px; }
}
.booking-date { position: relative; }
.booking-date__sale { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e85e7c; }
.booking-sale-hint { margin: 0; padding: 9px 14px; border-radius: 12px; background: #fde8ed; color: #b3305e; font: 700 13.5px/1.4 var(--font-signature-body); }
.booking-sale-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 14px; border-radius: 12px; background: #fde8ed; color: #c2336a; font: 800 14px/1.35 var(--font-signature-body); }

/* The featured time-window sale: a pink gingham card under the header with a scalloped white cloud in the middle
   (title ribbon, the percent big, when, the booking button) and doodles from assets/home/sale around it; and a
   tilted cloud sticker by the booking button above the footer. */
.sale-banner {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 1080px;
  margin: 14px auto 0;
  padding: 34px 24px 30px;
  overflow: hidden;
  border: 2px solid #f5bccb;
  border-radius: 24px;
  background-color: #fde7ed;
  background-image:
    radial-gradient(ellipse at center, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(0deg, rgba(244, 166, 188, .2) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(90deg, rgba(244, 166, 188, .2) 0 22px, transparent 22px 44px);
}
.sale-banner[hidden] { display: none; }
.sale-banner__art { position: absolute; pointer-events: none; user-select: none; }
.sale-banner__cloud {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(700px, 100%);
  padding: 22px 48px 34px;
  background: url("assets/home/sale/cloud-wide.svg") center / 100% 100% no-repeat;
  text-align: center;
}
.sale-banner__cloud .sale-banner__art { position: static; }
.sale-banner__ribbon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 22px;
  border: 2px solid #f2a5ba;
  border-radius: 999px;
  background: linear-gradient(#fcd9e2, #f9c4d2);
  box-shadow: 0 3px 0 rgba(234, 138, 166, .28);
  color: #c63e68;
  font: 800 clamp(17px, 1.7vw, 22px)/1.15 "Baloo 2", var(--font-signature-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sale-banner__mini { width: 30px; }
.sale-banner__value {
  margin: 8px 0 0;
  color: #e6527d;
  font: 800 clamp(64px, 8.4vw, 112px)/.95 "Baloo 2", var(--font-signature-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-shadow:
    -4px -4px 0 #fff, 0 -4px 0 #fff, 4px -4px 0 #fff, 4px 0 0 #fff, 4px 4px 0 #fff, 0 4px 0 #fff, -4px 4px 0 #fff, -4px 0 0 #fff,
    0 9px 0 #f6b5c6, 0 12px 14px rgba(232, 98, 136, .25);
}
.sale-banner__when { display: inline-flex; align-items: center; gap: 12px; margin: 14px 0 0; color: #7c3a48; font: 700 clamp(16px, 1.5vw, 20px)/1.3 var(--font-signature-body); }
.sale-banner__dot { width: 16px; }
.sale-banner__action { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.sale-banner__rays { width: 18px; }
.sale-banner__rays--end { transform: scaleX(-1); }
.sale-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 26px 0 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f27aa0, #e04e7b);
  box-shadow: 0 5px 0 #c93d68, 0 12px 22px rgba(224, 78, 123, .28);
  color: #fff;
  font: 800 18px/1 "Baloo 2", var(--font-signature-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sale-banner__cta:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #c93d68, 0 14px 26px rgba(224, 78, 123, .32); }
.sale-banner__cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #c93d68, 0 6px 12px rgba(224, 78, 123, .25); }
.sale-banner__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sale-banner__calendar { width: 34px; }
.sale-banner__arrow { font-size: 22px; }
.sale-banner__bow { top: 6px; left: 10px; z-index: 2; width: clamp(130px, 15vw, 200px); transform: rotate(-12deg); }
.sale-banner__nails { left: 18px; bottom: 10px; width: clamp(140px, 15vw, 210px); }
.sale-banner__polish { right: 26px; bottom: 14px; width: clamp(64px, 6.6vw, 92px); transform: rotate(8deg); }
.sale-banner__sparkle--1 { left: 12%; top: 50%; width: 22px; }
.sale-banner__sparkle--2 { right: 13%; top: 30%; width: 26px; }
.sale-banner__sparkle--3 { right: 6%; top: 52%; width: 16px; }
.sale-banner__heart--1 { left: 5%; top: 52%; width: 18px; transform: rotate(-12deg); }
.sale-banner__heart--2 { right: 7%; top: 14%; width: 30px; transform: rotate(14deg); }
.sale-banner__squiggle { right: calc(50% - 300px); bottom: 30%; z-index: 2; width: 22px; }
@media (min-width: 601px) and (max-width: 1000px) {
  .sale-banner__cloud { width: calc(100% - 210px); padding-inline: 24px; }
  .sale-banner__bow { width: 118px; }
  .sale-banner__nails { left: 8px; width: 108px; }
  .sale-banner__polish { right: 14px; width: 58px; }
  .sale-banner__squiggle, .sale-banner__heart--1, .sale-banner__sparkle--1 { display: none; }
}
.sale-sticker {
  position: absolute;
  right: 0;
  bottom: 20px;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 150px;
  margin: 0;
  padding: 26px 16px 22px;
  background: url("assets/about/decor/about_cloud_label.svg") center / 100% 100% no-repeat;
  color: #51342f;
  text-align: center;
  transform: rotate(-8deg);
  pointer-events: none;
}
.sale-sticker[hidden] { display: none; }
.sale-sticker strong { color: #e0527f; font: 800 26px/1 var(--font-signature-display); }
.sale-sticker span { font: 700 12px/1.2 var(--font-signature-body); }
.sale-sticker::before, .sale-sticker::after { content: ""; position: absolute; background: url("doodles/star-pink.webp") center / contain no-repeat; }
.sale-sticker::before { top: -6px; left: 4px; width: 22px; height: 22px; }
.sale-sticker::after { right: 2px; bottom: 2px; width: 14px; height: 14px; }
@media (max-width: 600px) {
  .sale-banner { padding: 26px 12px 74px; border-radius: 20px; }
  .sale-banner__cloud { padding: 22px 18px 30px; background-image: url("assets/home/sale/cloud-tall.svg"); }
  .sale-banner__ribbon { gap: 8px; padding: 6px 14px; font-size: 15px; }
  .sale-banner__mini { width: 22px; }
  .sale-banner__value { font-size: clamp(50px, 15vw, 64px); }
  .sale-banner__when { gap: 8px; font-size: 14.5px; }
  .sale-banner__dot { width: 12px; }
  .sale-banner__action { gap: 6px; margin-top: 16px; }
  .sale-banner__rays { width: 13px; }
  .sale-banner__cta { gap: 8px; min-height: 48px; padding: 0 16px 0 8px; font-size: 15px; }
  .sale-banner__calendar { width: 28px; }
  .sale-banner__bow { top: -2px; left: -6px; width: 92px; }
  .sale-banner__nails { left: 4px; bottom: 6px; width: 112px; }
  .sale-banner__polish { right: 12px; bottom: 8px; width: 50px; }
  .sale-banner__sparkle--1 { left: 40%; top: auto; bottom: 26px; }
  .sale-banner__sparkle--2 { right: 8px; top: 12px; width: 20px; }
  .sale-banner__sparkle--3, .sale-banner__heart--1, .sale-banner__squiggle { display: none; }
  .sale-banner__heart--2 { right: 30%; top: auto; bottom: 22px; width: 22px; }
  .sale-sticker { position: relative; right: auto; bottom: auto; margin-top: 14px; transform: rotate(-4deg); }
}