/* Mobile v40: one clear business directory, then company and contact.
   Existing desktop presentation and full detail content remain available. */
.mobile-home-simple,
.mobile-simple-nav,
.mobile-simple-footer { display: none; }

/* These wrappers are open on desktop. The content keeps the previous layout;
   on mobile their summaries are the single, accessible expansion controls. */
.mobile-detail-disclosure { display: block; }
.mobile-detail-disclosure > summary { display: none; }
.mobile-detail-disclosure:not([open]) > :not(summary) { display: none; }
.mobile-detail-disclosure[hidden] { display: none !important; }
.mobile-detail-disclosure.training-difference > .training-difference-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.training-difference-content > div { min-height: 118px; padding: 15px; border-top: 3px solid #0a7781; background: #eef5f5; }
.mobile-detail-disclosure.training-difference:not([open]) > .training-difference-content { display: none; }

@media (max-width: 980px) {
  html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; }
  html { scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
  body { background: #f6f8f8; color: #173139; }
  body .topbar {
    height: calc(64px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
    background: #fff;
    border-bottom: 1px solid #e8eeee;
    box-shadow: none;
    backdrop-filter: none;
  }
  body .brand { gap: 9px; }
  body .brand-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; box-shadow: none; background: #193c45; }
  body .brand strong { color: #173139; font-size: 16px; font-weight: 700; letter-spacing: 0; }
  body .brand small { margin-top: 3px; color: #738187; font-size: 10px; font-weight: 400; }
  body .mobile-nav-toggle { width: 44px; height: 44px; border: 1px solid #e2e8e8; border-radius: 10px; color: #173139; background: #fff; }
  body .mobile-nav-panel {
    top: calc(72px + env(safe-area-inset-top, 0px));
    left: auto;
    right: 16px;
    width: min(340px, calc(100% - 32px));
    padding: 8px;
    border: 1px solid #e0e8e8;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgb(20 45 53 / 12%);
    background: #fff;
  }
  body .mobile-nav-panel :is(a, button) { min-height: 48px; margin: 0; padding: 12px 16px; border: 0; border-radius: 7px; background: #fff; color: #203a42; font-size: 15px; font-weight: 500; line-height: 1.5; }
  body .mobile-nav-panel a + a,
  body .mobile-nav-panel a + button { margin-top: 0; }
  body .mobile-nav-panel :is(a, button):hover { background: #eff5f4; }
  body .mobile-nav-panel :is(a, button):focus-visible { outline-color: #128078; }

  /* The old home sections remain desktop content, not another mobile menu. */
  body[data-site-view="home"] :is(.hero, .home-mobile-start, .hero-facts,
    .featured-products, .company-intro, .business-overview, .home-contact-strip,
    .audience-band, .home-cooperation, .home-detail-nav) { display: none; }
  body[data-site-view="home"] .mobile-home-simple {
    display: block;
    order: 0;
    width: min(620px, 100%);
    margin: 0 auto;
    padding: calc(92px + env(safe-area-inset-top, 0px)) 20px 0;
    background: #f6f8f8;
  }
  body .mobile-home-intro { padding: 0 0 26px; }
  body .mobile-home-intro > :is(small, .mobile-home-eyebrow) { display: block; margin: 0 0 12px; color: #197568; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .06em; }
  body .mobile-home-intro h1 { max-width: none; margin: 0; color: #14313b; font-size: clamp(28px, 7.5vw, 36px); font-weight: 700; line-height: 1.35; letter-spacing: -.04em; }
  body .mobile-home-intro h1 > br { display: none; }
  body .mobile-home-intro h1 > span { display: block; margin-top: 5px; color: #48636a; font-size: .68em; font-weight: 500; letter-spacing: 0; }
  body .mobile-home-intro > p { max-width: 480px; margin: 14px 0 0; color: #687c82; font-size: 14px; line-height: 1.75; }
  body .mobile-business-section { scroll-margin-top: 0; }
  body .mobile-home-simple h2 { margin: 0 0 14px; color: #17343d; font-size: 19px; font-weight: 650; line-height: 1.5; letter-spacing: 0; }
  body .mobile-business-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body .mobile-business-card {
    position: relative;
    min-width: 0;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 14px;
    color: #193b43;
    background: #fff;
    border: 1px solid #e1e9e8;
    border-radius: 12px;
    text-align: left;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease;
  }
  body .mobile-business-card:hover { border-color: #98bdb5; background: #fcfefd; }
  body .mobile-business-card:focus-visible { outline: 2px solid #128078; outline-offset: 3px; }
  body .mobile-business-icon { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; color: #16786c; flex: 0 0 26px; }
  body .mobile-business-icon svg { width: 26px; height: 26px; }
  body .mobile-business-card > span:not(.mobile-business-icon):not(.mobile-business-arrow) { display: block; min-width: 0; }
  body .mobile-business-card b { display: block; color: #193b43; font-size: 16px; font-weight: 650; line-height: 1.5; }
  body .mobile-business-card small { display: block; margin-top: 4px; color: #708087; font-size: 12px; font-weight: 400; line-height: 1.6; }
  body .mobile-business-card > :is(.mobile-business-arrow, .arrow, i) { position: absolute; top: 19px; right: 13px; color: #9eaeaf; font-size: 17px; font-style: normal; line-height: 1; }
  body .mobile-business-card > svg:last-child { position: absolute; width: 15px; height: 15px; top: 20px; right: 13px; color: #9eaeaf; }

  body .mobile-company-section { margin-top: 28px; padding: 25px 0; border-top: 1px solid #dfe7e6; }
  body .mobile-company-section h2 { margin-bottom: 10px; }
  body .mobile-company-section > p { margin: 0; color: #61777e; font-size: 14px; line-height: 1.85; }
  body .mobile-company-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 24px; margin-top: 9px; }
  body .mobile-company-links a { display: inline-flex; align-items: center; min-height: 44px; color: #176c61; font-size: 13px; font-weight: 600; line-height: 1.5; }
  body .mobile-contact-section { margin: 0 0 16px; padding: 20px; border: 1px solid #dce8e4; border-radius: 14px; background: #edf4f1; }
  body .mobile-contact-section h2 { margin-bottom: 7px; }
  body .mobile-contact-section > p { margin: 0; color: #627a7e; font-size: 13px; line-height: 1.75; }
  body .mobile-contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  body .mobile-contact-actions > :is(a, button) { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 46px; padding: 10px 6px; border: 1px solid #cadbd5; border-radius: 8px; color: #285249; background: #fff; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center; }
  body .mobile-contact-actions > :is(a:first-child, .primary) { color: #fff; background: #176e61; border-color: #176e61; }
  body .mobile-learning-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 12px; min-height: 52px; padding: 12px 0; color: #47696d; font-size: 14px; line-height: 1.6; }
  body .mobile-learning-link small { color: #72858a; font-size: 12px; }
  body .mobile-learning-link > span:first-child { font-size: 12px; }
  body .mobile-learning-link b { display: block; margin-top: 3px; color: #296b60; font-size: 13px; font-weight: 600; }

  /* The app-like footer is navigation, not four competing contact prompts. */
  body .mobile-consult-bar,
  body .desktop-consult-float,
  body > footer:not(.mobile-simple-footer) { display: none; }
  body .mobile-simple-nav {
    position: fixed;
    z-index: 42;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 5px max(12px, env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    border-top: 1px solid #e1e9e7;
    background: #fff;
    box-shadow: 0 -3px 14px rgb(24 53 49 / 3%);
  }
  body .mobile-simple-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 54px; border-radius: 9px; color: #7c8c91; font-size: 12px; font-weight: 500; line-height: 1.4; }
  body .mobile-simple-nav svg { width: 21px; height: 21px; }
  body .mobile-simple-nav a.active,
  body .mobile-simple-nav a[aria-current="page"] { color: #116f62; font-weight: 650; background: #f2f7f5; }
  body .mobile-simple-nav a:focus-visible { outline: 2px solid #128078; outline-offset: -2px; }
  body .mobile-simple-footer { display: block; width: min(620px, 100%); margin: 0 auto; padding: 20px 20px calc(86px + env(safe-area-inset-bottom, 0px)); color: #839194; background: #f6f8f8; font-size: 11px; line-height: 1.8; text-align: center; }
  body .mobile-simple-footer p { margin: 4px 0; }
  body .mobile-simple-footer a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 5px; color: #6e8588; }

  /* Business pages: a compact category switcher followed by actual services. */
  body[data-site-view="business"] #business { padding: calc(82px + env(safe-area-inset-top, 0px)) 20px 28px; min-height: 0; background: #f6f8f8; }
  body #business > .section-inner { max-width: 720px; }
  body[data-site-view="business"] .business-detail-toolbar,
  body #business > .section-inner > .section-head { display: none; }
  body .portal-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body .module-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 0 20px; border: 0; background: transparent; color: #587178; }
  body .module-nav h3,
  body .module-tab i,
  body .module-tab small { display: none; }
  body .module-tab { display: flex; justify-content: center; align-items: center; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 9px 4px; border: 1px solid #dde7e4; border-radius: 8px; background: #fff; color: #61777b; text-align: center; }
  body .module-tab b { font-size: 13px; font-weight: 500; line-height: 1.5; }
  body .module-tab.active,
  body .module-tab:hover { border-color: #bdd8ce; background: #e8f2ed; color: #156d5d; }
  body .module-tab.active b { font-weight: 650; }
  body .module-tab.cooperation-tab { border-left: 1px solid #dde7e4; }
  body .module-content { padding: 0; background: transparent; }
  body .module-hero { display: block; margin-bottom: 22px; }
  body .module-copy { padding: 0; }
  body .module-image,
  body #module-tag { display: none; }
  body #module-title { margin: 0 0 10px; font-size: 26px; font-weight: 700; line-height: 1.45; letter-spacing: -.025em; color: #17343d; }
  body .module-copy > p { color: #60777d; font-size: 14px; line-height: 1.8; }
  /* These are contractual scope / quote qualifications, not decorative copy. */
  body .module-copy .quote { display: block; margin-top: 10px; padding: 0; background: transparent; color: #78878b; font-size: 12px; font-weight: 400; line-height: 1.75; }
  body .item-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body .item-grid[hidden] { display: none; }
  body .item-card { min-height: 0; padding: 18px; border: 1px solid #dfe8e5; border-radius: 11px; background: #fff; box-shadow: none; }
  body .item-card .number { display: none; }
  body .item-card h4,
  body .item-card.business-static-card h2 { margin: 0 0 7px; color: #183d44; font-size: 18px; font-weight: 650; line-height: 1.5; }
  body .item-card p { color: #6d7f84; font-size: 14px; line-height: 1.8; }
  body .item-card .card-price { margin-top: 10px; padding: 3px 7px; background: #f1f5f3; color: #496c62; font-size: 12px; font-weight: 500; line-height: 1.75; }
  body .item-card .more { margin-top: 12px; color: #1b7468; font-size: 13px; font-weight: 500; line-height: 1.6; }
  body .training-overview { margin: 0; padding: 0; border: 0; background: transparent; }
  body .training-overview[hidden] { display: none; }
  body .training-overview-head { display: none; }
  body .training-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body .training-overview-card { position: relative; min-height: 0; padding: 18px 36px 18px 18px; border: 1px solid #dfe8e5; border-radius: 11px; background: #fff; }
  body .training-overview-card small { display: none; }
  body .training-overview-card b { margin: 0 0 6px; color: #183d44; font-size: 17px; font-weight: 650; line-height: 1.5; }
  body .training-overview-card span { color: #6d7f84; font-size: 13px; line-height: 1.75; }
  body .training-overview-card::after { content: "›"; position: absolute; right: 15px; top: 17px; color: #7b9994; font-size: 24px; line-height: 1; }
  body .service-cases { padding: 22px 0 0; border: 0; border-top: 1px solid #dfe7e6; background: transparent; }
  body .service-cases-head h4 { font-size: 18px; line-height: 1.5; }
  body .service-cases-head small { display: none; }
  body .service-case-card { border-radius: 11px; }

  /* Detail content remains complete; remove heavy modal framing on phones. */
  body .modal-head,
  body #consult-dialog .modal-head { padding: 12px 18px; color: #17343d; border-bottom: 1px solid #e0e9e6; background: #fff; }
  body .modal-head strong { color: #17343d; font-size: 19px; font-weight: 650; line-height: 1.5; }
  body .modal-kicker { display: none; }
  body .close-button { border: 1px solid #dce6e2; border-radius: 9px; color: #446a63; background: #f5f8f6; }
  body #consult-dialog .close-button:focus-visible { outline-color: #128078; }
  body .modal-body,
  body .consult-body,
  body .qr-body { padding: 20px 18px; background: #fff; }
  body :is(.modal-box, .product-detail-box, .training-course-card, .training-course-detail, .price-section, .training-assessment, .assessment-card, .consult-group) { border-radius: 9px; box-shadow: none; }
  body .product-detail-tabs { top: -20px; background: #fff; border-bottom-color: #e0e9e6; }
  body .product-detail-tabs button { min-height: 46px; }
  body .modal-actions { gap: 8px; }
  body .modal-actions > :is(a, button) { border-radius: 8px; }
  body .modal-actions > .primary { background: #176e61; border-color: #176e61; }
  body .consult-heading { margin-bottom: 18px; }
  body .consult-group-head { padding: 16px; background: #f2f7f4; }
  body .consult-advisor { min-height: 72px; }
  body .consult-footer { border-radius: 9px; background: #f1f6f3; }
  body .toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  body .mobile-detail-disclosure { margin: 16px 0 0; padding: 0; border: 1px solid #e1e9e5; border-radius: 9px; background: #fafcfb; }
  body .mobile-detail-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 46px;
    padding: 12px 14px;
    color: #416c61;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    list-style: none;
    cursor: pointer;
  }
  body .mobile-detail-disclosure > summary::-webkit-details-marker { display: none; }
  body .mobile-detail-disclosure > summary::after { content: "+"; flex: 0 0 auto; font-size: 20px; font-weight: 400; line-height: 1; color: #6e9287; }
  body .mobile-detail-disclosure[open] > summary::after { content: "−"; }
  body .mobile-detail-disclosure > summary:focus-visible { outline: 2px solid #128078; outline-offset: -2px; border-radius: 8px; }
  body .mobile-detail-disclosure:not([open]) > :not(summary) { display: none; }
  body .mobile-detail-disclosure[open] > .detail-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0 14px 8px; }
  body .detail-meta > div { min-height: 0; padding: 12px 0; border: 0; border-top: 1px solid #e4ebe7; background: transparent; }
  body .detail-meta small { color: #748984; font-size: 12px; font-weight: 400; line-height: 1.5; }
  body .detail-meta b { margin-top: 5px; color: #365b55; font-size: 14px; font-weight: 500; line-height: 1.75; }
  body .training-directory { margin-top: 22px; padding-top: 20px; border-top-color: #e0e8e4; }
  body .training-directory-head { margin-bottom: 14px; gap: 7px; }
  body .training-directory-head h4 { color: #1d4249; font-size: 19px; font-weight: 650; line-height: 1.5; }
  body .training-directory-head p { color: #71837f; font-size: 13px; line-height: 1.75; text-align: left; }
  body .training-directory-head small,
  body .training-difference small,
  body .training-assessment-head small { display: none; }
  body .mobile-detail-disclosure.training-difference { margin: 0 0 14px; }
  body .mobile-detail-disclosure.training-difference[open] > .training-difference-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 14px 8px; }
  body .training-difference-content > div { min-height: 0; padding: 12px 0; border: 0; border-top: 1px solid #e4ebe7; background: transparent; }
  body .training-difference b { margin: 0 0 5px; color: #365b55; font-size: 14px; font-weight: 600; line-height: 1.6; }
  body .training-difference p { color: #71837f; font-size: 13px; line-height: 1.85; }
  body .training-course-grid { gap: 10px; }
  body .training-course-card { min-height: 0; padding: 18px; border: 1px solid #dfe8e4; border-radius: 10px; background: #fff; box-shadow: none; }
  body .training-course-card:hover,
  body .training-course-card.active { transform: none; border-color: #9fc5b7; background: #fbfdfc; box-shadow: none; }
  body .training-course-card small { color: #728981; font-size: 12px; font-weight: 400; line-height: 1.7; }
  body .training-course-card b { margin: 6px 0 7px; color: #1d4249; font-size: 17px; font-weight: 650; line-height: 1.55; }
  body .training-course-card p { color: #6f837e; font-size: 13px; line-height: 1.8; }
  body .training-course-card span { color: #216f5e; font-size: 18px; font-weight: 650; line-height: 1.5; }
  body .training-course-card i { color: #397a69; font-size: 13px; font-weight: 500; line-height: 1.65; }
  body .training-course-detail { color: #24474b; border: 1px solid #dfe8e4; background: #f7faf8; }
  body .training-course-detail-head { border-bottom-color: #dee8e2; }
  body .training-course-detail-head small { color: #6d8d82; font-size: 12px; font-weight: 500; line-height: 1.7; }
  body .training-course-detail-head h4 { color: #1d4249; }
  body .training-course-detail-head p { color: #6d847e; font-size: 14px; line-height: 1.8; }
  body .training-course-price { color: #176e5b; font-weight: 650; }
  body .training-course-facts { gap: 0; background: transparent; }
  body .training-course-facts > div { min-height: 0; padding: 13px 0; border-bottom: 1px solid #e2ebe5; background: transparent; }
  body .training-course-facts small { color: #789087; font-size: 12px; font-weight: 400; }
  body .training-course-facts b { color: #315d53; font-size: 14px; font-weight: 500; line-height: 1.75; }
  body .training-course-columns h5 { color: #285e4f; font-size: 16px; font-weight: 600; }
  body .training-course-columns :is(ul, ol) { color: #617d73; font-size: 14px; line-height: 1.9; }
  body .training-course-note { color: #678176; border-top-color: #dfe8e3; }
  body .training-course-back { color: #256857; border-color: #c8dcd1; border-radius: 8px; background: #fff; font-weight: 500; }
  body .price-section { color: #29484c; border: 1px solid #dfe8e4; background: #f7faf8; }
  body .price-section-head span { color: #71857d; }
  body .price-card { border: 1px solid #e0e9e3; border-radius: 8px; background: #fff; }
  body .price-card b { color: #286e59; }
  body .price-note { color: #6b8177; }
  body .price-line { color: #436d5d; border-radius: 8px; background: #eff6f1; }
  body .process-list li::before { color: #427e69; }
  body .assessment-card { border: 1px solid #dfe8e4; border-radius: 8px; }

  body[data-site-view="consultation"] #consultation { padding: calc(82px + env(safe-area-inset-top, 0px)) 20px 24px; background: #f6f8f8; }
  body #consultation .lead-shell { max-width: 720px; border: 1px solid #dde8e2; border-radius: 12px; background: #fff; box-shadow: none; }
  body #consultation .lead-intro { padding: 23px 20px; color: #264b45; border-bottom: 1px solid #dde8e2; background: #eff6f1; }
  body #consultation .lead-intro > small { display: none; }
  body #consultation-title { margin: 0 0 10px; color: #1a4145; font-size: 26px; font-weight: 650; line-height: 1.45; letter-spacing: -.025em; }
  body #consultation .lead-intro > p { color: #698279; font-size: 14px; line-height: 1.8; }
  body #consultation .lead-contact-list { gap: 9px; margin-top: 19px; }
  body #consultation .lead-contact-list :is(a, button) { gap: 10px; min-height: 46px; padding: 12px; color: #326556; border: 1px solid #cddfd4; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 500; line-height: 1.65; }
  body #consultation .lead-contact-list a:first-child { color: #fff; border-color: #1c725e; background: #1c725e; }
  body #consultation .lead-contact-list strong { font-size: 14px; font-weight: 600; }
  body #consultation .lead-form { padding: 24px 20px; }
}

@media (max-width: 680px) {
  body #detail-dialog,
  body #consult-dialog { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; border-radius: 0; }
  body #detail-dialog .modal-head,
  body #consult-dialog .modal-head { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  body #detail-dialog .modal-body,
  body #consult-dialog .consult-body { flex: 1 1 auto; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  body #qr-dialog { border-radius: 14px; }
}

@media (max-width: 359px) {
  body .topbar { padding-right: 16px; padding-left: 16px; }
  body[data-site-view="home"] .mobile-home-simple { padding-right: 16px; padding-left: 16px; }
  body .mobile-business-card { padding: 13px 11px; min-height: 112px; }
  body .mobile-business-card b { font-size: 15px; }
  body .mobile-business-card small { font-size: 12px; }
  body .mobile-contact-section { padding: 17px 14px; }
  body[data-site-view="business"] #business { padding-right: 16px; padding-left: 16px; }
  body .module-tab b { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-business-card { transition: none; }
}