/* Narrow screens use a deliberately compact control rail: the five sections stay
   readable without becoming the accidental vertical menu seen on small phones. */
@media (max-width: 700px) {
  .topbar {
    height: 3.85rem !important;
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    padding: 0 !important;
    pointer-events: none;
  }

  .site-controls,
  .site-controls .display-control {
    pointer-events: auto !important;
  }

  .site-controls { z-index: 60 !important; }

  .main-nav {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    width: max-content !important;
    max-width: calc(100vw - 10rem) !important;
    height: auto !important;
    margin: .62rem auto 0 !important;
    padding: .22rem .26rem !important;
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    pointer-events: auto;
  }

  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a {
    flex: 0 0 auto;
    padding: .43rem .48rem !important;
    font-size: .52rem !important;
    line-height: 1;
    white-space: nowrap;
  }
  .nav-current { top: .22rem !important; bottom: .22rem !important; height: auto !important; }

  .brand-mark {
    top: 1rem;
    left: .9rem;
    width: 5rem;
    height: 1.27rem;
  }
  .brand-mark img { top: -.918rem; left: -.188rem; width: 5.365rem; }

  .site-controls { top: .68rem !important; right: .85rem !important; gap: .22rem !important; }
  .display-control { width: 2rem !important; height: 2rem !important; font-size: .48rem !important; }

  /* The supplied Chinese artwork has a broad silhouette. It lives inside a
     deliberate central window on portrait screens, never edge-to-edge. */
  .hero h1.hero-art-title { width: 68vw !important; }

  /* Contact information becomes a two-line editorial unit instead of three
     competing columns. This preserves the label, address, and copy action. */
  .contact {
    min-height: auto !important;
    padding: 6.15rem 1.1rem 5.5rem !important;
  }
  .partner-wall { padding-bottom: 2rem !important; }
  .contact-intro > p:last-child { max-width: 19rem; }
  .contact-details {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row;
    width: 100% !important;
    margin: 2.6rem 0 0 !important;
  }
  .contact-item {
    display: grid !important;
    grid-template-columns: 1.55rem minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    column-gap: .68rem !important;
    row-gap: .28rem !important;
    min-height: 0 !important;
    padding: 1.05rem 0 !important;
  }
  .contact-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    align-self: center !important;
  }
  .contact-item > span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: .55rem !important;
    letter-spacing: .16em !important;
  }
  .copy-contact {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center;
    gap: .48rem !important;
    min-width: 0;
    padding: .12rem 0 !important;
  }
  .copy-contact strong {
    min-width: 0;
    font-size: clamp(.98rem, 4.5vw, 1.12rem) !important;
    letter-spacing: -.045em !important;
    white-space: nowrap;
  }
  .copy-contact b {
    padding: .3rem .45rem !important;
    font-size: .48rem !important;
    letter-spacing: .05em !important;
  }
  .contact footer {
    right: 1.1rem !important;
    bottom: 1rem !important;
    left: 1.1rem !important;
    font-size: .58rem;
  }
}

/* The mobile hero follows a deliberate vertical axis: navigation first, then
   identity and settings, then one generous action column. */
@media (max-width: 700px) {
  .topbar {
    height: 4.25rem !important;
    align-items: flex-start !important;
  }

  .main-nav {
    width: calc(100vw - 2.1rem) !important;
    max-width: none !important;
    min-height: 3.15rem;
    margin-top: .75rem !important;
    padding: .29rem .34rem !important;
    justify-content: space-around !important;
    overflow: visible !important;
  }

  .main-nav a {
    flex: 1 1 0;
    padding: .72rem .25rem !important;
    font-size: clamp(.6rem, 2.65vw, .75rem) !important;
    text-align: center;
  }

  .nav-current { top: .29rem !important; bottom: .29rem !important; }

  .brand-mark {
    top: 5.55rem;
    left: 1.15rem;
    width: 5.75rem;
    height: 1.455rem;
  }
  .brand-mark img { top: -1.056rem; left: -.216rem; width: 6.17rem; }

  .site-controls {
    top: 5.4rem !important;
    right: 1rem !important;
    flex-direction: column;
    gap: .56rem !important;
  }
  .display-control {
    width: 2.85rem !important;
    height: 2.85rem !important;
    font-size: .62rem !important;
  }

  .eyebrow {
    top: 8.15rem !important;
    left: 1.15rem !important;
    width: min(15rem, calc(100vw - 7.5rem));
    font-size: .65rem !important;
    line-height: 1.45;
  }
  .hero-index {
    top: 13.65rem !important;
    right: 1.15rem !important;
    font-size: .68rem !important;
  }

  .hero h1.hero-art-title {
    top: 42% !important;
    width: 72vw !important;
  }
  .hero-title-tagline {
    top: 50.5% !important;
    font-size: .63rem !important;
    letter-spacing: .24em !important;
  }
  html[lang="zh-Hant"] .hero-title-tagline,
  html[lang="zh-CN"] .hero-title-tagline {
    top: 49.6% !important;
    font-size: .48rem !important;
    letter-spacing: 1.36em !important;
  }
  .hero-service {
    top: 53.1% !important;
    width: min(84vw, 23rem);
    font-size: .56rem !important;
    letter-spacing: .085em !important;
    line-height: 1.55;
  }

  .hero-actions {
    top: 57.5% !important;
    width: min(65vw, 18rem);
    flex-direction: column;
    align-items: stretch;
    gap: .85rem;
  }
  .hero-actions .pill {
    display: flex;
    min-height: 4.45rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: .95rem 1.1rem;
    font-size: clamp(.9rem, 4vw, 1.05rem) !important;
  }
  .hero-contact-menu { width: 100%; }
  .hero-contact-trigger { width: 100%; }

  /* Work retains its title and filters; only the catalogue grid changes scale. */
  .work { padding-inline: 1.15rem !important; }
  .work-heading { display: grid !important; }
  .filters {
    display: flex !important;
    flex-wrap: wrap;
    gap: .55rem !important;
    overflow: visible !important;
    overscroll-behavior: auto;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 1.35rem !important;
  }
  .filter {
    flex: 0 0 auto;
    min-height: 2.62rem;
    padding: .66rem .84rem !important;
    font-size: clamp(.59rem, 2.55vw, .68rem) !important;
    line-height: 1;
    white-space: nowrap;
  }
  .filter small { font-size: .9em; }
  .project-wall { gap: 1.8rem !important; }
  .orientation-head { padding-bottom: .62rem !important; margin-bottom: .72rem !important; }
  .orientation-head p { font-size: .67rem !important; }
  .orientation-head span { font-size: .62rem !important; }
  .portrait-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .62rem !important; }
  .landscape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .82rem !important; }
  .project-wall .frame { border-radius: .86rem !important; }
  .project-wall .project-meta { padding-top: .38rem !important; }
  .project-wall .project-meta strong { display: block; font-size: .73rem !important; line-height: 1.15; }
  .project-wall .project-type { display: block; margin-top: .16rem; font-size: .56rem !important; line-height: 1.2; white-space: nowrap; }

  .project-placeholder .frame { border-radius: .86rem !important; }
  .placeholder-meta { padding-top: .38rem; min-height: 2.95rem; }
  .placeholder-meta strong { display: block; font-size: .73rem; line-height: 1.15; }
}