/* ============================================================
   MOBILE OVERRIDE — static-hosting fix
   The capture is Duda's DESKTOP markup (Duda serves different HTML to phones).
   These rules make the desktop DOM behave responsively on small screens.
   Scoped to <=767px so desktop rendering is untouched.
   ============================================================ */
@media (max-width: 767px) {

  /* 1. Kill the fixed desktop canvas widths that force horizontal scroll */
  #dm .dmInner,
  #dm .dmDesktopBody .dmInner,
  .dmDesktopBody .dmInner,
  .dmInner {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  html:not(.ios-preview) #dm .hasStickyHeader .dmInner div.dmHeaderContainer,
  #dm .dmHeaderContainer {
    min-width: 0 !important;
    width: 100% !important;
    position: relative !important;
  }
  html, body, #dmRoot, #dm, .dmOuter, .dm_wrapper {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 2. Force all grid columns to stack full width */
  #dm .dmRespRow .dmRespCol,
  #dm .dmRespRow .dmRespColsWrapper > .dmRespCol,
  #dm .dmRespCol[class*="large-"],
  #dm .dmRespCol[class*="medium-"] {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #dm .dmRespRow .dmRespColsWrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3. Tame oversized desktop section padding */
  #dm .dmContent .dmRespRow,
  #dm .dmFooter .dmRespRow,
  #dm .dmRespRow,
  .dmLargeBody .dmRespRow {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4. Header: stack logo / address / phone instead of side-by-side */
  #dm .p_hfcontainer div.u_1620453767,
  #dm .dmInner div.u_hcontainer {
    padding: 12px 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  #dm .p_hfcontainer div.u_1919817867,
  div.u_1919817867 {
    width: 190px !important;
    max-width: 60% !important;
    margin: 0 auto 8px !important;
    float: none !important;
    text-align: center !important;
  }
  /* address block: smaller, centered, full width */
  #dm .u_1542403378, #dm .u_1542403378 p,
  #dm .u_1056386419, #dm .u_1056386419 p {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 4px 0 !important;
  }
  #dm .u_1542403378 .font-size-22,
  #dm .u_1542403378 a { font-size: 15px !important; line-height: 1.3 !important; }
  #dm .u_1056386419 .font-size-24,
  #dm .u_1056386419 a { font-size: 19px !important; }

  /* 5. Navigation: wrap into a usable centered block instead of a clipped bar */
  #dm .p_hfcontainer nav.u_1899572983,
  nav.u_1899572983,
  #dm nav.main-navigation.unifiednav {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  #dm .main-navigation.unifiednav > .unifiednav__container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
  }
  #dm .main-navigation.unifiednav .unifiednav__container > .unifiednav__item-wrap {
    flex: 0 0 auto !important;
  }
  #dm .main-navigation.unifiednav .unifiednav__container > .unifiednav__item-wrap > .unifiednav__item {
    padding: 7px 10px !important;
  }
  #dm .p_hfcontainer nav.u_1899572983 .unifiednav__item,
  #dm nav.main-navigation .nav-item-text {
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  /* 6. Hero: scale the oversized display type so it fits */
  #dm .font-size-65, #dm .size-65,
  #dm .font-size-65 > font, #dm .size-65 > font { font-size: 30px !important; line-height: 1.15 !important; }
  #dm .font-size-36, #dm .size-36 { font-size: 22px !important; line-height: 1.2 !important; }
  #dm div.dmContent h1 { font-size: 26px !important; line-height: 1.2 !important; }
  #dm div.dmContent h2,
  #dm div.dmFooter h2,
  #dm div.p_hfcontainer h2 { font-size: 22px !important; line-height: 1.25 !important; }
  #dm div.dmContent h3,
  #dm div.dmFooter h3 { font-size: 18px !important; }
  #dm div.dmNewParagraph p { font-size: 16px !important; }

  /* hero section: sane padding so the headline isn't pushed off-screen */
  #dm .dmBody div.u_1884563125,
  #dm div.u_1908542780 {
    padding: 90px 18px 60px !important;
    background-position: center center !important;
    background-attachment: scroll !important;
  }
  #dm .dmBody div.u_1228148764,
  #dm .dmBody div.u_1967869681 { padding: 40px 18px !important; }

  /* 7. Buttons / CTAs: full width, tappable */
  #dm .dmInner .dmWidget,
  #dm .dmWidget.dmButtonLink,
  #dm a.dmButtonLink {
    width: 100% !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal !important;
    float: none !important;
    left: 0 !important;
  }
  #dm .dmWidget .text { font-size: 16px !important; }

  /* 8. Images and media never exceed viewport */
  #dm img, #dm iframe, #dm .imageWidget img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 9. Photo gallery: single column on phones */
  #dm .photogallery-column,
  #dm .photogallery-column.column-3,
  #dm .photogallery-row {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #dm .photoGalleryThumbs { width: 100% !important; padding: 0 0 18px 0 !important; }
  #dm .photoGalleryThumbs .image-container { width: 100% !important; }

  /* 10. Contact form: full-width fields */
  #dm .dmform .dmforminput,
  #dm .dmform .dmRespDesignCol {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    padding: 0 0 10px 0 !important;
  }
  #dm .dmform input:not([type=submit]),
  #dm .dmform textarea { width: 100% !important; box-sizing: border-box !important; }

  /* 11. Undo desktop-only absolute offsets that push content off-screen */
  #dm .dmBody div[class*="u_"],
  #dm .p_hfcontainer div[class*="u_"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: auto !important;
  }

  /* 12. Elements Duda hides on mobile should stay hidden; ensure the
         mobile-only blocks in the capture can show */
  #dmRoot.responsiveTablet #dm .dmInner .hide-for-small { display: none !important; }
  #dm .dmInner .hide-for-medium,
  #dm .dmInner .hide-for-large { display: block !important; }
}