/* Production responsive layer — a single predictable layout system. */
:root{--content:min(1240px,calc(100% - 48px));--touch:44px}
html{overflow-x:hidden;scroll-padding-top:112px}
body{overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
.product-content p,.company-copy,.activity-card p,.contact-panel p{font-size:1rem;line-height:1.8}
.gallery-dot,.activity-dot,.carousel-dot{position:relative;isolation:isolate}
.gallery-dot:after,.activity-dot:after,.carousel-dot:after{content:"";position:absolute;left:50%;top:50%;width:var(--touch);height:var(--touch);translate:-50% -50%}
.source-link{min-height:44px;display:inline-flex;align-items:center}
body.th .product-healnoc h3[data-en],body.en .product-healnoc h3[data-th]{display:none!important}
body.th .product-healnoc h3[data-th],body.en .product-healnoc h3[data-en]{display:block!important}

/* Give the product section a clear editorial heading. */
.product-section-top{display:block}
.product-section-top h2{margin-top:14px;max-width:760px;font-size:clamp(2.3rem,4.2vw,3.8rem)}

/* Products share one structure and one media ratio. */
.product-grid{display:grid;grid-template-columns:1fr;gap:22px}
.product-grid>.product:nth-child(n){grid-column:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"index index" "visual content";gap:24px 38px;align-items:center;min-height:0;padding:clamp(26px,3vw,40px)}
.product-grid>.product .product-index{grid-area:index;min-width:0}
.product-grid>.product .product-visual{grid-area:visual;width:100%;height:auto!important;min-height:0!important;aspect-ratio:4/3;margin:0;overflow:hidden;border-radius:20px;background:#edf7fd}
.product-grid>.product .product-content{grid-area:content;min-width:0;margin:0;align-self:center}
.product-grid>.product .product-visual>img{width:100%;height:100%;object-fit:contain;background:#f4f9fc}
.product-grid>.product-storage .product-visual,
.product-grid>.product-cart .product-visual,
.product-grid>.product-storage .product-visual>img,
.product-grid>.product-cart .product-visual>img{background:#fff!important}
.product-grid>.product h3{font-size:clamp(1.45rem,2.3vw,2.2rem);line-height:1.38;margin-top:0;overflow-wrap:anywhere}
.product-grid>.product .specs{display:flex;flex-wrap:wrap;gap:8px}
.product-grid>.product .specs span{min-height:34px;display:inline-flex;align-items:center}

/* Seven technology cards keep a regular visual rhythm. */
.health-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:auto;gap:14px}
.health-card,.health-card:first-child,.health-card:nth-child(6),.health-card:nth-child(7){grid-column:span 6;grid-row:auto;aspect-ratio:4/3;min-width:0}
.health-card:last-child{grid-column:4/span 6}
.health-card img{width:100%;height:100%;object-fit:cover}

/* Company copy and building remain balanced at desktop widths. */
.company-grid{grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:clamp(42px,6vw,82px);align-items:center}
.company-text{min-width:0}
.company h2{max-width:760px;text-wrap:balance;overflow-wrap:normal;word-break:normal}
.company-building{width:min(100%,540px);aspect-ratio:4/3;justify-self:end}

/* Every activity card uses the exact same media/copy geometry. */
.activities .activity-grid{display:grid;grid-template-columns:1fr;gap:22px}
.activities .activity-card.activity-featured,
.activities .activity-card.activity-workshop,
.activities .activity-card.activity-regional,
.activities .activity-card.activity-ods{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);grid-template-areas:"media copy";padding:0;min-height:420px;overflow:hidden}
.activities .activity-gallery,.activities .workshop-gallery,.activities .activity-mini-gallery{grid-area:media!important;position:relative;width:100%;height:100%;min-height:420px;aspect-ratio:auto;margin:0;overflow:hidden}
.activities .activity-copy,.activities .workshop-copy,.activities .activity-mini-copy{grid-area:copy!important;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(30px,4vw,52px);background:linear-gradient(150deg,#fff,#edf8ff)}
.activities .activity-card h3{margin:18px 0 14px;font-size:clamp(1.35rem,2vw,2rem);line-height:1.45}
.activities .activity-card p{font-size:1rem;line-height:1.78}
.activities .activity-photo,.activities .workshop-photo,.activities .activity-mini-photo{width:100%;height:100%;object-fit:cover}

@media (min-width:621px) and (max-width:1180px){
  :root{--content:min(100% - 44px,1040px)}
  .wrap{width:var(--content)}
  .product-grid>.product:nth-child(n){grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);padding:28px;gap:22px 30px}
  .product-grid>.product .product-visual{aspect-ratio:4/3}
  .health-tech-head{grid-template-columns:1fr;gap:18px}
  .health-tech-head h2{max-width:820px;font-size:clamp(2.65rem,5.2vw,4rem)}
  .company-grid{grid-template-columns:1fr;gap:36px}
  .company-text{max-width:900px}
  .company h2{max-width:850px;font-size:clamp(2.6rem,5vw,4rem)}
  .company-building{width:min(100%,720px);aspect-ratio:16/10;justify-self:center}
  .activities .activity-card.activity-featured,
  .activities .activity-card.activity-workshop,
  .activities .activity-card.activity-regional,
  .activities .activity-card.activity-ods{grid-template-columns:minmax(0,1fr) minmax(320px,1fr);min-height:360px}
  .activities .activity-gallery,.activities .workshop-gallery,.activities .activity-mini-gallery{min-height:360px}
  .activities .activity-copy,.activities .workshop-copy,.activities .activity-mini-copy{padding:30px}
}

@media (max-width:820px){
  .activities .activity-card.activity-featured,
  .activities .activity-card.activity-workshop,
  .activities .activity-card.activity-regional,
  .activities .activity-card.activity-ods{grid-template-columns:1fr;grid-template-areas:"media" "copy";min-height:0}
  .activities .activity-gallery,.activities .workshop-gallery,.activities .activity-mini-gallery{height:auto;min-height:0;aspect-ratio:4/3}
  .activities .activity-copy,.activities .workshop-copy,.activities .activity-mini-copy{min-height:0;padding:28px}
}

@media (max-width:620px){
  :root{--content:min(100% - 28px,1240px)}
  .wrap{width:var(--content)}
  body{font-size:16px}
  .product-content p,.company-copy,.activity-card p,.contact-panel p{font-size:1rem;line-height:1.75}
  .product-grid{gap:16px}
  .product-grid>.product:nth-child(n){display:grid;grid-template-columns:1fr;grid-template-areas:"index" "visual" "content";gap:17px;padding:22px;border-radius:22px}
  .product-grid>.product .product-index{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
  .product-grid>.product .product-visual{aspect-ratio:4/3;border-radius:16px}
  .product-grid>.product h3{font-size:1.48rem;line-height:1.42}
  .health-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 14px 14px;margin:0 -14px}
  .health-card,.health-card:first-child,.health-card:nth-child(6),.health-card:nth-child(7),.health-card:last-child{flex:0 0 88%;height:auto;aspect-ratio:4/3;scroll-snap-align:center}
  .health-caption,.health-card:nth-child(even) .health-caption{left:18px;right:18px;bottom:18px}
  .company-grid{grid-template-columns:1fr;gap:28px}
  .company h2{font-size:2.15rem;line-height:1.25}
  .company-building{width:100%;aspect-ratio:4/3;border-radius:20px}
  .activities .activity-card.activity-featured,
  .activities .activity-card.activity-workshop,
  .activities .activity-card.activity-regional,
  .activities .activity-card.activity-ods{border-radius:20px}
  .activities .activity-gallery,.activities .workshop-gallery,.activities .activity-mini-gallery{aspect-ratio:4/3}
  .activities .activity-copy,.activities .workshop-copy,.activities .activity-mini-copy{padding:25px 22px 28px}
  .activities .activity-card h3{font-size:1.42rem;line-height:1.45}
  .contact-panel{padding:34px 22px}
  .contact-panel h2{font-size:2.2rem;line-height:1.28}
  .hero-actions .btn{min-height:48px}
}

@media (max-width:900px) and (orientation:landscape){
  .hero-carousel{height:min(72vh,540px);min-height:330px}
  .mobile-slide-copy,.hero-building-copy,.hero-team-copy{font-size:16px}
}

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