/* Quốc Trung — quiet luxury, designed from the smallest screen up. */
:root{--paper:#f7f4ee;--ink:#252820;--muted:#65675e;--line:#d9d8ce;--accent:#80634c;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Manrope",Arial,sans-serif;--brand-gold:#80634c;--brand-gold-dark:#614935;--brand-dark:#252820}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body.atelier{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.8 var(--sans);-webkit-font-smoothing:antialiased}
.atelier a{color:inherit;text-decoration:none}
.atelier button,.atelier input,.atelier select,.atelier textarea{font:inherit}
.atelier button,.atelier summary{-webkit-tap-highlight-color:transparent}
.atelier button{cursor:pointer}
.atelier ::selection{background:#dfd1bf;color:var(--ink)}
.atelier :focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.atelier h1,.atelier h2,.atelier h3,.atelier p{margin:0}
.atelier h1,.atelier h2,.atelier h3{font-family:var(--serif);font-weight:500}
.atelier h2{font-size:clamp(36px,5vw,58px);line-height:1.13;letter-spacing:-.025em}
.atelier h3{font-size:30px;line-height:1.2}
.atelier em{font-weight:400}
.atelier .wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.atelier .eyebrow{font:500 10px/1.7 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.atelier .section{padding-block:76px}
.atelier .section-heading{margin-bottom:32px}
.atelier .section-heading .eyebrow{margin-bottom:18px}
.atelier .section-note{max-width:390px;color:var(--muted);margin-top:20px}
.atelier .skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 20px}
.atelier .skip-link:focus{top:10px}
.atelier-header{height:82px;position:sticky;top:0;z-index:40;background:rgba(247,244,238,.97);border-bottom:1px solid var(--line)}
.atelier-header .wrap{height:100%;display:flex;justify-content:space-between;align-items:center;gap:20px}
.atelier .wordmark{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1;flex-shrink:0}
.atelier .wordmark strong{font:500 25px/1.2 var(--serif);letter-spacing:.08em}
.atelier .wordmark small{font:500 8px/1.6 var(--sans);letter-spacing:.3em;margin-top:4px}
.atelier .desktop-nav{display:none;align-items:center;gap:34px;font-size:12px}
.atelier .desktop-nav>a:not(.button):hover{color:var(--accent)}
.atelier .button{min-height:50px;padding:13px 24px;border:1px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--ink);color:var(--paper);font:500 12px/1.6 var(--sans);border-radius:0;transition:background .2s,color .2s}
.atelier .button:hover{background:#414438;border-color:#414438}
.atelier .button-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.atelier .button-outline:hover{background:#eae6dd;border-color:var(--ink)}
.atelier .arrow{font-family:Arial,sans-serif;font-size:20px;font-weight:400;line-height:1}
.atelier .menu-toggle{width:46px;height:46px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.atelier .menu-toggle span{height:1px;width:24px;background:var(--ink);transition:transform .2s}
.atelier .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.atelier .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.atelier .mobile-menu{position:fixed;inset:82px 0 0;z-index:39;background:var(--paper);overflow:auto;padding:32px 24px max(100px,env(safe-area-inset-bottom));}
.atelier .mobile-menu[hidden]{display:none}
.atelier .mobile-menu nav{display:flex;flex-direction:column}
.atelier .mobile-menu nav>a{font:500 36px/1.3 var(--serif);padding:15px 0;border-bottom:1px solid var(--line)}
.atelier .mobile-menu .menu-contact{margin-top:36px;color:var(--muted);font-size:13px}
body.atelier.menu-open{overflow:hidden}
.atelier .hero{text-align:center;padding-top:54px;padding-bottom:48px}
.atelier .hero .eyebrow{font-size:9px;letter-spacing:.16em}
.atelier .hero h1{font-size:clamp(45px,8vw,92px);line-height:1.05;letter-spacing:-.035em;margin:28px auto 24px;max-width:970px}
.atelier .hero h1 em{color:var(--accent)}
.atelier .hero-description{max-width:430px;margin-inline:auto;color:var(--muted);font-size:14px}
.atelier .hero-actions{display:flex;flex-direction:column;gap:12px;margin:28px auto 0;max-width:330px}
.atelier .text-link{display:inline-flex;align-items:center;gap:18px;min-height:46px;font-size:12px;border-bottom:1px solid var(--line);padding:8px 0}
.atelier .text-link:hover{color:var(--accent);border-color:var(--accent)}
.atelier .hero-signature{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:36px;font:italic 19px var(--serif);color:var(--accent)}
.atelier .hero-signature:before,.atelier .hero-signature:after{content:"";width:32px;height:1px;background:var(--line)}
.atelier .salon-strip{border-block:1px solid var(--line)}
.atelier .salon-strip .wrap{display:flex;justify-content:space-between;gap:12px;padding-block:18px;flex-wrap:wrap;font-size:10px;color:var(--muted)}
.atelier .strip-address{color:var(--ink)}
.atelier .services-layout{display:grid;gap:28px}
.atelier .service-list{border-top:1px solid var(--line)}
.atelier .service-row{display:grid;grid-template-columns:24px 1fr 20px;gap:14px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.atelier .service-number{font-size:10px;color:var(--accent);padding-top:8px}
.atelier .service-row h3{font-size:29px;margin-bottom:7px;transition:color .2s}
.atelier .service-row p{font-size:13px;line-height:1.8;color:var(--muted);max-width:440px}
.atelier .service-row .arrow{padding-top:8px;transition:transform .2s}
.atelier .service-row:hover h3{color:var(--accent)}
.atelier .service-row:hover .arrow{transform:translate(3px,-3px)}
.atelier .services-footnote{font-size:11px;color:var(--muted);margin-top:22px}
.atelier .philosophy{background:var(--ink);color:var(--paper)}
.atelier .philosophy .wrap{display:grid;gap:36px}
.atelier .philosophy .eyebrow{color:#cbbba4;margin-bottom:24px}
.atelier .philosophy h2 em{color:#cbbba4}
.atelier .philosophy-intro{color:#d1d2c8;font-size:14px;max-width:470px}
.atelier .rituals{margin-top:30px}
.atelier .ritual{display:grid;grid-template-columns:28px 1fr;gap:16px;border-top:1px solid #4a4e40;padding:20px 0}
.atelier .ritual>span{font:italic 20px var(--serif);color:#cbbba4}
.atelier .ritual h3{font-family:var(--sans);font-size:13px;font-weight:500;margin-bottom:7px}
.atelier .ritual p{font-size:12px;color:#bfc2b4;line-height:1.8}
.atelier .journal-grid{display:grid;gap:24px}
.atelier .journal-entry{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;align-items:flex-start}
.atelier .journal-entry .eyebrow{font-size:9px;margin-bottom:16px}
.atelier .journal-entry h3{font-size:29px;margin-bottom:12px}
.atelier .journal-entry p{font-size:13px;color:var(--muted);margin-bottom:16px}
.atelier .journal-entry .text-link{margin-top:auto}
.atelier .faq-section{border-top:1px solid var(--line);padding-top:56px}
.atelier .faq-layout{display:grid;gap:24px}
.atelier details{border-bottom:1px solid var(--line)}
.atelier summary{list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;cursor:pointer;font-size:13px;line-height:1.7}
.atelier summary::-webkit-details-marker{display:none}
.atelier summary:after{content:"+";font:400 23px var(--serif);flex-shrink:0}
.atelier details[open]>summary:after{content:"−"}
.atelier details>p{font-size:13px;color:var(--muted);padding:0 28px 22px 0}
.atelier .booking-section{border-top:1px solid var(--line);background:#eeece4}
.atelier .booking-layout{display:grid;gap:36px}
.atelier .contact-details{font-size:13px;line-height:1.8;margin-top:30px}
.atelier .contact-details>div{margin-bottom:20px}
.atelier .contact-details .eyebrow{font-size:9px;margin-bottom:5px}
.atelier .contact-phone{font:500 31px var(--serif)}
.atelier .contact-links{display:flex;gap:26px;flex-wrap:wrap}
.atelier .booking-form{display:grid;grid-template-columns:1fr;gap:20px;align-content:start}
.atelier .booking-form .form-intro{font-size:12px;color:var(--muted);margin-bottom:3px}
.atelier .booking-form label{display:block;font-size:11px;font-weight:600;margin-bottom:7px}
.atelier .booking-form input,.atelier .booking-form select,.atelier .booking-form textarea{width:100%;min-width:0;min-height:50px;background:var(--paper);border:1px solid #c9cabd;border-radius:0;padding:12px 14px;color:var(--ink);font-size:16px;box-shadow:none}
.atelier .booking-form textarea{resize:vertical;min-height:100px}
.atelier .booking-form input::placeholder,.atelier .booking-form textarea::placeholder{color:#76786b;font-size:13px}
.atelier .booking-form .button{width:100%;font-size:13px}
.atelier .form-note{font-size:10px;line-height:1.8;color:var(--muted)}
.atelier .form-status:empty{display:none}
.atelier .form-status{font-size:12px;padding:12px 14px;border:1px solid var(--line);background:var(--paper)}
.atelier .form-status.is-error{color:#85352d;border-color:#b9776d}
.atelier .form-status.is-success{color:#325038;border-color:#739379}
.atelier .form-status.is-info{color:var(--muted)}
.atelier button:disabled{opacity:.65;cursor:wait}
.atelier .honeypot{display:none!important}
.atelier .feedback-details{margin-top:28px;border-top:1px solid var(--line)}
.atelier .feedback-details summary{font-size:12px}
.atelier .feedback-details .booking-form{padding-bottom:24px}
.atelier .feedback-stars{display:flex;gap:6px;margin:0 0 10px}
.atelier .feedback-star{font-size:28px;width:44px;height:44px;border:0;background:transparent;color:#6d7063}
.atelier .feedback-star.is-active,.atelier .feedback-star.is-hover{color:var(--accent)}
.atelier .feedback-rating-label{font-size:11px;color:var(--muted)}
.atelier-footer{background:var(--ink);color:#c1c4b7;padding:45px 0 100px}
.atelier-footer .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.atelier-footer .wordmark{color:var(--paper)}
.atelier-footer .footer-note{font-size:11px}
.atelier-footer .footer-links{display:flex;gap:24px;font-size:11px}
.atelier .mobile-dock{position:fixed;bottom:0;inset-inline:0;z-index:35;display:grid;grid-template-columns:1fr 1.45fr;padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;background:var(--paper);border-top:1px solid var(--line)}
.atelier .mobile-dock .button{min-height:46px;padding:10px 12px;gap:12px;font-size:12px}
.atelier .mobile-dock[hidden]{display:none}
.atelier .full-field{grid-column:1/-1}
@media(min-width:600px){.atelier .hero-actions{flex-direction:row;justify-content:center;max-width:none}.atelier .hero-actions .button{min-width:190px}.atelier .booking-form{grid-template-columns:repeat(2,minmax(0,1fr))}.atelier .journal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.atelier .hero{padding-block:74px}.atelier .salon-strip .wrap{font-size:11px}}
@media(min-width:900px){.atelier .wrap{width:min(1180px,calc(100% - 96px))}.atelier-header{height:92px}.atelier .desktop-nav{display:flex}.atelier .menu-toggle{display:none}.atelier .wordmark strong{font-size:30px}.atelier .wordmark small{font-size:9px}.atelier .section{padding-block:100px}.atelier .hero{padding-top:92px;padding-bottom:68px}.atelier .hero h1{margin-top:32px;margin-bottom:28px}.atelier .hero .eyebrow{font-size:10px}.atelier .hero-description{font-size:14px}.atelier .hero-actions{margin-top:32px}.atelier .hero-signature{margin-top:48px}.atelier .salon-strip .wrap{justify-content:center;gap:64px;padding-block:21px}.atelier .services-layout{grid-template-columns:1fr 1.4fr;gap:100px}.atelier .service-row{padding:25px 0;grid-template-columns:32px 1fr 24px;gap:18px}.atelier .service-row h3{font-size:33px}.atelier .philosophy .wrap{grid-template-columns:1fr 1fr;gap:120px}.atelier .philosophy h2{font-size:58px}.atelier .journal-entry h3{font-size:32px}.atelier .faq-layout{grid-template-columns:1fr 1.4fr;gap:100px}.atelier .booking-layout{grid-template-columns:1fr 1.4fr;gap:100px}.atelier-footer{padding:42px 0}.atelier-footer .wrap{flex-direction:row;justify-content:space-between;align-items:center}.atelier .mobile-dock{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.atelier *{animation:none!important;transition:none!important}}

/* Match existing service and advice pages to the same restrained visual system. */
body.atelier-article{background:var(--paper);color:var(--ink);font-family:var(--sans);padding-bottom:0}
.atelier-article header{background:var(--ink)!important;box-shadow:none!important;border-bottom:1px solid #4a4e40}
.atelier-article .hero-bg{background:var(--ink);padding-top:130px;padding-bottom:56px}
.atelier-article .hero-bg h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1.15;letter-spacing:-.02em}
.atelier-article .hero-bg .text-primary{color:#cbbba4}
.atelier-article .text-primary{color:var(--accent)}
.atelier-article .btn{border-radius:0;box-shadow:none;min-height:46px;text-transform:none;letter-spacing:.02em;font-weight:500;padding:12px 22px;font-size:12px}
.atelier-article .btn-primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.atelier-article .hero-bg .btn-primary,.atelier-article .bg-dark .btn-primary{background:#cbbba4;border-color:#cbbba4;color:var(--ink)}
.atelier-article .btn-outline{border-color:var(--line);color:var(--ink)}
.atelier-article .bg-dark .btn-outline{color:var(--paper);border-color:#7d8171}
.atelier-article .wordmark{display:inline-flex;flex-direction:column;align-items:center;color:var(--paper);line-height:1.1}
.atelier-article .wordmark strong{font:500 25px/1.2 var(--serif);letter-spacing:.08em}
.atelier-article .wordmark small{font:500 8px/1.6 var(--sans);letter-spacing:.3em;margin-top:4px}
.atelier-article .header-cta{display:none;color:var(--paper);font-size:11px;border-bottom:1px solid #7d8171;padding-block:8px}
.atelier-article .bg-dark{background:var(--ink)}
.atelier-article .toc-card,.atelier-article .faq-item,.atelier-article .article-related-box{border-radius:0;box-shadow:none;background:transparent;border-color:var(--line)}
.atelier-article .article-section h2{font-family:var(--serif);font-weight:500;font-size:36px;color:var(--ink);line-height:1.2}
.atelier-article .article-section p{font-size:15px;color:var(--muted);line-height:1.9}
.atelier-article .article-section strong{color:var(--ink)}
.atelier-article .article-highlight-box{border:0;border-left:1px solid var(--accent);border-radius:0;background:transparent;padding:0 0 0 24px;margin-bottom:36px}
.atelier-article .article-highlight-box h3,.atelier-article .article-related-box h3{font-family:var(--serif);font-weight:500;line-height:1.2;color:var(--ink)}
.atelier-article .article-highlight-box p{font-size:14px;line-height:1.9;color:var(--muted)}
.atelier-article .article-related-links a{border-radius:0;background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:500;font-size:12px}
.atelier-article .article-visual-grid{display:none}
.atelier-article header .btn-primary{background:#cbbba4;border-color:#cbbba4;color:var(--ink)}
.atelier-article .bg-dark [class*="text-primary"]{color:#cbbba4}
.atelier-article .bg-dark .pro-bullets li:before{background:#cbbba4}
.atelier-article .article-section figure,.atelier-article main>div:has(>img),.atelier-article main>figure{display:none}
.atelier-article .shadow-md,.atelier-article .shadow-lg,.atelier-article .shadow-xl,.atelier-article .shadow-2xl{box-shadow:none}
.atelier-article [class*="rounded-"]{border-radius:2px}
.atelier-article .desktop-contact-rail{display:none!important}
.atelier-article .mobile-sticky-bar{background:var(--paper);border-top:1px solid var(--line);box-shadow:none;border-radius:0;bottom:0;left:0;right:0;transform:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;grid-template-columns:1fr 1.45fr}
.atelier-article .mobile-sticky-action--facebook{display:none}
.atelier-article .mobile-sticky-action{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:0;box-shadow:none;min-height:46px;font-size:12px}
.atelier-article .mobile-sticky-action--book{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.atelier-article .progress-bar{background:var(--accent);height:2px}
@media(max-width:767px){body.atelier-article{padding-bottom:85px}.atelier-article .hero-bg{padding-top:112px;padding-bottom:40px}.atelier-article .hero-bg .text-lg{font-size:14px}.atelier-article main{padding-top:36px}.atelier-article .article-section h2{font-size:30px}.atelier-article header nav{display:none}.atelier-article header .btn{font-size:11px}.atelier-article .mobile-sticky-bar{display:grid!important}.atelier-article .toc-card{position:static}.atelier-article .header-cta{display:inline-block}.atelier-article .article-shell>article{padding:0;background:transparent;border:0}.atelier-article .article-related-box{padding:24px 0;border-width:1px 0}.atelier-article .mobile-sticky-action{flex-direction:row;gap:10px}}