/* Phone layouts only. Desktop rules remain unchanged. */
@media (max-width: 767.98px) {
  body { overflow-wrap: break-word; }
  .container { padding-left: 20px; padding-right: 20px; }
  .layout_padding { padding: 44px 0; }
  .heading_container h2 { font-size: 26px; line-height: 1.5; word-break: keep-all; }
  .header_section .container-fluid { padding: 0 20px; }
  .header_section .custom_nav-container { padding-bottom: 12px; }
  .header_section .navbar-brand { margin-right: 0; }
  .header_section .navbar-toggler { min-width: 44px; min-height: 44px; padding: 8px; }
  .header_section .navbar-collapse { padding: 12px 0 8px; }
  .header_section .navbar-collapse > div { width: 100%; align-items: stretch !important; }
  .header_section .navbar-nav { width: 100%; }
  .custom_nav-container.navbar-expand-lg .navbar-nav .nav-link {
    margin: 0; padding: 12px 16px; min-height: 44px; text-align: left;
  }
  .custom_nav-container.navbar-expand-lg .navbar-nav .nav-link::before { display: none; }
  body:not(.sub_page) .hero_area {
    height: auto; min-height: 100svh;
    background-color: #061426;
    background-size: 100% auto;
    background-position: center bottom;
  }
  body:not(.sub_page) .hero_area .slider_section {
    height: auto; min-height: calc(100svh - 76px);
    align-items: flex-start; padding: 44px 0 calc(56.3vw + 32px);
  }
  .hero_area .slider_section .detail-box { margin: 0; padding: 16px 0; }
  .hero_area .slider_section .detail-box h1 { font-size: clamp(32px, 10vw, 44px); letter-spacing: .03em; }
  .hero_area .slider_section .detail-box h2 { font-size: 20px; }
  .hero_area .slider_section .detail-box p {
    max-width: 330px; margin: 18px auto 0; font-size: 16px; line-height: 1.85;
  }
  .hero_area .slider_section .detail-box::before { inset: -16px -12px; }
  .who_section.about-intro.layout_padding { padding: 24px 0 40px; }
  .about-intro .about-image, .about-intro .about-copy { flex: 0 0 100%; max-width: 100%; }
  .who_section.about-intro .detail-box { margin: 26px 0 0; }
  .who_section.about-intro .detail-box p { font-size: 15px; line-height: 1.95; margin-top: 18px; }
  .do_section { min-height: 0; padding: 40px 0; background-position: 65% center; }
  .do_section .heading_container h2 { font-size: 25px; }
  .do_section .heading_container > p { font-size: 15px; line-height: 1.85; margin-top: 18px; }
  .do_section .do_container { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; margin: 0; }
  .do_section .do_container .box {
    display: flex; align-items: center; gap: 16px; width: 100%; max-width: 100%;
    min-width: 0; margin: 0; padding: 18px 14px; text-align: left;
    border: 1px solid rgba(85,186,255,.22); border-radius: 14px; background: rgba(4,17,34,.78);
  }
  .do_section .do_container .box .img-box {
    flex: 0 0 64px; width: 64px; height: 64px; margin: 0;
  }
  .do_section .do_container .box .img-box img { width: 42px; height: 42px; }
  .do_section .do_container .box .detail-box { flex: 1; min-width: 0; margin: 0; }
  .do_section .do_container .detail-box h6 { font-size: 16px; margin-bottom: 0; }
  .do_section .do_container .detail-box p { font-size: 14px; line-height: 1.8; margin-top: 8px; }
  .work_section .work_container { margin: 0; gap: 20px; padding: 24px 0 0; }
  .work_section .work_container .box { width: 100%; min-width: 0; margin: 0; }
  .work_section .work_container .box img { display: block; max-width: 100%; height: auto; }
  .work_section .work_container .box a { line-height: 1.6; padding: 8px 0; }
  .contact_section .contact-form { padding: 12px 0; }
  .contact_section .contact-form input { font-size: 16px; min-height: 48px; margin: 10px 0; }
  .contact_section .contact-form button { min-height: 48px; }
  .contact_section .map_img-box { margin-top: 24px; }
  .contact_section .map_img-box img { width: 100%; height: auto; }
  .info_section { padding: 36px 0; }
  .info_section .col-md-3 { text-align: left; }
  .info_section .col-md-3 > div { align-items: flex-start; }
  .info_section .info_contact > div { display: flex; align-items: flex-start; }
  .info_section .info_contact .img-box { flex-shrink: 0; }
  .info_section p { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
  .footer_section p { font-size: 12px; line-height: 1.8; padding: 20px 12px; }
}