/* Mobile typography only. Desktop styles begin at 769px and stay unchanged. */
@media (max-width: 768px) {
  body {
    --m-title: clamp(28px, 7.5vw, 34px);
    --m-title-long: clamp(26px, 7.2vw, 34px);
    --m-body: 16px;
    --m-copy: 15px;
    --m-note: 12px;
  }

  /* Keep the existing font families and each section's accent colors. */
  .hero h1 {
    font-size: clamp(36px, 10vw, 46px);
    line-height: 1.22;
    letter-spacing: 0;
    margin-bottom: 20px;
  }

  h2.title,
  #factory .q04-picks-head h3,
  #supply .s05-route-heading h3,
  #supply .s05-concierge h3 {
    font-size: var(--m-title);
    line-height: 1.32;
    letter-spacing: 0;
    text-wrap: balance;
  }

  #supply.s05 .s05-finish h3 {
    font-size: var(--m-title-long);
    line-height: 1.32;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  .eyebrow {
    font-size: var(--m-note);
    line-height: 1.6;
    letter-spacing: 0.14em;
    column-gap: 10px;
    row-gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .eyebrow .zh { letter-spacing: 0.08em; }
  .hero .kicker { font-size: var(--m-note); letter-spacing: 0.16em; }

  .copy,
  .hero .lead,
  #contact .story p {
    font-size: var(--m-body);
    line-height: 1.8;
  }

  .service-card h3 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  .service-card p {
    font-size: var(--m-copy);
    line-height: 1.7;
  }

  #factory .q04-picks-head p,
  #supply .s05-route-heading p,
  #supply .s05-concierge-promise,
  #supply .s05-concierge-copy,
  #supply .s05-step p,
  #supply.s05 .s05-finish-copy {
    font-size: var(--m-copy);
    line-height: 1.8;
  }
  #factory .q04-picks-head p,
  #supply .s05-route-heading p,
  #supply.s05 .s05-finish-copy { margin-top: 16px; }

  /* Undo desktop-authored prose breaks; preserve heading breaks. */
  #supply .s05-route-heading p br,
  #supply .s05-concierge-copy br,
  #supply.s05 .s05-finish-copy br { display: none; }

  #factory .q04-product h4 {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 10px;
  }
  #factory .q04-link,
  #supply .s05-link { font-size: var(--m-copy); }

  #supply .s05-step h4 {
    font-size: 22px;
    line-height: 1.4;
    margin: 6px 0 10px;
  }
  #supply .s05-step small,
  #supply .s05-concierge-kicker,
  #supply.s05 .s05-finish-label,
  #supply .s05-mobile-map-note {
    font-size: var(--m-note);
    line-height: 1.7;
  }

  /* Give enlarged role copy room to wrap beneath each role name. */
  #supply .s05-concierge-team {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  #supply .s05-concierge-ratio span {
    font-size: var(--m-note);
    line-height: 1.6;
    white-space: normal;
  }
  #supply .s05-concierge-roles {
    width: auto;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
    gap: 16px;
    text-align: left;
  }
  #supply .s05-concierge-roles div { display: block; }
  #supply .s05-concierge-roles dt { font-size: 14px; line-height: 1.5; }
  #supply .s05-concierge-roles dd {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.7;
  }

  /* Keep every quote field; allow rows to grow with readable text. */
  #supply .s05-sheet li {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
  }
  #supply .s05-sheet li > div { min-width: 0; }
  #supply .s05-sheet-name,
  #supply .s05-sheet-price { font-size: 14px; line-height: 1.6; }
  #supply .s05-sheet-meta {
    font-size: var(--m-note);
    line-height: 1.65;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  #supply .s05-sheet-header,
  #supply .s05-sheet-note { font-size: var(--m-note); line-height: 1.7; }
  #supply .s05-sheet-total { font-size: 14px; }
  #supply .s05-sheet-price { font-variant-numeric: tabular-nums; }

  .case-body h3 { font-size: 20px; line-height: 1.4; }
  .case-meta dt { font-size: var(--m-note); line-height: 1.6; }
  .case-meta dd { font-size: 14px; line-height: 1.6; }
  .price-card li { font-size: var(--m-copy); line-height: 1.8; }
  details.faq summary { font-size: var(--m-body); line-height: 1.6; }
  details.faq p { font-size: var(--m-copy); line-height: 1.8; }

  /* Contact heading: location first, proof second; preserve centered ending. */
  #contact .m-contact-place { display: block; }
  #contact .m-contact-separator { display: none; }
  #contact .m-contact-proof {
    display: block;
    margin-top: 10px;
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
  }
  #contact .story { margin-top: 24px; }

  /* Service editorial: scoped to the mobile-only section. */
  #mobile-services.block { padding-block: 64px; }
  #mobile-services .eyebrow { margin-bottom: 22px; }
  #mobile-services .title { margin-bottom: 28px; line-height: 1.42; }
  #mobile-services .service-emphasis { color: #66745f; }
  #mobile-services .service-scene { margin: 0 0 28px; }
  #mobile-services .service-scene img {
    width: 100%;
    height: auto;
    aspect-ratio: 456 / 516;
    object-fit: cover;
    object-position: center;
    border-radius: 2px;
  }
  #mobile-services .service-scene figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .03em;
  }
  #mobile-services .service-scene figcaption::before {
    content: "";
    width: 22px;
    height: 1px;
    flex: none;
    background: var(--gold-deep);
  }
  #mobile-services .service-grid {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
  }
  #mobile-services .service-card {
    display: grid;
    grid-template-columns: 22px 52px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 14px;
    padding: 22px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }
  #mobile-services .service-number {
    color: var(--gold-deep);
    font-size: 12px;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
  }
  #mobile-services .service-card h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .04em;
  }
  #mobile-services .service-card p {
    min-width: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--muted);
    text-wrap: pretty;
  }
}