/* Responsive layer for the legacy 021 Escort table layout. */
html,
body.site-021-page {
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
}

body.site-021-page,
body.site-021-page * {
  box-sizing: border-box;
}

.mobile-nav-021 {
  display: none;
}

/* Replace the browser's default blue/purple link text with green. */
body.site-021-page a:link,
body.site-021-page a:visited {
  color: #008000;
}

body.site-021-page .footer-contact-details a,
body.site-021-page .footer-copyright-row a {
  color: #fff;
}

/* Keep each city model's photo and caption together as one card. */
body.page-021-city .model-grid .model-card {
  width: 25%;
  padding: 10px 8px 18px;
  vertical-align: top;
  text-align: center;
  overflow: hidden;
}

body.page-021-city .model-grid .model-card img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

body.page-021-city .model-card-caption {
  width: 100%;
  padding-top: 8px;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Homepage introductions: heading image followed immediately by its text. */
body.page-021-root .home-intro-grid,
body.page-021-root .home-intro-grid > tbody {
  width: 100% !important;
}

body.page-021-root .home-intro-grid > tbody > tr > td {
  width: 100% !important;
}

body.page-021-root .home-intro-heading {
  width: 100%;
  padding: 14px 10px 6px;
  text-align: center;
}

/* Shared footer order on every page: form, contact details, QR codes,
   and copyright as the final line. */
body.site-021-page table:has(> tbody > .order-contact-row),
body.site-021-page table:has(> tbody > .order-contact-row) > tbody {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.site-021-page .order-contact-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  justify-items: center;
}

body.site-021-page .order-contact-row > td {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}

body.site-021-page .footer-form-cell {
  order: 1;
  padding: 20px 12px !important;
}

body.site-021-page .footer-contact-details {
  order: 2;
  min-width: 100% !important;
  justify-self: stretch;
  padding: 14px 12px !important;
}

body.site-021-page .footer-form-cell form {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

body.site-021-page .footer-qr-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 180px));
  justify-content: center;
  gap: 18px;
  width: 100% !important;
  padding: 18px 12px;
}

body.site-021-page .footer-qr-row > td {
  display: block !important;
  width: 100% !important;
  text-align: center;
}

body.site-021-page .footer-qr-row > td:last-child {
  display: none !important;
}

