@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(../fonts/noto-sans-thai/noto-sans-thai-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(../fonts/noto-sans-thai/noto-sans-thai-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(../fonts/noto-sans-thai/noto-sans-thai-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(../fonts/noto-sans-thai/noto-sans-thai-700.ttf) format('truetype');
}

/* Shared type scale for Thai and English. Device-preview labels retain their own scale. */
body,html[lang="th"] body{font-family:"Noto Sans Thai","Segoe UI",Tahoma,sans-serif;font-size:16px;line-height:1.8;font-weight:400}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3{font-weight:600;letter-spacing:-.025em;line-height:1.35}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3{letter-spacing:0}
.hero h1{font-size:clamp(40px,4.6vw,64px);line-height:1.22}
.hero h1 span{letter-spacing:-.035em;line-height:1.16;display:inline-block;margin-top:10px}
h2,.section-top h2{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.02em}
h3,.project-card h3{font-size:clamp(21px,2vw,25px)}
.hero .role{font-size:clamp(19px,2vw,24px);font-weight:500;line-height:1.5}
.hero .intro,.about p,.card-body p{font-size:16px;line-height:1.85}
.nav-links{font-size:14px;font-weight:500}
.account-nav{font-size:13px;font-weight:500}
.button,.google-button{font-weight:600;line-height:1.5}
.hero .eyebrow,.section-top .eyebrow,.about .eyebrow,.contact-panel>.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;line-height:1.7}
html[lang="th"] .eyebrow{letter-spacing:.025em}
.reassurance span,.location,.stack,.muted,.footer,.slider-toolbar p,.project-index{font-size:13px;line-height:1.75}
.skill p,.workflow-grid p{font-size:15px;line-height:1.8}
.hero-showcase .hero-caption h2{font-size:clamp(22px,2.1vw,28px);line-height:1.45}
.auth-card-new h1{font-size:30px;line-height:1.4}
.auth-card-new label,.auth-card label{font-size:14px;font-weight:500}
.auth-card-new input:not([type="hidden"]),.auth-card input,.auth-card textarea,.auth-card select{font-size:16px;line-height:1.5}
.detail h1{font-size:clamp(32px,4.5vw,52px)}
.detail h2{font-size:27px}
@media(max-width:760px){
 .hero h1{font-size:clamp(36px,9.8vw,48px)}
 .hero>div>.eyebrow{font-size:11px}
 .hero .intro,.about p,.card-body p{font-size:15px;line-height:1.85}
 .nav-links{font-size:14px}
 .account-nav{font-size:12px}
 .auth-card-new h1{font-size:27px}
 .hero-showcase .hero-caption h2{font-size:23px}
}


/* Readable section numbers and counters at desktop and mobile sizes. */
.skill-number{display:inline-block;font-family:"Noto Sans Thai","Segoe UI",sans-serif;font-size:28px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;margin-bottom:12px}
.project-index{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.5;min-width:54px;color:var(--text)}
.section-top .eyebrow,.about .eyebrow,.contact-panel>.eyebrow{font-size:14px;font-variant-numeric:tabular-nums}
.workflow-grid .step{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.6}
.showcase-topline>span:last-child{font-family:"Noto Sans Thai","Segoe UI",sans-serif;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap}
@media(max-width:760px){.skill-number{font-size:26px}.showcase-topline>span:last-child{font-size:12px}}
/* Align the address and copy action on the same center line. */
.copy-row{align-items:center;gap:12px;margin-top:26px}
.copy-row .email-link{margin:0;font-size:15px;font-weight:500;line-height:1.5;min-width:0}
.copy-row .copy-email{font-size:15px;font-weight:500;line-height:1.5;min-height:40px;padding:8px 12px;flex-shrink:0}