*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#071E2E;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#1AB1E7;color:#fff}
a{text-decoration:none;color:#0E93C7}
a:hover{color:#1AB1E7}

/* ---- language switching: one language's [data-l] spans show at a time ---- */
[data-l="en"],[data-l="zh"],[data-l="ja"]{display:none}
[data-lang="en"] [data-l="th"],[data-lang="zh"] [data-l="th"],[data-lang="ja"] [data-l="th"]{display:none}
[data-lang="en"] [data-l="en"]{display:inline}
[data-lang="zh"] [data-l="zh"]{display:inline}
[data-lang="ja"] [data-l="ja"]{display:inline}
[data-l="zh"]{font-family:'Noto Sans SC','Anuphan',sans-serif}
[data-l="ja"]{font-family:'Noto Sans JP','Anuphan',sans-serif}

[data-lang-check]{display:none}
[data-lang="th"] [data-lang-check="th"],
[data-lang="en"] [data-lang-check="en"],
[data-lang="zh"] [data-lang-check="zh"],
[data-lang="ja"] [data-lang-check="ja"]{display:inline-flex}

/* ---- motion ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes ripple{0%{transform:translate(-50%,-50%) scale(.55);opacity:.55}100%{transform:translate(-50%,-50%) scale(1.7);opacity:0}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes marqueeX{to{transform:translateX(-50%)}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
[data-reveal]{opacity:0}
[data-reveal].in{animation:fadeUp .8s cubic-bezier(.16,.84,.44,1) forwards}
[data-motion="off"] [data-reveal]{opacity:1;animation:none}
[data-motion="off"] [data-ripple],[data-motion="off"] [data-float]{animation:none !important}

input:focus,textarea:focus,select:focus{outline:2px solid var(--accent,#1AB1E7);outline-offset:1px}

/* ---- nav responsive ---- */
[data-navlinks]{display:flex}
[data-menubtn]{display:none}
/* grid items default to a min-width based on their content's min-content size;
   long unspaced Thai/CJK runs can push that past the viewport and force the
   whole track wider than intended. Letting items shrink below their content
   size restores normal text wrapping inside grid columns. */
[data-hero]>*,[data-2col]>*{min-width:0}
@media(max-width:1020px){
  [data-navlinks]{display:none}
  [data-menubtn]{display:inline-flex}
  [data-navcta]{display:none}
  [data-hero]{grid-template-columns:1fr !important;gap:48px !important}
  [data-2col]{grid-template-columns:1fr !important}
}
@media(max-width:767px){
  .clients-grid{grid-template-columns:repeat(3,1fr) !important}
}
/* desktop + tablet: lock the client logos to a 7-per-row (7x3) grid so the
   auto-fit track can't drop to 6 columns and leave a ragged last row */
@media(min-width:768px){
  .clients-grid{grid-template-columns:repeat(7,1fr) !important}
}
@media(max-width:640px){
  [data-sec]{padding-left:20px !important;padding-right:20px !important;padding-top:64px !important;padding-bottom:64px !important}
  #home{padding-top:110px !important;padding-bottom:64px !important}
  #clients{padding-bottom:40px !important}
  #quote{padding-top:44px !important;padding-bottom:64px !important}
  #contact{padding-top:48px !important;padding-bottom:64px !important}
  footer{padding:44px 20px 24px !important}

  /* keep the 3 hero stats on one row instead of wrapping */
  .hero-stats{flex-wrap:nowrap !important;gap:0 14px !important}
  .hero-stat{flex:1 1 0;min-width:0;padding:6px 0 !important}
  .hero-stat .stat-num{font-size:24px !important}

  /* merge size-card name + pack line so the card is shorter */
  .size-meta{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:6px}
  .size-meta .size-name{margin-top:8px !important}
  .size-meta .size-pack{margin-top:8px !important;flex:1}
  .size-meta .size-name::after{content:" \00b7"}

  /* collapse process step text, expand on tap */
  .process-toggle{cursor:pointer}
  .process-desc{display:none}
  .process-card.open .process-desc{display:block}
  .process-chevron{display:inline-block;transition:transform .2s}
  .process-card.open .process-chevron{transform:rotate(180deg)}

  /* shrink the certificate photos so the standards section is shorter */
  .cert-img{height:220px !important}
}
@media(min-width:641px){
  .process-chevron{display:none}
}

/* ---- toggled panels ---- */
#lang-menu[hidden],
#mobile-menu[hidden],
#quote-success[hidden]{display:none}
/* lightbox has an inline display:flex (to center its content when open),
   which always outranks a plain stylesheet rule - !important is required
   to actually hide it while [hidden] is set. */
#lightbox[hidden]{display:none !important}

/* ---- image placeholders (swap for real photos when available) ---- */
.img-ph{position:relative;overflow:hidden;color:#B9CFDC}
.img-ph svg{opacity:.45}

/* ---- client logo badges ---- */
.client-badge{
  display:flex;align-items:center;justify-content:center;
  height:96px;background:#fff;border:1px solid #E2ECF3;border-radius:16px;
  font:600 14px/1.3 'Prompt',sans-serif;color:#41586A;text-align:center;padding:16px;
}
.client-badge img{max-width:100%;max-height:100%;object-fit:contain}