/* Only phone widths: keep the existing desktop brand and composition. */
@media screen and (max-width: 767px) {
  html { scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
  .container { width: calc(100% - 36px); }
  .header-inner { display: grid; grid-template-columns: minmax(0,1fr) 48px 44px; gap: 6px; min-height: 72px; }
  .brand { min-width: 0; gap: 6px; }
  .brand-logo { width: 52px; flex-shrink: 0; }
  .brand-name { font-size: clamp(13px,3.8vw,16px); white-space: nowrap; letter-spacing: 0; }
  .brand-name small { font-size: 8px; letter-spacing: 0; }
  .header-query { margin: 0; padding: 4px 0 4px 6px; font-size: 13px; min-height: 44px; display: flex; align-items: center; line-height: 1.4; white-space: normal; }
  .header-query span { display: none; }
  .menu-toggle { width: 44px; height: 44px; margin: 0; padding: 10px; }
  .desktop-nav.mobile-open { max-height: calc(100dvh - 80px); overflow-y: auto; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px 18px 20px; gap: 4px 16px; box-shadow: 0 12px 18px #102b4812; }
  .desktop-nav a { min-height: 46px; font-size: 15px; padding: 12px 0; }
  .hero { min-height: 0; }
  .hero-content { padding: 195px 0 36px; }
  .hero h1 { font-size: clamp(38px,10.6vw,50px); }
  .hero-photo { inset: 0; }
  .hero-photo img { object-position: 56% top; }
  .hero:after { background: linear-gradient(0deg,#102b48 0%,rgba(16,43,72,.98) 34%,rgba(16,43,72,.80) 57%,rgba(16,43,72,.15) 100%); }
  .hero-lede { line-height: 1.85; font-size: 16px; }
  .hero-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .hero-actions .button { padding: 13px 14px; gap: 8px; font-size: 14px; }
  .hero-signature { font-size: 12px; letter-spacing: .04em; }
  .service-ribbon .container { display: flex; overflow-x: auto; width: 100%; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  .service-ribbon a { flex: 0 0 42%; min-height: 86px; scroll-snap-align: start; padding: 16px 12px; text-align: left; justify-content: flex-start; }
  .service-ribbon b { display: block; }
  .service-ribbon small { font-size: 10px; }
  .section { padding: 52px 0; }
  .about-grid, .query-layout, .faq-layout, .contact-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .section-heading { display: block; }
  .section-heading > p { max-width: none; margin-top: 20px; }
  .expertise-grid, .scenario-grid, .team-gallery, .portal-grid { grid-template-columns: minmax(0,1fr); }
  .method { grid-template-columns: minmax(0,1fr); }
  .method-image { min-height: 320px; }
  .values > div { min-width: 0; }
  .values > div + div { padding-left: 12px; }
  .values b { font-size: 21px; }
  .values span { font-size: 13px; line-height: 1.6; }
  .expertise-card, .expertise-note { padding: 28px 22px; }
  .expertise-card > a, .scenario-grid a, .text-link { min-height: 44px; display: flex; align-items: center; }
  .team-gallery img { object-fit: contain; background: #e9edf1; height: auto; aspect-ratio: auto; }
  .team-gallery .gallery-main img { aspect-ratio: auto; max-height: none; }
  .query-panel { padding: 24px 18px; min-width: 0; }
  .query-input { flex-direction: column; gap: 12px; }
  .query-input input { min-width: 0; width: 100%; font-size: 16px; min-height: 50px; border-right: 1px solid #cbd5de; }
  .query-input button { min-height: 50px; display: flex; justify-content: space-between; font-size: 16px; }
  .query-result, .public-order { overflow-wrap: anywhere; }
  .progress-step { min-width: 0; }
  .faq-list summary { min-height: 58px; gap: 14px; }
  .faq-list summary span { flex-shrink: 0; }
  .faq-list details p { padding-right: 0; }
  .contact-channels strong { font-size: clamp(21px,6.2vw,27px); overflow-wrap: anywhere; }
  .portal-grid > a { min-height: 120px; }
  .footer-nav { gap: 8px 16px; }
  .footer-nav a { min-height: 44px; display: flex; align-items: center; }
  .back-top { width: 44px; height: 44px; }
  .site-footer { padding-bottom: max(20px,env(safe-area-inset-bottom)); }
}
@media screen and (max-width: 359px) {
  .container { width: calc(100% - 28px); }
  .brand-logo { width: 42px; }
  .brand-name small { display: none; }
  .header-inner { gap: 3px; grid-template-columns: minmax(0,1fr) 44px 44px; }
  .hero-actions .button { padding: 13px 10px; }
  .values span { font-size: 12px; }
}