/* Nhung Concierge Cleaning — design system v1 (DESIGN-SYSTEM-nhung.md). Velvet and gold: warm, unhurried, spotless. */
:root{
  --plum-900:#3a0f22;--plum-700:#5c1a33;--plum-500:#7a2a47;--plum-100:#f3e6ec;
  --gold-600:#b8891f;--gold-700:#8f6a14;--gold-300:#e6c979;
  --cream-50:#faf7f2;--cream-100:#f2ece3;--ink-900:#1c1519;--ink-600:#5b5257;--line:#e3d9d0;
  --success:#2f7d4f;--warn:#b5651d;--error:#a4262c;
  --shadow:0 6px 24px rgba(58,15,34,.08);--radius:16px;--radius-input:12px;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;--body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1120px;--gutter:20px;--rhythm:40px;
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream-50);color:var(--ink-900);font:400 16px/26px var(--body)}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;color:var(--plum-700);margin:0 0 12px;letter-spacing:.005em}
h1{font-size:34px;line-height:40px}h2{font-size:26px;line-height:32px}h3{font-size:20px;line-height:26px}
p{margin:0 0 12px}small,.small{font-size:14px;line-height:20px}
a{color:var(--plum-700)}a:hover{color:var(--plum-500)}
.mute{color:var(--ink-600);font-size:14px;line-height:20px}
.ok{color:var(--success)}.warn{color:var(--warn)}.danger,.err{color:var(--error)}
:focus-visible{outline:2px solid var(--plum-500);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:680px}
@media(min-width:900px){h1{font-size:48px;line-height:54px}h2{font-size:32px;line-height:40px}:root{--rhythm:64px}}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--plum-700);color:var(--cream-50);border-bottom:1px solid rgba(230,201,121,.35)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;color:var(--cream-50);text-decoration:none;min-width:0;flex:1 1 auto}.brand>span{min-width:0;overflow:hidden}
.brand .mono{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--plum-900);border:1px solid var(--gold-300);color:var(--gold-300);font:600 22px/38px var(--display);text-align:center}
.brand b{display:block;font:600 19px/22px var(--display);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;color:var(--gold-300);font-size:13px;line-height:16px}
.top nav{display:none;gap:22px}.top nav a{color:var(--cream-50);text-decoration:none;font-weight:600;font-size:15px;opacity:.92}.top nav a:hover{color:var(--gold-300);opacity:1}
.top .right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.top .right .btn{display:none;white-space:nowrap}
.lang{display:inline-flex;border:1px solid rgba(250,247,242,.45);border-radius:999px;padding:2px}
.lang button{width:auto;min-height:0;height:30px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--cream-50);font:600 13px var(--body);cursor:pointer;white-space:nowrap}
.lang button.on{background:var(--cream-50);color:var(--plum-700)}
@media(min-width:900px){.top nav{display:flex}.top .right .btn{display:inline-flex}}
@media(max-width:420px){.brand b{font-size:17px}.brand small{font-size:12px}}

/* buttons, chips, inputs */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:10px 22px;border:1px solid var(--plum-700);border-radius:999px;background:var(--plum-700);color:var(--cream-50);font:700 16px/20px var(--body);cursor:pointer;text-align:center;text-decoration:none;transition:background .15s,color .15s,opacity .15s}
button:hover,.btn:hover{background:var(--plum-500);border-color:var(--plum-500);color:var(--cream-50)}
button:focus-visible,.btn:focus-visible{outline:3px solid var(--gold-300);outline-offset:2px}
button.secondary,.btn.secondary{background:transparent;color:var(--plum-700)}button.secondary:hover,.btn.secondary:hover{background:var(--plum-100);color:var(--plum-700)}
.btn.gold,button.gold{background:var(--gold-600);border-color:var(--gold-600);color:var(--plum-900)}.btn.gold:hover,button.gold:hover{background:var(--gold-300);border-color:var(--gold-300);color:var(--plum-900)}
button.ghost{background:transparent;color:var(--ink-600);border-color:var(--line)}button.ghost:hover{background:var(--cream-100);color:var(--ink-900)}
button.small,.btn.small{width:auto;min-height:40px;padding:6px 16px;font-size:14px}
.btn.auto,button.auto{width:auto}
button:disabled{opacity:.5;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid transparent;border-radius:999px;background:var(--plum-100);color:var(--plum-700);font-weight:600;font-size:14px;cursor:pointer;user-select:none;transition:background .15s,color .15s}
.chip:hover{border-color:var(--plum-500)}.chip.on{background:var(--plum-700);color:var(--cream-50)}.chip.full{opacity:.5;text-decoration:line-through;cursor:not-allowed}.chip.static{cursor:default}
label{display:block;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-600);margin:12px 0 6px}
input,select,textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-input);font:400 16px/24px var(--body);color:var(--ink-900);background:#fff}
textarea{min-height:72px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--plum-500);outline-offset:0;border-color:var(--plum-500)}
input[type=checkbox]{width:22px;height:22px;min-height:0;margin:0 10px 0 0;accent-color:var(--plum-700);flex:0 0 22px}
label.check-row{display:flex;align-items:center;font-weight:400;color:var(--ink-900);font-size:16px;line-height:24px;margin:12px 0 0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:420px){.row3{grid-template-columns:1fr 1fr}}

