/* Final responsive UX layer — loaded last on both public experiences. */
:root{--tap:48px;--mobile-gutter:18px;--wrap:break-word}
/* Thai relies on dictionary line-breaking; forcing break-word splits syllables. */
html[lang=th]{--wrap:normal}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
h1,h2,h3{text-wrap:balance}
p,.lead{text-wrap:pretty}
body{overflow-x:clip}
img,video{max-width:100%}
button,a,summary,label[for],select{touch-action:manipulation}
button,input,select,textarea{max-width:100%}
.nav,.home-nav{isolation:isolate}

/* Desktop refinement */
@media(min-width:1100px){
  .nav,.home-nav{padding-inline:max(4vw,32px)}
  .hero-copy,.home-hero-copy{max-width:900px}
  .conversion-service-grid,.home-service-grid,.project-grid,.featured-project-gallery{max-width:1600px;margin-inline:auto}
  .statement,.products,.projects,.process,.cta,.home-intro,.home-services,.home-process,.home-faq,.home-contact{padding-inline:max(6vw,64px)}
  .contact-form,.home-form{border-radius:16px}
  .btn,.home-btn,.home-submit{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
  .btn:hover,.home-btn:hover,.home-submit:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(4,28,20,.16)}
}

/* Tablet: prevent crowded two-column layouts and clipped copy. */
@media(min-width:701px) and (max-width:1099px){
  .hero h1,.home-hero h1{font-size:clamp(48px,7.5vw,76px)}
  .hero-copy,.home-hero-copy{width:min(760px,82vw)}
  .cta,.home-contact{grid-template-columns:1fr;gap:48px}
  .featured-project-head,.home-intro-heading,.home-section-head{grid-template-columns:1fr;gap:22px}
  .featured-project-gallery{height:620px}
}

