/* Phone and narrow portrait layouts. The original desktop styles remain authoritative. */
@media screen and (max-width: 767px) {
  :root {
    --phone-gutter: clamp(16px, 5vw, 30px);
    --phone-section: clamp(36px, 7vw, 54px);
    scroll-padding-top: 80px;
  }

  .wrap, .op-wrap {
    width: calc(100% - 2 * var(--phone-gutter));
  }

  .op-header-wrap { position: sticky; top: 0; }
  .op-header { min-height: 68px; gap: 8px; }
  .op-brand { gap: 8px; min-width: 0; }
  .op-brand img { width: 31px; height: 36px; }
  .op-brand > span { font-size: clamp(14px, 4.2vw, 19px); }
  .op-brand small { margin-top: 5px; font-size: 6px; letter-spacing: .9px; }
  .op-menu { flex-shrink: 0; min-height: 44px; padding-inline: 10px; }
  .op-nav { top: calc(100% - 1px); max-height: calc(100svh - 82px); overscroll-behavior: contain; }
  .op-nav a { min-height: 48px; }

  main :is(p, li, dd) { line-height: 1.62; }
  main h1 { overflow-wrap: anywhere; }
  main :is(.page-intro h1, .hero h1) {
    font-size: clamp(32px, 8.5vw, 52px);
    line-height: 1.08;
    letter-spacing: -.045em;
    text-wrap: balance;
  }

  .hero, .page-intro, .v04-story, .v04-split, .v04-form-grid,
  .split-section, .faq-grid, .story-grid, .contact-grid, .cards.two {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .hero { padding-block: 27px 30px; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero-lead, .v04-intro-aside > p { font-size: 16px; }
  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }
  .hero-actions .btn {
    width: 100%;
    min-height: 48px;
    padding: 10px 8px;
    gap: 5px;
    font-size: 13px;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .hero-actions .arrow { flex: 0 0 14px; width: 14px; }
  .hero .hero-retail { margin-top: 14px; }
  .hero-identity { min-height: 236px; }
  .hero-mark { width: 110px; height: 129px; margin-bottom: 29px; }
  .identity-orbit { width: 136px; height: 136px; --orbit-gap: 17px; transform: translateY(-14px); }
  .hero-identity .topline { top: 15px; left: 14px; right: 14px; }
  .identity-caption { bottom: 14px; }
  .identity-caption span { margin-top: 5px; }

  .section, .v04-section, .muted-section, .content-section, .contact-band, .cta-banner {
    padding-block: var(--phone-section);
  }
  .page-intro { padding-block: 20px 25px; gap: 13px; }
  .page-intro h1 { margin-block: 10px 0; }
  .page-intro + :is(.content-section, .v04-section) { padding-top: 12px; }
  .breadcrumbs { min-height: 38px; padding-block: 0; }
  .section-heading { gap: 12px; margin-bottom: 20px; }
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .region-grid article { padding: 13px 10px; min-width: 0; }
  .region-grid .status { font-size: 9px; overflow-wrap: anywhere; }
  .region-grid h3 { font-size: clamp(15px, 4.2vw, 21px); }
  .steps { gap: 13px; }
  .faq-item summary { min-height: 48px; }

  .v04-grid { gap: 14px; }
  .v04-grid-three, .v04-grid-two, .v04-grid-four, .principles {
    grid-template-columns: minmax(0, 1fr);
  }
  .v04-card, .v04-card-copy { padding: 18px; }
  .v04-industry-card { padding: 0; }
  .v04-industry-card img { aspect-ratio: 16 / 10; }
  .v04-story { gap: 24px; }
  .v04-family { width: min(100%, 350px); margin-inline: auto; }
  .v04-family img { display: block; width: 100%; height: auto; }
  .v04-role-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
  .v04-actions { gap: 8px 15px; margin-top: 14px; }
  .v04-value { grid-template-columns: 30px minmax(0, 1fr); gap: 8px 12px; padding-block: 19px; }
  .v04-value > div { grid-column: 2; }

  .table-wrap { min-width: 0; }
  .markets-table { width: 100%; table-layout: fixed; }
  .markets-table :is(th, td) { padding: 10px 6px; font-size: clamp(12px, 3.25vw, 15px); overflow-wrap: anywhere; }
  .market-status { white-space: normal; }

  #contact-form { scroll-margin-top: 0; }
  .v04-form-guide { margin-top: 14px; padding-top: 12px; }
  .v04-form-guide p { margin-bottom: 6px; }
  .v04-inquiry-form { padding: 16px; }
  .v04-inquiry-form :is(input, select, textarea) { font-size: 16px; min-height: 48px; }
  .v04-inquiry-form button, .cta-inner .btn, .v04-intro .btn { min-height: 48px; }
  .v04-form-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .op-retail-inner { padding-block: 20px; }
  .op-footer { padding-block: 24px 16px; }
  .op-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 520px) and (max-width: 767px) {
  .v04-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-actions { max-width: 420px; }
}