/* Phone layout shared by every generated page. Desktop stays unchanged. */
.mobile-contact-bar { display: none; }
@media (max-width: 700px) {
  html { scroll-padding-top: 84px; scroll-padding-bottom: 90px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .container { width: calc(100% - 40px); }
  .topbar { height: auto; min-height: 30px; font-size: 11px; letter-spacing: 0; color: #596b73; }
  .topbar .container { padding: 5px 0; line-height: 1.6; }
  .nav-wrap { height: 68px; gap: 12px; }
  .brand strong { font-size: 23px; letter-spacing: 3px; }
  .brand small { font-size: 8px; letter-spacing: 1.5px; }
  .header .nav-cta { display: none; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; margin-left: auto; }
  #navigation { top: 68px; padding: 12px 20px 18px; gap: 4px 20px; max-height: calc(100dvh - 150px); overflow-y: auto; box-shadow: 0 16px 24px #102d3d12; }
  #navigation.open { display: grid; grid-template-columns: 1fr 1fr; }
  #navigation a { min-height: 48px; font-size: 15px; padding: 10px 4px; }
  #navigation a.active:after { bottom: 4px; }
  .hero { min-height: 0; }
  .hero-content { padding-top: 24px; padding-bottom: 22px; }
  .hero-franchise { margin-bottom: 24px; padding-left: 14px; }
  .hero-franchise .join-state { font-size: 10px; letter-spacing: 1px; margin-bottom: 5px; }
  #franchise-title { font-size: 24px; letter-spacing: 1px; line-height: 1.5; }
  .join-caption { font-size: 12px; color: #d4dfe3; margin-top: 4px; letter-spacing: 0; }
  .hero-content > .eyebrow { font-size: 11px; margin-bottom: 12px; letter-spacing: 1.5px; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 44px); line-height: 1.35; letter-spacing: 2px; margin-bottom: 16px; }
  .hero-description { font-size: 15px; line-height: 1.85; letter-spacing: 0; color: #d1dbe0; margin: 0; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .hero-actions .button { min-height: 48px; padding: 12px; gap: 8px; font-size: 14px; }
  .hero-signature, .hero-side { display: none; }
  .hero-bottom { position: relative; inset: auto; padding: 0 0 15px; align-items: center; font-size: 11px; letter-spacing: 0; }
  .hero-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-bottom a span { margin-left: 10px; }
  .principles > .container { padding: 20px 0; gap: 18px 10px; }
  .principles .container > div { gap: 10px; }
  .principles strong { font-size: 14px; letter-spacing: 1px; }
  .principles small { font-size: 11px; color: #65736f; }
  .line-icon { font-size: 26px; }
  .section { padding: 42px 0; }
  .section-head { gap: 12px; margin-bottom: 24px; }
  .section-head h2, h2 { font-size: 27px; }
  .eyebrow.dark { font-size: 11px; letter-spacing: 1.3px; }
  .section-intro, .service-card p, .about-copy > p:not(.eyebrow), .scenario-panel > p:not(.eyebrow), .process-grid p, details p { font-size: 15px; line-height: 1.9; }
  .section-intro, .service-card p, .about-copy > p:not(.eyebrow), .process-grid p, details p { color: #5f7078; }
  .section-intro br, .process-grid p br { display: none; }
  .service-card { padding: 24px 20px 0; }
  .service-top > span, .tags span { font-size: 11px; }
  .service-link { font-size: 14px; min-height: 48px; }
  .section-note { font-size: 12px; color: #6c797b; line-height: 1.8; }
  .carousel-controls { display: grid; grid-template-columns: 44px minmax(40px,1fr) 44px auto; gap: 8px; margin-top: 14px; }
  .carousel-controls[hidden] { display: none; }
  .carousel-hint { grid-column: 1 / -1; font-size: 12px; color: #64767c; }
  .carousel-controls button { min-width: 44px; height: 44px; font-size: 16px; }
  .carousel-controls .carousel-pause { min-width: 88px; font-size: 12px; }
  .carousel-status { font-size: 13px; }
  .about-grid { grid-template-columns: 1fr; gap: 26px; }
  .about-visual { height: 240px; }
  .about-values span { font-size: 12px; color: #63736c; }
  .inline-link, .text-button { min-height: 44px; font-size: 14px; }
  .client-name { font-size: 12px; letter-spacing: 0; }
  .client-group-heading h3 { font-size: 14px; }
  .client-group-heading > span, .clients-foot, .clients-foot > span { font-size: 11px; }
  .scenario-layout { grid-template-columns: 1fr; }
  .scenario-tabs { flex-direction: row; }
  .scenario-tabs button { min-height: 48px; font-size: 13px; flex: 1; padding: 12px 3px; justify-content: center; }
  .scenario-tabs button > span, .scenario-tabs button > b { display: none; }
  .scenario-panel { padding: 26px 22px; }
  .scenario-checks { font-size: 12px; gap: 8px 14px; flex-wrap: wrap; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  summary { font-size: 15px; gap: 12px; line-height: 1.7; min-height: 52px; }
  summary > span, summary > b { flex: none; }
  details p { margin: 0 0 22px 26px; }
  .contact h2 { font-size: 26px; }
  .contact p:not(.eyebrow) { font-size: 15px; }
  .contact-person, .contact .wechat-contact > p { font-size: 13px; }
  .footer-main > div, .footer-main > div small { font-size: 13px; }
  .back-top, .footer-bottom, .footer-bottom > span:nth-child(2) { font-size: 12px; }
  .back-top, .footer-bottom button { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-bottom button { font-size: 13px; }
  .directory-links { gap: 6px 22px; font-size: 14px; }
  .directory-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .page-hero { padding: 20px 0 28px; }
  .breadcrumbs { font-size: 12px; margin-bottom: 20px; }
  .page-hero h1 { font-size: 34px; margin-bottom: 12px; }
  .page-hero .eyebrow { font-size: 11px; letter-spacing: 1.4px; margin-bottom: 12px; }
  .page-tagline { font-size: 15px; }
  .page-layout { padding-top: 20px; padding-bottom: 36px; gap: 24px; }
  .page-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .page-aside a { font-size: 14px; min-height: 44px; display: flex; align-items: center; padding: 8px 0; }
  .page-lead, .reading-block p, .reading-block li, .partnership-intro p, .editorial-card p, .page-cta p, .contact-sheet p { font-size: 16px; line-height: 1.9; }
  .page-lead, .reading-block p, .reading-block li, .partnership-intro p, .editorial-card p { color: #596c75; }
  .reading-block h2 { font-size: 24px; overflow-wrap: anywhere; }
  .reading-block { padding: 24px 0; }
  .card-kicker { font-size: 11px; }
  .card-arrow, .open-signal { font-size: 14px; }
  .fact-list dt { font-size: 13px; }
  .fact-list dd { font-size: 16px; overflow-wrap: anywhere; }
  .page-cta { padding: 24px; }
  .page-cta .button, .contact-sheet .button { min-height: 48px; font-size: 14px; }
  .contact-sheet { padding: 24px; }
  dialog { max-height: calc(100dvh - 32px); padding: 34px 22px 24px; overflow-y: auto; overscroll-behavior: contain; }
  .close-dialog { top: 4px; right: 4px; width: 44px; height: 44px; }
  dialog h2 { font-size: 24px; }
  .dialog-intro, #detail-body { font-size: 15px; }
  .direct-dialog-content { flex-direction: column; align-items: stretch; gap: 20px; }
  .direct-dialog-content .button { width: 100%; min-height: 48px; font-size: 15px; }
  .direct-phone { font-size: 28px; margin-bottom: 18px; }
  .direct-phone-label, .wechat-contact > p, .direct-dialog-content .wechat-contact > p { font-size: 12px; }
  .direct-dialog-content .wechat-contact { margin: 0 auto; max-width: 100%; }
  .direct-dialog-content .wechat-qr-slot { width: 124px; height: 124px; }
  .mobile-contact-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #e0e4e2; box-shadow: 0 -4px 22px #102d3d0a; }
  .mobile-contact-bar > span { display: flex; flex-direction: column; font-size: 13px; color: #20333f; }
  .mobile-contact-bar small { font-size: 11px; color: #65767f; }
  .mobile-contact-bar button { min-height: 48px; padding: 12px 18px; gap: 18px; font-size: 15px; white-space: nowrap; }
  body.dialog-open .mobile-contact-bar { visibility: hidden; }
  .button:hover { transform: none; }
}
@media (max-width: 359px) {
  .container { width: calc(100% - 32px); }
  .hero-actions .button { font-size: 13px; padding: 12px 10px; }
  .mobile-contact-bar { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .mobile-contact-bar button { padding: 12px; gap: 10px; font-size: 14px; }
}