/* Shared bilingual type system. Sizes compensate for the reference canvas only,
   keeping CSS layout geometry independent from the language the reader selects. */
@font-face{font-family:NotoThai;src:url('/assets/thai.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
html,html.rt-th{font-size:16px;text-size-adjust:100%;-webkit-text-size-adjust:100%}
html body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.65}
html.rt-th body{font-family:NotoThai,system-ui,sans-serif}
.site-canvas,.about-canvas{--rt-type-zoom:1}
@media(min-width:1024px) and (max-width:1439px){.site-canvas,.about-canvas{--rt-type-zoom:.72}}
@media(min-width:1440px) and (max-width:1679px){.site-canvas,.about-canvas{--rt-type-zoom:.82}}
@media(min-width:1680px) and (max-width:1919px){.site-canvas,.about-canvas{--rt-type-zoom:.92}}
html body :is(main,footer,dialog){font-family:inherit!important}
html body :is(h1,h2,h3,h4,p,a,button,label,input,select,textarea,summary){font-family:inherit!important;letter-spacing:normal!important;word-spacing:normal;word-break:normal;overflow-wrap:break-word;line-break:auto}
html body :is(main,footer) :is(h1,h2,h3,h4){font-weight:700;white-space:normal!important;text-wrap:balance;max-width:100%;margin-block:0;line-height:1.3!important}
html.rt-th body :is(main,footer) :is(h1,h2,h3,h4){line-height:1.45!important;text-transform:none!important}
html body main h1{font-size:calc(clamp(36px,3.5vw,60px) / var(--rt-type-zoom,1))!important}
html body main h2{font-size:calc(clamp(28px,2.6vw,42px) / var(--rt-type-zoom,1))!important}
html body main :is(h3,h4,[data-rt-card-title]){font-size:calc(clamp(20px,1.7vw,26px) / var(--rt-type-zoom,1))!important}
html body :is(main,footer) p{font-size:calc(18px / var(--rt-type-zoom,1))!important;line-height:1.75!important;white-space:normal!important;text-wrap:pretty;font-weight:400}
html.rt-th body :is(main,footer) p{line-height:1.85!important}
/* Paragraphs flow naturally rather than retaining line breaks copied from artwork. */
html body .rt-translated-copy{white-space:normal!important}
html body main :is(button,a.inline-flex,.rt-service-button,.rt-expanded-actions a){font-size:calc(16px / var(--rt-type-zoom,1))!important;line-height:1.5!important;white-space:normal;text-align:center}
html body :is(label,input,select,textarea){font-size:calc(16px / var(--rt-type-zoom,1))!important;line-height:1.6!important}
html body main :is(input,select,textarea){min-width:0;max-width:100%}
html body header nav a{font-size:calc(15px / var(--rt-type-zoom,1))!important;line-height:1.5!important}
html body header.rt-language-host{min-height:106px;padding-block:18px;height:auto!important;gap:22px!important}
html body .rt-language-header button{font-size:calc(14px / var(--rt-type-zoom,1))!important;line-height:1.3!important}
html body .rt-motion-menu nav a{font-size:18px!important;line-height:1.6!important}
/* Subpage heroes: keep text in the clear area of the photograph and let it grow. */
@media(min-width:1024px){
 html body .about-canvas [data-rt-page-hero]{aspect-ratio:auto!important;min-height:calc(510px / var(--rt-type-zoom));height:auto!important}
 html body .about-canvas [data-rt-page-hero]>div:has([data-rt-hero-copy]){min-height:inherit;height:auto!important}
 html body .about-canvas [data-rt-hero-copy]{width:64%!important;max-width:none!important;padding:calc(48px / var(--rt-type-zoom)) 0 calc(66px / var(--rt-type-zoom))!important;margin-left:calc(clamp(48px,6.25vw,100px) / var(--rt-type-zoom));gap:calc(24px / var(--rt-type-zoom))!important;flex:1}
 html body .about-canvas [data-rt-hero-copy]>div{gap:calc(18px / var(--rt-type-zoom))!important}
 html body .about-canvas [data-rt-hero-copy] h1{font-size:calc(clamp(36px,3.25vw,54px) / var(--rt-type-zoom))!important;max-width:100%;line-height:1.22!important}
 html.rt-th body .about-canvas [data-rt-hero-copy] h1{font-size:calc(clamp(34px,3.05vw,50px) / var(--rt-type-zoom))!important;line-height:1.45!important}
 html body .about-canvas [data-rt-hero-copy] p{max-width:calc(530px / var(--rt-type-zoom))!important}
 html body .about-canvas [data-rt-hero-copy] a{padding:calc(14px / var(--rt-type-zoom)) calc(28px / var(--rt-type-zoom))!important}
 html body .about-canvas [data-rt-hero-copy] span{font-size:calc(13px / var(--rt-type-zoom));line-height:1.6}
 html body[data-preview-page='/franchising'] [data-rt-hero-copy]{width:54%!important}
 html body[data-preview-page='/what-kids-learn'] [data-rt-hero-copy]{width:52%!important}
 html body[data-preview-page='/partnerships'] [data-rt-hero-copy]{width:62%!important}
}
/* Homepage retains its three-image stage and has a compact, readable copy block. */
html body .site-canvas .hero-copy-title{font-size:calc(clamp(38px,4vw,68px) / var(--rt-type-zoom))!important;line-height:1.18!important;text-transform:none!important}
html.rt-th body .site-canvas .hero-copy-title{font-size:calc(clamp(36px,3.6vw,62px) / var(--rt-type-zoom))!important;line-height:1.45!important}
html body .site-canvas .hero-copy-description{font-size:calc(19px / var(--rt-type-zoom))!important;line-height:1.75!important;max-width:calc(550px / var(--rt-type-zoom))}
html body #programs h3{font-size:calc(23px / var(--rt-type-zoom))!important}
html body #programs p{font-size:calc(17px / var(--rt-type-zoom))!important}
html body .rt-expanded-desktop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;padding:36px 40px 80px;height:auto;min-height:510px;overflow:visible}
html body .rt-expanded-desktop .rt-expanded-copy{position:static;width:auto;max-width:none}
html body .rt-expanded-desktop .rt-expanded-image{position:static;width:100%;max-width:260px;align-self:center}
html body .rt-expanded-desktop .rt-expanded-actions{position:static;grid-column:1/-1;flex-wrap:wrap;gap:10px}
html body #programs .rt-expanded-desktop h3{font-size:calc(22px / var(--rt-type-zoom))!important}
html body #programs .rt-expanded-desktop p{font-size:calc(16px / var(--rt-type-zoom))!important}
/* Editorial cards and team labels have their own compact hierarchy. */
html body #rt-stories h2{font-size:calc(clamp(28px,2.7vw,40px) / var(--rt-type-zoom))!important}
html body #rt-stories h3{font-size:calc(21px / var(--rt-type-zoom))!important;line-height:1.5!important}
html body #rt-stories p{font-size:calc(16px / var(--rt-type-zoom))!important;line-height:1.8!important}
html body #rt-stories .rt-story-body{padding:24px;gap:2px}
html body #rt-stories :is(.rt-stories-eyebrow,.rt-story-tag,.rt-story-number,.rt-stories-progress){font-size:calc(12px / var(--rt-type-zoom))!important;line-height:1.6}
html body #rt-stories .rt-story-more{font-size:calc(15px / var(--rt-type-zoom))!important}
html body #global-team :is([data-rt-team-card],[data-edu-card]) h3{font-size:calc(20px / var(--rt-type-zoom))!important}
html body #global-team :is([data-rt-team-card],[data-edu-card]) p{font-size:calc(16px / var(--rt-type-zoom))!important;line-height:1.6!important;padding:6px 10px}
html body footer :is(p,a){font-size:16px!important;line-height:1.8!important}
html body footer p{white-space:pre-line!important}
html body footer [data-rt-contact-heading]{font-size:20px!important}
/* Utility pages and administration use a smaller, unscaled application rhythm. */
html body :is(#rt-portal,#crm-app,.crm-dialog,.bo-shell,.auth-shell){--rt-type-zoom:1;font-size:16px}
html body :is(#rt-portal,#crm-app,.crm-dialog,.bo-shell,.auth-shell) h1{font-size:32px!important;line-height:1.4!important}
html body :is(#rt-portal,#crm-app,.crm-dialog,.bo-shell,.auth-shell) h2{font-size:24px!important;line-height:1.5!important}
html body :is(#rt-portal,#crm-app,.crm-dialog,.bo-shell,.auth-shell) h3{font-size:20px!important;line-height:1.5!important}
html body :is(#rt-portal,#crm-app,.crm-dialog,.bo-shell,.auth-shell) p{font-size:16px!important;line-height:1.8!important}
html body :is(#rt-portal,#crm-app,.crm-dialog,.bo-shell,.auth-shell) :is(button,label,input,select,textarea,a){font-size:15px!important;line-height:1.6!important}
html body .auth-shell .auth-story h2{font-size:32px!important}
html body .auth-shell :is(.auth-eyebrow,.auth-story-kicker,.auth-story-footer){font-size:12px!important}
html body :is(.crm-toolbar,.bo-toolbar){flex-wrap:wrap;align-items:center}
html body :is(.crm-content,.bo-content){min-width:0}
html body :is(.crm-table-wrap,.bo-table-wrap){overflow-x:auto}
@media(max-width:1023px){
 html body header.rt-language-host{min-height:76px;padding-block:12px;gap:10px!important}
 html body .rt-language-header button{font-size:14px!important}
 html body main h1{font-size:clamp(30px,4.5vw,42px)!important}
 html body main h2{font-size:clamp(27px,3.6vw,36px)!important}
 html body main :is(h3,h4,[data-rt-card-title]){font-size:22px!important}
 html body .site-canvas .hero-copy-title{font-size:clamp(34px,6vw,48px)!important}
 html.rt-th body .site-canvas .hero-copy-title{font-size:clamp(32px,5.5vw,44px)!important}
 html body :is(main,footer) p{font-size:17px!important}
 html body .site-canvas .hero-copy-description{font-size:18px!important}
 html body .about-canvas [data-rt-hero-copy]{gap:28px!important}
 html body .about-canvas [data-rt-hero-copy]>div{gap:18px!important}
 html body .about-canvas [data-rt-hero-copy] :is(h1,p){max-width:100%;white-space:normal!important}
 html body .about-canvas [data-rt-hero-copy] h1{font-size:clamp(30px,4.5vw,40px)!important}
 html body .about-canvas [data-rt-hero-copy] a{font-size:16px!important;padding:14px 24px!important}
 html body #rt-stories h3{font-size:21px!important}
 html body #global-team :is([data-rt-team-card],[data-edu-card]) h3{font-size:19px!important}
 html body #global-team :is([data-rt-team-card],[data-edu-card]) p{font-size:15px!important}
}
@media(max-width:600px){
 html body main h1{font-size:32px!important}
 html body main h2{font-size:28px!important}
 html body main :is(h3,h4,[data-rt-card-title]){font-size:21px!important}
 html body main :is(button,a.inline-flex,.rt-service-button){font-size:16px!important}
 html body .site-canvas .hero-copy-title,html.rt-th body .site-canvas .hero-copy-title{font-size:32px!important}
 html body #rt-stories{padding-inline:12px;margin-bottom:48px}
 html body #rt-stories h2{font-size:28px!important}
 html body #rt-stories .rt-stories-top{align-items:flex-start}
 html body #rt-stories .rt-stories-controls{gap:6px}
 html body #rt-stories .rt-stories-controls button{width:40px;height:40px;font-size:23px!important}
 html body #rt-stories .rt-story-body{padding:22px}
 html body #rt-portal{padding:36px 20px 56px}
 html body :is(#rt-portal,#crm-app,.bo-shell,.auth-shell) h1{font-size:28px!important}
 html body .auth-shell .auth-story h2{font-size:28px!important}
 html body .auth-shell .auth-story{min-height:0}
 html body footer :is(p,a){font-size:15px!important}
}
/* Testimonials expand with the full review instead of cutting off sentences. */
html body main [data-rt-review-card]>div{height:100%;min-height:0;gap:24px;padding:40px 28px}
html body main [data-rt-review-card]>div>div{height:auto;min-height:0;flex:1;gap:18px;padding-bottom:24px}
html body main [data-rt-review-card] h3{height:auto;min-height:0;overflow:visible;font-size:calc(21px / var(--rt-type-zoom,1))!important}
html body main [data-rt-review-card] h3+div{height:auto;overflow:visible}
html body main [data-rt-review-card] p{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;font-size:calc(16px / var(--rt-type-zoom,1))!important}
html body main [data-rt-review-card] span[aria-hidden]{display:none}
html body .about-canvas [data-rt-hero-copy] h1{white-space:pre-line!important}
html body .site-canvas .hero-copy-title{white-space:pre-line!important}
html body .hero-copy-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:10px!important;max-width:calc(650px / var(--rt-type-zoom,1))}
html body .hero-copy-buttons>a{width:auto!important;min-width:0!important;height:auto!important;min-height:calc(46px / var(--rt-type-zoom,1));padding:calc(12px / var(--rt-type-zoom,1)) calc(22px / var(--rt-type-zoom,1))!important;flex:none!important;white-space:normal!important}
/* Program details use two balanced columns at desktop sizes. The introduction
   spans the card so it never leaves an empty column above the actual details. */
html body .explore-program-card>div>div{display:flex!important;flex-direction:column!important;gap:calc(30px / var(--rt-type-zoom))!important;min-width:0}
html body .explore-program-card>div>div>div:first-child{width:100%!important;max-width:none!important;gap:16px!important}
html body .explore-program-card>div>div>div:first-child p{max-width:calc(760px / var(--rt-type-zoom))!important}
html body .explore-program-card>div>div>div:nth-child(2){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:calc(32px / var(--rt-type-zoom))!important;width:100%}
html body .explore-program-card>div>div>div:nth-child(2)>div:first-child{width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:440/540!important}
html body .explore-program-card>div>div>div:nth-child(2)>div:last-child{max-width:none!important;gap:calc(26px / var(--rt-type-zoom))!important}
html body .explore-program-card>div>img[aria-hidden]{display:none!important}
html body .explore-program-card li{gap:14px!important;align-items:flex-start}
html body .explore-program-card li span:not([aria-hidden]){font-size:calc(16px / var(--rt-type-zoom))!important;line-height:1.7}
html body .explore-program-card a{height:auto!important;min-height:calc(48px / var(--rt-type-zoom));padding:calc(14px / var(--rt-type-zoom)) calc(22px / var(--rt-type-zoom))!important}
html body .explore-program-card a span{display:block;-webkit-line-clamp:unset;line-clamp:unset}
@media(min-width:768px){html body .explore-program-card>div>div>div:first-child{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:calc(32px / var(--rt-type-zoom))!important;align-items:start}}
@media(max-width:767px){html body .explore-program-card>div>div>div:nth-child(2){grid-template-columns:1fr!important}html body .explore-program-card>div>div>div:nth-child(2)>div:first-child{max-width:300px!important;margin-inline:auto}html body .explore-program-card li span:not([aria-hidden]){font-size:16px!important}}
html body [data-rt-steps]{padding:calc(44px / var(--rt-type-zoom,1)) calc(28px / var(--rt-type-zoom,1))!important}
html body [data-rt-steps]>div{gap:calc(36px / var(--rt-type-zoom,1))!important}
html body [data-rt-step]{width:100%!important;min-width:0}
html body [data-rt-step]>div>div{height:auto!important;min-height:calc(130px / var(--rt-type-zoom,1));padding:calc(26px / var(--rt-type-zoom,1)) calc(18px / var(--rt-type-zoom,1))!important}
html body [data-rt-step]>div>div:first-child{padding-top:calc(34px / var(--rt-type-zoom,1))!important}
html body [data-rt-step]>div>div>div:not([aria-hidden]){height:auto!important;width:100%!important;padding:0!important}
html body [data-rt-step] h3{font-size:calc(20px / var(--rt-type-zoom,1))!important;line-height:1.5!important}
html body [data-rt-step] p{font-size:calc(16px / var(--rt-type-zoom,1))!important;line-height:1.8!important}
@media(min-width:1024px){html body [data-rt-steps]>div>div:has([data-rt-step]){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px!important;align-items:stretch}html body [data-rt-steps]>div>div>div:has(>[data-rt-step]){min-width:0}html body [data-rt-step]+div[aria-hidden]{display:none!important}}
@media(min-width:1024px) and (max-width:1199px){html body [data-rt-steps]>div>div:has([data-rt-step]){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Leave a clear illustration area beneath the learning-path copy. */
html body [data-path-card-mo]>div{aspect-ratio:260/360!important}
html body [data-path-card-mo]>div>div>div:first-of-type{padding:64px 20px 0!important;gap:12px!important}
html body [data-path-card-mo] h3{font-size:18px!important;line-height:1.5!important}
html body [data-path-card-mo] p{font-size:15px!important;line-height:1.8!important}
html body [data-path-card-mo]>div>div>div:last-of-type{height:60px!important}
@media(min-width:1024px){
 html body [style*='background-image']:has(>div>h3[data-rt-english='Junior Engineer']),
 html body [style*='background-image']:has(>div>h3[data-rt-english='Engineer']),
 html body [style*='background-image']:has(>div>h3[data-rt-english='Advanced Engineer']),
 html body [style*='background-image']:has(>div>h3[data-rt-english='Expert & Master']){padding-inline:22px!important;gap:14px!important}
 html body [style*='background-image']:has(>div>h3) h3{font-size:calc(20px / var(--rt-type-zoom))!important}
 html body [style*='background-image']:has(>div>h3) p{font-size:calc(16px / var(--rt-type-zoom))!important;line-height:1.6!important}
}