/* ===== ASOVIVA — responsive / mobile ===== */

/* burger hidden on desktop */
.vb-burger { display: none; }

@media (max-width: 920px) {
  /* unlock the fixed 1440 comp to fluid width */
  .vb, .vb-page, .va { width: 100% !important; min-width: 0; }
  body.nav-locked { overflow: hidden; }

  /* ---------- header / burger ---------- */
  .vb-header { padding: 18px 22px 0; }
  .vb-header--stuck { padding: 0 22px; height: 64px; }
  .vb-logo img { width: 92px !important; margin-top: 4px !important; }

  .vb-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 9px; margin: -4px -8px 0 0;
    background: transparent; border: 0; cursor: pointer; z-index: 70; position: relative;
  }
  .vb-burger span { display: block; height: 1.5px; width: 100%; background: #fff; transition: transform 0.35s, opacity 0.25s; }
  .vb-header--stuck .vb-burger span { background: var(--asv-ink); }
  .vb-header.nav-open .vb-burger span { background: #fff; }
  .vb-header.nav-open .vb-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .vb-header.nav-open .vb-burger span:nth-child(2) { opacity: 0; }
  .vb-header.nav-open .vb-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* nav as full-screen overlay */
  .vb-nav {
    position: fixed; inset: 0; z-index: 60;
    background: var(--asv-navy-deep);
    flex-direction: column; align-items: center; justify-content: center; gap: 30px;
    transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* when the menu is open, drop any header transform/animation so the
     fixed overlay is contained by the viewport (a transformed --stuck
     header would otherwise trap the overlay inside its 78px box). */
  .vb-header.nav-open { animation: none !important; transform: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; position: fixed; top: 0; left: 0; right: 0; }
  .vb-header.nav-open .vb-nav { transform: translateX(0); }
  .vb-nav a { text-align: center; }
  .vb-nav .n-en, .vb-header .vb-nav .n-en, .vb-header--stuck .vb-nav .n-en { color: #fff !important; font-size: 21px; }
  .vb-nav .n-ja, .vb-header .vb-nav .n-ja, .vb-header--stuck .vb-nav .n-ja { color: rgba(255,255,255,0.55) !important; font-size: 11px; margin-top: 6px; }
  .vb-nav .contact .n-en { border: 0 !important; padding: 0 !important; }
  .vb-nav .n-en::after { display: none; } /* drop hover/active line in overlay */

  /* ---------- hero ---------- */
  .vb-hero { height: auto; min-height: 88vh; }
  .vb-hero-center { padding: 100px 24px; min-height: 88vh; }
  .vb-hero-center .fv-en { font-size: 10px; letter-spacing: 0.3em; margin-bottom: 28px; }
  .vb-hero-center h1 { font-size: 32px; line-height: 1.7; }
  .vb-hero-note { right: 22px; bottom: 20px; font-size: 8px; }

  /* ---------- page head ---------- */
  .vb-pagehead { height: auto; min-height: 320px; }
  .vb-pagehead-inner { padding: 0 24px 56px; }
  .vb-pagehead .ph-en { font-size: 40px; }
  .vb-pagehead .ph-ja { font-size: 11px; margin-bottom: 16px; }
  .vb-pagehead .ph-lead { font-size: 13px; line-height: 2.1; }
  .vb-crumb { right: 24px; bottom: 22px; font-size: 10px; }

  /* ---------- generic sections ---------- */
  .vb-sec { padding: 80px 24px 0; }
  .vb-page .vb-sec:first-of-type { padding-top: 80px; }
  .vb-sechead { gap: 4px 16px; flex-wrap: wrap; }
  .vb-sechead .s-en { font-size: 24px; }
  .vb-sechead .s-ja { margin-left: 0; width: 100%; }

  /* philosophy */
  .vb-phil-body { grid-template-columns: 1fr; gap: 32px; padding: 56px 0 0; }
  .vb-phil-body h2 { font-size: 30px; }
  .about-intro { grid-template-columns: 1fr; gap: 32px; padding: 56px 0 0; }
  .about-intro h2 { font-size: 30px; }

  /* services (home list → 2-up) */
  .vb-svc-list { display: block !important; margin-top: 32px; }
  .vb-svc-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .vb-svc-row .num { font-size: 11px; }
  .vb-svc-row h3 { font-size: 16px; }
  .vb-svc-row h3 .ja { font-size: 11px; }
  .vb-svc-row p { font-size: 12px; }

  /* services (detail page) */
  .svc-block { grid-template-columns: 1fr; gap: 18px; padding: 48px 0; }
  .svc-block h3 { font-size: 26px; }

  /* works (home asymmetric → 2-up) */
  .vb-works-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 16px; }
  .vb-wk, .vb-wk.w6 { grid-column: auto; min-width: 0; }
  .vb-wk .tg { flex-wrap: wrap; gap: 8px 12px; }
  .vb-wk .nm { font-size: 13px; }
  .vb-wk .ds { font-size: 11px; }
  .vb-wk .sa { height: 150px !important; }
  .vb-works-lead { width: auto !important; max-width: none; white-space: normal; margin-top: 24px; }

  /* works gallery 2-up */
  .works-gallery { grid-template-columns: 1fr 1fr; gap: 36px 16px; }
  .wkg .nm { font-size: 14px; }
  .wkg .ds { font-size: 11px; }
  .wkg .sa { height: 170px !important; }
  .works-filter { gap: 10px; }
  .works-filter button { padding: 10px 16px; font-size: 11px; }

  /* work detail */
  .wd-hero { height: 320px; }
  .wd-meta { grid-template-columns: 1fr; gap: 40px; padding: 64px 0 0; }
  .wd-meta h2 { font-size: 26px; }
  .wd-body { padding: 64px 0 0; }
  .wd-figure .ph, .wd-figure .sa { height: 320px !important; }
  .wd-figure.two { grid-template-columns: 1fr; gap: 20px; }
  .wd-next { flex-direction: column; align-items: flex-start; gap: 14px; }
  .wd-next a { font-size: 17px; }

  /* reasons */
  .vb-why2 { margin-top: 90px; padding: 80px 24px; }
  .vb-why2 h2 { margin-top: 40px; }
  .vb-why2-grid { grid-template-columns: 1fr !important; gap: 36px; margin-top: 48px; }
  .vb-why2-item { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: start; }
  .vb-why2-item .num { font-size: 46px; grid-row: span 2; line-height: 0.9; }
  .vb-why2-item h3 { margin: 2px 0 12px; }
  .vb-why2-item p { grid-column: 2; }
  .vb-why-row { grid-template-columns: 1fr; gap: 16px; padding: 40px 0; }
  .vb-why-row .num { font-size: 44px; }

  /* consult */
  .vb-consult-panel { padding: 48px 24px; }
  .vb-consult-cols { grid-template-columns: 1fr; }

  /* flow */
  .vb-flow-wrap { grid-template-columns: 1fr; gap: 40px; }

  /* journal */
  .vb-journal-grid, .jl-grid { grid-template-columns: 1fr; gap: 40px; }
  .jl-feature { grid-template-columns: 1fr; }
  .jl-feature .meta { border-left: 1px solid var(--asv-line); border-top: 0; padding: 40px 28px; }
  .jl-feature .visual .ph { height: 280px; }

  /* article */
  .art-wrap { padding: 90px 24px 0; }
  .art-wrap h1 { font-size: 27px; }
  .art-body { font-size: 14px; }
  .art-hero .ph { height: 300px; }

  /* about table / history */
  .about-row { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
  .hist-row { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .hist-row .yr { font-size: 24px; }

  /* representative profile (MESSAGE) */
  .vb-prof { margin-top: 90px !important; }
  .vb-prof-grid { grid-template-columns: 1fr; }
  .vb-prof-photo { order: -1; }
  .vb-prof-photo img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
  .vb-prof-txt { padding: 48px 24px 64px; }
  .vb-prof-txt h2 { font-size: 24px; line-height: 1.8; margin: 24px 0 28px; }

  /* contact */
  .vb-contact { padding: 90px 24px; }
  .vb-contact .grid { grid-template-columns: 1fr; gap: 40px; }
  .vb-contact .grid > div { text-align: center; }
  .vb-contact .grid > div p { margin-left: auto; margin-right: auto; }
  .vb-contact h2 { font-size: 28px; }
  .vb-contact-actions { flex-direction: column; }
  .vb-contact-actions .vb-contact-btn { flex: none !important; }
  .vb-line-btn, .vb-contact-actions .vb-contact-btn { width: 100%; height: 68px !important; min-height: 68px; }
  .vb-line-btn { flex-direction: row; gap: 12px; }
  .vb-contact-actions .vb-contact-btn { justify-content: center; gap: 16px; position: relative; }
  .vb-contact-actions .vb-contact-btn .arr { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); }
  .ct-grid { grid-template-columns: 1fr; gap: 48px; padding: 64px 0 0; }

  /* footer */
  .vb-footer { flex-direction: column; gap: 24px; align-items: flex-start; padding: 48px 24px; }
  .vb-footer .fnav { flex-wrap: wrap; gap: 18px 24px; }

  /* strip */
  .vb-strip span { font-size: 12px; margin-right: 36px; }
}

/* small phones */
@media (max-width: 480px) {
  .vb-hero-center h1 { font-size: 27px; }
  .vb-pagehead .ph-en { font-size: 32px; }
  .vb-sechead .s-en { font-size: 21px; }
}