body.site-021-page .footer-copyright-row,
body.site-021-page .footer-copyright-row > td {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

body.site-021-page .footer-copyright-row > td {
  padding: 16px 12px 22px !important;
  border-top: 1px solid #444;
}

@media (max-width: 1100px) {
  body.site-021-page {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    background: #fff;
    overflow-x: clip;
  }

  .mobile-nav-021 {
    display: flex;
    position: relative;
    z-index: 20;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    background: #202020;
    border-bottom: 3px solid #e25050;
  }

  .mobile-nav-021 a {
    color: #fff;
    font: 700 13px/1.4 Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
  }

  body.site-021-page > table,
  body.site-021-page table[width] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.site-021-page table,
  body.site-021-page tbody,
  body.site-021-page tr,
  body.site-021-page td {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.site-021-page table[height],
  body.site-021-page tr[height],
  body.site-021-page td[height] {
    height: auto !important;
    min-height: 0 !important;
  }

  body.site-021-page img {
    max-width: 100% !important;
    height: auto !important;
  }

  body.site-021-page p,
  body.site-021-page td,
  body.site-021-page a,
  body.site-021-page span,
  body.site-021-page div {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body.site-021-page input,
  body.site-021-page textarea,
  body.site-021-page select {
    max-width: 100% !important;
  }

  /* The four homepage introductions need readable, full-width rows on
     tablets and phones instead of four squeezed legacy table columns. */
  body.page-021-root .home-intro-grid,
  body.page-021-root .home-intro-grid > tbody {
    display: block !important;
    width: 100% !important;
  }

  body.page-021-root .home-intro-grid > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.page-021-root .home-intro-grid > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 10px 16px !important;
  }

  body.page-021-root .home-intro-grid > tbody > tr > td {
    padding-top: 2px !important;
    padding-bottom: 22px !important;
    line-height: 1.65;
  }

  /* On the service page, place the service list and its image on their own
     rows so neither is forced into a narrow side-by-side column. */
  body.page-021-root .service-types-layout,
  body.page-021-root .service-types-layout > tbody {
    display: block !important;
    width: 100% !important;
  }

  body.page-021-root .service-types-layout > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.page-021-root .service-types-layout > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 8px !important;
  }

  body.page-021-root .service-types-layout > tbody > tr > td:last-child {
    text-align: center;
  }

  body.page-021-root .service-types-layout > tbody > tr > td:last-child img {
    width: auto !important;
    max-width: 100% !important;
    margin: 8px auto 0;
  }

  /* Shared text-and-image sections used by root and service detail pages. */
  body.site-021-page .content-split-layout,
  body.site-021-page .content-split-layout > tbody {
    display: block !important;
    width: 100% !important;
  }

  body.site-021-page .content-split-layout > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.site-021-page .content-split-layout > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    line-height: 1.65;
  }

  body.site-021-page .content-split-layout img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto;
  }

  /* Display the services below “We Offer...” as two items per row. */
  body.site-021-page .service-offer-grid,
  body.site-021-page .service-offer-grid > tbody {
    width: 100% !important;
  }

  body.site-021-page .service-offer-grid {
    display: block !important;
  }

  body.site-021-page .service-offer-grid > tbody {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.site-021-page .service-offer-grid > tbody > tr {
    display: contents !important;
  }

  body.site-021-page .service-offer-grid > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    min-height: 42px;
    padding: 10px 14px !important;
  }

  body.site-021-page .order-contact-row {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
    padding: 12px;
    justify-items: center;
  }

  /* Release the legacy table-layout width calculation around the footer.
     Without this, colspan/rowspan can shrink the grid row to about 120px. */
  body.site-021-page table:has(> tbody > .order-contact-row),
  body.site-021-page table:has(> tbody > .order-contact-row) > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.site-021-page .order-contact-row > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 6px !important;
    text-align: center !important;
  }

  body.site-021-page .order-contact-row > td > form,
  body.site-021-page .order-contact-row > td > form > table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body.site-021-page .order-contact-row > td > form {
    max-width: 640px !important;
    margin: 0 auto !important;
  }

  body.site-021-page .order-contact-row > td:first-child {
    max-width: 760px !important;
    margin: 0 auto !important;
  }

  body.site-021-page .order-contact-row table,
  body.site-021-page .order-contact-row tbody,
  body.site-021-page .order-contact-row tr,
  body.site-021-page .order-contact-row td {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.site-021-page .order-contact-row input:not([type="hidden"]),
  body.site-021-page .order-contact-row textarea,
  body.site-021-page .order-contact-row select {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.site-021-page .model-grid,
  body.site-021-page .model-grid > tbody {
    display: block;
    width: 100% !important;
  }

  body.site-021-page .model-grid > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  body.site-021-page .model-grid > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 6px !important;
    text-align: center;
  }

  body.page-021-model .model-profile,
  body.page-021-model .model-profile > tbody {
    display: block;
    width: 100% !important;
  }

  body.page-021-model .model-profile > tbody > tr:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  body.page-021-model .model-profile > tbody > tr:first-child > td {
    display: block;
    width: 100% !important;
    padding: 8px !important;
  }

  body.page-021-model table[bgcolor="#E25050"] > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-021-model table[bgcolor="#E25050"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 7px !important;
  }

  body.site-021-page > table > tbody > tr:nth-last-child(-n + 2),
  body.site-021-page > table > tbody > tr:nth-last-child(-n + 2) > td,
  body.site-021-page > table > tbody > tr:nth-last-child(-n + 2) table {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 430px) {
  .mobile-nav-021 {
    gap: 8px 12px;
  }

  .mobile-nav-021 a {
    font-size: 12px;
  }

  body.site-021-page .order-contact-row {
    padding-right: 4px;
    padding-left: 4px;
  }

  body.site-021-page .order-contact-row > td,
  body.site-021-page .order-contact-row table td {
    padding-right: 3px !important;
    padding-left: 3px !important;
  }
}