/* Keep the original desktop layout; adapt its fixed widths only on smaller screens. */
@media (max-width: 903px) {
  body { padding: 0; }
  #container { width: 100%; }
  #header { height: auto; padding: 12px 16px; }
  #header #logo { position: static; width: 246px; max-width: 100%; }
  #header #logo img { max-width: 100%; height: auto; }
  #header #tag { position: static; margin-top: 12px; font-size: 16px; }
  #header #hline { position: static; width: 100%; margin-top: 10px; }
  #menu-css {
    position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto; height: auto; gap: 8px; margin: 0 16px 20px;
  }
  #menu-css > a { border: 0; }
  #menu-css > a > div {
    position: static; width: auto; padding: 12px 10px !important;
    min-height: 56px; box-sizing: border-box;
  }
  #main_content { overflow-wrap: anywhere; }
  #main_content img { max-width: 100%; height: auto; box-sizing: border-box; }
  #main_content .hline { width: auto; max-width: 100%; }
  #main_content > .hline { margin-right: 20px; }
  div#slideshow {
    width: calc(100% - 40px); height: auto; aspect-ratio: 860 / 280;
    box-sizing: border-box;
  }
  div#slideshow ul#slides, div#slideshow ul#slides li {
    width: 100% !important; height: 100% !important;
  }
  div#slideshow ul#slides li img { display: block; width: 100%; }
  div#slideshow ul#nav { position: absolute; inset: 0; margin: 0; width: 100%; top: calc(50% - 40px); }
  #ss_subtitle { padding: 0 16px; font-size: 18px; }

  /* The legacy tables split headings, content and buttons across rows. Keep each
     topic together visually on phones without duplicating the page content. */
  .home-overview, .home-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 16px 20px; }
  .home-actions { width: auto !important; }
  .home-overview > .hline { display: none; }
  .home-overview table, .home-overview tbody, .home-overview tr,
  .home-actions tbody, .home-actions tr { display: contents; }
  .home_split td { display: block; width: auto !important; padding: 0; min-width: 0; }
  .home_split td.h { border-bottom: 3px solid #ddd; padding-bottom: 5px; }
  .home_split td.h > div { margin-left: 0 !important; }
  .home_split .button { width: auto !important; float: none; display: inline-block; padding: 12px; margin: 0 0 12px; }
  .home-headings td:nth-child(1) { grid-row: 1; }
  .home-headings td:nth-child(2) { grid-row: 4; }
  .home-headings td:nth-child(3) { grid-row: 6; }
  .home-details tr:first-child td:nth-child(1) { grid-row: 2; }
  .home-details tr:first-child td:nth-child(2) { grid-row: 5; }
  .home-details tr:first-child td:nth-child(3) { grid-row: 7; }
  .home-details tr:nth-child(2) td:nth-child(1) { grid-row: 3; }
  .home-details tr:nth-child(2) td:nth-child(2) { display: none; }
  .home-details tr:nth-child(2) td:nth-child(3) { grid-row: 8; }
  .home-actions tr:nth-child(1) td:nth-child(1) { grid-row: 1; }
  .home-actions tr:nth-child(1) td:nth-child(2) { grid-row: 4; }
  .home-actions tr:nth-child(2) td { display: none; }
  .home-actions tr:nth-child(3) td:nth-child(1) { grid-row: 2; }
  .home-actions tr:nth-child(3) td:nth-child(2) { grid-row: 5; }
  .home-actions tr:nth-child(4) td:nth-child(1) { grid-row: 3; }
  .home-actions tr:nth-child(4) td:nth-child(2) { grid-row: 6; }

  .contacts-table, .contacts-table tbody, .contacts-table tr, .contacts-table td { display: block; width: auto; }
  .contacts-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .contacts-table tr { margin-bottom: 16px; }
  .contacts-table td::before { content: attr(data-label) ": "; font-weight: bold; }
  .office-table { width: 100%; table-layout: fixed; }
  .office-table th, .office-table td { width: auto !important; padding-right: 8px; overflow-wrap: anywhere; }

  #main_content form input[type="text"], #main_content form textarea {
    width: 100% !important; max-width: 100%; box-sizing: border-box; font-size: 16px; height: auto; min-height: 40px;
  }
  #main_content form button { min-height: 44px; }
  #main_content form table, #main_content form tbody, #main_content form tr, #main_content form td { display: block; width: 100% !important; }
  #main_content form td > div { height: auto !important; }
  #main_content form table::after { content: ""; display: block; clear: both; }
}

@media (max-width: 480px) {
  #main_content > div > table:not(.contacts-table):not(.office-table) {
    float: none !important; margin: 12px 0 !important; max-width: 100%;
  }
  #main_content h1 { font-size: 26px; line-height: 1.25; }
}