/* Keep the original desktop design; adapt its fixed columns to smaller screens. */
@media screen and (max-width: 1023px) {
  .constrain {
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: 960px;
  }

  img { max-width: 100%; height: auto; }

  header[role="banner"] { padding: 0 20px; }
  header[role="banner"] h1 { font-size: clamp(34px, 5.5vw, 50px); line-height: 1.1; }
  header[role="banner"] .subheading { line-height: 1.6; }

  .hero-unit-inner {
    box-sizing: border-box;
    height: 370px;
    padding-top: 24px;
    background-size: auto 100%;
  }
  .hero-slogan { width: 48%; }
  .hero-slogan .lead-in { font-size: 36px; }

  .l-sitenav,
  .l-sitenav.affix {
    position: sticky;
    top: 0;
    z-index: 100;
    min-width: 0;
    height: auto;
  }
  .site-nav { padding: 8px 0; white-space: normal; }
  .site-nav .constrain { width: 100%; }
  .site-nav ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; }
  .site-nav ul:after,
  .site-nav ul > li:before { display: none; }
  .site-nav ul > li { border: 0; }
  .site-nav ul > li > a,
  .site-nav ul > li:first-child > a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
  }
  .site-nav ul > li > a:focus-visible { outline: 2px solid white; outline-offset: -3px; }
  .l-content { padding-top: 36px; }

  .profile-alpha { width: 49%; }
  .profile-omega { width: 45%; }
  .services-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .services-overview:before,
  .services-overview:after { display: none; }
  .services-overview > li { display: flex; align-items: center; float: none; width: auto; margin-bottom: 0; }
  .services-overview > li .ico { flex-shrink: 0; margin-right: 16px; }
  .services-overview-text { white-space: normal; }
  .newspaper .container { width: 47%; }
  .newspaper .container:first-child { margin-right: 6%; }
  .tools-menu { width: 100%; }
  .tools-menu .tool > a { display: flex; align-items: center; min-height: 52px; padding-right: 16px; }
  .tools-menu .ico { flex-shrink: 0; }
  .resources-category { width: 33.333%; }
  .resources-category .inner { width: auto; margin-right: 20px; }
  .resources-category li { line-height: 1.5; margin-bottom: 16px; }
  .resources-category li > a { display: block; padding: 8px 0; }
  .contact-alpha { width: 49%; }
  .contact-omega { width: 48%; }
  .contact-omega iframe { display: block; width: 100%; max-width: 100%; }
  .contact-topic-business .landline { display: inline-block; padding: 4px 0; }
  .l-partners { flex-wrap: wrap; gap: 24px; }
  .vcard > dt { margin-bottom: 4px; }
  .site-meta-info { max-width: 60%; }
  .site-meta-actions a { display: inline-block; padding: 12px 0; }
}

@media screen and (max-width: 640px) {
  .constrain { width: calc(100% - 32px); }
  header[role="banner"] { padding: 0 16px; }
  header[role="banner"] h1 { margin-top: 22px; margin-bottom: 10px; }
  header[role="banner"] .subheading { max-width: 320px; margin: 0 auto 18px; }

  .hero-unit-inner {
    height: auto;
    min-height: 390px;
    padding-top: 20px;
    padding-bottom: 240px;
    background-size: auto 250px;
    background-position: right bottom;
  }
  .hero-slogan { width: 100%; }
  .hero-slogan .lead-in { margin: 0 0 12px; font-size: 32px; line-height: 1.15; }
  .hero-slogan small { font-size: 18px; }
  .site-nav ul > li { flex: 0 0 33.333%; font-size: 10px; }
  .site-nav ul > li > a,
  .site-nav ul > li:first-child > a { padding: 8px 6px; }

  .profile-alpha,
  .profile-omega,
  .newspaper .container,
  .contact-alpha,
  .contact-omega { float: none; width: 100%; }
  .profile-omega { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .profile-omega img { width: 100%; margin-bottom: 0; }
  .newspaper .container:first-child { margin-right: 0; }
  .metz-topic > p,
  #profile .body,
  .services-detail p,
  .services-detail ul { font-size: 16px; line-height: 1.7; text-align: left; }
  .services-intro,
  .tools-intro,
  .resources-intro { width: 100%; padding-top: 0; margin-bottom: 28px; }
  .metz-topic h1 { font-size: 28px; }
  .services-overview { grid-template-columns: minmax(0, 1fr); margin-bottom: 36px; }
  .services-overview > li { font-size: 17px; }
  .services-detail .accounting-services { margin-left: 20px; }
  .tools-menu .tool { float: none; width: 100%; margin-bottom: 20px; }
  .tools-menu .tool > a { padding-right: 0; font-size: 17px; }
  .resources-category { float: none; width: 100%; margin-bottom: 28px; text-align: left; }
  .resources-category .inner { margin-right: 0; }
  .resources-category h2 { margin-top: 16px; }
  .resources-category li { margin-bottom: 8px; font-size: 16px; }
  .resources-category li > a { min-height: 28px; }
  .topic-quote { margin-top: 24px; margin-bottom: 28px; }
  .topic-quote > p { font-size: 28px; line-height: 1.15; }
  .topic-quote br { display: none; }
  .topic-quote > cite { font-size: 13px; line-height: 1.6; }
  .contact-omega { margin-top: 24px; }
  .contact-omega iframe { height: 260px; }
  .l-partners .vcard { float: none; flex: 0 0 170px; }
  .site-footer > .pull-left,
  .site-footer > .pull-right { float: none; max-width: none; }
  .site-meta-info { line-height: 1.6; }
  .site-meta-actions { margin-top: 12px; }
  .site-meta-actions li { padding-right: 6px; padding-left: 6px; }

  .modal,
  .modal.fade.in {
    box-sizing: border-box;
    top: 16px;
    left: 16px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin-left: 0;
    padding-bottom: 0;
    overflow-y: auto;
  }
  .modal-header { position: sticky; top: 0; z-index: 1; padding: 12px 16px; background: white; }
  .modal-header h3 { padding-right: 36px; font-size: 24px; }
  .modal-header button.close { width: 44px; height: 44px; margin-top: -8px; opacity: 0.7; }
  .modal-body { max-height: none; padding: 16px; font-size: 16px; }
  .modal-body p { font-size: 16px; line-height: 1.6; text-align: left; }
}