/*
 * Phone layout (up to 767px, Duda's phone breakpoint). Loaded last on every page.
 *
 * Duda generated a separate set of styles for phones. The pages were exported from the desktop
 * version, so the phone-only styles are missing and the desktop ones (fixed widths, large
 * paddings, margin offsets used for free positioning) apply on phones too. This file restores a
 * phone layout: the general rules first, then fixes for the shared header/footer and each page.
 *
 * Duda's element ids are numeric, which CSS cannot use in #id selectors, so elements are
 * selected by their matching u_<id> class. Selectors start with #dm (and .dmBody for page
 * content) so they outrank the page styles' "#dm .dmBody div.u_<id> { ... !important }" rules.
 */
/*
 * Phone and tablet header: once scrolled it turns teal, and the teal logo text disappeared into it.
 * Show the white logo Duda had set as the header's secondary image.
 */
@media (max-width: 1024px) {
  #dm #hamburger-header.scroll-responder_set div.u_1224046994 img {
    content: url("/assets/images/Process-X-FINAL-with-X-colour-options-wHIOTE-01-1920w.png");
  }
}

@media (max-width: 767px) {
  /* ---------- General ---------- */

  /* The home page's inline critical CSS comes from Duda's desktop runtime and pins the page to 768px */
  .dmInner {
    min-width: 0 !important;
  }

  /*
   * Phone font sizes chosen in Duda (m-size-N / m-font-size-N classes). Some were set very small
   * (10px body text, 12px section headings), so each kind of text gets a readable minimum.
   */
  .m-font-size-8, .m-size-8 { --m-fs: 8px; }
  .m-font-size-10, .m-size-10 { --m-fs: 10px; }
  .m-font-size-12, .m-size-12 { --m-fs: 12px; }
  .m-font-size-14, .m-size-14 { --m-fs: 14px; }
  .m-font-size-15, .m-size-15 { --m-fs: 15px; }
  .m-font-size-16, .m-size-16 { --m-fs: 16px; }
  .m-font-size-17, .m-size-17 { --m-fs: 17px; }
  .m-font-size-18, .m-size-18 { --m-fs: 18px; }
  .m-font-size-20, .m-size-20 { --m-fs: 20px; }
  .m-font-size-24, .m-size-24 { --m-fs: 24px; }
  .m-font-size-28, .m-size-28 { --m-fs: 28px; }
  .m-font-size-30, .m-size-30 { --m-fs: 30px; }
  .m-font-size-32, .m-size-32 { --m-fs: 32px; }
  .m-font-size-40, .m-size-40 { --m-fs: 40px; }
  #dm [class*="m-font-size-"],
  #dm [class*="m-size-"] {
    font-size: max(var(--m-fs, 1em), 14px) !important;
  }
  #dm :is(h1, h2) [class*="m-font-size-"],
  #dm :is(h1, h2)[class*="m-size-"] {
    font-size: max(var(--m-fs, 1em), 26px) !important;
  }
  #dm h3 [class*="m-font-size-"],
  #dm h3[class*="m-size-"] {
    font-size: max(var(--m-fs, 1em), 20px) !important;
  }
  #dm :is(h4, h5, h6) [class*="m-font-size-"],
  #dm :is(h4, h5, h6)[class*="m-size-"] {
    font-size: max(var(--m-fs, 1em), 12px) !important;
  }
  .m-text-align-left { text-align: left !important; }
  .m-text-align-center { text-align: center !important; }

  /* Long words in big headings wrap instead of overflowing */
  #dm .dmBody h1, #dm .dmBody h2, #dm .dmBody h3 {
    overflow-wrap: break-word;
  }

  /* Section rows: a consistent phone gutter instead of the desktop padding (up to 150px) */
  #dm .dmBody .dmRespRowsWrapper > .dmRespRow {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Full-width columns drop the desktop margins used to offset them */
  #dm .dmBody .dmRespRow .dmRespCol.small-12 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Text drops the desktop margins/widths used to place it freely */
  #dm .dmBody .dmRespCol > .dmNewParagraph {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  #dm .dmBody img {
    max-width: 100%;
  }

  /* Custom HTML blocks keep the height Duda measured on desktop; let them grow with their content */
  #dm .dmBody div.dmCustomHtml {
    height: auto !important;
  }

  /* ---------- Header and menu (every page) ---------- */

  /* Logo: centred between the hamburger and the edge (the desktop margin pushed it off screen) */
  #dm #hamburger-header div.u_1948746110.dmRespRow {
    padding: 14px 60px !important;
  }
  #dm #hamburger-header div.u_1224046994.imageWidget {
    margin: 0 auto !important;
    width: 170px !important;
    max-width: 100% !important;
  }

  /* Slide-out menu: wide enough for the menu items (they spilled into the page at 137px) */
  #dm .p_hfcontainer #hamburger-drawer.layout-drawer:not([data-origin="top"]) {
    width: 80vw !important;
    max-width: 320px;
  }

  /* ---------- Footer (every page) ---------- */

  #dm .dmFooter div.dmFooterContent.dmRespRow {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Logo, "find us here", LinkedIn, credits and copyright stacked and centred (they sat side by side on desktop) */
  #dm .dmFooter div.u_1267270363.imageWidget {
    margin: 0 auto 16px !important;
  }
  #dm .dmFooter div.u_1305524972.dmNewParagraph {
    margin-top: 0 !important;
  }
  #dm .dmFooter div.u_1919671284.dmSocialHub {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #dm .dmFooter div.u_1139152116.dmCustomWidget {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  #dm .dmFooter .u_1502324972 p.text-align-right {
    text-align: center !important;
  }

  /* ---------- Desktop section spacing that is far too tall on a phone ---------- */

  #dm .dmBody div.u_1438296980, #dm .dmBody div.u_AboutUs, #dm .dmBody div.u_1136908031,
  #dm .dmBody div.u_Capabilities, #dm .dmBody div.u_1943991983, #dm .dmBody div.u_1072457628,
  #dm .dmBody div.u_1225217246, #dm .dmBody div.u_1892080348, #dm .dmBody div.u_1703738299,
  #dm .dmBody div.u_1243667655, #dm .dmBody div.u_1932940947, #dm .dmBody div.u_1255104527,
  #dm .dmBody div.u_Improvement, #dm .dmBody div.u_Robots, #dm .dmBody div.u_1716850908,
  #dm .dmBody div.u_1812447113 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  #dm .dmBody div.u_1610957920, #dm .dmBody div.u_1989889869 {
    padding-bottom: 48px !important;
  }
  #dm .dmBody div.u_1868689270 {
    padding-top: 48px !important;
  }
  #dm .dmBody div.u_1225217246, #dm .dmBody div.u_1203340478 {
    margin-top: 0 !important;
  }

  /* ---------- Home ---------- */

  /* "About us" photo collage: two rows of two photos, then the full-width photo */
  #dm .dmBody div.u_1071805890.dmRespCol {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 24px !important;
  }
  #dm .dmBody .u_1228801287 .dmRespCol,
  #dm .dmBody .u_1216485618 .dmRespCol {
    width: 50% !important;
    margin: 0 !important;
  }
  #dm .dmBody .u_1228801287 .dmSpacer,
  #dm .dmBody .u_1216485618 .dmSpacer {
    width: 100% !important;
    height: 170px !important;
    margin: 0 !important;
  }
  #dm .dmBody div.u_1771195580.imageWidget {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Case study video and "View the Case Study" circle, stacked */
  #dm .dmBody div.u_1648434466.dmRespRow {
    padding: 0 !important;
  }
  #dm .dmBody div.u_1080634485,
  #dm .dmBody .u_1080634485 .innerYoutubeExt,
  #dm .dmBody .u_1080634485 video {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  #dm .dmBody div.u_1014404549.dmShape {
    margin: 24px auto 0 !important;
  }

  /* Testimonial slider: grows to fit the longest testimonial instead of cutting it off at 389px */
  #dm .dmBody div.u_1737077158,
  #dm .dmBody .u_1737077158 .flexslider,
  #dm .dmBody .u_1737077158 .flex-viewport,
  #dm .dmBody .u_1737077158 ul.slides > li {
    height: auto !important;
  }
  #dm .dmBody .u_1737077158 ul.slides > li {
    min-height: 260px;
    padding: 24px 0 !important;
  }
  #dm .dmBody .u_1737077158 ul.slides > li > .slide-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 36px !important;
  }

  /* Sunset banner: no parallax on phones, so the photo covers the whole banner */
  #dm .dmBody div.u_HOWITWORKS {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
    background-attachment: scroll !important;
    background-position: center !important;
    background-size: cover !important;
  }

  /* ---------- Leadership ---------- */

  #dm .dmBody div.u_1846595316.dmRespCol {
    padding: 0 !important;
  }
  #dm .dmBody div.u_1897565808.dmPhotoGallery {
    padding-right: 0 !important;
    margin-top: 24px !important;
  }
  #dm .dmBody .u_1897565808 .photogallery-column {
    width: 100% !important;
  }
  #dm .dmBody .u_1897565808 .layout-container .photoGalleryThumbs .image-container a {
    padding-top: 110% !important;
  }

  /* ---------- Services ---------- */

  #dm .dmBody div.u_1640353626.dmPhotoGallery,
  #dm .dmBody div.u_1047806603.dmPhotoGallery {
    margin-right: 0 !important;
  }
  #dm .dmBody :is(.u_1640353626, .u_1047806603, .u_1494732254) .layout-container .photoGalleryThumbs .image-container a {
    padding-top: 130% !important;
  }
  #dm .dmBody div.u_1494732254 {
    padding-top: 0 !important;
    padding-bottom: 48px !important;
  }

  /* ---------- Use cases ---------- */

  #dm .dmBody :is(.u_1531635405, .u_1469380828, .u_1770412270, .u_1340547863, .u_1032577936).dmRespCol {
    padding: 0 0 32px !important;
    margin-top: 24px !important;
  }
  #dm .dmBody :is(.u_1531635405, .u_1469380828, .u_1770412270, .u_1340547863, .u_1032577936) > .dmNewParagraph {
    margin-top: 0 !important;
  }
  #dm .dmBody :is(.u_1531635405, .u_1469380828, .u_1770412270, .u_1340547863, .u_1032577936) > .dmButtonLink {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 160px !important;
  }
  /* Phone-only infographic banners: show the whole 16:9 image instead of cropping it */
  #dm .dmBody div.u_1902350198, #dm .dmBody div.u_1915180543, #dm .dmBody div.u_1541165468 {
    padding: 0 !important;
    aspect-ratio: 16 / 9;
    background-size: contain !important;
    background-position: center !important;
  }

  /* ---------- Data migration ---------- */

  #dm .dmBody div.u_1086074965.dmNewParagraph {
    text-align: left;
  }
  #dm .dmBody a.u_1622217039.dmButtonLink {
    width: 200px !important;
    height: auto !important;
    margin: 24px auto 0 !important;
  }

  /* ---------- AI agent ---------- */

  #dm .dmBody a.u_1480187815.dmButtonLink {
    width: 200px !important;
    height: auto !important;
    margin: 24px auto 0 !important;
  }

  /* ---------- Case study pages ---------- */

  /* Testimonial: client logo above the quote instead of beside it */
  #dm .dmBody .testimonial-content {
    flex-direction: column !important;
  }

  /* ---------- Capabilities ---------- */

  /* Empty spacer rows that made room for the capabilities block's overflow; not needed once it sizes itself */
  body[data-page-alias="capabilities"] #dm .dmBody div[id="1103255333"],
  body[data-page-alias="capabilities"] #dm .dmBody div.u_1272995816 {
    display: none !important;
  }
}