/* ============================================================
   dialog HP — mobile / responsive layer
   Desktop (>900px) is intentionally UNTOUCHED:
   every rule lives inside @media (max-width:900px) or targets
   the new .mnav-* elements that are display:none on desktop.
   ============================================================ */

/* Hamburger + slide-in panel are inert on desktop */
.mnav-toggle { display: none; }
.mnav-panel,
.mnav-backdrop { display: none; }

@media (max-width: 900px) {
  /* prevent any horizontal overflow site-wide (clip keeps sticky headers working) */
  html { overflow-x: clip; }
  body { overflow-x: clip; }

  /* hide the desktop nav of BOTH header systems, reveal the hamburger */
  .site-nav,
  .header-cta,
  .header .nav { display: none !important; }

  /* tighter header gutters + smaller logo on phones */
  .header-inner { padding-left: 20px; padding-right: 20px; }
  .header__inner { padding-left: 20px; padding-right: 20px; }
  .brand-mark img { height: 40px; }
  .logo-img { height: 40px; }

  /* ---- hamburger button ---- */
  .mnav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; margin-left: auto;
    background: transparent; border: 0; cursor: pointer;
  }
  .mnav-toggle span {
    display: block; width: 24px; height: 2px; border-radius: 2px;
    background: var(--blue-dark, #1B3C7A);
    transition: transform .25s ease, opacity .2s ease;
  }
  .mnav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mnav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mnav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---- backdrop ---- */
  .mnav-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(10, 36, 86, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 1000;
  }
  .mnav-backdrop.open { opacity: 1; visibility: visible; }

  /* ---- slide-in panel ---- */
  .mnav-panel {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(84vw, 340px);
    background: #fff;
    box-shadow: -12px 0 40px rgba(10, 36, 86, .16);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
    z-index: 1001;
    padding: 76px 26px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mnav-panel.open { transform: translateX(0); }

  .mnav-close {
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--serif, "Noto Serif JP", serif);
    font-size: 30px; line-height: 1; color: var(--blue-deep, #0A2456);
  }
  .mnav-links { list-style: none; margin: 0; padding: 0; }
  .mnav-links li { border-bottom: 1px solid var(--line, rgba(10,36,86,.12)); }
  .mnav-links a {
    display: flex; align-items: center; min-height: 52px;
    font-family: var(--serif, "Noto Serif JP", serif);
    font-size: 16px; font-weight: 500; color: var(--blue-deep, #0A2456);
    letter-spacing: .04em;
  }
  .mnav-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
  .mnav-btn {
    display: flex; align-items: center; justify-content: center;
    min-height: 50px; padding: 0 20px;
    font-family: var(--serif, "Noto Serif JP", serif);
    font-size: 15px; font-weight: 700; letter-spacing: .04em;
    border-radius: 2px;
    background: var(--gold, #C89A5B); color: var(--blue-deep, #0A2456);
    border: 1px solid var(--gold, #C89A5B);
  }
  .mnav-btn.ghost {
    background: transparent; color: var(--blue-dark, #1B3C7A);
    border-color: var(--blue-dark, #1B3C7A); font-weight: 500;
  }
}

/* ------------------------------------------------------------
   Finer phone tuning (<=560px)
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .flow-list { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; }
  .column-grid { grid-template-columns: 1fr; }
  .hero-badges { grid-template-columns: 1fr 1fr; }

  :root { --pad: 20px; }

  .btn, .btn-primary, .btn-outline, .pill { min-height: 44px; }
}


/* ===== overflow fixes (2026-06-29) ===== */
@media (max-width: 900px) {
  /* homepage service cards: fixed 5-col grid -> stack on phones */
  .service-item { grid-template-columns: 1fr !important; gap: 6px !important; }
  .service-item__thumb { width: 100% !important; margin-bottom: 8px; }
  .service-item__arrow { display: none !important; }
  /* universal overflow guards */
  img, video, iframe, table, pre, code { max-width: 100% !important; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body { overflow-wrap: break-word; line-break: strict; }
}


/* ===== mobile typography polish (2026-06-29 r2) ===== */
@media (max-width: 900px){
  body{ overflow-wrap: break-word; line-break: strict; -webkit-line-break: strict; }
  h1,h2,h3,.hero__title,.hero-title,.section-title,.section-header__title,.page-title,.article-head h1{ text-wrap: pretty; }
}
@media (max-width: 600px){
  /* column article pages */
  .article-head h1, article .content-inner h1{ font-size:25px !important; line-height:1.55 !important; }
  .article-body{ font-size:16px; line-height:1.95; }
  .article-body h2{ font-size:21px; line-height:1.5; margin:34px 0 14px; }
  .article-body h3{ font-size:17px; line-height:1.6; }
  .article-body p{ margin-bottom:18px; }
  .article-body table{ font-size:13px; }
  .article-body blockquote{ font-size:13px; }
  /* subpage hero + section heads */
  .page-title{ font-size:27px !important; line-height:1.45; }
  .section-title{ font-size:23px; line-height:1.5; }
  .section-eyebrow,.page-eyebrow{ letter-spacing:.12em; }
  .page-lede,.section-desc,.service-lead,.member-bio,.case-summary{ font-size:15px; line-height:1.9; }
  /* homepage lede + section titles */
  .hero__sub{ font-size:15px; line-height:1.9; }
  .section-header__title{ font-size:26px !important; line-height:1.5; }
  /* long urls/emails may break anywhere (normal text does not) */
  a[href^="http"],a[href^="mailto"],.breadcrumb,.company-table td{ overflow-wrap:anywhere; }
}

/* homepage stats: 2-col -> 1-col on phones (big numbers were clipped) */
@media (max-width:600px){
  .stats__grid{ grid-template-columns:1fr !important; }
  .stat__num-big{ font-size:46px; }
}

/* hero conversation bubbles: stack vertically on phones (were overlapping) */
@media (max-width:900px){
  .hero__visual{ display:block !important; height:auto !important; min-height:0 !important; }
  .hero__visual .hero__photo{ position:relative !important; width:100% !important; height:200px !important; display:block !important; margin:0 0 16px !important; border-radius:8px; overflow:hidden; }
  .hero__visual .dialog-connector{ display:none !important; }
  .hero__visual .dialog-bubble{ position:static !important; inset:auto !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:auto !important; max-width:100% !important; transform:none !important; animation:none !important; margin:0 0 14px !important; }
  .hero__visual .dialog-bubble--1, .hero__visual .dialog-bubble--3{ background:#fff !important; box-shadow:0 6px 24px rgba(10,36,86,.10) !important; border:1px solid rgba(10,36,86,.06) !important; backdrop-filter:none !important; }
  .hero__visual .dialog-bubble:last-child{ margin-bottom:0 !important; }
}