/* Original Wix mobile composition, measured at 390px. Load after homepage.css. */
.mobile-information,
.mobile-gas-safe {
  display: none;
}

@media (max-width: 750px) {
  /* Keep the original cutout overlap vertically without creating sideways scroll. */
  html, body { overflow-x: clip; }

  .masthead {
    height: 15.06410256vw;
    padding: 0 4.8%;
  }
  .brand { position: absolute; left: 4.8%; width: 37%; max-width: none; }
  .menu-toggle { font-size: 0; padding: 8px 0; margin-left: auto; margin-right: 2.38vw; }
  .menu-toggle span { display: block; width: 34px; height: 24px; font-size: 0; background: linear-gradient(to bottom, white 0 2px, transparent 2px 11px, white 11px 13px, transparent 13px 22px, white 22px 24px); }
  .masthead nav { top: 15.06410256vw; }
  .information-bar { display: none; }
  .mobile-information { display: block; font-family: Poppins, sans-serif; }
  .mobile-call {
    height: 8.13333333vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3em;
    background: var(--yellow);
    color: var(--navy);
    font-size: 3.58974359vw;
    white-space: nowrap;
  }
  .mobile-promises {
    height: 8.61282051vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--navy);
    font-size: 3.07692308vw;
  }
  .mobile-promises > * {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
  }
  .mobile-promises img { width: 4.6vw; height: 4.6vw; object-fit: contain; }

  .hero { height: 111.27692308vw; }
  .hero h1,
  .hero h2 {
    top: 18.33333333vw;
    left: 12.75128205%;
    width: 77.58974359%;
    transform: none;
    font-size: 14.1025641vw;
    line-height: 1;
  }
  .hero-slide > img { object-position: center; }
  .hero-arrow { top: 50%; width: 32px; }
  .hero-arrow svg { width: 32px; }
  .hero-arrow.previous { left: 3.84%; }
  .hero-arrow.next { right: 3.84%; }
  .mobile-gas-safe {
    display: block;
    position: absolute;
    z-index: 2;
    left: 62.66666667%;
    top: 62.33333333vw;
    width: 22.97435897%;
    height: auto;
  }
  .blue-divider { height: 2.03076923vw; }

  .boiler-promotion { height: 92.6974359vw; min-height: 0; }
  .boiler-cutout {
    left: 34.37692308%;
    top: -8.24102564vw;
    width: 66.85641026%;
    height: auto;
    transform: none;
  }
  .boiler-promo { left: 1.42564103%; top: 11.48717949vw; width: 57.18205128%; }
  .promo-copy { left: 10.30769231%; top: 46.26923077vw; font-size: 5.07692308vw; }
  .call-today {
    left: 10.9375%;
    top: 65.12820513vw;
    width: 25.8974359%;
    height: 7.17948718vw;
    border-radius: 1.5625vw;
    font-size: 3.07692308vw;
  }

  .services-overview { height: 83.87820513vw; min-height: 0; }
  .services-overview h2 {
    left: 7.39487179%;
    top: 11.30769231vw;
    font-size: 8.97435897vw;
    line-height: 1;
    white-space: nowrap;
  }
  .services-overview ul {
    left: 7.39487179%;
    top: 27.5vw;
    width: 50%;
    font-size: 4.1025641vw;
    line-height: 2;
    text-align: left;
  }
  .services-overview img {
    left: 59.48717949%;
    top: 27.82051282vw;
    width: 51.53846154%;
    height: 45.79487179vw;
    border-radius: 5.64102564vw;
  }
  .why-choose {
    height: 67.01025641vw;
    min-height: 0;
    padding: 0;
    background: #024776;
  }
  .why-choose h2 {
    position: absolute;
    left: 8.17435897%;
    top: 10.35128205vw;
    margin: 0;
    font-size: 8.97435897vw;
    line-height: 1;
  }
  .why-choose ul {
    position: absolute;
    left: 8.17435897%;
    top: 24.61538462vw;
    width: 84%;
    font-size: 4.1025641vw;
    line-height: 2;
    text-align: left;
  }

  .service-panel {
    --content-top: 101.7vw;
    --card-top: 95.99759615vw;
    --card-colour: rgba(0, 91, 153, .75);
    height: 179.48717949vw;
    min-height: 0;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .92), rgba(4, 18, 59, 0)), var(--photo);
    background-size: 100% 60.50128vw, cover;
    background-position: center bottom, center;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
  .service-panel::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--card-top);
    width: 91.02564103%;
    height: 58.97435897vw;
    border-radius: 0 4.61538462vw 4.61538462vw 0;
    background: var(--card-colour);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .service-panel::after {
    content: '';
    position: absolute;
    left: 9.0125%;
    top: calc(var(--card-top) + 51.15384615vw);
    width: 75.46474359%;
    height: 5px;
    background: linear-gradient(to right, var(--bright) 94.85%, var(--yellow) 94.85%);
  }
  .service-content,
  .service-kitchens .service-content,
  .service-bathrooms .service-content,
  .service-heating .service-content,
  .service-repairs .service-content {
    top: var(--content-top);
    bottom: auto;
    left: 9.0125%;
    right: 5.12820513%;
    width: auto;
    z-index: 1;
  }
  .service-kitchens { --content-top: 98.11538462vw; --card-top: 93.22766426vw; --card-colour: rgba(4, 18, 59, .75); }
  .service-bathrooms { --content-top: 94.27692308vw; --card-top: 88.50260417vw; }
  .service-heating { --content-top: 98.64102564vw; --card-top: 92.93862179vw; --card-colour: rgba(4, 18, 59, .75); }
  .service-repairs { --content-top: 92.75641026vw; --card-top: 87.05400641vw; }
  .service-content h2 { font-size: 8.97435897vw; line-height: 1; white-space: nowrap; }
  .service-content p,
  .service-kitchens p,
  .service-bathrooms p,
  .service-heating p,
  .service-repairs p {
    width: 77.896%;
    max-width: none;
    font-size: 3.07692308vw;
    line-height: 1.1;
    margin: 1.79487179vw 0 3.33333333vw;
  }
  .service-kitchens p { width: 80.5313%; }
  .service-bathrooms p { width: 65%; }
  .service-repairs p { width: 70%; }
  .read-more { width: 104px; height: 31px; border-radius: 6px; font-size: 12px; }

  .project-gallery { height: 163.55384615vw; }
  .gallery-track { height: 100%; }
  .gallery-arrow { width: 36px; height: 36px; font-size: 38px; line-height: 26px; }

  .testimonials { height: auto; min-height: 222.38461538vw; padding: 5.8vw 6.3vw; }
  .testimonial-grid { width: 100%; gap: 5.45vw; grid-template-columns: 1fr; }
  .testimonial-grid blockquote {
    height: auto;
    min-height: 66.62820513vw;
    border-radius: 4.61538462vw;
    padding: 5.12820513vw 6.15384615vw;
  }
  .testimonial-grid svg { width: 7.69230769vw; height: 6.41025641vw; margin-bottom: 4.1025641vw; }
  .testimonial-grid p { font-size: 3.58974359vw; line-height: 1.6; }
  .testimonial-grid cite { font-size: 4.1025641vw; line-height: 1.6; margin-top: 4.61538462vw; }

  .contact-footer { height: auto; min-height: max(213.94871795vw, calc(82.39487179vw + 495px)); display: block; padding: 0; }
  .contact-details { position: absolute; left: 11.86153846%; top: 5.84358974vw; width: 79%; font-size: 3.58974359vw; line-height: 1.3; }
  .contact-details h2 { font-size: 8.97435897vw; line-height: .9; margin-bottom: 3.07692308vw; }
  .contact-details h3 { font-size: 6.66666667vw; line-height: 1.1; margin-bottom: 2.05128205vw; }
  .contact-details p { margin-top: 3.84615385vw; }
  .contact-form {
    position: absolute;
    top: 82.39487179vw;
    left: 9.62820513%;
    width: 80.74358974%;
    height: auto;
    min-height: 451px;
    padding: 24px;
    gap: 24px;
  }
  .contact-form input:not([type=hidden]),
  .contact-form textarea { font-family: Madefor, Arial, sans-serif; }
  .contact-form button { margin-top: 0; }
  .copyright { bottom: 5px; font-size: 12px; }
}