/* Mobile-first composition — loaded after the legacy styles so every section
   follows one clear rhythm on phones without changing the desktop layout. */
@media (max-width: 768px) {
  :root { --mobile-gutter: 16px; }
  html { font-size: 16px; scroll-padding-top: 88px; }
  body { min-width: 320px; }
  .container, .section-padding > .container { padding-left: var(--mobile-gutter) !important; padding-right: var(--mobile-gutter) !important; }
  .section-padding { padding-top: 52px !important; padding-bottom: 52px !important; }
  .section-header { margin-bottom: 28px !important; }
  .section-title { font-size: clamp(1.7rem, 8.2vw, 2.25rem) !important; line-height: 1.28 !important; text-wrap: balance; }
  .section-subtitle { font-size: .96rem !important; line-height: 1.7 !important; }

  /* Navigation: a true full-height drawer, visually separated from the page. */
  .navbar { top: 8px !important; left: 8px !important; right: 8px !important; height: 60px !important; }
  .navbar .navbar-container { min-height: 60px !important; padding-inline: 12px !important; }
  .brand-logo { max-width: calc(100% - 58px) !important; }
  .nav-brand-name { font-size: 1.34rem !important; }
  .nav-brand-suffix { font-size: .54rem !important; }
  .mobile-toggle { flex: 0 0 44px; border-radius: 14px !important; }
  .mobile-toggle.active { background: #0C8CC3 !important; border-color: #C7F7FF !important; }
  /* Avoid backdrop-filter here: iOS WebKit can paint it over fixed children. */
  body.mobile-nav-open::before { content: ""; position: fixed; inset: 0; z-index: 99 !important; background: rgba(1, 9, 35, .64); }
  body.mobile-nav-open .navbar { isolation: isolate; z-index: 10050 !important; }
  .nav-links { top: 76px !important; bottom: auto !important; left: 10px !important; right: 10px !important; height: calc(100dvh - 86px) !important; max-height: calc(100dvh - 86px) !important; padding: 14px !important; border-radius: 20px !important; z-index: 10060 !important; }
  .nav-links::before { content: "เลือกหน้าที่ต้องการ" !important; padding: 4px 8px 11px !important; }
  .nav-links .nav-link { min-height: 49px !important; padding: 12px 14px !important; font-size: .98rem !important; }
  .nav-links .nav-link.active::after { display: none !important; }
  .mobile-only-lang { margin-top: 12px !important; padding: 13px 4px 1px !important; }
  .mobile-only-lang .lang-btn { min-height: 37px !important; padding: 7px 9px !important; }

  /* Hero: content first, buttons easy to reach, product visual follows below. */
  .hero-section { padding-top: 94px !important; padding-bottom: 42px !important; }
  .hero-grid { gap: 24px !important; }
  .hero-title { font-size: clamp(2.02rem, 10vw, 2.62rem) !important; line-height: 1.2 !important; margin-bottom: 15px !important; letter-spacing: 0 !important; }
  .hero-title .no-break { white-space: normal !important; }
  .hero-description { margin-bottom: 16px !important; font-size: .98rem !important; line-height: 1.7 !important; }
  .brand-tagline { margin-bottom: 22px !important; padding: 9px 12px; border: 1px solid rgba(131, 232, 255, .28); border-radius: 999px; background: rgba(5, 35, 100, .32); font-size: .71rem !important; }
  .hero-cta-group { margin-bottom: 18px !important; }
  .hero-cta-group .btn { min-height: 52px !important; }
  .hero-microcopy { font-size: .8rem !important; line-height: 1.5 !important; }
  .hero-trust-bar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin-top: 17px !important; }
  .hero-trust-bar .trust-item { min-width: 0; padding: 8px; border: 1px solid rgba(151, 220, 255, .16); border-radius: 11px; font-size: .68rem; line-height: 1.42; }
  .mockup-stage { padding: 0 0 24px !important; }
  .monitor-mockup { border-radius: 14px !important; }
  .window-header { padding: 8px 10px !important; }
  .window-title { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem !important; }
  .window-badge { font-size: .6rem !important; }
  .window-body { padding: 11px !important; }
  .dash-stats { gap: 6px !important; margin-bottom: 10px !important; }
  .dash-stat-card { padding: 7px !important; }
  .stat-lbl, .stat-trend { font-size: .57rem !important; }
  .stat-num { font-size: 1rem !important; }
  .tablet-mockup { position: relative !important; inset: auto !important; width: min(88%, 300px) !important; margin: 14px auto 0 !important; }
  .mobile-mockup { position: relative !important; inset: auto !important; width: min(72%, 240px) !important; margin: 13px auto 0 !important; }

  /* A single-column reading flow for every information group. */
  .pain-points-grid, .services-grid, .audience-grid, .strengths-grid, .pricing-grid,
  .process-timeline, .tech-grid, .infra-grid, .contact-grid, .trust-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .pain-card, .service-card, .audience-card, .strength-card, .pricing-card, .tech-category,
  .step-card, .trust-point { padding: 20px 18px !important; border-radius: 17px !important; }
  .pain-card { min-height: 0 !important; }
  .pain-conclusion-box, .process-note, .cost-notice-box { padding: 22px 18px !important; border-radius: 17px !important; }
  .quote-text { font-size: 1.08rem !important; line-height: 1.65 !important; }
  .service-card .service-list { gap: 6px !important; }
  .service-card .service-list li { font-size: .87rem !important; }
  .mid-cta { margin: 16px !important; padding: 21px 18px !important; border-radius: 18px !important; }
  .mid-cta .btn, .featured-actions .btn { width: 100% !important; justify-content: center !important; }

  /* Dense feature areas remain readable instead of squeezing columns. */
  #featured-cmms .featured-solution { padding: 23px 17px 20px !important; border-radius: 20px !important; }
  #featured-cmms .cmms-flow { grid-template-columns: 1fr 1fr !important; max-width: none !important; }
  #featured-cmms .cmms-flow span { min-height: 51px !important; padding: 8px !important; }
  #featured-cmms .cmms-flow span:last-of-type { grid-column: 1 / -1 !important; }
  .cmms-summary { padding: 19px 16px !important; }
  .cmms-summary-body { grid-template-columns: minmax(0, 1fr) 96px !important; }
  .audience-card .aud-solutions, .tech-tags { gap: 6px !important; }
  .pricing-card .pricing-price { margin-block: 13px !important; }
  .pricing-card .btn { width: 100%; justify-content: center; }
  .cloud-cost-breakdown { padding: 21px 17px !important; }
  .infra-grid { gap: 9px !important; }
  .infra-item { padding: 13px !important; }

  /* Client work, platforms and process have room to breathe. */
  .portfolio-showcase { gap: 16px !important; }
  .client-system-card { border-radius: 18px !important; }
  .client-system-preview { aspect-ratio: 1.58 !important; }
  .client-system-copy { padding: 18px !important; }
  .client-system-copy h3 { font-size: 1.16rem !important; }
  .client-system-copy > p:not(.client-system-type) { font-size: .87rem !important; line-height: 1.62 !important; }
  .client-system-tags { gap: 6px !important; }
  .client-system-tags span { font-size: .67rem !important; }
  .clients-logo-grid, .platforms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .client-logo, .platform-item { min-height: 72px !important; }
  .process-timeline::before { display: none !important; }
  .process-step { display: grid !important; grid-template-columns: 42px minmax(0, 1fr); gap: 12px !important; text-align: left !important; }
  .process-step .step-number { grid-row: 1 / span 2; }

  /* Forms: never make fields or controls compete for a narrow row. */
  .estimator-card, .contact-wrapper { padding: 20px 16px !important; border-radius: 20px !important; }
  .estimator-card { grid-template-columns: 1fr !important; }
  .estimate-controls { grid-template-columns: 1fr !important; gap: 12px !important; }
  .estimate-result { margin-top: 3px !important; }
  .contact-info { padding-bottom: 4px; }
  .contact-title { font-size: clamp(1.85rem, 9vw, 2.45rem) !important; }
  .direct-contacts { gap: 10px !important; }
  .contact-method-item { align-items: flex-start !important; }
  .consultation-form { padding: 19px 14px !important; border-radius: 16px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 13px !important; }
  .consultation-form input, .consultation-form select, .consultation-form textarea { min-height: 48px !important; font-size: 16px !important; }
  .form-progress { grid-template-columns: 1fr !important; }
  .form-progress li { grid-template-columns: 24px minmax(0, 1fr) !important; }
  .appointment-slot { min-width: calc(33.333% - 6px) !important; }
  .trust-strip { display: grid !important; grid-template-columns: 1fr 1fr; }

  /* End sections and overlays reserve room for the sticky contact bar. */
  .project-launch-section { padding: 26px 0 44px !important; }
  .project-launch-panel { margin: 0 !important; padding: 24px 18px !important; gap: 22px !important; border-radius: 20px !important; }
  .launch-copy h2 { font-size: clamp(1.65rem, 8.2vw, 2.1rem) !important; }
  .launch-steps li { grid-template-columns: 37px minmax(0, 1fr) !important; padding: 12px 10px !important; }
  .launch-state { grid-column: 2 !important; justify-self: start !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; }
  .footer-brand { grid-column: 1 / -1; }
  .mobile-contact-bar { padding: 9px 10px calc(9px + env(safe-area-inset-bottom)) !important; gap: 8px !important; }
  .mobile-contact-bar a { min-height: 45px !important; font-size: .8rem !important; }
  .yuli-widget { bottom: 72px !important; right: 13px !important; }
  .yuli-panel { right: 10px !important; bottom: 126px !important; width: calc(100vw - 20px) !important; max-width: 370px !important; }
}

@media (max-width: 390px) {
  .nav-brand-suffix { display: none !important; }
  .hero-trust-bar { grid-template-columns: 1fr !important; }
  .trust-strip { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-brand { grid-column: auto; }
}