/* cards + layout */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0 0 16px;box-shadow:var(--shadow)}
.card h2{font-size:24px;line-height:30px;margin-bottom:8px}
.card h3{font-size:14px;line-height:20px;font-family:var(--body);font-weight:700;color:var(--gold-700);text-transform:uppercase;letter-spacing:.08em;margin:18px 0 6px}
main.app{max-width:680px;margin:0 auto;padding:20px var(--gutter) 64px}
main.wide{max-width:var(--max)}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--gold-600),transparent);border:0;margin:0}
.price{font:600 40px/44px var(--display);color:var(--plum-700);margin:4px 0}
.lines{font-size:14px;line-height:20px;color:var(--ink-600)}.lines div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;line-height:18px;font-weight:700;background:var(--cream-100);color:var(--ink-600);white-space:nowrap}
.pill.booked{background:#e6f2ea;color:var(--success)}.pill.waitlist{background:#fbeee0;color:var(--warn)}.pill.complete{background:var(--plum-100);color:var(--plum-700)}.pill.blocked{background:#f7dfe0;color:var(--error)}.pill.in_progress,.pill.enroute{background:#f8efd6;color:var(--gold-700)}.pill.cancelled{background:var(--cream-100);color:var(--ink-600)}
.job{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.job:last-child{border-bottom:0}.job b{display:block;font-weight:700}.job .t{color:var(--ink-600);font-size:14px;line-height:20px}
a.job:hover b{color:var(--plum-700)}
.check{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:24px;margin:0;font-weight:400;color:var(--ink-900)}
.check.done{color:var(--ink-600);text-decoration:line-through}.check input[type=checkbox]{width:26px;height:26px;flex:0 0 26px;margin-top:-1px}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.photos .mute{margin-top:4px}
.callout{background:var(--plum-100);border:1px solid var(--line);border-left:3px solid var(--gold-600);border-radius:12px;padding:12px 14px;font-size:14px;line-height:20px;color:var(--ink-900)}
.callout.warn{border-left-color:var(--warn)}.callout.ok{border-left-color:var(--success)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--plum-900);color:var(--cream-50);padding:12px 18px;border-radius:999px;font-size:14px;max-width:92vw;z-index:30;box-shadow:var(--shadow)}
.stat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat div{background:var(--cream-50);border:1px solid var(--line);border-radius:12px;padding:12px}.stat b{font:600 26px/30px var(--display);color:var(--plum-700);display:block}
@media(min-width:900px){.stat{grid-template-columns:repeat(4,1fr)}}
pre{white-space:pre-wrap;word-break:break-word;font:13px/19px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--cream-100);padding:12px;border-radius:12px;border:1px solid var(--line);margin:8px 0 0}
table{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-700)}
td.num,th.num{text-align:right;white-space:nowrap;font-weight:700;color:var(--plum-700)}
.cam{min-height:56px;font-size:17px}
.cam svg,.btn svg,button svg{width:22px;height:22px;flex:0 0 22px}
.two{display:grid;gap:16px}@media(min-width:960px){.two{grid-template-columns:1fr 1fr;align-items:start}.sticky{position:sticky;top:84px}}
.hero-app{padding:8px 0 20px}.hero-app h1{font-size:30px;line-height:36px;margin-bottom:6px}.hero-app p{color:var(--ink-600)}

