/* User-requested phone refinements. No rules apply above 650px. */
@media(max-width:650px){
 header .menu-toggle{border:0!important;border-radius:0;background:transparent!important;box-shadow:none;padding:0;width:44px;min-width:44px;height:44px;color:white;display:grid;place-items:center}
 header .menu-toggle span{font-size:0;display:block;width:30px;height:23px;position:relative;background:linear-gradient(currentColor,currentColor) center/100% 3px no-repeat}
 header .menu-toggle span:before,header .menu-toggle span:after{content:'';position:absolute;left:0;right:0;height:3px;background:currentColor;top:0}
 header .menu-toggle span:after{top:auto;bottom:0}
 .hero .tagline{margin-top:18px;line-height:1.3}
 .mobile-engineers{display:block}
 .hero-grid{margin-top:12px}
 .hero-icons .icon--aircon{grid-column:1/-1;width:calc((100% - 16px)/2);justify-self:center}
 .hero-icons .icon--boilers{order:1}.hero-icons .icon--service{order:2}.hero-icons .icon--care{order:3}.hero-icons .icon--heatpumps{order:4}.hero-icons .icon--aircon{order:5}
 .service-grid .boiler-card{min-height:380px}
 .service-grid .boiler-card>.asset{width:100%;height:100%;object-fit:cover}
 .service-grid .small-card{display:block;min-height:260px;background:var(--grey);isolation:isolate}
 .service-grid .small-card>div:first-child{position:relative;z-index:2;width:68%;padding:24px 0 24px 20px;pointer-events:none}
 .service-grid .small-card h3{font-size:25px;white-space:normal;line-height:1.1}
 .service-grid .small-card p{font-size:17px;line-height:1.3;margin-top:16px;max-width:100%;text-wrap:pretty}
 .service-grid .small-card .text-link{font-size:18px;gap:14px;line-height:1.2;pointer-events:auto;margin-top:22px}
 .service-grid .small-card>.asset{position:absolute;inset:0 0 0 auto;display:block;width:65%;height:100%;min-height:0;max-width:none;object-fit:cover;object-position:65% center;background:none;border-radius:0;z-index:0;mask-image:linear-gradient(90deg,transparent 0%,#000 50%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 50%)}
 .service-grid #care-plans{min-height:290px}
 .intro .intro-asset{width:calc(100% + 40px);max-width:none;margin-left:-20px;height:auto;object-fit:contain}
 .accredited-visual{width:calc(100% + 40px);margin-left:-20px}
 .accredited-visual .asset{width:100%;max-width:none;height:auto;object-fit:contain}
 .local>.asset{width:calc(100% + 40px);max-width:none;margin-left:-20px;height:auto;object-fit:contain}
 .benefits>div:nth-child(4):before{background-image:url('assets/benefit-engineer-mobile.svg');background-size:contain}
 .quote-steps{gap:30px}
 .quote-steps li,.quote-steps li+li{grid-template-columns:112px minmax(0,1fr);column-gap:12px;align-items:center;min-height:112px}
 .quote-steps .step-art{width:112px;height:108px;grid-row:1/3;align-self:center}
 .quote-steps .step-art .step-number{top:50%;left:0;transform:translateY(-50%);width:34px;height:34px}
 .quote-steps .step-art .step-illustration{width:70px;height:96px;margin:6px 0 0 40px;object-fit:contain}
 .quote-steps li:nth-child(3) .step-art .step-illustration{width:88px;height:110px;margin:0 0 0 35px;max-width:none}
 .quote-steps h3{font-size:20px;line-height:1.15;align-self:end;min-width:0;text-wrap:balance}
 .quote-steps p{font-size:16px;line-height:1.35;align-self:start;margin-top:8px;text-wrap:pretty}
 .quote-steps .mobile-quote-tail{display:block}
 .reviews .rating>div{display:flex;align-items:center;flex-wrap:nowrap;gap:10px}
 .reviews .rating>div>b{font-size:18px;line-height:1;flex-shrink:0}
 .reviews .rating .review-provider-link{flex-shrink:1;min-width:0}
 .reviews .rating .review-provider-link img{width:112px;height:auto;max-width:100%}
 .reviews .rating .review-stars{width:112px;height:23px;flex-shrink:1;min-width:75px}
 .reviews .rating:first-of-type>div>b{transform:translateY(2px)}
 .reviews .rating:has(.checkatrade-logo)>div>b,.reviews .rating:has(.checkatrade-logo) .review-stars{transform:translateY(-4px)}
 main p,main li{overflow-wrap:normal;text-wrap:pretty}
 main h2,main h3{text-wrap:balance}
 .hero-shell h2,.b-hero-shell h2{text-wrap:wrap}
 .mobile-keep-together{white-space:nowrap}
}
@media(max-width:650px){
 .hero .tagline{font-size:clamp(10px,3.2vw,14px);white-space:nowrap}
 .mobile-engineers{display:inline}
 .quote-steps [data-mobile-quote-break],.quote-steps .mobile-quote-tail{position:static;top:auto;left:auto;width:auto;height:auto;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;padding:0;transform:none}
 .quote-steps [data-mobile-quote-break]{display:inline;white-space:pre}
 .quote-steps .mobile-quote-tail{display:block}
}
@media(max-width:650px){
 .service-grid .small-card>.asset{padding:0!important;mask-image:linear-gradient(90deg,transparent 0%,#000 70%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 70%)}
 .service-grid .boiler-card>.asset{padding:0!important}
}
@media(max-width:650px){
 .quote-steps .mobile-keep-together{position:static;top:auto;left:auto;width:auto;height:auto;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;padding:0;transform:none;display:inline;text-align:inherit}
 .quote-steps .mobile-quote-tail{text-align:inherit}
 .quote-steps li:nth-child(3) .step-art .step-illustration{width:120px;height:130px;margin:-8px 0 0 20px}
}
@media(max-width:650px){.quote-steps li:nth-child(3) .step-art .step-illustration{clip-path:inset(0 35% 10% 0)}}
@media(max-width:650px){.quote-steps li:nth-child(3) .step-art .step-illustration{margin-left:26px;clip-path:inset(0 35% 10% 10%)}}
/* Further phone-only alignment, card readability and banner entrances. */
@media(max-width:650px){
 header .menu-toggle{align-self:center;transform:translateY(-7px)}
 .hero-rating .recommend,.b-hero .hero-rating .recommend{width:100%;max-width:none;white-space:nowrap;font-size:12px;line-height:1.3}
 .hero-rating .recommend br{display:none}
 .hero-rating .recommend [data-mobile-rating-gap]{white-space:pre}
 .service-grid .boiler-card:after{background:rgba(18,44,82,.60);z-index:1}
 .service-grid #repairs p,.service-grid #care-plans p{width:max-content;max-width:calc(100% + 10px)}
 .service-grid #repairs p .reference-line,.service-grid #care-plans p .reference-line{display:block;white-space:nowrap}
 .service-grid #care-plans>div:first-child{width:72%}
 .b-hero h1{animation:mobile-banner-heading-fade 1.8s ease-out 150ms both}
 @keyframes mobile-banner-heading-fade{from{opacity:0}to{opacity:1}}
}
@media(max-width:650px) and (prefers-reduced-motion:reduce){.b-hero h1{animation:none}}

/* Align the visible logo artwork and mobile Contact Us column. */
@media(max-width:650px){
 header>.brand{transform:translateY(3px)}
 header nav .nav-contact{justify-content:flex-start}
 .service-grid .boiler-card>div:not(.asset){z-index:2}
}

/* On phones, Reviews is a peer of Contact Us in the main grid. */
@media(max-width:650px){
 header nav .nav-contact,header nav .nav-submenu,header nav .nav-contact.is-open>.nav-submenu{display:contents}
 header nav .nav-contact-toggle{display:none}
 header nav .nav-submenu{visibility:visible;opacity:1;transform:none}
 header nav .nav-submenu a{padding:0;font-size:18px}
}

/* Start both footer page columns below the Site Links heading on phones. */
@media(max-width:650px){.footer-links>.footer-link-column:nth-child(2){padding-top:calc(18px * 1.15 + 4px)}}

/* Mobile inner-page repairs and Contact service-card consistency. */
@media(max-width:650px){
 .b-oftec .b-oftec-person{align-self:center;margin-inline:auto}
 .s-symptoms{background:var(--navy);height:auto;min-height:268px;padding:20px;border-radius:0 24px 24px 0}
 .s-symptoms:before{display:none}
 .s-symptoms li{padding:8px 0;min-height:47px}
 .s-repair-photos>img:nth-child(2){display:none}
 .s-gas-copy .accreditation-text-link{white-space:nowrap;display:inline-block}
 .ct-contact-cards{order:-1}
 .ct-services .mobile-home-service-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:18px;margin-top:30px}
 .ct-services .mobile-home-service-grid .boiler-card{grid-row:auto;min-height:380px}
 .ct-services .mobile-home-service-grid .small-card{color:var(--navy)}
 .ct-services .mobile-home-service-grid .small-card p{font-weight:500}
 .ct-services .mobile-home-service-grid .small-card h3{margin:0;line-height:1.1}
 .ct-services .mobile-home-service-grid .small-card .text-link{color:var(--navy)}
 .ct-services .mobile-home-service-grid article:is(:hover,:focus-within) h3,.ct-services .mobile-home-service-grid article:is(:hover,:focus-within) .text-link{color:var(--green)}
}

/* Compact mobile closing banners with straight, full-width photographs. */
@media(max-width:650px){
 .boiler-page .b-cta .b-cta-copy{padding:28px 20px}
 .boiler-page .b-cta .b-cta-copy h2{font-size:24px;line-height:1.2;letter-spacing:0;white-space:normal}
 .boiler-page .b-cta .b-cta-copy h2+h2{margin-top:16px}
 .boiler-page .b-cta .b-cta-copy>div{margin-top:22px;gap:12px}
 .boiler-page .b-cta .b-button.supplied-button{width:calc(var(--button-width) * .8);height:42.4px;min-width:0;min-height:0}
 .boiler-page .b-cta .b-cta-photo{display:block;width:100%;height:auto;max-width:none;mask:none;-webkit-mask:none;clip-path:none;border-radius:0;object-fit:cover}
 .boiler-page .b-cta .b-cta-photo[src="assets/boilers/cta-photo.png"]{aspect-ratio:690/318;object-position:right center}
}