/* Responsive typography and controlled Thai word wrapping */
.hero-title{
  max-width:720px!important;
  margin:20px 0 22px!important;
  font-size:initial!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
  text-wrap:balance;
}
.hero-title-primary,
.hero-title-secondary{
  display:block;
  font-family:"Prompt",Tahoma,"Noto Sans Thai",Arial,sans-serif;
}
.hero-title-primary{
  color:#fff7e8;
  font-size:clamp(31px,3.25vw,46px);
  font-weight:900;
  white-space:nowrap;
}
.hero-title-primary strong,
.hero-title-primary em{
  font-weight:900!important;
}
.hero-title-secondary{
  margin-top:.14em;
  color:#fff8ec;
  font-size:clamp(38px,3.65vw,52px);
  font-weight:800;
}
.hero-title-unit,
.keyword-lock{
  white-space:nowrap;
}
.hero-lead{
  max-width:62ch!important;
  margin-right:auto;
  font-size:clamp(15px,1.25vw,18px)!important;
  line-height:1.85!important;
  text-wrap:pretty;
}
.seo-keyword{
  color:#f2d27a;
  font-weight:800;
}
.hero-actions .button,
.nav-actions .button,
.mobile-bottom-bar a{
  white-space:nowrap;
}
.section-heading h2,
.article-main h3,
.article-side h3,
.wrap>h1,
.content h2,
.related h2,
.faq h2,
.cta h2{
  text-wrap:balance;
  overflow-wrap:normal;
}
.section-heading p,
.article-main p,
.article-side p,
.lead,
.content p,
.faq details p{
  text-wrap:pretty;
}
.keyword-cloud a{
  font-weight:800!important;
  white-space:nowrap;
}

@media (min-width:1100px){
  .hero-shell{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;
    gap:40px!important;
  }
  .hero-title-secondary{
    white-space:nowrap;
  }
}

@media (min-width:761px) and (max-width:1099px){
  .hero-shell{
    grid-template-columns:1fr!important;
    width:min(780px,calc(100% - 48px))!important;
    gap:46px!important;
  }
  .hero-title-primary{font-size:clamp(38px,5.5vw,48px)}
  .hero-title-secondary{font-size:clamp(43px,6vw,52px)}
  .hero-title-secondary{white-space:nowrap}
  .hero-media{width:min(620px,100%);margin-inline:auto}
}

@media (max-width:760px){
  .hero-shell{
    width:calc(100% - 32px)!important;
    padding-top:48px!important;
  }
  .hero-copy{min-width:0}
  .eyebrow{font-size:11px!important;white-space:nowrap}
  .hero-title{
    margin:18px 0 20px!important;
    line-height:1.12!important;
  }
  .hero-title-primary{
    font-size:clamp(26px,8.2vw,34px);
    letter-spacing:-.035em;
  }
  .hero-title-secondary{
    font-size:clamp(31px,9.6vw,40px);
    line-height:1.16;
  }
  .hero-title-secondary .hero-title-unit{
    display:inline-block;
  }
  .hero-lead{
    max-width:34rem!important;
    font-size:15px!important;
    line-height:1.9!important;
  }
  .keyword-lock{white-space:normal}
  .hero-actions{gap:10px!important}
  .hero-actions .button{min-height:54px}
  .section-heading h2{font-size:clamp(27px,8.2vw,38px)!important;line-height:1.28!important}
  .section-heading p{font-size:14px!important;line-height:1.85!important}
  .article-main h3,.article-side h3{line-height:1.35!important}
  .wrap>h1{font-size:clamp(30px,9vw,38px)!important;line-height:1.25!important;letter-spacing:-.02em!important}
  .lead{font-size:16px!important;line-height:1.85!important}
  .content h2,.related h2,.faq h2{font-size:clamp(25px,7.4vw,34px)!important;line-height:1.35!important}
  .content p{font-size:15px!important;line-height:1.95!important}
}

@media (max-width:350px){
  .hero-shell{width:calc(100% - 24px)!important}
  .hero-title-primary{font-size:clamp(24px,7.9vw,28px)}
  .hero-title-secondary{font-size:clamp(28px,9vw,32px)}
  .eyebrow{font-size:10px!important;padding-inline:10px!important}
}