@media(max-width:700px){
  :root{--mobile-gutter:18px}
  html{scroll-padding-top:76px}
  body{width:100%;padding-bottom:calc(76px + env(safe-area-inset-bottom));font-size:16px;line-height:1.55}
  body *{min-width:0}
  /* Thai has no inter-word spaces, so break-word shatters words mid-syllable.
     Let the browser's Thai dictionary break instead; keep break-word for latin/CJK. */
  p,h1,h2,h3,b,strong,span,a{overflow-wrap:var(--wrap);word-break:normal;line-break:auto}
  a[href^="mailto:"],a[href^="http"],.upload-preview,.form-status{overflow-wrap:anywhere}
  section[id],form[id]{scroll-margin-top:76px}

  /* Header stays compact and never covers content. */
  .nav,.home-nav{position:fixed!important;inset:0 0 auto!important;height:68px!important;padding:0 12px!important;background:rgba(7,43,33,.97)!important;border-bottom:1px solid rgba(255,255,255,.18)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .brand,.home-brand{min-width:0;gap:7px}
  .brand img,.home-brand img{width:36px!important;height:36px!important;flex:0 0 36px}
  .brand>span,.brand-words{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand,.brand-words b{font-size:12px!important}
  .brand small,.brand-words small{font-size:6px!important;letter-spacing:.18em!important}
  .nav-actions,.home-nav-actions{flex:0 0 auto;gap:5px!important}
  .langs,.home-langs{height:42px!important;padding:2px!important;gap:0!important}
  .langs button,.home-langs button{min-width:32px!important;min-height:36px!important;padding:0 4px!important;font-size:9px!important;font-weight:750;cursor:pointer}
  .menu,.home-menu-button{display:grid!important;width:42px!important;height:42px!important;min-width:42px;place-items:center;padding:0!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:50%!important;color:#fff;background:transparent!important;font-size:21px!important;line-height:1!important}
  .nav nav.open,.home-nav nav.open{position:fixed!important;z-index:80!important;top:76px!important;left:12px!important;right:12px!important;display:grid!important;padding:8px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:16px!important;background:rgba(6,39,30,.99)!important;box-shadow:0 22px 60px rgba(0,0,0,.48)!important;max-height:calc(100svh - 92px)!important;overflow:auto!important}
  .nav nav.open a,.home-nav nav.open a{display:flex!important;align-items:center!important;min-height:54px!important;padding:0 16px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.1)!important;border-radius:9px!important;color:#fff!important;font-size:15px!important;font-weight:700!important;opacity:1!important}
  .nav nav.open a:last-child,.home-nav nav.open a:last-child{border-bottom:0!important;background:var(--lime)!important;color:#10211b!important;justify-content:center!important;margin-top:6px!important}

  /* Heroes: content remains readable at every phone height. */
  .hero,.home-hero{min-height:100svh!important;height:auto!important;padding:92px var(--mobile-gutter) 92px!important;display:flex!important;align-items:flex-end!important}
  .hero-copy,.home-hero-copy{width:100%!important;max-width:560px!important}
  .hero-media img,.home-hero-media img{object-position:62% center!important}
  .hero-media:after,.home-hero-shade{background:linear-gradient(0deg,rgba(4,31,23,.98) 0%,rgba(6,43,32,.9) 55%,rgba(6,43,32,.35) 100%)!important}
  .hero h1,.home-hero h1{font-size:clamp(34px,9.8vw,45px)!important;line-height:1.07!important;letter-spacing:-.04em!important;margin:12px 0 16px!important;max-width:100%!important}
  .hero .eyebrow,.kicker{font-size:9px!important;line-height:1.5!important;letter-spacing:.13em!important}
  .hero .lead,.home-hero-lead{font-size:15px!important;line-height:1.6!important;max-width:39rem!important}
  .hero-actions,.home-hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:22px!important}
  .hero-actions .btn,.home-btn{width:100%!important;min-height:56px!important;padding:0 16px!important;font-size:14px!important;line-height:1.25!important;text-align:center}
  .hero-actions .btn.ghost,.home-btn.glass{display:flex!important;background:rgba(5,39,29,.72)!important}
  .hero-stats{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;margin:24px 0 0!important;padding-top:14px!important}
  .hero-stats div{padding:0 10px!important;min-height:52px}
  .hero-stats div:nth-child(3){grid-column:1/-1!important;border-left:0!important;border-top:1px solid rgba(255,255,255,.2);padding:14px 0 0!important;margin-top:13px}
  .hero-stats b{font-size:16px!important;line-height:1.25!important}
  .hero-stats span{font-size:10px!important;line-height:1.4!important}
  .home-hero-note{font-size:11px!important;line-height:1.5!important}
  .hero-proof{position:relative!important;inset:auto!important;width:100%!important;margin-top:20px!important;padding:14px!important;border-radius:12px}

  /* Every content section follows one readable rhythm. */
  .conversion-services,.statement,.products,.projects,.process,.cta,.featured-project,.home-intro,.home-services,.home-process,.home-faq,.home-contact{padding:64px var(--mobile-gutter)!important}
  .statement h2,.section-head h2,.cta h2,.conversion-services-head h2,.featured-project-copy h2,.home-intro h2,.home-section-head h2,.standard-copy h2,.faq-heading h2,.home-contact-copy h2{font-size:clamp(31px,8.8vw,38px)!important;line-height:1.1!important;letter-spacing:-.035em!important;max-width:100%!important}
  .statement .wide,.section-head>p,.conversion-services-head>p:last-child,.featured-project-copy>span,.home-intro-heading>p,.home-section-head>p{font-size:14px!important;line-height:1.65!important}
  .section-head,.conversion-services-head,.featured-project-head,.home-intro-heading,.home-section-head{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;margin-bottom:32px!important}

  /* Cards become a clear vertical feed; no hidden horizontal-scroll UI. */
  .conversion-service-grid,.product-grid,.project-grid,.home-service-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;overflow:visible!important;margin:0!important;padding:0!important;background:transparent!important}
  .conversion-service-card,.product-card,.project-card,.home-service-card{width:100%!important;max-width:100%!important;flex:none!important;border-radius:14px!important;overflow:hidden!important;scroll-snap-align:none!important}
  .conversion-service-card{min-height:0!important;padding:22px!important;grid-template-columns:36px 1fr!important}
  .conversion-service-card h3{font-size:22px!important;line-height:1.25!important}
  .conversion-service-card a,.home-service-card a{min-height:50px!important;display:flex!important;align-items:center!important}
  .product-card{min-height:330px!important}
  .product-card>div{left:20px!important;right:20px!important;bottom:20px!important}
  .project-card,.project-card:nth-child(1),.project-card:nth-child(5),.project-card:first-child{grid-column:auto!important;min-height:280px!important;margin:0!important}
  .project-card h3{font-size:17px!important;line-height:1.3!important;left:18px!important;right:18px!important;bottom:18px!important}
  .strengths{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important}
  .strengths article,.strengths .strength-card{width:100%!important;min-height:0!important;flex:none!important;padding:0!important}
  .strength-card .strength-visual{height:auto!important;min-height:0!important;aspect-ratio:4/3}
  .strength-content{padding:24px!important}
  .visual-strip{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;padding:0 var(--mobile-gutter) 64px!important;gap:12px!important}
  .visual-strip figure,.visual-strip figure:nth-child(2),.visual-strip figure:nth-child(3){width:100%!important;height:auto!important;aspect-ratio:4/3!important;display:block!important;flex:none!important}

  /* Large animated showcase no longer consumes multiple screens. */
  .engineering-showcase{height:auto!important;padding:64px 0!important}
  .showcase-sticky{position:relative!important;height:auto!important;overflow:visible!important}
  .showcase-track{width:auto!important;height:auto!important;display:grid!important;grid-template-columns:1fr!important;transform:none!important;padding:0 var(--mobile-gutter)!important;gap:12px!important;overflow:visible!important}
  .showcase-card{width:100%!important;height:62svh!important;min-height:430px!important;max-height:560px!important;border-radius:14px!important}
  .showcase-copy{padding:24px!important}
  .showcase-copy h2{font-size:34px!important;line-height:1.08!important}
  .image-card>div{left:22px!important;right:22px!important;bottom:22px!important}
  .image-card h3{font-size:30px!important}

  /* Project galleries use a simple swipe row with visible next-card cue. */
  .featured-project-gallery,.featured-project-gallery--reverse{display:flex!important;height:58svh!important;min-height:430px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:10px!important;margin:0 calc(var(--mobile-gutter) * -1)!important;padding:0 var(--mobile-gutter) 8px!important;overscroll-behavior-inline:contain;scrollbar-width:none}
  .featured-project-gallery::-webkit-scrollbar{display:none}
  .featured-project-gallery>figure,.featured-project-side{flex:0 0 88%!important;scroll-snap-align:center!important}
  .featured-project-side{display:grid!important;grid-template-rows:1fr 1fr!important;gap:10px!important}
  .project-film{height:230px!important;border-radius:12px!important}
  .project-film-copy{left:18px!important;right:18px!important}
  .project-film-copy h3{font-size:31px!important}

  /* Home service images preserve ratio and copy sits below—never overlaid. */
  .home-service-card{padding:20px!important;display:grid!important;grid-template-rows:auto auto auto auto auto!important}
  .service-icon{width:calc(100% + 40px)!important;height:auto!important;aspect-ratio:16/10!important;margin:16px -20px 22px!important;background-size:100% 100%,300% auto!important}
  .home-service-card h3{font-size:22px!important;line-height:1.28!important;margin-bottom:10px!important}
  .home-service-card p{font-size:14px!important;line-height:1.6!important}
  .home-standard{display:grid!important;grid-template-columns:1fr!important;min-height:0!important}
  .standard-visual{min-height:0!important;aspect-ratio:4/3}
  .standard-copy{padding:56px var(--mobile-gutter)!important}
  .roof-detail{grid-template-columns:auto auto 1fr!important;padding:14px!important}
  .roof-detail>*:nth-child(n+4){display:none!important}
  .home-process ol{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:32px 0 0!important;padding:0!important;overflow:visible!important}
  .home-process li{width:100%!important;min-height:0!important;flex:none!important;padding:22px!important;border-radius:12px!important}
  .home-process h3{margin:20px 0 10px!important}

  /* Forms are thumb-friendly and never trigger iOS zoom. */
  .cta,.home-contact{display:grid!important;grid-template-columns:1fr!important;gap:32px!important}
  .contact-form,.home-form{width:100%!important;margin:0!important;padding:22px 16px!important;border-radius:14px!important}
  .form-grid,.home-form-grid{display:grid!important;grid-template-columns:1fr!important;gap:17px!important}
  .form-wide,.home-form .wide{grid-column:auto!important}
  .form-grid label>span,.home-form label>span{font-size:13px!important;margin-bottom:8px!important}
  .form-grid input,.form-grid select,.home-form input,.home-form select{min-height:54px!important;padding:12px 13px!important;border-radius:9px!important;font-size:16px!important}
  .form-grid textarea,.home-form textarea{min-height:132px!important;padding:13px!important;border-radius:9px!important;font-size:16px!important;resize:vertical}
  .upload-drop,.upload-box{min-height:96px!important;padding:16px!important;border-radius:10px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important}
  .upload-drop small{text-align:left!important}
  .upload-preview{grid-template-columns:1fr!important}
  .form-submit-row{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .form-submit-row .btn,.home-submit{width:100%!important;min-height:58px!important;border-radius:12px!important;font-size:15px!important}
  .direct-contact a,.contact-direct a{min-height:68px!important;padding:14px 16px!important;border-radius:10px!important}
  .faq-list summary{min-height:58px!important;padding:12px 40px 12px 0!important;font-size:15px!important;line-height:1.45!important;position:relative}
  .faq-panel{width:100%!important;max-height:88svh!important;inset:auto 0 0!important;border-radius:18px 18px 0 0!important}

  /* Three unambiguous primary actions, safe-area aware. */
  .mobile-conversion-bar,.home-mobile-bar{position:fixed!important;z-index:100!important;inset:auto 0 0!important;display:grid!important;grid-template-columns:.8fr .9fr 1.15fr!important;gap:7px!important;padding:8px 9px calc(8px + env(safe-area-inset-bottom))!important;background:rgba(4,29,22,.98)!important;box-shadow:0 -8px 28px rgba(3,22,16,.3)}
  .mobile-conversion-bar a,.home-mobile-bar a{min-height:54px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:11px!important;color:#fff!important;font-size:13px!important;font-weight:750!important;text-align:center!important}
  .mobile-conversion-bar a:last-child,.home-mobile-bar a:last-child{background:var(--lime)!important;border-color:var(--lime)!important;color:#10211b!important}
  .faq-button{right:12px!important;bottom:84px!important;width:52px!important;height:52px!important}
  .floating-line,.floating-quote{display:none!important}
  body:has(input:focus,select:focus,textarea:focus) .mobile-conversion-bar,
  body:has(input:focus,select:focus,textarea:focus) .home-mobile-bar{opacity:0!important;pointer-events:none!important;transform:translateY(100%)!important}
  .payment-band{padding:42px var(--mobile-gutter)!important}
  .payment-logos{width:100%;justify-content:flex-start!important}
  footer,.home-footer{padding:34px var(--mobile-gutter) 38px!important;display:grid!important;justify-items:center!important;text-align:center!important;gap:16px!important}
}

@media(max-width:380px){
  :root{--mobile-gutter:15px}
  .brand>span,.brand-words{display:none!important}
  .langs button,.home-langs button{min-width:30px!important;font-size:8px!important}
  .hero h1,.home-hero h1{font-size:34px!important}
  .mobile-conversion-bar a,.home-mobile-bar a{font-size:12px!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}