/* ==========================================================================
   Approved mobile design - HOME PAGE ONLY.

   Every rule is inside a mobile media query AND scoped to body.mhome, which
   only mobile-home.js adds, and only on the home page at 900px and below. No rule
   here can reach the desktop layout or any other page.

   The approved design is applied by restyling and reordering the sections the
   page already has. No section is replaced and no copy is rewritten: the
   sections the approved layout leaves out are hidden until the visitor presses
   "View for more info", which returns the page to its original mobile design.
   ========================================================================== */

@media (max-width: 900px) {

  /* ---------- reorder without moving a single DOM node ---------- */
  body.mhome { display: flex; flex-direction: column; background: #fff; padding-bottom: 78px; }

  body.mhome > .topbar            { order: 1; }
  body.mhome > header             { order: 2; }
  body.mhome > .m-quick           { order: 3; }
  body.mhome > [data-m="hero"]    { order: 4; }
  body.mhome > [data-m="reviews"] { order: 5; }
  body.mhome > [data-m="google"]  { order: 6; }
  body.mhome > [data-m="services"]{ order: 7; }
  body.mhome > [data-m="form"]    { order: 8; }
  body.mhome > [data-m="steps"]   { order: 9; }
  body.mhome > [data-m="faq"]     { order: 10; }
  body.mhome > [data-m="projects"] { order: 11; }
  body.mhome > [data-m="photos"]   { order: 12; }
  body.mhome > [data-m="why"]      { order: 13; }
  body.mhome > [data-m="stats"]    { order: 14; }
  body.mhome > [data-m="local"]    { order: 15; }
  body.mhome > [data-m="map"]      { order: 16; }
  body.mhome > [data-m="psource"]  { order: 17; }
  body.mhome > [data-m="more"]     { order: 18; }
  body.mhome > .m-closing         { order: 19; }
  body.mhome > .m-more-wrap       { order: 20; }
  body.mhome > footer             { order: 21; }
  body.mhome > .mcta              { order: 22; }

  /* Nothing on the page is hidden: every section keeps its place here. This
     is only a safety net so a section added later can never vanish. */
  body.mhome > section:not([data-m]) { order: 18; }

  /* ---------- quick actions, directly under the header ---------- */
  body.mhome > .m-quick {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 11px 16px 12px; background: #fff;
  }
  body.mhome .m-q {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 44px; padding: 9px 7px; font-size: 13px; font-weight: 800;
    line-height: 1.2; text-decoration: none; border-radius: 0;
  }
  body.mhome .m-q-call { background: #c0272e; color: #fff; border: 1px solid #c0272e; }
  body.mhome .m-q-est  { background: #fff; color: #c0272e; border: 1px solid #c0272e; }

  /* ---------- hero ---------- */
  body.mhome [data-m="hero"] {
    background-image: none !important; background-color: #132333 !important;
    padding: 27px 22px 24px !important; text-align: center; min-height: 0 !important;
  }
  body.mhome [data-m="hero"] .wrap { padding: 0 !important; max-width: 560px; margin: 0 auto; }
  body.mhome [data-m="hero"] .hero-grid { display: block !important; gap: 0 !important; }
  body.mhome [data-m="hero"] .eyebrow {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    margin: 0 0 10px; display: block;
  }
  body.mhome [data-m="hero"] h1 {
    font-size: 29px; line-height: 1.12; font-weight: 900; color: #fff;
    text-transform: uppercase; letter-spacing: -.7px; margin: 0;
  }
  body.mhome [data-m="hero"] .sub {
    font-size: 16px; font-weight: 700; color: #eef5fc;
    text-transform: none; letter-spacing: 0; margin: 8px 0 0;
  }
  body.mhome [data-m="hero"] p {
    color: #dfe7ef; font-size: 14.5px; line-height: 1.55; margin: 12px 0 0;
  }
  /* kept in the DOM, shown again by the View for more info button */
  body.mhome [data-m="hero"] .hero-ctas,
  body.mhome [data-m="hero"] .hero-badges,
  body.mhome [data-m="hero"] .why-card { display: none !important; }

  body.mhome .m-hero-cta {
    display: block; background: #fff; color: #132b42; border-radius: 7px;
    padding: 13px 14px; margin: 18px 0 10px; text-decoration: none;
    font-size: 21px; font-weight: 700; line-height: 1.15;
  }
  body.mhome .m-hero-cta small {
    display: block; font-size: 17px; font-weight: 700; color: #c0272e; margin-top: 3px;
  }
  body.mhome .m-hero-est {
    display: inline-block; color: #fff; font-size: 13px; font-weight: 700;
    text-decoration: underline; margin-top: 2px;
  }
  body.mhome .m-hero-note { display: block; font-size: 12px; color: #aab7c4; margin: 11px 0 0; }

  /* ---------- shared rhythm for the sections that stay ---------- */
  body.mhome > section[data-m]:not([data-m="hero"]) {
    padding: 34px 18px !important;
  }
  body.mhome > section[data-m] > .wrap { padding: 0 !important; max-width: 560px; margin: 0 auto; }
  /* keep the approved phone proportions on tablets rather than stretching them */
  body.mhome > .m-quick, body.mhome .m-closing > *, body.mhome .m-more-wrap > * { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }

  body.mhome > section[data-m]:not([data-m="hero"]) h2 {
    font-size: 28px !important; line-height: 1.12; font-weight: 900;
    color: #c0272e !important; text-transform: uppercase; letter-spacing: -.5px;
    text-align: center !important; margin: 0 0 12px;
  }
  body.mhome > section[data-m]:not([data-m="hero"]) .eyebrow-pill,
  body.mhome > section[data-m]:not([data-m="hero"]) .eyebrow-pill-dark,
  body.mhome > section[data-m]:not([data-m="hero"]) .eyebrow { display: none !important; }
  body.mhome > section[data-m] .intro-lead {
    text-align: center; font-size: 14.5px; line-height: 1.6; color: #41495a; margin: 0 0 20px;
  }

  /* shared buttons */
  body.mhome .m-btn {
    display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; min-height: 46px; padding: 12px 14px; margin: 10px 0 0;
    border: 1px solid #c0272e; border-radius: 0; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.25;
    text-decoration: none;
  }
  body.mhome .m-btn-solid { background: #c0272e; color: #fff; }
  body.mhome .m-btn-ghost { background: #fff; color: #c0272e; }
  body.mhome .m-btn:focus-visible { outline: 3px solid #12283b; outline-offset: 2px; }

  /* ---------- customer reviews ---------- */
  body.mhome [data-m="reviews"] { background: #fff !important; }
  body.mhome [data-m="reviews"] .pcards { display: grid !important; grid-template-columns: 1fr !important; gap: 14px; }
  body.mhome [data-m="reviews"] .db-shell { box-shadow: none; border-radius: 0; overflow: hidden; }
  body.mhome [data-m="reviews"] .db-core {
    border: 1px solid #e3e6ea; border-top: 4px solid #c0272e !important;
    border-radius: 0; padding: 18px 16px !important;
  }

  /* ---------- Google profile ---------- */
  body.mhome [data-m="google"] { background: #fff !important; }
  body.mhome [data-m="google"] .gtrust-card {
    display: block; text-align: center; border-radius: 0;
    border: 1px solid #e3e6ea; padding: 22px 16px;
  }
  body.mhome [data-m="google"] .gtrust-copy { display: block; }
  body.mhome [data-m="google"] .gtrust-icon { margin: 0 auto 12px; }
  body.mhome [data-m="google"] .gtrust-copy h2 { margin-bottom: 8px; }
  body.mhome [data-m="google"] .gtrust-copy p {
    font-size: 14.5px; line-height: 1.55; color: #41495a; margin: 0;
  }
  body.mhome [data-m="google"] .gtrust-btn {
    display: flex; align-items: center; justify-content: center; width: 100%;
    min-height: 46px; margin: 14px 0 0; border-radius: 0;
    background: #fff; color: #c0272e; border: 1px solid #c0272e;
    font-size: 14px; font-weight: 800;
  }

  /* ---------- services as approved cards ---------- */
  body.mhome [data-m="services"] { background: #fff !important; }
  body.mhome [data-m="services"] .pcards {
    display: grid !important; grid-template-columns: 1fr !important;
    gap: 34px !important; margin-top: 44px !important;
  }
  body.mhome [data-m="services"] .db-shell { box-shadow: none; border-radius: 0; overflow: visible; }
  body.mhome [data-m="services"] .db-core {
    position: relative; border: 1px solid #c0272e; border-radius: 0;
    padding: 44px 17px 18px !important; background: #fff; overflow: visible;
  }
  body.mhome [data-m="services"] .db-core > div:first-child { padding: 0; }
  body.mhome [data-m="services"] .img { display: none !important; }
  body.mhome [data-m="services"] .bd { padding: 0 !important; }
  body.mhome [data-m="services"] .db-core h3 {
    font-size: 20px !important; font-weight: 800; color: #c0272e !important; margin: 0 0 8px !important;
  }
  body.mhome [data-m="services"] .db-core p {
    font-size: 14px !important; line-height: 1.55 !important; color: #41495a !important; margin: 0 !important;
  }
  body.mhome [data-m="services"] .db-core > div:last-child { padding: 14px 0 0 !important; }
  /* the real service-page link becomes the outline button */
  body.mhome [data-m="services"] .db-core > div:last-child > a {
    display: flex !important; align-items: center; justify-content: center;
    width: 100%; min-height: 44px; padding: 11px 12px;
    background: #fff; color: #222 !important; border: 1px solid #222;
    font-size: 13px !important; font-weight: 700 !important; margin-top: 10px;
  }
  body.mhome .m-icon {
    position: absolute; top: -28px; left: 17px; width: 56px; height: 56px;
    border-radius: 50%; background: #c0272e; color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  body.mhome .m-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  body.mhome .m-card-cta { display: flex; margin: 14px 0 0; }

  /* ---------- enquiry form ---------- */
  body.mhome [data-m="form"] { background: #f5f6f8 !important; color: #28303d; }
  body.mhome [data-m="form"] > .wrap > div:first-child p { color: #41495a; }
  body.mhome [data-m="form"] .cta-phone { color: #12283b; }
  body.mhome [data-m="form"] .cta-phone small { color: #6b7482; }
  body.mhome [data-m="form"] .cta-grid { display: block !important; }
  body.mhome [data-m="form"] > .wrap > div:first-child { text-align: center; }
  body.mhome [data-m="form"] .cta-phone { margin: 0 0 18px; text-align: center; }
  body.mhome [data-m="form"] .form {
    background: #fff !important; border: 1px solid #e3e6ea; border-radius: 0;
    padding: 20px 16px !important;
  }
  body.mhome [data-m="form"] .form h3 { font-size: 18px; text-align: center; color: #12283b; }
  body.mhome [data-m="form"] .form .s { text-align: center; }
  body.mhome [data-m="form"] .form .btn { width: 100%; border-radius: 0; }

  /* ---------- steps ---------- */
  body.mhome [data-m="steps"] { background: #fff !important; }
  body.mhome [data-m="steps"] .process-grid {
    grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 4px !important;
  }
  body.mhome [data-m="steps"] .pstep {
    border: 1px solid #e3e6ea; padding: 14px !important; background: #fff;
  }
  body.mhome [data-m="steps"] .pstep .n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 9px; border-radius: 13px;
    background: #c0272e; color: #fff; font-size: 12px; letter-spacing: .04em;
  }
  body.mhome [data-m="steps"] .pstep h3 { font-size: 17px; margin: 9px 0 5px; }
  body.mhome [data-m="steps"] .pstep p { font-size: 14px; line-height: 1.55; }

  /* ---------- faq ---------- */
  body.mhome [data-m="faq"] { background-image: none !important; background-color: #fff !important; color: #41495a; }
  body.mhome [data-m="faq"] .faq-list { margin-top: 6px; }
  body.mhome [data-m="faq"] .faq-item {
    background: #fff; border: 1px solid #e3e6ea; border-radius: 0;
    box-shadow: none; margin-bottom: 10px;
  }
  body.mhome [data-m="faq"] .faq-item.active { border-color: #c0272e; }
  body.mhome [data-m="faq"] .faq-q { color: #12283b; font-size: 15px; padding: 16px; }
  body.mhome [data-m="faq"] .faq-a { color: #41495a; padding: 0 16px; font-size: 14px; }
  /* these links were coloured for the dark panel; the panel is white here */
  body.mhome [data-m="faq"] .faq-a a,
  body.mhome [data-m="faq"] .faq-a a.il { color: #c0272e; }
  body.mhome [data-m="faq"] .faq-item.active .faq-a { padding: 0 16px 16px; }

  /* ---------- the rest of the page ----------
     These sections are not part of the approved mockup, so they keep their own
     colours and artwork and only pick up the mobile rhythm and a single
     column. Nothing on the page is hidden. */
  body.mhome > section[data-m] .pcards,
  body.mhome > section[data-m] .svc-grid,
  body.mhome > section[data-m] .rel-grid,
  body.mhome > section[data-m] .stats-grid,
  body.mhome > section[data-m] .foot-grid,
  body.mhome > section[data-m] .nbh,
  body.mhome > section[data-m] .gal {
    grid-template-columns: 1fr !important; columns: 1 !important;
  }
  /* this section is dark, so its heading stays white */
  body.mhome > section.stats[data-m] h2 { color: #fff !important; }
  body.mhome [data-m="map"] iframe { height: 320px; }
  /* the dark card here carries 40px side padding, too tight at phone width */
  body.mhome [data-m="map"] > .wrap > div + div { padding: 26px 20px !important; }

  /* ---------- closing call to action ---------- */
  body.mhome > .m-closing {
    display: block; background: #12283b; color: #fff;
    padding: 39px 25px 44px; text-align: center;
  }
  body.mhome .m-closing .m-eyebrow {
    display: block; color: #f2b1b4; font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px;
  }
  body.mhome .m-closing h2 {
    font-size: 25px; font-weight: 900; color: #fff; margin: 0 0 10px; line-height: 1.18;
  }
  body.mhome .m-closing p { font-size: 14.5px; color: #cfd8e2; margin: 0 0 4px; line-height: 1.55; }
  body.mhome .m-closing .m-btn-ghost { background: #fff; color: #12283b; border-color: #fff; }

  /* ---------- the View for more info control ---------- */
  body.mhome-ready > .m-more-wrap {
    display: block; padding: 24px 18px 28px; background: #fff; text-align: center;
  }
  body.mhome-ready .m-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; padding: 13px 16px; cursor: pointer;
    background: #fff; color: #c0272e; border: 2px solid #c0272e; border-radius: 0;
    font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1.25;
  }
  body.mhome-ready .m-more:focus-visible { outline: 3px solid #12283b; outline-offset: 2px; }
  body.mhome-ready .m-more-note { font-size: 12px; color: #6b7482; margin: 9px 0 0; }

  /* ---------- bottom navigation ---------- */
  body.mhome > .mcta {
    display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    gap: 0; padding: 6px 4px !important;
    background: #fff; border-top: 1px solid #e3e6ea; align-items: stretch; justify-content: center;
  }
  body.mhome > .mcta > .btn { display: none !important; }
  body.mhome > .mcta > * { max-width: 160px; }
  body.mhome .m-nav {
    flex: 1 1 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; padding: 5px 2px; background: none; border: 0;
    cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700;
    line-height: 1.1; color: #c0272e; text-decoration: none; text-align: center;
  }
  body.mhome .m-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  body.mhome .m-nav-call { background: #c0272e; color: #fff; border-radius: 8px; margin: 0 2px; }
  body.mhome .m-nav:focus-visible { outline: 2px solid #12283b; outline-offset: -2px; }

  /* the back-to-top button has to clear the bottom navigation */
  body.mhome .to-top { bottom: 86px; }

  /* Elements that exist only for the approved design. They are hidden by
     default so the original mobile view is unchanged when mhome is off. */
  .m-quick, .m-closing, .m-more-wrap, .m-hero-cta, .m-hero-est,
  .m-hero-note, .m-icon, .m-card-cta, .m-nav { display: none; }
}

/* Above the mobile breakpoint nothing the script adds is ever shown. */
@media (min-width: 901px) {
  .m-quick, .m-closing, .m-more-wrap, .m-hero-cta, .m-hero-est,
  .m-hero-note, .m-icon, .m-card-cta, .m-nav { display: none !important; }
}