/*═══ Reset ═══*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overscroll-behavior:none}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
strong{font-weight:400}
body{
  font-family:'Kanit',sans-serif;
  background:#FBF5ED;
  color:#fff;
  line-height:1.6;
  overflow-x:clip;
  overflow-y:auto;overscroll-behavior:none;
}

/*═══ Parallax Background ═══*/
.parallax-bg{
  position:fixed;top:0;left:0;right:0;bottom:0;
  pointer-events:none;z-index:0;
}
.bar{
  position:absolute;bottom:0;min-width:6px;will-change:height;
}
.c-1{background:#E4CEA5}
.c-2{background:#ECD8AF}
.c-3{background:#F3E2C2}
.c-4{background:#FFECC9}
.c-5{background:#fff0d3}

/*═══ Content layer ═══*/
.content{position:relative;z-index:1}

/*═══ Section Frame — main-border-main sandwich ═══*/
.section-frame{
  width:80%;margin:0 auto;position:relative;overflow:visible;
}
.section-frame-outer{padding:clamp(8px,0.6vw,15px);overflow:visible}
.section-frame-border{padding:clamp(4px,0.28vw,7px);overflow:visible}
.section-frame-inner{padding:10vh 12vw;min-height:200px;overflow:visible}

/* Blue stage */
.s-blue .section-frame-outer{background:#4DC9FF}
.s-blue .section-frame-border{background:#27AEEC}
.s-blue .section-frame-inner{background:#4DC9FF}

/* Purple */
.s-purple .section-frame-outer{background:#3B397B}
.s-purple .section-frame-border{background:#2B2A70}
.s-purple .section-frame-inner{background:#3B397B;padding-bottom:0}

/* Dark */
.s-dark .section-frame-outer{background:#1F1E2E}
.s-dark .section-frame-border{background:#181728}
.s-dark .section-frame-inner{background:#1F1E2E}

/* Footer */
.s-footer .section-frame-outer{background:#F3E2C2}
.s-footer .section-frame-border{background:#D4C4A0}
.s-footer .section-frame-inner{background:#F3E2C2;color:#2D2252;display:flex;flex-direction:column;justify-content:flex-end;padding-top:0;padding-bottom:12px}

/*═══ First section top margin ═══*/
.section-first{margin-top:clamp(20px,2.5vw,60px)}
.section-first .section-frame-inner{
  padding-top:clamp(25px,3vh,80px);
  padding-bottom:0;
  padding-left:4vw;padding-right:4vw;
}

/*═══ Navigation ═══*/
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:0 0 clamp(20px,3vh,40px)}
.site-nav{display:flex;align-items:center}
.nav-logo img{height:clamp(32px,4vw,58px);width:auto}
@media(hover:hover){
  .nav-logo{perspective:600px}.nav-logo:hover img{animation:logo-flip .5s ease-out forwards}
  .footer-logo a{perspective:600px;display:inline-block}.footer-logo a:hover img{animation:logo-flip .5s ease-out forwards}
  @keyframes logo-flip{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
  .nav-links a:hover{text-decoration:underline}
  .nav-links a.btn-cta:hover{text-decoration:none}
  .btn-cta:hover{background:#2B2A70}
  .nav-row .btn-cta:hover{background:#FFF4A7;color:#534070 !important}
  .cta-area .btn-cta:hover{background:#FFF4A7;color:#534070 !important}
  .btn-cta-green:hover{background:#FFF4A7;color:#534070 !important}
  .footer-col a:hover{text-decoration:underline}
}
.nav-links{display:flex;align-items:center;gap:clamp(25px,1.65vw,32px)}
.nav-links-inner{display:contents}
.nav-links a{font-size:clamp(14px,1.04vw,20px);font-weight:400;color:#534070;transition:none}
.btn-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 24px;
  background:#3B397B;color:#fff !important;
  font-family:'Kanit',sans-serif;font-size:clamp(14px,1.04vw,20px);font-weight:300;
  cursor:pointer;transition:none
}
.nav-row .btn-cta{background:#534070;transition:none}
.cta-area .btn-cta{transition:none;font-size:clamp(20px,1.5vw,29px)}
.btn-cta-green{background:#7DDF90;color:#3B397B !important;transition:none;font-size:clamp(15px,1.15vw,22px)}
.mobile-toggle{display:none;background:none;border:none;color:#534070;cursor:pointer;padding:4px;line-height:0}

/*═══ Footer ═══*/
.footer-logo{text-align:center;padding:clamp(48px,7vh,102px) 0;}
.footer-logo img{height:clamp(32px,4vw,60px);margin:0 auto}
.footer-main{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;
  margin-top:auto;
}
.footer-cols{display:flex;gap:28px;align-items:stretch;justify-content:space-between;}
.footer-col{flex:1;display:flex;flex-direction:column;}
.footer-col h5{
  font-size:clamp(13px,0.99vw,19px);font-weight:500;letter-spacing:.5px;
  margin-bottom:14px;color:#2D2252;padding-bottom:8px;
}
.footer-col{
  border-right:1px solid #C4B090;padding-right:24px;
}
.footer-col:last-of-type{border-right:none}
.footer-col a{
  display:block;font-size:clamp(13px,0.94vw,18px);font-weight:300;
  color:#4A4070;padding:4px 0;
}
.footer-tagline-box{
  border:2px solid #5A5080;padding:28px 20px;text-align:center;
  display:flex;align-items:center;justify-content:center;
}
.footer-tagline-box p{
  font-family:'Exo 2',sans-serif;font-style:italic;
  font-size:clamp(16px,2vw,22px);color:#4A4070;line-height:1.5;
}
.footer-bottom{
  text-align:center;padding:20px 0 40px;font-size:clamp(14px,1.04vw,20px);color:#4A4070;
  margin-top:24px;
}

/*═══ Page Hero (sub-pages) ═══*/
.page-tagline{
  font-family:'Kanit',sans-serif;
  font-size:clamp(14px,1.35vw,26px);
  color:#534070;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:clamp(12px,2vh,28px);
}
.page-title{
  font-family:'Kanit',sans-serif;
  font-size:clamp(28px,3.2vw,52px);
  font-weight:700;color:#534070;
  line-height:1.1;margin-bottom:clamp(20px,3vh,40px);
}

/*═══ Utility ═══*/
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/*═══ Responsive ═══*/
@media(min-width:1951px){
  .cta-area{padding:clamp(22px,5.1vh,73px) 0 clamp(48px,10.2vh,146px)}
}
@media(max-width:1920px){
  .section-frame-inner{padding:10vh 8vw}
  .section-first .section-frame-inner{padding-left:4vw;padding-right:4vw}
}
@media(max-width:1440px){
  .section-frame{width:86%}
  .section-frame-inner{padding:10vh 4vw}
}
@media(max-width:1200px){
  .section-frame{width:91%}
}
@media(max-width:900px){
  .section-frame{width:95%}
  .section-frame-inner{padding:8vh 5vw}
  .footer-main{grid-template-columns:1fr 1fr;gap:20px}
  .footer-tagline-box{grid-column:1/-1}
  .nav-logo img{height:5.36vw}
}
@media(max-width:640px){
  .section-frame{width:100%;margin-left:0;margin-right:0}
  .section-frame-outer{padding:0}
  .section-frame-border{padding:0}
  .s-blue .section-frame-outer,.s-blue .section-frame-border,
  .s-purple .section-frame-outer,.s-purple .section-frame-border,
  .s-dark .section-frame-outer,.s-dark .section-frame-border,
  .s-footer .section-frame-outer,.s-footer .section-frame-border{background:transparent}
  .section-first{margin-top:0}
  .footer-logo{padding:clamp(40px,10vh,80px) 0}
  .footer-logo img{height:10vw}
  .footer-cols{gap:0}
  .footer-col{align-items:center;text-align:center;border-right:none;padding:0 10px}
  .footer-col + .footer-col{border-left:2px solid #C4B090}
  .footer-col h5{font-size:clamp(18px,4.8vw,23px);margin-bottom:8px}
  .footer-col a{font-size:clamp(16px,4.6vw,20px);padding:8px 0}
  .footer-tagline-box p{font-size:clamp(16px,3vw,19px)}
  .footer-bottom{font-size:clamp(14px,2.7vw,17px)}
  .section-frame-inner{padding:6vh 5vw}
  .section-first .section-frame-inner{padding-left:5vw;padding-right:5vw}
  .nav-row{display:block}
  .site-nav{justify-content:space-between}
  .nav-links{
    display:grid;
    grid-template-rows:0fr;
    overflow:hidden;
    margin-left:-5vw;margin-right:-5vw;
    background:#FBF5ED;
    transition:grid-template-rows 0.3s ease;
  }
  .nav-links-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:18px}
  .nav-links-inner a{font-size:20px;color:#534070}
  .nav-links-inner .btn-cta{font-size:18px;padding:14px 28px;background:#534070;color:#fff !important}
  .nav-links.open{grid-template-rows:1fr;margin-top:3vh}
  .nav-links.open .nav-links-inner{padding:48px 6vw}
  .mobile-toggle{display:block}
  .nav-logo img{height:8.72vw}
  .footer-main{grid-template-columns:1fr}
}
@media(max-width:480px){
  .nav-logo img{height:10vw}
}
@media(max-width:375px){
  .nav-logo img{height:9vw}
}