body{background:#faf9f5}.shell{max-width:1440px;padding:0 40px 24px}.brand-nav.nav{height:auto;min-height:90px;gap:32px;display:flex;align-items:center}.brand-nav .brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-nav .brand-mark{width:45px;height:50px;object-fit:contain}.brand-nav .brand-copy{display:grid;gap:4px}.brand-nav .brand-chinese{font:700 24px 'Songti SC',serif;letter-spacing:3px}.brand-nav .brand-english{font:16px Georgia,serif;letter-spacing:.3px}.brand-nav .tabs{display:flex;gap:22px;align-items:center;justify-content:center;flex:1;align-self:stretch}.brand-nav .tabs button,.brand-nav .tabs a{border:0;background:none;color:#263c2f;text-decoration:none;white-space:nowrap;font-size:14px;padding:27px 0;position:relative}.brand-nav .tabs button.active:after{bottom:17px}.brand-utilities{display:flex;align-items:center;gap:18px;flex-shrink:0}.brand-languages,.brand-roles{display:flex;align-items:center;gap:6px;font-size:12px;color:#405b47}.brand-languages button,.brand-roles button{background:none;border:0;color:inherit;font-size:12px;padding:6px 2px;white-space:nowrap}.brand-languages button[aria-pressed=true]{text-decoration:underline;text-underline-offset:5px}.brand-languages button+button:before{content:'/';margin-right:6px;color:#9ba694}.brand-roles{border-left:1px solid #cbd2c5;padding-left:15px}.brand-home{padding:0}.brand-hero{margin:0 -40px;background:#f2ebdf url('/assets/home-cover-minimal.png') center/cover no-repeat;min-height:360px;display:flex;align-items:center;padding:40px 60px}.brand-hero-copy{width:50%}.brand-hero h1{font:600 clamp(32px,4.3vw,62px)/1.3 'Songti SC','Noto Serif SC',serif;color:#133a28;letter-spacing:1px;margin:0 0 25px}.brand-start{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:#244d36;border-radius:5px;color:#fff;text-decoration:none;padding:13px 22px;font-size:17px}.brand-start:hover{background:#173e27}.brand-section-title{display:flex;align-items:center;gap:24px;font:600 28px 'Songti SC',serif;letter-spacing:1px;margin:0 0 18px;color:#21382a}.brand-section-title:after{content:'';height:1px;flex:1;background:#c6cbbc}.brand-courses{padding-top:32px}.brand-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.brand-course{display:flex;align-items:center;gap:25px;min-height:188px;padding:22px 28px;border:1px solid transparent;border-radius:5px;text-decoration:none;color:#203c29;background:#e5ecdd;text-align:left;font:inherit;cursor:pointer;transition:transform .15s,border-color .15s}.brand-course:hover{transform:translateY(-3px);border-color:#8da285}.brand-course.course-1{background:#eeeee8;color:#7a8074}.brand-course.course-3{background:#f0dfcb;color:#5a4431}.brand-book{flex-shrink:0;width:96px;height:142px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:linear-gradient(90deg,#c3cdb7 0 5%,#f7f5e9 7%,#e8eddf 100%);border-left:4px solid #778c6b;border-radius:2px 5px 5px 2px;box-shadow:5px 6px 8px #47503920;transform:rotate(-5deg);color:#55704c}.brand-book small{font-size:6px;letter-spacing:.6px}.brand-book b{font:19px Georgia,serif;margin-top:10px}.brand-book strong{font:40px Georgia,serif;font-weight:400}.brand-book i{position:absolute;bottom:0;right:5px;font:45px Georgia,serif;color:#9dae8c;opacity:.5}.course-1 .brand-book{filter:grayscale(1);opacity:.45}.course-3 .brand-book{background:linear-gradient(90deg,#bda382 0 5%,#fbf3e6 7%,#f0e1cb);border-left-color:#a28059;color:#8a6743}.brand-course-copy{min-width:0;display:flex;flex-direction:column;gap:5px}.brand-course h3{font:600 34px Georgia,serif;white-space:nowrap}.brand-course-copy>span{font-size:15px}.brand-course em{font-style:normal;font-size:13px;margin-top:18px;text-decoration:underline;text-underline-offset:7px;white-space:nowrap}.brand-tools{padding-top:30px}.brand-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 0}.brand-tools-grid button{display:flex;align-items:center;justify-content:center;gap:20px;background:none;border:0;color:#293c2e;padding:10px 20px;font-size:19px}.brand-tools-grid button+button{border-left:1px solid #d5dacd}.brand-tools-grid button:hover{background:#f0f2e9}.brand-tools-grid b{font-weight:400;font-size:24px}.brand-tool-icon{display:grid;place-items:center;width:65px;height:64px;border:1px solid #d6cbb6;border-radius:5px;background:#f6f2e7;box-shadow:3px 4px 0 #ebe5d6;transform:rotate(-8deg);font:34px 'Songti SC',serif;color:#617555}.brand-secondary{display:flex;justify-content:center;gap:0;margin:18px 0 22px;flex-wrap:wrap}.brand-secondary button{font-size:12px;color:#61705a;background:none;border:0;padding:6px 16px}.brand-secondary button+button{border-left:1px solid #d6dccf}.brand-secondary button:hover{text-decoration:underline}.brand-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #dde0d4;padding:24px 0 0;gap:20px}.brand-footer .brand{display:flex;gap:10px;align-items:center}.brand-footer .brand-mark{height:38px;width:38px;object-fit:contain}.brand-footer .brand-copy{display:grid;gap:2px}.brand-footer .brand-chinese{font-size:18px}.brand-footer .brand-english{font:12px Georgia,serif}.brand-footer>button:last-child{background:none;border:0;color:#495d44;font-size:12px}.brand-coming{padding:80px 20px;max-width:650px;margin:auto;min-height:450px}.brand-coming>p{color:#75816c;line-height:1.9}.brand-coming .text-link{display:block;margin-top:25px}.brand-coming h1{font-family:'Songti SC',serif;font-size:45px}.brand-nav button:focus-visible,.brand-nav a:focus-visible,.brand-home button:focus-visible,.brand-home a:focus-visible,.brand-footer button:focus-visible{outline:2px solid #456c44;outline-offset:5px}
@media(max-width:1200px){.brand-nav.nav{gap:22px;flex-wrap:wrap;padding:15px 0}.brand-nav .tabs{order:3;flex-basis:100%;justify-content:center;gap:35px}.brand-nav .tabs button,.brand-nav .tabs a{padding:8px 0}.brand-nav .tabs button.active:after{bottom:0}.brand-utilities{margin-left:auto}.brand-course{padding:20px;gap:18px}.brand-book{width:76px;height:120px}.brand-course h3{font-size:29px}.brand-hero{min-height:330px}.brand-tools-grid button{font-size:16px;gap:16px}}
@media(max-width:750px){.shell{padding:0 20px 20px}.brand-nav.nav{gap:14px}.brand-nav .brand-mark{width:34px;height:40px}.brand-nav .brand-chinese{font-size:20px}.brand-nav .brand-english{font-size:12px}.brand-utilities{gap:10px;flex-wrap:wrap;justify-content:flex-end}.brand-roles{border:0;padding:0}.brand-nav .tabs{gap:20px;justify-content:flex-start;overflow-x:auto;min-width:0;padding-bottom:3px}.brand-nav .tabs button,.brand-nav .tabs a{font-size:13px}.brand-hero{margin:0 -20px;padding:35px 25px;min-height:285px;background-position:57% center}.brand-hero-copy{width:60%}.brand-hero h1{font-size:34px}.brand-start{padding:11px 17px;font-size:14px;gap:20px}.brand-section-title{font-size:24px;gap:14px}.brand-course-grid{gap:10px}.brand-course{flex-direction:column;align-items:flex-start;gap:13px;padding:16px 12px;min-height:220px}.brand-book{width:60px;height:87px;margin:0 auto}.brand-book small{font-size:4px}.brand-book b{font-size:13px;margin-top:6px}.brand-book strong{font-size:27px}.brand-book i{font-size:25px}.brand-course h3{font-size:25px}.brand-course-copy>span{font-size:12px}.brand-course em{font-size:11px;margin-top:12px}.brand-tools-grid button{flex-direction:column;gap:10px;font-size:14px;padding:8px}.brand-tools-grid b{display:none}.brand-tool-icon{width:45px;height:45px;font-size:27px}.brand-secondary button{font-size:11px;padding:5px 10px}}
@media(max-width:440px){.brand-nav .brand{gap:7px}.brand-nav .brand-chinese{font-size:18px;letter-spacing:1px}.brand-nav .brand-english{font-size:10px}.brand-utilities{max-width:170px;gap:3px}.brand-languages button,.brand-roles button{font-size:11px}.brand-nav .tabs{gap:22px}.brand-hero{min-height:260px;background-position:62% center;position:relative}.brand-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f5efe5db,transparent 80%)}.brand-hero-copy{position:relative;width:75%}.brand-hero h1{font-size:30px}.brand-courses{padding-top:25px}.brand-course h3{font-size:22px}.brand-secondary button{padding:5px 8px}}
html[data-locale=en] .brand-hero h1,html[data-locale=nl] .brand-hero h1,html[data-locale=th] .brand-hero h1{font-size:clamp(27px,3.5vw,48px)}
/* Shared desktop header stays on one line and remains visible while scrolling. */
html{scroll-padding-top:100px}.brand-nav.nav{position:sticky;top:0;z-index:100;background:#faf9f5;box-shadow:0 1px 0 #dedfd5;isolation:isolate}.brand-nav.nav:before{content:'';position:absolute;inset:0 -40px;background:#faf9f5;z-index:-1;border-bottom:1px solid #dedfd5}
@media(min-width:851px){.brand-nav.nav{flex-wrap:nowrap;gap:20px;min-height:80px;padding:0}.brand-nav .tabs{order:0;flex:1 1 auto;gap:20px;min-width:0;justify-content:center;overflow-x:auto}.brand-nav .tabs button,.brand-nav .tabs a{padding:26px 0}.brand-nav .tabs button.active:after{bottom:16px}.brand-utilities{margin-left:0;gap:12px;flex-wrap:nowrap}}
@media(min-width:851px) and (max-width:1150px){.brand-nav.nav{gap:15px}.brand-nav .brand{gap:7px}.brand-nav .brand-mark{width:32px;height:38px}.brand-nav .brand-chinese{font-size:19px;letter-spacing:1px}.brand-nav .brand-english{font-size:12px}.brand-nav .tabs{gap:15px}.brand-nav .tabs button,.brand-nav .tabs a{font-size:12px}.brand-utilities{gap:8px}.brand-languages,.brand-roles{gap:3px}.brand-languages button,.brand-roles button{font-size:11px}.brand-roles{padding-left:8px}.brand-languages button+button:before{margin-right:3px}}
@media(max-width:850px){html{scroll-padding-top:150px}.brand-nav.nav{padding:12px 0;gap:12px;flex-wrap:wrap}.brand-nav .tabs{order:3;flex-basis:100%;overflow-x:auto;justify-content:flex-start;gap:22px}.brand-nav .tabs button,.brand-nav .tabs a{padding:8px 0}.brand-nav .tabs button.active:after{bottom:0}.brand-utilities{margin-left:auto}}
@media(max-width:750px){.brand-nav.nav:before{inset:0 -20px}}

.brand-real-book{height:150px;width:105px;object-fit:contain;filter:drop-shadow(3px 6px 5px #33452b22)}@media(max-width:650px){.brand-real-book{height:115px;width:80px}}

.course-1{color:#263c2f;background:#eeeee8}
/* All three HSK books are available: each card has a distinct active colour. */
.brand-course.course-1{background:#e4eedc;color:#294d32;border-color:#d1e0c6}
.brand-course.course-2{background:#e1edf2;color:#294e60;border-color:#cbdfe8}
.brand-course.course-3{background:#f5e3cd;color:#6a4628;border-color:#e9d2b5}
.brand-course em{display:inline-flex;align-self:flex-start;background:#fffaf0d9;padding:7px 11px;border-radius:6px;text-decoration:none;font-weight:600}
.brand-course.course-1:hover{background:#d6e6ca;border-color:#8fac7c}
.brand-course.course-2:hover{background:#d2e5ed;border-color:#80a9bc}
.brand-course.course-3:hover{background:#efd6b6;border-color:#bf9766}
.course-1 .brand-book{filter:none;opacity:1}