/* landing */
.hero{background:linear-gradient(160deg,var(--plum-700),var(--plum-900));color:var(--cream-50);padding:56px 0 48px;position:relative}
.hero h1{color:var(--cream-50);max-width:14ch;margin-bottom:14px}
.hero .sub{font-size:18px;line-height:28px;max-width:34em;color:rgba(250,247,242,.92);margin-bottom:24px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;max-width:520px}.hero .cta .btn{width:auto;flex:1 1 200px}
.hero .btn.secondary{color:var(--cream-50);border-color:rgba(250,247,242,.6)}.hero .btn.secondary:hover{background:rgba(250,247,242,.12);color:var(--cream-50)}
.trust{display:flex;flex-wrap:wrap;gap:10px 28px;margin:28px 0 0;padding:20px 0 0;border-top:1px solid rgba(230,201,121,.4);list-style:none;font-size:15px;color:var(--cream-50)}
.trust li{display:flex;align-items:center;gap:8px}.trust svg{width:20px;height:20px;color:var(--gold-300);flex:0 0 20px}
.hero .velvet{position:absolute;right:-60px;top:-60px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(230,201,121,.18),transparent 70%);pointer-events:none}
@media(min-width:900px){.hero{padding:96px 0 80px}.hero .sub{font-size:20px;line-height:30px}}
section.band{padding:var(--rhythm) 0}
section.band.alt{background:var(--cream-100)}
section.band.plum{background:var(--plum-100)}
.eyebrow{display:block;font:700 13px/18px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-700);margin-bottom:8px}
.lead{font-size:18px;line-height:28px;color:var(--ink-600);max-width:40em;margin-bottom:24px}
.steps{display:grid;gap:16px;counter-reset:step;list-style:none;padding:0;margin:0}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px 20px;box-shadow:var(--shadow);position:relative}
.steps li::before{counter-increment:step;content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--plum-100);color:var(--plum-700);border:1px solid var(--gold-300);font:600 22px var(--display);margin-bottom:10px}
.steps h3{margin-bottom:6px}.steps p{margin:0;color:var(--ink-600)}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.pricecard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px 16px 16px;box-shadow:var(--shadow);overflow-x:auto}
.pricecard table td:first-child{color:var(--ink-900)}.pricecard td .mute{display:block}
.pricecard tbody tr:last-child td{border-bottom:0}
.prices-grid{display:grid;gap:16px}@media(min-width:900px){.prices-grid{grid-template-columns:3fr 2fr;align-items:start}}
.addons{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.offer{border:1px solid var(--gold-300);background:#fff;border-radius:var(--radius);padding:28px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold-600)}
.offer h2{margin-bottom:8px}.offer .big{font:600 30px/36px var(--display);color:var(--plum-700);margin-bottom:8px}
.offer .seats{font-weight:700;color:var(--gold-700)}
.offer .btn{width:auto;margin-top:12px}
@media(min-width:760px){.offer{padding:36px 40px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.offer .btn{margin:0}}
.features{display:grid;gap:16px;list-style:none;padding:0;margin:0 0 20px}
.features li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.features svg{width:28px;height:28px;color:var(--gold-600);margin-bottom:10px}
.features h3{margin-bottom:6px}.features p{margin:0;color:var(--ink-600)}
@media(min-width:760px){.features{grid-template-columns:repeat(3,1fr)}}
.about{display:grid;gap:20px}@media(min-width:760px){.about{grid-template-columns:1fr 1fr}}
.person{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}
.portrait{width:96px;height:96px;border-radius:50%;background:var(--plum-100);border:1px solid var(--gold-300);display:flex;align-items:center;justify-content:center;font:600 34px var(--display);color:var(--plum-700)}
.person h3{margin-bottom:4px}.person .role{color:var(--gold-700);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.area{display:grid;gap:20px}@media(min-width:760px){.area{grid-template-columns:1fr 1fr}}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:16px 20px;font:600 18px/24px var(--display);color:var(--plum-700);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 24px var(--display);color:var(--gold-600);flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 20px 16px;margin:0;color:var(--ink-600)}
.cta-band{background:linear-gradient(160deg,var(--plum-700),var(--plum-900));color:var(--cream-50);text-align:center;padding:var(--rhythm) 0}
.cta-band h2{color:var(--cream-50)}.cta-band p{color:rgba(250,247,242,.9);max-width:36em;margin:0 auto 20px}
.cta-band .btn{width:auto;min-width:220px}
footer.site{background:var(--plum-900);color:rgba(250,247,242,.85);padding:32px 0 40px;font-size:14px;line-height:22px}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer.site a{color:var(--gold-300);text-decoration:none}footer.site a:hover{text-decoration:underline}
footer.site .links{display:flex;flex-wrap:wrap;gap:6px 18px}
footer.site .lang{border-color:rgba(250,247,242,.35)}
.legal h2{margin-top:28px}.legal p,.legal li{color:var(--ink-900)}.legal ul{padding-left:20px}
.legal .updated{color:var(--ink-600);font-size:14px}
[hidden]{display:none!important}
.invalid{border-color:var(--error)!important;box-shadow:0 0 0 3px rgba(161,27,47,.14)}