.Global_Book_Service, .Global_phone_number1, .RedButton {
    color: #fff;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 700
}


/*Blue - #00f */
/*Orange - #f88f19 */
/*Brick - #1991CB  */
/*Brick:hover - #157AAD  */


#navbarMenu, .font-Roboto-Bold, .navbaTop {
    
}
.Top-Main-Block .ul-main li, .Top-Main-Block .ul-main-normal li, .global-ul-main li {
    text-indent: -16px;
    margin: 14px 0;
    padding-left: 40px
}
.List-Of-Areas li, .global-ul-main, .ul-list-of-advantages {
    list-style-type: none
}
.Book-Page.Contacts .TechnicianDetails .Row a:link, body {
    color: #333
}

@font-face {
    font-family: "Roboto-Black";
    font-style: normal;
    src: local("Roboto-Black"), url("/fonts/Roboto-Black.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Roboto-Bold";
    font-style: normal;
    src: local("Roboto-Bold"), url("/fonts/Roboto-Bold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Roboto-Light";
    font-style: normal;
    src: local("Roboto-Light"), url("/fonts/Roboto-Light.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Roboto-Regular";
    font-style: normal;
    src: local("Roboto-Regular"), url("/fonts/Roboto-Regular.woff2") format("woff2");
    font-display: swap;
}


body {
    margin: 0;
    font-family: "Roboto-Regular", sans-serif;
    font-size: 14px;
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background: url(/files/row_bg.png) #e8e8e8
}
h1, h2, h3 {
    font-weight: 700 !important
}
.MainWidth {
    max-width: 1140px;
    margin: 0 auto;
    background-color: #fff
}
#List_Advantages, #navbarMenu .RightParallelogramm, .Top-Promo-Block, .navbaTop {
    background-color: #1991CB;
}
/* Header brand lockup (mobile/tablet header only).
   logo2.png is the mark on its own; the wordmark next to it is live text rather than
   the raster wordmark baked into logo.png. Roboto-Black is the heaviest bundled face
   and the closest match to that wordmark. #0047A7 is sampled from the wordmark in
   logo.png; the mark itself is #00366A.
   This markup only exists inside #navbarCollapse, which is hidden above 940px, so the
   desktop header (#navbarMenu, still using logo.png at .MainTopLogo) is unaffected. */
.BrandLockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}
.MobileMainTopLogo {
    width: 46px;
    max-width: 46px !important;
    height: auto;
    padding: 4px 0
}
/* Two-line stack. The sizes and tracking below are chosen so the two lines come out
   near-identical in width (about 133px), which is what makes the lockup read as
   deliberately set rather than as an image with text next to it. Changing one line's
   size means retuning the other's letter-spacing to keep the edges flush. */
.BrandWordmark {
    font-family: Roboto-Black, Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.04;
    color: #0047A7;
}
.BrandWordmark .bw-1 {
    display: block;
    font-size: 16px;
    letter-spacing: .2px;
}
.BrandWordmark .bw-2 {
    display: block;
    font-size: 11.4px;
    letter-spacing: 1.32px;
}
:root {
    --primary: #1e60aa;
    --secondary: #ff4917;
    --light: #edf1fc;
    --dark: #17224d
}
.table-data {
    display: table;
    width: 100%;
    border-spacing: 0px
}
.table-data .cell {
    display: table-cell
}
.table-data .row {
    display: table-row
}
.AlignRight {
    text-align: right;
    margin-left: auto
}
.AlignLeft {
    text-align: left;
    margin-left: auto
}
#navbarMenu, .navbaTop {
    margin: 0 auto;
    padding: 0
}
.Global_Book_Service, .Global_phone_number1 {
    padding: 8px 12px;
    display: inline-block
}
.navbaTop .Item {
    margin: 0 8px;
    display: inline-block
}
#navbarCollapse .dropdown-menu a:active, .navbaTop .Item a {
    color: #fff
}
.font-Roboto-Black {
    font-family: Roboto-Black
}
.font-Roboto-Light {
    font-family: Roboto-Light
}
.font-Roboto-Bold {
    font-family: "Roboto-Bold";
}
.Global_Book_Service, .Global_phone_number1, .RedButton, .font-Roboto-Regular {
    font-family: Roboto-Regular
}
.ChangeOpacity, .ChangeOpacity_09 {
    opacity: 1;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out
}
.ChangeOpacity:hover {
    opacity: .7
}
.ChangeOpacity_09:hover {
    opacity: .8
}
.Top-Promo-Block {
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    font-weight: 700
}
#navbarMenu .Top_AddressBlock {
    text-align: right;
}
#navbarMenu .Top_AddressBlock .Item {
    margin: 0 8px;
    display: inline-block;
    padding: 6px 4px
}
#navbarMenu .Top_AddressBlock a, .List-Of-Areas a, .Sub-Item-link-Global {
    text-decoration: none
}
#navbarMenu .Top_AddressBlock a:hover, .List-Of-Areas a:hover, .footer .botton-links:hover {
    text-decoration: underline
}
#navbarMenu .Top_AddressBlock i {
    margin-right: 2px
}
#navbarMenu .Top_AddressBlock .Item.phone_number {
    color: #ff4917;
    font-family: Roboto-Regular;
    font-weight: 700
}
#navbarMenu .Top_AddressBlock .Item.phone_number a {
    color: #ff4917;
    font-size: 18px;
    text-decoration: none
}
#navbarMenu .Details {
    padding: 6px 0 2px 4px;
    color: #fff;
    display: inline-block;
    float: left
}
.Global_phone_number1 {
    margin-right: 4px;
    font-size: 14px;
    background-color: #ff4917
}
.GlobalClearLink, .Global_Book_Service a, .Global_phone_number1 a, .RedButton a, .RedButton a:hover, .footer .Location-block a, .footer .h4_link {
    color: #fff;
    text-decoration: none
}
.Global_Book_Service .bi-wrench-adjustable::before, .Global_phone_number1 .bi-telephone-fill::before {
    margin-right: 4px
}
.Global_Book_Service {
    font-size: 14px;
    background-color: #0d6efd
}
.RedButton {
    display: inline-block;
    font-size: 14px;
    background-color: #1991CB;
    padding: 1rem 16px; text-align:center; text-decoration:none;
}
.RedButton:hover {
    cursor:pointer;
    background-color: #157AAD;
}
.btn {  }
.btn:hover { cursor:pointer; }
.GlobalContentPadding { padding: 20px 40px;}
.GlobalContentPadding2 { padding: 2px 40px; }
.GlobalPaddingLeft { padding-left: 40px !important; line-height: 160%; }
.GlobalPaddingLeft h2 { padding: 4px 0; margin:4px 0; }
.GlobalPaddingRight { padding-right: 40px !important; line-height: 160%; }
.GlobalPaddingRight h2 { padding: 4px 0; margin: 4px 0; }

.GlobalTextJustify {
        text-align: justify
    }
.GlobalNumberList li::marker {
    font-size: 18px
}
#navbarMenu .Dicount-Image {
    width: 94px;
    cursor: pointer
}
#navbarMenu .BlockMenu {
    padding-top: 20px
}
#navbarMenu .menu_item { display: inline-block; position: relative; font-family: "Roboto-Bold"; }
#DefDetailsAreas, #MenuNavigate .Popup-submenu, #MobileContacts, #book_state_loading, #navbarCollapse, #navbarCollapse .cell5, #navbarMenu .Popup-submenu, #state_loading, .back-to-top {
    display: none
}
#navbarMenu .menu-phone-number {
    font-size: 18px;
    color: #c5292c;
    text-decoration: none
}
#navbarMenu .menu_item > .ItemMenu {
    text-transform: uppercase;
    padding: 4px 14px;
    cursor: pointer
}
#MenuNavigate .Sub-Item-link:hover, #MenuNavigate .menu_item > .ItemMenu:hover, #navbarCollapse .dropdown-menu a:hover, #navbarMenu .Sub-Item-link:hover, #navbarMenu .menu_item > .ItemMenu:hover, .footer .btn.btn-social:hover {
    color: #f88f19;
}
#navbarMenu .Popup-submenu .Sub-Item {
    border-bottom: 1px solid #ebebeb;
    text-align: left;
    text-decoration: none;
    color: #2e2e2e;
    display: block;
    padding: 6px 8px;
    font-size: 14px
}
#MenuNavigate .Popup-submenu .Sub-Item:hover, #navbarMenu .Popup-submenu .Sub-Item:hover {
    background-color: #e9ecef; color:#f88f19;
}
#MenuNavigate .Popup-submenu .Sub-Item:active, #navbarMenu .Popup-submenu .Sub-Item:active {
    background-color: #1991CB; color: #fff;
}
#navbarMenu .menu_item:hover .Popup-submenu {
    position: absolute;
    width: 240px;
    padding: 12px 0 4px;
    left: -20px;
    z-index: 5;
    background-color: #fff;
    box-shadow: 0 8px 10px rgb(0 0 0 / 30%);
    display: block
}
#navbarCollapse .appliance-icon, #navbarMenu .Popup-submenu .appliance-icon {
    width: 24px;
    vertical-align: middle;
    padding-bottom: 2px;
    margin: 0 10px 0 8px
}
#navbarCollapse .area-icon, #navbarMenu .Popup-submenu .area-icon {
    width: 20px;
    vertical-align: middle;
    padding-bottom: 2px;
    margin: 0 6px 0 4px
}
#MenuNavigate .Sub-Item-link, #navbarMenu .Sub-Item-link {
    text-decoration: none;
    color: #2e2e2e
}
#MenuNavigate .Popup-submenu .Brand_Padding, #navbarMenu .Popup-submenu .Brand_Padding {
    padding-left: 14px
}
#MenuNavigate .Popup-submenu .LastElement, #navbarMenu .Popup-submenu .LastElement {
    text-align: right
}
#navbarMenu .fa-phone-alt::before, #navbarMenu .fa-wrench::before {
    margin-right: 6px;
    font-size: 16px
}
.HomeStarLogo {
    width: 90px;
    margin-top: 10px
}
.back-to-top {
    position: fixed;
    right: 45px;
    bottom: 45px;
    z-index: 99
}
.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid #fff;
    border-radius: 35px;
    transition: .3s
}
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
    transition: .3s;
    text-decoration: none
}
.footer .btn.btn-link::before {
    margin-right: 4px;
    vertical-align: middle
}
.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none
}
.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256,256,256,.1)
}
.footer .copyright a {
    color: var(--light);
    margin: 8px 0
}
.footer .bi-facebook::before {
    font-size: 18px;
    margin-top: 4px
}
.footer .bi-instagram::before {
    font-size: 18px;
    margin: 4px 0 0 2px
}
.footer .botton-links {
    margin: 0 8px;
    text-decoration: none
}
.footer .BlockBrand, .footer .BlockCity {
    margin: 4px 14px 2px 0;
    font-size: 12px;
    display: inline-block
}
.footer ul {
    padding: 0
}
.footer .BlockCity {
    width: 40%;
    border-bottom: 1px dotted #9b9b9b
}
.footer .BlockBrand a, .footer .BlockCity a {
    color: #fff;
    text-decoration: none;
    cursor: pointer
}
.footer .BlockCity a:hover {
    color: #ed1c24
}
.footer .BlockBrand {
    vertical-align: top;
    width: 15%
}
.footer .BlockBrand a:hover {
    color: #64a3ff
}
.footer .ul-brands {
    max-height: 420px;
    overflow: auto
}
.footer .ul-brands .item {
    padding: 0 0 4px 14px
}
.footer .Location-block {
    display: inline-block;
    padding: 2px 4px
}
.footer .Location-block a:hover, .footer .h4_link:hover {
    text-decoration: underline;
    cursor: pointer
}
.footer .AddressSplit {
    border-right: 1px solid #cdcdcd;
    padding: 0 14px
}
.footer .Location-block:last-child {
    margin-right: 34px
}
.Top-Main-Block .bi-check-square-fill::before, .global-ul-main .bi-check-square-fill::before {
    color: #ed1c24;
    margin-right: 8px;
    font-size: 18px
}
#navbarCollapse .dropdown-item.menu-padding {
    padding: 10px 30px 10px 4px
}
#navbarCollapse .dropdown-item.area-padding {
    padding: 6px 30px 6px 4px
}
#navbarCollapse .dropdown-menu {
    padding-bottom: 0
}
#section_001 .image_bg, #section_dishwasher .image_bg, #section_dryer .image_bg, #section_freezer .image_bg, #section_fridge .image_bg, #section_oven .image_bg, #section_stove .image_bg, #section_washer .image_bg {
    min-height: 440px;
    padding: 30px 0;
    background-position: top
}
#navbarCollapse .RightPhoneBlock {
    margin-right: 1rem
}
#navbarCollapse .cell {
    vertical-align: middle
}
#navbarCollapse .cell5 img {
    width: 140px
}
.MainTopLogo {
    width: 270px;
    vertical-align: middle;
    margin: 2px 0 4px
}
.Name-Logo {
    display: inline-block;
    vertical-align: middle;
    font-size: 24px
}
.MainContentBlock .brand-block {
    width: 12vw;
    max-width: 100px;
    height: 6vh;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 8px
}
.MainContentBlock .brand-block:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%
}
.MainContentBlock .brand-block img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    -webkit-transition: .4s;
    transition: .4s
}
.zoom-effect-container:hover img {
    -webkit-transform: scale(1.06);
    transform: scale(1.06)
}
.bgWhite {
    background-color: #fff
}
.Appliances-Block, .GlobalCenter, .RatingBLock {
    text-align: center
}
h1 {
    margin: 2rem 0 1rem
}
h2 {
    margin: 1.5rem 0 .8rem
}
h3 {
    margin: 1.3rem 0 .6rem
}
h4 {
    margin: 1.3rem 0 .75rem
}
h5 {
    margin: 1.1rem 0 .6rem
}
.container img {
    max-width: 100%
}
.RatingBLock img {
    width: 46px !important;
    margin: 0 auto
}
.HeadClearBoth {
    clear: both
}
.MainContentBlock {
    margin: 20px 0
}
.MainContentBlock .image-block-float-right {
    float: right;
    padding: 0 20px;
    text-align: center
}
.MainContentBlock .image-block-float-left {
    float: left;
    padding: 0 20px;
    text-align: center
}
.Global-image-block-float-right {
    float: right;
    padding: 0 20px;
    text-align: center
}
.MainContentBlock .image-block-float-left {
    float: left;
    padding: 0 20px;
    text-align: center
}
.Global-image-block-float-left {
    float: left;
    padding: 0 20px;
    text-align: center
}
.txt_in_all_incorr {
    background-color: #ffb8b8 !important
}
.txt_in_all_incorr:focus {
    -moz-box-shadow: 0 0 2px #00a0ff;
    -webkit-box-shadow: 0 0 2px #00a0ff;
    box-shadow: 0 0 2px #00a0ff;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px
}
.MainPopup {
    width: 500px;
    height: 360px;
    top: 50%;
    left: 50%;
    position: fixed;
    margin-left: -250px;
    margin-top: -180px;
    background-color: #fff;
    z-index: 11;
    padding: 8px;
    border: 3px solid #f2f2f2;
    display: none
}
.BackFon, .FonPopup {
    position: fixed;
    z-index: 10;
    background-color: #000;
    padding-top: 0;
    top: 0;
    display: none;
    vertical-align: middle;
    height: 100%;
    width: 100%
}
.FonPopup {
    left: 0;
    -moz-opacity: 0.8;
    opacity: .8
}
.BackFon {
    right: 0;
    -moz-opacity: 0.64;
    opacity: .64
}
.Parallelogram {
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg)
}
#section_001 .image_bg { background-image: url(/image/?id=108&show=thumbnail); }
#section_fridge .image_bg {
    background-image: url(/files/bg/fridge_bg.webp)
}
#section_dishwasher .image_bg {
    background-image: url(/files/bg/dishwasher_bg.webp)
}
#section_washer .image_bg {
    background-image: url(/files/bg/washer_bg.webp)
}
#section_dryer .image_bg {
    background-image: url(/files/bg/dryer_bg.webp)
}
#section_stove .image_bg {
    background-image: url(/files/bg/stove_bg.webp)
}
#section_oven .image_bg {
    background-image: url(/files/bg/oven_bg.webp)
}
#section_freezer .image_bg {
    background-image: url(/files/bg/freezer_bg.webp)
}
.fill {
    height: 100%;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    right: 0;
    top: 0
}
.bg-fill {
    background-position: 50% 50%;
    background-repeat: no-repeat !important;
    background-size: cover !important
}
#MenuNavigate {
    display: none;
    padding: 20px 10px;
    overflow: auto
}
#MenuNavigate .menu_item {
    position: relative;
    margin: 6px 0
}
#MenuNavigate .menu_item > .ItemMenu {
    text-transform: uppercase;
    font-size: 16px;
    padding: 4px;
    cursor: pointer; font-weight:bold;
}
#MenuNavigate .Popup-submenu .Sub-Item {
    border-bottom: 1px solid #ebebeb;
    text-align: left;
    text-decoration: none;
    color: #2e2e2e;
    display: block;
    padding: 6px 8px;
    font-size: 15px
}
#MenuNavigate .Popup-submenu .appliance-icon {
    width: 26px;
    vertical-align: middle;
    padding-bottom: 2px;
    margin: 0 10px 0 8px
}
#MenuNavigate .Popup-submenu .brand-icon {
    width: 46px;
    vertical-align: middle;
    padding-bottom: 2px;
    margin: 0 10px 0 8px
}
#MenuNavigate .Popup-submenu .area-icon {
    width: 22px;
    vertical-align: middle;
    padding-bottom: 2px;
    margin: 0 6px 0 4px
}
.BodyFix {
    overflow: hidden
}
#MobileMenuControll .bi-list::before {
    width: 40px;
    font-size: 36px
}
#MobileMenuControll .bi-x-lg::before {
    width: 40px;
    font-size: 30px
}
.Top-Main-Block {
    margin: 0
}
.Top-Main-Block h1 {
    margin: 0;
    text-transform: uppercase
}
.Top-Main-Block .Right-Image-Section {
    text-align: center;
    margin: 0 auto;
    max-width: 500px
}
.Top-Main-Block .ul-main, .Top-Main-Block .ul-main-normal {
    list-style-type: none;
    font-size: 16px;
    padding: 0;
    margin: 22px 0
}
.Top-Main-Block .ul-main li {
    font-weight: 700
}
.Top-Main-Block .left-block {
    padding-left: 40px
}
.global-ul-main {
    padding: 0;
    margin: 22px 0
}
.global-ul-main .bi-check-square-fill::before {
    vertical-align: bottom
}
.Descriton-Service {
    color: #1991CB;
    margin: 12px 0 20px;
    font-size: 16px
}
.Right-Image-Section {
    max-width: 50rem
}
.Right-Image-Section::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: -1px;
    bottom: -1px;
    border-right: 1.1em solid transparent;
    border-bottom: .07em solid #fff
}
.ul-list-of-advantages, .ul-list-of-advantages li {
    margin: 6px 0
}
#List_Advantages {
    text-align: center;
    padding: 2rem 0;
    color: #fff
}
#List_Advantages h4 {
    margin: 0 0 6px;
    font-size: 18px
}
#List_Advantages .Item {
    width: 200px;
    display: inline-block;
    margin: 6px 4px;
    vertical-align: top
}
#List_Advantages .LeftCell {
    width: 80px;
    vertical-align: middle;
    text-align: center
}
#List_Advantages .RightCell {
    text-align: left;
    font-size: 16px;
    vertical-align: middle
}
#List_Advantages .bi-briefcase::before, #List_Advantages .bi-clock-history::before, #List_Advantages .bi-hand-thumbs-up::before, #List_Advantages .bi-person-vcard::before, #List_Advantages .bi-shield-check::before {
    font-size: 50px;
    color: #fff
}
.WhyChose-UL {
    list-style: none;
    font-size: 18px
}
.WhyChose .bi-briefcase-fill::before, .WhyChose .bi-hand-thumbs-up-fill::before, .WhyChose .bi-person-vcard-fill::before, .WhyChose .bi-shield-check::before {
    color: #0d6efd;
    vertical-align: text-bottom
}
.setion-row {
    padding: 1.5rem 0
}
.setion-row:nth-child(odd) {
    color: #000;
    padding: 1.5rem 0
}
/* The grey fill, 1px frame and #7b7b7b text colour were removed 2026-09-09 at
   Andrei's request: the banded look boxed each section in instead of letting the
   page run as one surface. Only the top padding is kept, so the class still marks
   a section without painting it. Text now inherits the body colour (#333). */
.section-gray-row {
    padding-top: 14px;
}
.Appliances-Block .Item {
    border: 1px solid #cdcdcd;
    position: relative;
    text-decoration: none;
    vertical-align: top;
    display: inline-block;
    margin: 14px 8px;
    background-color: #ffff;
    border-radius: 4px
}
.Appliances-Block .Item:hover {
    -moz-box-shadow: 0 0 8px #cdcdcd;
    -webkit-box-shadow: 0 0 8px #cdcdcd;
    box-shadow: 0 0 8px #b9b9b9;
}
.Appliances-Block .Item:hover .Description-place {
    background-color: #157AAD;
    color: #fff;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}
.Appliances-Block .Icon-place {
    background-color: #fff;
    text-align: center;
    width: 240px;
    height: 160px;
    display: table-cell;
    vertical-align: middle;
}
.Appliances-Block .Icon-place img {
    max-width: 100%;
    max-height: 100%
}
.Appliances-Block .Description-place {
    text-align: center;
    padding: 14px 0 30px 4px;
    line-height: 16px;
    color: #000;
    font-weight: 700;
    font-size: 16px;
    height: 30px;
    text-decoration: none; background-color: #1991CB; color:#fff;
}
.Appliances-Block .Link-place {
    padding-bottom: 14px
}
.Appliances-Block .Troubles {
    font-size: 12px;
    color: #000;
    text-align: left
}
.List-Of-Areas .bi-geo-alt-fill::before {
    color: #ec0c0c;
    margin-right: 6px
}
.Def-ListOfBrands {
    margin: 30px 0
}
.Def-ListOfBrands .brand-block {
    width: 12vw;
    overflow: hidden;
    max-width: 120px;
    text-decoration: none;
    height: 60px;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    text-align: center;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    margin: 8px
}
.Book-Page .ItemSelect, .ParentBlockToOpen, .global-service-table .left-cell {
    background-color: #f3f3f3
}
.Def-ListOfBrands .brand-block::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle
}
.Def-ListOfBrands .brand-block img {
    max-width: 90%;
    padding-left: 2px;
    max-height: 80%;
    vertical-align: middle;
    -webkit-transition: .4s;
    transition: .4s
}
#MainPopup_Form0 #Result_Block {
    padding: 30px
}
#MainPopup_Form0 #Result_Block .header-text {
    text-align: center;
    font-size: 26px
}
#MainPopup_Form0 .row-data {
    margin: 12px 0;
    text-align: center
}
#MainPopup_Form0 #resultvalue {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #12aa06
}
.showLoader {
    display: inline-block !important
}
.Book-Page .ItemSelect {
    display: inline-block;
    border: 1px solid #cdcdcd;
    border-radius: 4px
}
.Book-Page .row-data {
    padding: 16px 0;
    border-bottom: 1px solid #ebebeb
}
.Book-Page.Contacts .TechnicianDetails {
    font-size: 18px;
    margin-top: 30px
}
.Book-Page.Contacts .TechnicianDetails .Row {
    padding: 6px 0
}
.Book-Page.Contacts .bi-building-fill-check::before, .Book-Page.Contacts .bi-clock-fill::before, .Book-Page.Contacts .bi-envelope-at-fill::before, .Book-Page.Contacts .bi-telephone-fill::before {
    color: #0d6efd
}
.Global_call_Us {
    text-decoration: underline;
    font-weight: 700
}
.bi-caret-down-fill::before, .bi-caret-right-fill::before {
    font-size: 18px
}
.bi-caret-down-fill, .bi-caret-right-fill {
    margin-left: 8px
}
.ParentBlockToOpen {
    cursor: pointer;
    padding: 6px 10px;
    box-shadow: 0 4px 10px rgb(0 0 0 / 10%)
}
.ParentBlockToOpen .TopHeader {
    font-size: 1.5rem
}
.ParentBlockToOpen h2 {
    font-size: 1.2rem
}
.Parent-GlobalRight-Image {
    margin-left: 16px;
    text-align: center;
    float: right
}
.GlobalRight-Image {
    max-width: 240px;
    max-height: 500px
}
.global-service-table {
    width: 100%
}
.global-service-table td {
    border: 1px solid #ebebeb;
    padding: 6px 9px
}
.article h1 {
    font-size: 22px;
}
.article .Descriton-Service {
    font-size: 22px
}
.FAQ_Header {
    border: 1px solid #dfdfdf;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    margin: 10px 0;
    padding: 8px 34px 8px 16px;
    border-radius: 4px
}
.FAQ_Header:hover {
    background-color: #f5f5f5
}
.FAQ_Header-Details {
    padding: 4px 22px;
    display: none
}
.FAQ_Header .bi-arrow-right-circle-fill {
    color: #0d6efd;
    font-size: 20px;
    position: absolute;
    top: 6px;
    right: 6px
}
.red-block { padding:4px 12px; text-transform:uppercase; text-align:center; background-color:#c5292c; color:#fff; margin-top:30px; }
.content-right-side { }
.content-right-side .row { margin:14px 0; }
#FullBook {  }
#FullBook .row-data{ margin:14px 0; }
/* Coupons. The 2026-09 artwork in /files/coupons/ is ~1200x440 (2.73:1); the images it
   replaced were 460x228 (2.02:1), so at a fixed 260px these render shorter and wider.
   Desktop keeps the 260px cap - four still sit across the 1140px container. Phones get
   one full-width coupon per row (rule below): at 260px on a 390px screen the small print
   on the new artwork ("ANY COMPETITOR'S WRITTEN QUOTE") is not readable.
   This is class-level, so any page that uses .coupon-image picks it up automatically. */
.coupon-image { margin:6px 0; max-width:260px !important; vertical-align:middle; }

.blink_me { animation: blinker 2s linear infinite; }
#TopImg { display:none; }
.DivPhoneT 
{
    /* z-index added 2026-09-09. It was `auto` (i.e. 0), so ANY positioned element
       with a z-index painted over the floating call button - the hero CTA was the
       obvious one (.mh-wrap > * sets z-index:1 on every hero child), but the promo
       card and the brand strip clipped it too. 9 is deliberate: above page content,
       still below the popup overlay (.BackFon / .FonPopup, z 10) and the booking
       popups (z 11 / 60), so a modal correctly covers the button. */
    z-index: 9;
    position:fixed; right:10%; bottom:5%; border:1px solid white; background-color:#1991CB;
    width:64px; height:64px; text-align:center; vertical-align:middle; 
    -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;
    -moz-box-shadow: 0px 0px 18px #1991CB;
    -webkit-box-shadow: 0px 0px 18px #1991CB;
    box-shadow: 0px 0px 18px #1991CB;
    -webkit-animation: pulsate 3s ease-out;
    -webkit-animation-iteration-count: infinite; 
    -moz-animation: pulsate 3s ease-out;
    -moz-animation-iteration-count:infinite;
}
.DivPhoneT:hover {
    -webkit-animation-play-state: paused; 
    animation-play-state: paused;
    cursor:pointer;
    -webkit-animation-iteration-count: 0; -webkit-animation-iteration-count: 1; -webkit-animation: ShowImage 0.6s; -moz-animation: ShowImage 0.6s;
    -webkit-animation:RotateImag 1.2s ease-in-out 0.2s infinite alternate;
    -moz-animation:RotateImag 1.2s ease-in-out 0.2s infinite alternate;
    animation:RotateImag 1.2s ease-in-out 0.2s infinite alternate;
}
.GlobalSocialIcons { margin-top:16px; }
.GlobalSocialIcons img { width:32px; margin-right:6px; }
.GlobalSocialIcons a { text-decoration:none; }

.MainPhoneNumber {
    background-color: #1991CB !important;
    font-weight: 600;
    font-style: italic;
    text-decoration: underline;
    line-height: 38px;
    word-spacing: 4px;
    padding: 4px 16px;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
    fill: #FFFFFF;
    color: #FFFFFF !important;
    border-radius: 6px;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.MainPhoneNumber .menu-phone-number { color:#fff !important; }
.bell {
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}

.block_h1 {
    margin: 0 0 6px;
    font-weight: bold;
    font-size: 24px;
}
.block_h2 {
    margin: 0 0 6px;
    font-weight: bold;
    font-size: 22px;
}
.block_h3 {
    margin: 0 0 6px;
    font-weight: bold;
    font-size: 20px;
}
.block_h4 {
    margin: 0 0 6px;
    font-weight: bold;
    font-size: 18px;
}
.block_h5 {
    margin: 0 0 6px;
    font-weight: bold;
    font-size: 17px;
}

.global-show-only-for-phone { visibility:hidden; display:none; }
.global-show-only-for-PC { visibility:visible; display:block; }
.gold-button {
    box-shadow: 0px 1px 0px 0px #fff6af;
    background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color: #ffec64;
    border-radius: 6px;
    border: 1px solid #ffaa22;
    display: inline-block;
    cursor: pointer;
    color: #333333;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 14px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffee66;
}
.gold-button:hover { background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%); background-color: #ffab23; }
.gold-button:active { position: relative; top: 1px; }
.container {
    text-align: left !important;
}
.img-thumbsup {
    max-width: 200px;
    max-height: 210px;
}
.text-justify p { text-align:justify; }
.ul-list-of-errors {
    font-size: 14px;
    line-height: 20px;
}




@media only screen and (min-width:1001px) and (max-width:1200px) {
    .footer .BlockBrand {
        width: 18%
    }
}

@media only screen and (max-width:1060px) {
    #List_Advantages .Item {
        width: 30%
    }
}

@media only screen and (max-width:1000px) {
    .footer .BlockCity {
        width: 40%
    }

    .footer .BlockBrand {
        width: 20%
    }
}

@media only screen and (max-width:940px) {
    /* Top menu gets a bottom edge and a shadow (2026-09-09).
       The header is Bootstrap's .sticky-top, so it floats over the page as you scroll;
       with a flat #f8f9fa background and no edge it used to blend into whatever was
       under it. Border first, shadow under it, so the separation still reads on a white
       section where a soft shadow alone would be nearly invisible.
       Scoped to <=940px, which is where #navbarCollapse (the mobile/tablet header) is
       the visible header - the desktop header is deliberately untouched. */
    .nav-bar.sticky-top {
        border-bottom: 1px solid #dfe3e6;
        box-shadow: 0 2px 6px rgba(0,0,0,.12);
    }

    #navbarCollapse .book_service, #navbarCollapse .phone_number1 {
        font-weight: 700;
        cursor: pointer;
        display: inline-block;
        text-transform: uppercase;
        border-radius: 4px;
        padding: 8px 12px;
        font-size: 14px
    }

    #navbarCollapse {
        display: block
    }

    #navbarMenu {
        display: none
    }

    #navbarCollapse .phone_number {
        font-weight: 700;
        color: #ff4917;
        text-align: center;
        vertical-align: middle
    }

    #navbarCollapse .phone_number a {
        color: #ff4917;
        font-size: 18px;
        text-decoration: none
    }

    #navbarCollapse .phone_number1 {
        font-family: Roboto-Regular;
        margin-right: 4px;
        color: #fff;
        background-color: #ff4917;
        margin-left: 10px
    }

    #navbarCollapse .book_service a, #navbarCollapse .phone_number1 a {
        color: #fff;
        text-decoration: none
    }

    #navbarCollapse .bi-telephone-fill::before, #navbarCollapse .fa-wrench::before, #navbarCollapse .phone_number1 .bi-telephone-fill::before {
        margin-right: 6px
    }

    #navbarCollapse .book_service {
        color: #fff;
        background-color: #0d6efd;
        vertical-align: middle
    }

    #navbarCollapse .fa-phone-alt::before {
        margin-right: 6px;
        font-size: 14px
    }

    #navbarCollapse .fa-bars, #navbarCollapse .fa-times {
        margin: 0 6px 0 0;
        vertical-align: middle
    }

    #navbarCollapse .fa-bars::before, #navbarCollapse .fa-times::before {
        font-size: 30px
    }

    /* Shrink-to-fit so the brand lockup gets exactly the width it needs and the
       wordmark stays on one line. At a pinned 15% it was wrapping to three lines
       on tablet widths. */
    #navbarCollapse .cell0 {
        width: 1%;
        white-space: nowrap
    }

    #navbarCollapse .cell1, #navbarCollapse .cell2 {
        text-align: center
    }

    #navbarCollapse .cell3 {
        width: 10%
    }
}

@media only screen and (max-width:800px) {
    #DefDetailsAreas {
        display: block
    }

    .area-block1, .area-block2, .area-block3 {
        display: none
    }

    .Def-ListOfBrands .brand-block {
        max-height: 160px;
        height: 80px;
        max-width: unset;
        width: 28%
    }

    .footer .BlockCity {
        width: 44%
    }

    .footer .BlockBrand {
        width: 22%
    }

    #List_Advantages .Item {
        width: 60%
    }
}

@media only screen and (max-width:767px) {
    .Parent-GlobalRight-Image {
        float: none;
        margin: 8px auto
    }
    .Parent-GlobalRight-Image img {
        max-width: 100%
    }
    .footer .BlockBrand {
        width: 30%
    }
    .GlobalPaddingLeft {
        padding-left: 0;
        line-height: 140%
    }
    .GlobalPaddingRight {
        padding-right: 0 !important;
        line-height: 140%
    }
    .global-show-only-for-phone { visibility:visible; display:block; }
    .global-show-only-for-PC { visibility:hidden; display:none; }
    #section_about.image_bg {
        background-image: none !important; padding:10px 0 !important;
    }
}
@media only screen and (max-width:700px) {
    .GlobalPaddingLeft {
        padding-left: 20px !important;
    }
}
@media only screen and (max-width:600px) {
    .MainContentBlock .image-block-float-left, .MainContentBlock .image-block-float-right {
        float: none !important;
        text-align: center;
        padding: 0
    }

    .MainPopup {
        width: 90vw;
        margin-left: -45vw
    }

    #MainPopup_Form0 #Result_Block .header-text {
        font-size: 20px
    }

    .footer .BlockBrand {
        width: 44%
    }

    .Top-Main-Block .left-block {
        padding-left: 20px
    }

    #navbarCollapse .container {
        padding: 0 20px !important
    }

    #List_Advantages .Item {
        width: 80%
    }

    #section_001 .image_bg, #section_dishwasher .image_bg, #section_dryer .image_bg, #section_freezer .image_bg, #section_fridge .image_bg, #section_oven .image_bg, #section_stove .image_bg, #section_washer .image_bg {
        background-image: none;
        /* The base rule (line ~433) sets min-height:440px and padding:30px 0 to make room for
           the background image. On mobile that image is switched off just above, so both were
           only producing dead space - the 30px top padding was the visible gap between the
           header buttons and the hero photo. */
        min-height: 0;
        padding: 0 0 12px;
    }

    /* "Up 3 Month Warranty" badge in the homepage hero. Its column goes full-width once the
       row stacks on mobile, so the image was rendering at full container width. */
    #section_001 img[alt*="Warranty"] {
        max-width: 190px;
        height: auto;
        display: block;
        margin: 0 auto;
    }


    /* ── Mobile homepage hero (design approved 2026-09-09) ──────────────────
       All rules are prefixed .mh- and live inside this mobile media query, so the
       desktop hero is untouched. The block is hidden on desktop by
       .global-show-only-for-phone on its wrapper in the article HTML.

       IMPORTANT - why there are no empty elements in the markup:
       this block is stored in the DB and passes through CKEditor, which strips empty
       inline tags. The first version used <span class="mh-ico"> for icons and a
       <span class="mh-band"> for the steel band; CKEditor deleted all of them on
       import and they vanished from the live page. Everything decorative is now a
       ::before on an element that has real content, so there is nothing for CKEditor
       to throw away. Do not reintroduce empty spans here. */

    /* Full-bleed background: 100vw centred on the block. Setting it on an ancestor
       is unreliable because CKEditor can rewrite the wrapper nesting on import. */
    .mh-wrap {
        position: relative;
        padding: 6px 0 26px;
        font-family: Roboto-Regular, Arial, sans-serif;
    }
    .mh-wrap::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background: #f4f7fc;
    }
    .mh-wrap > * { position: relative; z-index: 1; }

    .mh-h1 {
        margin: 6px 0 0;
        font-family: Roboto-Bold, Arial, sans-serif;
        font-size: 30px;
        line-height: 1.16;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        color: #2f3d47;
        letter-spacing: -.2px;
    }

    /* Hero photo. The steel band is the ::before of this div (see note above). */
    .mh-photo { position: relative; margin: 16px 0 0; }
    .mh-photo::before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        bottom: -18px;
        height: 78px;
        background: #4f7f96;
    }
    .mh-photo img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: auto;
        border: 5px solid #fff;
        border-radius: 12px;
        box-shadow: 0 3px 12px rgba(20,40,60,.20);
    }

    .mh-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 11px;
        margin: 22px 0 0;
    }
    .mh-card {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        background: #fff;
        border-radius: 11px;
        padding: 12px 11px;
        box-shadow: 0 2px 7px rgba(25,45,65,.13);
    }
    .mh-card::before {
        content: "";
        display: block;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .mh-c-txt { display: block; min-width: 0; }
    .mh-c-txt b {
        display: block;
        font-family: Roboto-Bold, Arial, sans-serif;
        font-size: 13.5px;
        line-height: 1.2;
        font-weight: 700;
        text-transform: uppercase;
        color: #23313b;
        margin-bottom: 3px;
    }
    .mh-c-txt span {
        display: block;
        font-size: 12px;
        line-height: 1.32;
        color: #5b6b77;
    }
    .mh-c-brands { font-size: 10.5px !important; letter-spacing: -.1px; }
    .mh-c-brands img {
        height: 9px;
        width: auto;
        vertical-align: middle;
        margin: 0 3px 2px 0;
    }

    .mh-guar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 20px 0 0;
    }
    .mh-guar::before {
        content: "";
        display: block;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8.4%2015.4%205.9%2022.6l3.3-1.5%202.2%201.7%201.7-6.6z%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M15.6%2015.4l2.5%207.2-3.3-1.5-2.2%201.7-1.7-6.6z%22%20fill%3D%22%2316506f%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.6%22%20r%3D%227.4%22%20fill%3D%22%231d84c4%22%2F%3E%3Cpath%20d%3D%22M9.1%208.7l2.1%202.1%203.8-4%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    }
    .mh-guar-t {
        flex: 1;
        font-size: 20px;
        line-height: 1.2;
        color: #2f3d47;
    }
    /* Real link text kept (so CKEditor keeps the anchor and screen readers get a
       label), hidden with font-size:0 and replaced by the icon. */
    .mh-guar-c {
        flex: 0 0 auto;
        display: block;
        width: 32px;
        height: 32px;
        font-size: 0;
        text-decoration: none;
        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2211%22%20fill%3D%22%231d6fa5%22%2F%3E%3Cpath%20d%3D%22M8.2%206.6c.5%200%20.9.3%201%20.7l.8%202.2c.2.4%200%20.9-.3%201.1l-1%20.8a8.6%208.6%200%200%200%204%204l.8-1c.3-.3.7-.4%201.1-.3l2.2.8c.4.2.7.6.7%201v2.2c0%20.7-.6%201.3-1.3%201.2A12.4%2012.4%200%200%201%206.9%208.1c-.1-.8.5-1.5%201.3-1.5z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    }
    .mh-brands {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 8px 0 0;
        padding: 0 2px;
    }
    .mh-brands img {
        height: 15px;
        width: auto;
        max-width: 19%;
        object-fit: contain;
    }

    .mh-cta {
        display: block;
        margin: 20px 0 0;
        padding: 15px 10px;
        border-radius: 40px;
        background: #df691f;
        color: #fff !important;
        font-family: Roboto-Bold, Arial, sans-serif;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.15;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none !important;
        box-shadow: 0 3px 9px rgba(190,90,20,.34);
    }
    .mh-cta:hover { background: #c85a15; }
    .mh-call {
        margin: 12px 0 0;
        font-size: 15px;
        line-height: 1.35;
        text-align: center;
        color: #2f3d47;
    }
    .mh-call a { color: #1667a8; font-weight: 700; text-decoration: underline; }

    .mh-card.mh-i-cert::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8.4%2015.4%205.9%2022.6l3.3-1.5%202.2%201.7%201.7-6.6z%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M15.6%2015.4l2.5%207.2-3.3-1.5-2.2%201.7-1.7-6.6z%22%20fill%3D%22%2316506f%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.6%22%20r%3D%227.4%22%20fill%3D%22%2316506f%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.6%22%20r%3D%225.6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220.9%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M9.1%208.7l2.1%202.1%203.8-4%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
    .mh-card.mh-i-clock::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M1%208.4h4.6M0.4%2012h3.8M1%2015.6h4.6%22%20stroke%3D%22%2316506f%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2214.4%22%20cy%3D%2212%22%20r%3D%228.5%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M14.4%206.9V12l3.4%202%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
    .mh-card.mh-i-tools::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22rotate%28-40%2012%2012%29%22%3E%3Crect%20x%3D%2210.7%22%20y%3D%226.4%22%20width%3D%222.7%22%20height%3D%2215%22%20rx%3D%221.35%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M12%201.8a4%204%200%201%200%200%208%204%204%200%200%200%200-8zm0%202.2a1.8%201.8%200%201%201%200%203.6%201.8%201.8%200%200%201%200-3.6z%22%20fill%3D%22%2316506f%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2840%2012%2012%29%22%3E%3Crect%20x%3D%2210.95%22%20y%3D%222.6%22%20width%3D%222.1%22%20height%3D%2211.2%22%20rx%3D%220.5%22%20fill%3D%22%2316506f%22%2F%3E%3Crect%20x%3D%229.5%22%20y%3D%2213.2%22%20width%3D%225%22%20height%3D%228.2%22%20rx%3D%221.7%22%20fill%3D%22%2316506f%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
    .mh-card.mh-i-years::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201.4%2015%208l7.2.8-5.4%204.9%201.5%207.1L12%2017.3%205.7%2020.8l1.5-7.1L1.8%208.8%209%208z%22%20fill%3D%22%2316506f%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2213.9%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%226.8%22%20font-weight%3D%22bold%22%20fill%3D%22%23fff%22%20text-anchor%3D%22middle%22%3E15%2B%3C%2Ftext%3E%3C%2Fsvg%3E"); }
    .mh-card.mh-i-freesvc::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.2%202.2a6%206%200%200%200-5.4%208.6L2.9%2018.7a2.3%202.3%200%200%200%203.2%203.2l7.9-7.9a6%206%200%200%200%207.5-7.7l-3.3%203.3-2.8-.7-.7-2.8z%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M2.4%202.4%2021.6%2021.6%22%20stroke%3D%22%23d8452f%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
    .mh-card.mh-i-cost::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%220.9%22%20y%3D%224.8%22%20width%3D%2222.2%22%20height%3D%2214.4%22%20rx%3D%222.2%22%20fill%3D%22%2316506f%22%2F%3E%3Crect%20x%3D%223.1%22%20y%3D%227%22%20width%3D%2217.8%22%20height%3D%2210%22%20rx%3D%221.2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220.9%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.9%22%20fill%3D%22%23fff%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2214.5%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%226.4%22%20font-weight%3D%22bold%22%20fill%3D%22%2316506f%22%20text-anchor%3D%22middle%22%3E%24%3C%2Ftext%3E%3C%2Fsvg%3E"); }

    .global-hide-toll-element { height:300px; overflow:auto; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; }
}

/* ==== OUR APPLIANCE REPAIR SERVICES: 2-up card grid, phones only (2026-09-09) ====
   Andrei's reference screenshot: two columns of photo cards with the blue label bar
   underneath. Implemented purely in CSS against the markup the CMS already stores,
   so the homepage does NOT need re-importing for this to take effect.
   The markup being styled (unchanged):
     <a class="Item">
       <div class="Icon-place"><img ...></div>
       <div><div class="Description-place">Washer Repair</div></div>
     </a>
   Breakpoint is 767px, not 600px, to match .global-show-only-for-phone - i.e. this
   applies over exactly the range the site already treats as "phone". Between 601 and
   767px the old inline-block rules put ONE card per row (the container is pinned at
   516px there), which looked broken next to a 2-up phone layout. At 767px this grid
   yields 240px cards, versus 242px from the desktop rules at 768px, so the boundary
   is seamless. Above 767px nothing here applies: tablet stays 2-up and desktop 4-up
   via the original inline-block rules at ~line 820. The old <=400px overrides that
   forced one full-width card per row were removed rather than left to fight this. */
/* Coupons on phones: one per row, full width. See the .coupon-image note further up. */
@media only screen and (max-width:767px) {
    .coupon-image {
        max-width: 420px !important;
        width: 100%;
        height: auto;
        margin: 6px auto;
        display: block;
    }
}

@media only screen and (max-width:767px) {
    .Appliances-Block {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 12px;
    }
    .Appliances-Block .Item {
        display: flex;
        flex-direction: column;
        width: auto;
        margin: 0;
        border: 1px solid #e0e0e0;
        border-radius: 14px;
        overflow: hidden; /* clips the photo into the rounded corners */
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.10);
    }
    .Appliances-Block .Icon-place {
        display: block;
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        padding: 0;
        line-height: 0; /* no descender gap under the photo */
    }
    /* The ratio is set on the <img>, not on .Icon-place. A percentage height on the
       image would resolve against an auto-height parent and collapse to auto, letting
       tall source photos stretch their card - which is what happened first time round.
       width:100% + aspect-ratio + height:auto gives the image a definite box, so every
       card in a row gets an identical photo area whatever the source dimensions are. */
    .Appliances-Block .Icon-place img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 5 / 4; /* measured off the reference card: 85w x 68h */
        max-width: none;
        max-height: none;
        object-fit: cover; /* photo fills the card; the old rules letterboxed it in white */
    }
    /* the anonymous wrapper <div> around .Description-place */
    .Appliances-Block .Item > div:last-child {
        display: flex;
        flex: 1 1 auto;
    }
    .Appliances-Block .Description-place {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        min-height: 44px;
        padding: 8px 6px;
        font-size: 14px;
        line-height: 1.15;
    }
}
@media only screen and (max-width:500px) {
    #MobileContacts .cell-0, #MobileContacts .cell-1, #MobileContacts .phone_number {
        text-align: center;
        vertical-align: middle
    }

    #navbarCollapse .container-fluid {
        padding: 0 !important
    }

    #navbarCollapse .cell1, #navbarCollapse .cell2 {
        display: none
    }

    /* With the phone/book cells hidden on phones, the logo cell no longer needs to be
       pinned at 15% — let it take the freed space so the brand wordmark has room. */
    #navbarCollapse .cell0 {
        width: auto
    }

    /* Very narrow phones: allow the wordmark to wrap rather than push the burger off. */
    #navbarCollapse .cell0 .BrandWordmark {
        white-space: normal
    }

    #navbarCollapse .cell5 {
        display: table-cell;
        text-align: center
    }

    #MobileContacts .book_service, #MobileContacts .phone_number1 {
        font-weight: 700;
        cursor: pointer;
        display: inline-block;
        text-transform: uppercase;
        font-size: 14px;
        border-radius: 4px;
        padding: 8px
    }

    #MobileContacts {
        display: block;
        padding: 4px 0 6px
    }

    #MobileContacts .cell-0 {
        width: 50%
    }

    #MobileContacts .phone_number {
        font-weight: 700;
        color: #ff4917
    }

    #MobileContacts .phone_number a {
        color: #ff4917;
        font-size: 18px;
        text-decoration: none
    }

    #MobileContacts .phone_number1 {
        font-family: Roboto-Regular;
        color: #fff;
        background-color: #ff4917
    }

    #MobileContacts .book_service a, #MobileContacts .phone_number1 a {
        color: #fff;
        text-decoration: none
    }

    #MobileContacts .bi-wrench-adjustable::before, #MobileContacts .phone_number1 .bi-telephone-fill::before {
        margin-right: 4px
    }

    #MobileContacts .book_service {
        color: #fff;
        background-color: #0d6efd;
        vertical-align: middle
    }

    .Def-ListOfBrands .brand-block {
        width: 42%
    }

    .footer .BlockCity {
        width: 44%
    }
    .RedButton { padding: 8px 12px; }
    .img-thumbsup {
        max-width: 44% !important;
        max-height: 170px;
    }
    .GlobalContentPadding2 {
        padding: 20px 10px;
    }
    .review-block .Item { width:98% !important; }
    body { font-size:12px; }
    .GlobalContentPadding2 .col-md-6 { padding:0; }
    .row { margin-left:auto !important; margin-right:auto !important; }

    h1, h2, h3, h4, h5 { text-align:center; }
    .Descriton-Service {
        font-size: 18px !important;
    }
    .Top-Main-Block .left-block { padding:0px; !important; }
    .FAQ_Header { text-align:left; }
    .GlobalContentPadding {
        padding: 10px 0px;
    }
    .footer .container { padding:10px 0px !important; }
}
@media only screen and (max-width:450px) {
    .footer .BlockCity {
        width: 94%
    }
}
@media only screen and (max-width:400px) {
    #MainPopup_Form0 #Result_Block .header-text {
        font-size: 18px
    }
    /* The three .Appliances-Block overrides that used to live here forced a single
       full-width card per row below 400px. They were removed 2026-09-09 when the
       services block became a 2-up grid in the <=600px block above; leaving them
       would have silently undone that grid on small phones. */
    .GlobalPaddingRight {
        padding-left: 0px !important;
    }
    .GlobalPaddingLeft {
        padding-left: 0px !important;
    }
}
@media only screen and (max-width:320px) {
    #MainPopup_Form0 #Result_Block .header-text {
        font-size: 16px
    }
}

/* .block-call-back's old flat-blue rule was replaced by the promo.jpeg re-skin
   at the end of this file (2026-09-09). */
.review-block { text-align:left; }
.review-block .Item {
    border: 1px solid #ebebeb;
    vertical-align: top;
    height: 240px;
    border-radius: 4px;
    margin: 2px 4px;
    padding: 12px 14px;
    display: inline-block;
    width: 48%;
}
.review-block .parent-image {
    position: relative;
    font-weight: 700
}
.review-block .google-icon {
    float: right;
    width: 24px;
    margin: 6px 10px 0 0
}
.review-block .data-details {
    font-size: 12px;
    color: #626262;
    margin: 0 0 6px
}
.review-block .star-block {
    margin: 4px 0
}
.review-block .star-block .bi-star-fill {
    width: 18px
}
.review-block .review-content {
    font-size: 13px;
    margin: 2px 0;
    padding: 6px 0;
    text-align: justify;
    height: 150px;
    overflow: auto;
}


@-webkit-keyframes pulsate {
    0% { -webkit-transform: scale(0.3, 0.3); opacity: 0.0;}
    50% { opacity: 0.86;}
    100% { -webkit-transform: scale(1.0, 1.0); opacity: 0.0;}
}
@-moz-keyframes pulsate {
    0% { -webkit-transform: scale(0.3, 0.3);  opacity: 0.0; }
    50% { opacity: 0.86; }
    100% { -webkit-transform: scale(1.0, 1.0); opacity: 0.0;  }
}
@-webkit-keyframes ShowImage {
    50% { -webkit-transform: scale(0.6, 0.6); opacity: 0.8;}
    100% { -webkit-transform: scale(1.0, 1.0); opacity: 1;}
}
@-moz-keyframes ShowImage {
    50% { -webkit-transform: scale(0.6, 0.6); opacity: 0.8;}
    100% { -webkit-transform: scale(1.0, 1.0); opacity: 1;}
}
@-moz-keyframes RotateImag { 
    0%   { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    10%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    20%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    30%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    40%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    50%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    60%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    70%  { -webkit-transform: rotate(-100deg); transform:rotate(-100deg);}
    80%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
    90%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    100% { -webkit-transform: rotate(-100deg); transform:rotate(-100deg); } 
}
@-webkit-keyframes RotateImag { 
    0%   { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    10%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    20%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    30%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    40%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    50%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    60%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    70%  { -webkit-transform: rotate(-100deg); transform:rotate(-100deg);}
    80%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
    90%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    100% { -webkit-transform: rotate(-100deg); transform:rotate(-100deg); } 
}
@keyframes RotateImag {
    0%   { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    10%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    20%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    30%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    40%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    50%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    60%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    70%  { -webkit-transform: rotate(-100deg); transform:rotate(-100deg);}
    80%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
    90%  { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    100% { -webkit-transform: rotate(-100deg); transform:rotate(-100deg); } 
}

@keyframes blinker {
    50% { opacity: 0; }
}
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(15deg); }
  3% { -webkit-transform: rotateZ(-14deg); }
  5% { -webkit-transform: rotateZ(17deg); }
  7% { -webkit-transform: rotateZ(-16deg); }
  9% { -webkit-transform: rotateZ(15deg); }
  11% { -webkit-transform: rotateZ(-14deg); }
  13% { -webkit-transform: rotateZ(13deg); }
  15% { -webkit-transform: rotateZ(-12deg); }
  17% { -webkit-transform: rotateZ(11deg); }
  19% { -webkit-transform: rotateZ(-10deg); }
  21% { -webkit-transform: rotateZ(9deg); }
  23% { -webkit-transform: rotateZ(-8deg); }
  25% { -webkit-transform: rotateZ(7deg); }
  27% { -webkit-transform: rotateZ(-6deg); }
  29% { -webkit-transform: rotateZ(5deg); }
  31% { -webkit-transform: rotateZ(-4deg); }
  33% { -webkit-transform: rotateZ(3deg); }
  35% { -webkit-transform: rotateZ(-1deg); }
  37% { -webkit-transform: rotateZ(1deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(15deg); }
  3% { -moz-transform: rotate(-14deg); }
  5% { -moz-transform: rotate(17deg); }
  7% { -moz-transform: rotate(-16deg); }
  9% { -moz-transform: rotate(15deg); }
  11% { -moz-transform: rotate(-14deg); }
  13% { -moz-transform: rotate(13deg); }
  15% { -moz-transform: rotate(-12deg); }
  17% { -moz-transform: rotate(11deg); }
  19% { -moz-transform: rotate(-10deg); }
  21% { -moz-transform: rotate(9deg); }
  23% { -moz-transform: rotate(-8deg); }
  25% { -moz-transform: rotate(7deg); }
  27% { -moz-transform: rotate(-6deg); }
  29% { -moz-transform: rotate(5deg); }
  31% { -moz-transform: rotate(-4deg); }
  33% { -moz-transform: rotate(3deg); }
  35% { -moz-transform: rotate(-2deg); }
  37% { -moz-transform: rotate(1deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}
@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(15deg); }
  3% { transform: rotate(-14deg); }
  5% { transform: rotate(17deg); }
  7% { transform: rotate(-16deg); }
  9% { transform: rotate(15deg); }
  11% { transform: rotate(-14deg); }
  13% { transform: rotate(13deg); }
  15% { transform: rotate(-12deg); }
  17% { transform: rotate(11deg); }
  19% { transform: rotate(-10deg); }
  21% { transform: rotate(9deg); }
  23% { transform: rotate(-8deg); }
  25% { transform: rotate(7deg); }
  27% { transform: rotate(-6deg); }
  29% { transform: rotate(5deg); }
  31% { transform: rotate(-4deg); }
  33% { transform: rotate(3deg); }
  35% { transform: rotate(-2deg); }
  37% { transform: rotate(1deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}




/* ==== Brands strip: horizontal scroller on phones (2026-09-09) ================
   Below 768px the brand tiles used to wrap into a 2-up grid inside a 300px-tall
   vertical scroll box, which made ~65 logos a very long, very dull column. They
   now sit on one horizontal track you swipe sideways.

   The markup has three shapes for a tile - <a class="brand-block">,
   <span class="brand-block"> and <a><span class="brand-block"> - so the flex
   item is "whatever the <p> directly contains", and the width goes on
   .brand-block itself, which is present in all three. */
@media only screen and (max-width:767px) {
    .Def-ListOfBrands:not(.is-full-wall).global-hide-toll-element {
        height: auto;
        overflow: visible;
    }
    .Def-ListOfBrands:not(.is-full-wall) > p,
    .Def-ListOfBrands:not(.is-full-wall) > .MainContentBlock {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0;
        padding: 6px 12px 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    .Def-ListOfBrands:not(.is-full-wall) > p > *,
    .Def-ListOfBrands:not(.is-full-wall) > .MainContentBlock > * {
        flex: 0 0 auto;
        margin: 0;
    }
    .Def-ListOfBrands:not(.is-full-wall) .brand-block {
        width: 104px !important;
        max-width: none !important;
        height: 64px !important;
        margin: 0 !important;
        scroll-snap-align: start;
    }
}


/* ==== "Common issues we fix" cards — .issue-grid / .issue-card (2026-09-09) ====
   Replaces the plain <ul> bullet lists under each appliance with the icon cards
   from Andrei's service_details.jpeg. Each bullet became a card: the old bullet
   text is now the description, and a short category title was added above it.

   Real text, not artwork - the wording stays editable in the CMS and searchable.
   CKEditor-safe: every element carries text, the icons are ::before decoration
   with inline SVG data URIs. A card is laid out as a 2-column grid so the icon
   spans both text rows without needing a wrapper element around them.

   Icons use the same navy/blue/gold as .promo-card rather than the reference's
   grey, so the page reads as one design system. 14 icons cover 30 bullets:
   repeated concepts (doors, displays, noise, leaks) deliberately share an icon.
   To add an issue, reuse an existing ico- class or add one ::before rule. */
.issue-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
    text-align: left;
}
/* 2-up is right on a phone, but the body grids ("Common ... Problems We Repair")
   are visible on desktop too, where 2 columns means ~565px-wide cards on a
   1280px screen — a short label stranded in a very wide box. Step up instead.
   The hero value cards are inside .global-show-only-for-phone, so they never
   see these rules. */
@media (min-width: 768px)  { .issue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .issue-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 🚨 ...but a VIEWPORT breakpoint cannot see the column the grid is sitting in.
   The homepage puts these grids inside `col-md-6`, which measures 478px at
   1280px wide, and the >=1200px rule gave it four ~110px cards with "Not
   cleaning dishes properly" wrapping to four lines of one word each. /brands/
   hits the same thing inside a `col-md-5` (418px).

   Measured grid widths at >=768px:
       full-width container   1116 / 936 / 696
       homepage col-md-6       478 / 388 / 268
       brands   col-md-5       418 / 343 / 243

   One auto-fill floor cannot serve both ends: 1116px wants a floor above ~213
   to stay at 4 columns, 418px wants one below ~204 to reach 2. So only the
   in-a-column case switches to auto-fill, and full-width grids keep the ladder
   above exactly as it is — the layout Andrei already signed off on.

   185px floor, against the measured widths:  478 -> 2 | 418 -> 2 | 388 -> 2
   | 343 -> 1 | 268 -> 1. Phones are untouched (this whole block is >=768px),
   which is what "only for desktop" asked for. */
@media (min-width: 768px) {
    [class*="col-md-"] > .issue-grid,
    [class*="col-lg-"] > .issue-grid,
    [class*="col-sm-"] > .issue-grid {
        grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    }
}
.issue-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 11px;
    align-items: center;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #E2E8EE;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(16, 42, 70, .07);
}
/* an odd last card fills the row instead of leaving a gap */
/* A lone trailing card looks stranded in a 2-column grid, so it stretches.
   That is ONLY true at 2-up: with 3 or 4 columns an odd count still fills the
   last row normally, and forcing 1/-1 there pushes the final card onto a row of
   its own, full width. Hence the media query. */
@media (max-width: 767px) {
    .issue-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.issue-card::before {
    content: "";
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: center;
    width: 34px;
    height: 34px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.issue-card .issue-t {
    grid-column: 2;
    font-family: Roboto-Bold, Arial, sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.2;
    color: #0A1A3C;
}
.issue-card .issue-d {
    grid-column: 2;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.25;
    color: #56636F;
}
@media only screen and (max-width:400px) {
    .issue-grid { gap: 8px; }
    .issue-card { padding: 9px 10px; column-gap: 9px; }
    .issue-card::before { width: 29px; height: 29px; }
    .issue-card .issue-t { font-size: 13.5px; }
    .issue-card .issue-d { font-size: 11.5px; }
}
.issue-card.ico-heat::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cpath%20d%3D%22M24%204c1.5%207-5.5%209.5-8.6%2015.2A13%2013%200%201%200%2037%2026c0-6-3.6-9.4-6.4-12.6-1.2%202.4-3%203.8-4.6%204.2%201.6-4.6%201-9.2-2-13.6z%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Cpath%20d%3D%22M24%2024c.8%203.6-2.6%204.8-4.2%207.6a6.6%206.6%200%201%200%2011.4%203.6c0-3-1.8-4.8-3.2-6.4-.6%201.2-1.5%201.9-2.3%202.1.8-2.3.5-4.7-1.7-6.9z%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20d%3D%22M6%206l36%2036%22%20stroke%3D%22%23d8452f%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-door::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cpath%20d%3D%22M6%2042h36%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Crect%20x%3D%229%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2237%22%20rx%3D%221.6%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Cpath%20d%3D%22M25%205l14%204.4V42H25z%22%20fill%3D%22%23123c66%22%2F%3E%20%3Ccircle%20cx%3D%2221%22%20cy%3D%2224%22%20r%3D%222.2%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20d%3D%22M35.5%2022.5v4%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-display::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2242%22%20height%3D%2227%22%20rx%3D%223.2%22%20fill%3D%22%23123c66%22%2F%3E%20%3Crect%20x%3D%226.6%22%20y%3D%2211.6%22%20width%3D%2234.8%22%20height%3D%2219.8%22%20rx%3D%221.8%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Cpath%20d%3D%22M16%2043h16M24%2035v8%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M24%2015.5l7.6%2013.2H16.4z%22%20fill%3D%22%23e8a317%22%2F%3E%20%3Cpath%20d%3D%22M24%2020v4.2%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2226.6%22%20r%3D%221.2%22%20fill%3D%22%23123c66%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-light::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cpath%20d%3D%22M24%204a14%2014%200%200%200-8.2%2025.3c1.4%201%202.2%202.4%202.2%204V35h12v-1.7c0-1.6.8-3%202.2-4A14%2014%200%200%200%2024%204z%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Crect%20x%3D%2218%22%20y%3D%2236.5%22%20width%3D%2212%22%20height%3D%223.6%22%20rx%3D%221.8%22%20fill%3D%22%23123c66%22%2F%3E%20%3Crect%20x%3D%2220%22%20y%3D%2241.5%22%20width%3D%228%22%20height%3D%223.2%22%20rx%3D%221.6%22%20fill%3D%22%23123c66%22%2F%3E%20%3Cpath%20d%3D%22M24%2012v10M20%2016.5l4%204%204-4%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-smoke::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cpath%20d%3D%22M12%2030c-4%200-7-2.8-7-6.4%200-3.4%202.7-6.2%206.2-6.4A8.6%208.6%200%200%201%2027%2014.4a5.6%205.6%200%200%201%207.7%203.6c3.5.3%206.3%203%206.3%206.3%200%203.5-3%205.7-6.6%205.7z%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Cpath%20d%3D%22M15%2036c2.4-2.4%205.2%202.4%207.6%200M25%2041c2.4-2.4%205.2%202.4%207.6%200%22%20fill%3D%22none%22%20stroke%3D%22%232b7cc0%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M36%2030.5l8.4%2014.6H27.6z%22%20fill%3D%22%23e8a317%22%2F%3E%20%3Cpath%20d%3D%22M36%2035.4v4.4%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%2236%22%20cy%3D%2242.5%22%20r%3D%221.3%22%20fill%3D%22%23123c66%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-noise::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cpath%20d%3D%22M5%2019h7l10-8v26l-10-8H5z%22%20fill%3D%22%23123c66%22%2F%3E%20%3Cpath%20d%3D%22M28%2016.5a11%2011%200%200%201%200%2015M34%2011a18.5%2018.5%200%200%201%200%2026%22%20fill%3D%22none%22%20stroke%3D%22%232b7cc0%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M40.5%206.5a26%2026%200%200%201%200%2035%22%20fill%3D%22none%22%20stroke%3D%22%23e8a317%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-water::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cpath%20d%3D%22M24%204.5c6%207.4%2011.5%2013.4%2011.5%2020A11.5%2011.5%200%200%201%2012.5%2024.5c0-6.6%205.5-12.6%2011.5-20z%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Cpath%20d%3D%22M19.5%2025.5a4.5%204.5%200%200%200%204.5%204.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M4%2039.5c4-3.4%207.4%203%2011.4%200s7.4%203%2011.4%200%207.4%203%2011.4%200M4%2045c4-3.4%207.4%203%2011.4%200s7.4%203%2011.4%200%207.4%203%2011.4%200%22%20fill%3D%22none%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-clean::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2226%22%20r%3D%2217%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2226%22%20r%3D%229.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.6%22%2F%3E%20%3Cpath%20d%3D%22M5%2026h34%22%20fill%3D%22none%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%220%22%2F%3E%20%3Cpath%20d%3D%22M38%204l1.9%204.6L44.5%2010.5%2039.9%2012.4%2038%2017l-1.9-4.6L31.5%2010.5%2036.1%208.6z%22%20fill%3D%22%23e8a317%22%2F%3E%20%3Cpath%20d%3D%22M12%208l1.2%203%203%201.2-3%201.2L12%2016.4l-1.2-3-3-1.2%203-1.2z%22%20fill%3D%22%23e8a317%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-cool::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cg%20stroke%3D%22%232b7cc0%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M24%204v40M6.7%2014L41.3%2034M6.7%2034L41.3%2014%22%2F%3E%3C%2Fg%3E%20%3Cg%20stroke%3D%22%23123c66%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M18.5%209.5L24%2015l5.5-5.5M18.5%2038.5L24%2033l5.5%205.5%22%2F%3E%20%3Cpath%20d%3D%22M8.4%2021.2l.6%207.6%207.3-2.1M39.6%2026.8l-.6-7.6-7.3%202.1%22%2F%3E%20%3Cpath%20d%3D%22M9%2019.2l-.6%207.6%207.3%202.1M39%2028.8l.6-7.6-7.3-2.1%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.issue-card.ico-ice::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cpath%20d%3D%22M6%2016.5L19%2010l13%206.5V31L19%2037.5%206%2031z%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Cpath%20d%3D%22M19%2017l13-6.5V25L19%2031.5z%22%20fill%3D%22%23123c66%22%20opacity%3D%22.0%22%2F%3E%20%3Cpath%20d%3D%22M6%2016.5L19%2023l13-6.5M19%2023v14.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.2%22%2F%3E%20%3Cpath%20d%3D%22M28%2026l14%207v9l-14-7z%22%20fill%3D%22%23123c66%22%2F%3E%20%3Cpath%20d%3D%22M42%2033l-14%207%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220%22%2F%3E%20%3Cpath%20d%3D%22M28%2026l7-3.5%2014%207%22%20fill%3D%22none%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%220%22%2F%3E%20%3Cpath%20d%3D%22M36.5%2040.5l7-3.5V28l-7%203.5z%22%20fill%3D%22%232b7cc0%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-spin::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2214.5%22%20fill%3D%22none%22%20stroke%3D%22%232b7cc0%22%20stroke-width%3D%223.4%22%2F%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%226.5%22%20fill%3D%22%23123c66%22%2F%3E%20%3Cpath%20d%3D%22M24%204.5v8M24%2043.5v-8%22%20fill%3D%22none%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%220%22%2F%3E%20%3Cpath%20d%3D%22M36.5%208.5l1.6%207.4-7.4-1.6z%22%20fill%3D%22%23e8a317%22%2F%3E%20%3Cpath%20d%3D%22M11.5%2039.5l-1.6-7.4%207.4%201.6z%22%20fill%3D%22%23e8a317%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-stop::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2219%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Crect%20x%3D%2217%22%20y%3D%2215%22%20width%3D%225.5%22%20height%3D%2218%22%20rx%3D%222%22%20fill%3D%22%23fff%22%2F%3E%20%3Crect%20x%3D%2225.5%22%20y%3D%2215%22%20width%3D%225.5%22%20height%3D%2218%22%20rx%3D%222%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20d%3D%22M38%208L8%2038%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%220%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-spark::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cpath%20d%3D%22M25.5%203L11%2026h8.5L17%2045l15.5-24H23z%22%20fill%3D%22%23e8a317%22%2F%3E%20%3Cg%20stroke%3D%22%232b7cc0%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M6%2010l4.5%204.5M42%2010l-4.5%204.5M4%2027h5M39%2027h5M8%2041l4-4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.issue-card.ico-knob::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2226%22%20r%3D%2215%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2226%22%20r%3D%229%22%20fill%3D%22%23123c66%22%2F%3E%20%3Cpath%20d%3D%22M24%2026V16.5%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cg%20stroke%3D%22%23123c66%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M9.5%2011.5l3.4%203.4M38.5%2011.5l-3.4%203.4M5%2026h2.6M40.4%2026H43%22%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%22M35%2039l4%204M39%2039l-4%204%22%20stroke%3D%22%23e8a317%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }


/* ==== .block-call-back re-skinned to match promo.jpeg (2026-09-09) ============
   IMPORTANT, read before editing: this block's MARKUP lives in the database, so
   it cannot be changed from this repo. Everything below therefore restyles the
   markup that is already there — the same approach that made the services grid
   ship without a CMS import. Nothing here needs a re-import; a refresh is enough.

   The markup being re-skinned (unchanged, from the CMS):
     <div class="global-red-block block-call-back" style="color:#fff; padding:24px 0;">
       <div class="row" style="width:92%; margin:auto;">
         <div class="col-md-6">
           <div class="mb-3" style="font-size:26px;">Trusted Appliance Repair Team!</div>
           <div style="font-size:18px; text-align:left;">
             <ul><li>Same-Day Service</li> ... x4 </ul>
           </div>
         </div>
         <div class="col-md-6 mt-3">
           <div class="mb-3" style="font-size:34px;">Get $25 Off On Repair Services</div>
           <a class="gold-button w-100" href="tel:...">Free Service Call with Repair</a>
         </div>
       </div>
     </div>

   The !important flags are not laziness: the CMS markup carries inline styles
   (padding, font-size, width, text-align) and inline styles beat a stylesheet.
   Each !important below is overriding a specific inline declaration.

   Two things the re-skin cannot do, because they need markup that isn't there:
     - "$25" cannot be gold on its own; it is plain text inside the offer line,
       and CSS cannot target part of a text node. The whole line is navy.
     - "Activate now" is added with ::after on the card, since no element exists
       to hold it.
   The .promo-card component further down does both properly, and is what to use
   for any NEW block. This skin exists so the block already in the DB looks right.
   ============================================================================= */
.block-call-back {
    box-sizing: border-box;
    position: relative;
    max-width: 560px;
    margin: 22px auto !important;
    padding: 30px 26px 24px !important;
    border-radius: 24px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20200%22%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%224%22%20opacity%3D%220.13%22%3E%20%3Ccircle%20cx%3D%22176%22%20cy%3D%2252%22%20r%3D%2230%22%2F%3E%3Ccircle%20cx%3D%22176%22%20cy%3D%2252%22%20r%3D%2213%22%2F%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M176%2014v-9M176%2099v-9M214%2052h9M129%2052h9M203%2025l6-6M143%2085l6-6M203%2079l6%206M143%2019l6%206%22%2F%3E%20%3C%2Fg%3E%20%3Ccircle%20cx%3D%2296%22%20cy%3D%22120%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22120%22%20r%3D%228.5%22%2F%3E%20%3Cpath%20d%3D%22M96%2094v-7M96%20153v-7M122%20120h7M63%20120h7M114%20102l5-5M73%20143l5-5M114%20138l5%205M73%2097l5%205%22%2F%3E%20%3Cpath%20d%3D%22M60%2034a15%2015%200%201%200%2019%2019l38%2038a5%205%200%200%200%208-8L87%2045a15%2015%200%200%200-19-19l10%2010-4%2014-14%204z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"), linear-gradient(145deg, #1B497B 0%, #2E6FA0 42%, #4AA6D9 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: right -10px top -6px, center;
    background-size: 230px auto, auto;
    box-shadow: 0 6px 20px rgba(12, 47, 82, .28);
}
/* the bootstrap 2-column split becomes a single stack, as in the reference */
.block-call-back > .row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}
.block-call-back > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* headline */
.block-call-back > .row > [class*="col-"]:first-child > .mb-3 {
    margin: 0 0 20px !important;
    font-family: Roboto-Bold, Arial, sans-serif;
    font-weight: 700;
    font-size: 30px !important;
    line-height: 1.14;
    text-align: left;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 30, 60, .25);
}
/* the <ul> of selling points becomes the 2x2 tile grid */
.block-call-back ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.block-call-back ul > li {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 84px;
    margin: 0;
    padding: 12px 12px 12px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F6FC 100%);
    box-shadow: 0 3px 8px rgba(9, 40, 72, .20);
    font-family: Roboto-Bold, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px !important;
    line-height: 1.18;
    color: #0A1A3C;
    text-align: left;
    list-style: none;
}
.block-call-back ul > li::before {
    content: "";
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2219%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Cpath%20d%3D%22M14.5%2024.5l6%206%2013-14%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.block-call-back ul > li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Ccircle%20cx%3D%2221.5%22%20cy%3D%2222.5%22%20r%3D%2215.5%22%20fill%3D%22none%22%20stroke%3D%22%232b7cc0%22%20stroke-width%3D%223.4%22%2F%3E%20%3Cpath%20d%3D%22M21.5%207A15.5%2015.5%200%200%201%2037%2022.5%22%20fill%3D%22none%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M14.5%2022.8l5.2%205.2%2010.6-11.2%22%20fill%3D%22none%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M35.5%2025.5l-6.5%209h5l-2%208%207-10h-5z%22%20fill%3D%22%23e8a317%22%2F%3E%20%3C%2Fsvg%3E"); }
.block-call-back ul > li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cpath%20d%3D%22M19%203.5l14.5%205.1v12.2c0%209.2-5.9%2016.2-14.5%2019.2C10.4%2037%204.5%2030%204.5%2020.8V8.6z%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Cpath%20d%3D%22M19%203.5l14.5%205.1v12.2c0%209.2-5.9%2016.2-14.5%2019.2z%22%20fill%3D%22%23123c66%22%2F%3E%20%3Cpath%20d%3D%22M11.8%2020.4l5%205%2010.2-10.6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%2237%22%20cy%3D%2234%22%20r%3D%229.5%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Cpath%20d%3D%22M27.5%2034h19M37%2024.5c3.9%205.6%203.9%2013.4%200%2019M37%2024.5c-3.9%205.6-3.9%2013.4%200%2019%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%2F%3E%20%3Ccircle%20cx%3D%2237%22%20cy%3D%2234%22%20r%3D%229.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.9%22%2F%3E%20%3C%2Fsvg%3E"); }
.block-call-back ul > li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cpath%20d%3D%22M3.5%2020V7.5a4%204%200%200%201%204-4H20a4%204%200%200%201%202.8%201.2l14%2014a4%204%200%200%201%200%205.6L24.3%2036.8a4%204%200%200%201-5.6%200l-14-14A4%204%200%200%201%203.5%2020z%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Ccircle%20cx%3D%2211.6%22%20cy%3D%2211.6%22%20r%3D%223.4%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20d%3D%22M13.5%2022.2l5%205%2010.6-11%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Crect%20x%3D%2228.5%22%20y%3D%2226%22%20width%3D%2216.5%22%20height%3D%2220%22%20rx%3D%222.6%22%20fill%3D%22%23123c66%22%2F%3E%20%3Crect%20x%3D%2230.9%22%20y%3D%2228.4%22%20width%3D%2211.7%22%20height%3D%224.6%22%20rx%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%22.93%22%2F%3E%20%3Ccircle%20cx%3D%2233.3%22%20cy%3D%2236.6%22%20r%3D%221.7%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2236.8%22%20cy%3D%2236.6%22%20r%3D%221.7%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2240.3%22%20cy%3D%2236.6%22%20r%3D%221.7%22%20fill%3D%22%23e8a317%22%2F%3E%20%3Ccircle%20cx%3D%2233.3%22%20cy%3D%2241.6%22%20r%3D%221.7%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2236.8%22%20cy%3D%2241.6%22%20r%3D%221.7%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2240.3%22%20cy%3D%2241.6%22%20r%3D%221.7%22%20fill%3D%22%23e8a317%22%2F%3E%20%3C%2Fsvg%3E"); }
.block-call-back ul > li:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cpath%20d%3D%22M16%2012V9.4a3%203%200%200%201%203-3h7a3%203%200%200%201%203%203V12%22%20fill%3D%22none%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%222.8%22%2F%3E%20%3Crect%20x%3D%224%22%20y%3D%2212%22%20width%3D%2237%22%20height%3D%2210%22%20rx%3D%222.4%22%20fill%3D%22%232b7cc0%22%2F%3E%20%3Crect%20x%3D%224%22%20y%3D%2220%22%20width%3D%2237%22%20height%3D%2218%22%20rx%3D%222.6%22%20fill%3D%22%23123c66%22%2F%3E%20%3Crect%20x%3D%2218%22%20y%3D%2218%22%20width%3D%229%22%20height%3D%227%22%20rx%3D%221.4%22%20fill%3D%22%23e8a317%22%2F%3E%20%3Crect%20x%3D%227.5%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%226%22%20rx%3D%221%22%20fill%3D%22%23e8a317%22%2F%3E%20%3Crect%20x%3D%2233.5%22%20y%3D%2224%22%20width%3D%224%22%20height%3D%226%22%20rx%3D%221%22%20fill%3D%22%23e8a317%22%2F%3E%20%3Ccircle%20cx%3D%2237%22%20cy%3D%2236.5%22%20r%3D%227.5%22%20fill%3D%22%23e8a317%22%2F%3E%20%3Ccircle%20cx%3D%2237%22%20cy%3D%2236.5%22%20r%3D%224.2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20d%3D%22M32.8%2042l-1.6%205.6%205.8-2.4%205.8%202.4-1.6-5.6%22%20fill%3D%22%23e8a317%22%2F%3E%20%3C%2Fsvg%3E"); }

/* the "$25 off" line becomes the coupon ticket */
.block-call-back > .row > [class*="col-"]:last-child > .mb-3 {
    position: relative;
    margin: 34px 0 0 !important;
    padding: 17px 16px 15px !important;
    border-radius: 10px;
    background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 42%, #DCEFFB 100%);
    box-shadow: 0 3px 10px rgba(9, 40, 72, .22);
    outline: 2px dashed #A8CBE8;
    outline-offset: -7px;
    font-family: Roboto-Bold, Arial, sans-serif;
    font-weight: 700;
    font-size: 19px !important;
    line-height: 1.2;
    color: #0A1A3C;
    text-align: center !important;
}
/* rosette over the ticket's top edge */
.block-call-back > .row > [class*="col-"]:last-child > .mb-3::before {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    width: 42px;
    height: 46px;
    margin-left: -21px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2052%22%3E%20%3Cpath%20d%3D%22M15.5%2034.5L10%2050l8.5-3.6L24%2051l-2-16.5z%22%20fill%3D%22%23d99514%22%2F%3E%20%3Cpath%20d%3D%22M32.5%2034.5L38%2050l-8.5-3.6L24%2051l2-16.5z%22%20fill%3D%22%23c8860f%22%2F%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2221%22%20r%3D%2217%22%20fill%3D%22%23f0ad1d%22%2F%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2221%22%20r%3D%2213%22%20fill%3D%22%23d99514%22%2F%3E%20%3Cpath%20d%3D%22M24%2012.4l2.6%205.4%205.9.8-4.3%204.1%201%205.9-5.2-2.8-5.2%202.8%201-5.9-4.3-4.1%205.9-.8z%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 30, 60, .3));
}
/* ticket notches, each filled with the card gradient's colour at that exact
   point - the left edge is darker than the right, so one shared colour reads
   as a grey dot stuck on rather than a hole punched through */
.block-call-back > .row > [class*="col-"]:last-child > .mb-3::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle 9px at left center, #3174A5 0 9px, rgba(0,0,0,0) 9.5px),
        radial-gradient(circle 9px at right center, #4094C6 0 9px, rgba(0,0,0,0) 9.5px);
}
/* the CTA becomes the gold pill */
.block-call-back .gold-button {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0 0 !important;
    padding: 15px 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #FDC34A 0%, #F7AC1B 100%) !important;
    box-shadow: 0 4px 10px rgba(9, 40, 72, .26) !important;
    font-family: Roboto-Bold, Arial, sans-serif !important;
    font-weight: 700;
    font-size: 19px !important;
    line-height: 1.1;
    color: #6B3C00 !important;
    text-align: center !important;
    text-decoration: none;
}
.block-call-back .gold-button:hover {
    background: linear-gradient(180deg, #FFCE64 0%, #F9B52C 100%) !important;
    color: #5A3200 !important;
}
/* the reference's caption under the button; no element exists for it */
.block-call-back::after {
    content: "Activate now";
    display: block;
    margin: 12px 0 0;
    font-size: 12px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255, 255, 255, .88);
}
@media only screen and (max-width:420px) {
    .block-call-back { padding: 22px 16px 18px !important; border-radius: 18px; background-size: 170px auto, auto; }
    .block-call-back > .row > [class*="col-"]:first-child > .mb-3 { font-size: 25px !important; }
    .block-call-back ul { gap: 10px; }
    .block-call-back ul > li { min-height: 76px; padding: 10px; gap: 8px; font-size: 13.5px !important; }
    .block-call-back ul > li::before { width: 36px; height: 36px; }
    .block-call-back > .row > [class*="col-"]:last-child > .mb-3 { font-size: 16px !important; padding: 15px 12px 13px !important; }
    .block-call-back .gold-button { font-size: 16.5px !important; padding: 13px 10px !important; }
}


/* ==== Mobile reading comfort + section rhythm (2026-09-09) ====================
   Andrei on the "Brands We Work With" block: "some text without nothing huge
   margins". Two separate causes, both fixed here.

   1. THE TEXT WAS 12px. `body { font-size:12px }` at ~line 1760 fires below
      500px, so every paragraph on every phone rendered 12px/18px — roughly 3px
      under the smallest size that reads comfortably on a handset, which is why
      body copy looked thin and unfinished rather than "designed". Rather than
      touch `body` (which would also resize nav, buttons, forms and the footer,
      and shift layouts sitewide), the bump is scoped to content prose: the
      paragraphs and lists inside content blocks. 15px/1.62 with a slightly
      softer ink is a normal mobile reading setting.

   2. THE GAPS WERE ~64px ABOVE AND ~94px BELOW the brand strip, stacked up from
      four separate sources: .Def-ListOfBrands' 30px top+bottom margins, the
      section's 14px/24px padding, the next section's 24px padding, and that
      section's h2 top margin. Measured on localhost before changing anything.
      Tightened at the two biggest contributors instead of piling on negative
      margins. ============================================================== */
@media only screen and (max-width:767px) {
    /* readable prose */
    .MainContentBlock > p,
    .MainContentBlock > ul > li,
    .MainContentBlock > ol > li,
    .GlobalTextJustify p,
    .setion-row .container > p {
        font-size: 15px;
        line-height: 1.62;
        color: #3B454F;
    }
    /* the brands paragraph carries .MainContentBlock too, and must stay a flex
       track — never inherit the prose sizing above */
    .Def-ListOfBrands > p.MainContentBlock { font-size: 0; line-height: 0; }

    /* Section rhythm. Measured before touching anything: 64px above the strip
       and 94px below it, stacked from five sources - the paragraph's own 16px,
       .MainContentBlock's 20px, the band's 24px padding, the next band's 24px,
       and that band's h2 top margin. Each is trimmed at source rather than
       cancelled with negative margins, so the whole mobile page tightens
       consistently instead of this one block becoming an exception. */
    .setion-row, .section-row { padding: 12px 0; }
    .MainContentBlock { margin-top: 10px; margin-bottom: 10px; }
    .Def-ListOfBrands { margin: 6px 0; }
    .setion-row h2, .section-row h2 { margin-top: 14px; margin-bottom: 10px; }

    /* the hairlines above and below the strip read as a leftover box edge now
       that the grey band is gone */
    .Def-ListOfBrands:not(.is-full-wall).global-hide-toll-element {
        border-top: 0;
        border-bottom: 0;
        position: relative;
    }
    /* a thin styled rail instead of the chunky default scrollbar - the default
       reads as a stray grey dash under the logos. Kept visible rather than
       hidden: on a touch device it fades on its own, and on a narrow desktop
       window it is the clearest signal that the row scrolls. */
    .Def-ListOfBrands:not(.is-full-wall) > p {
        scrollbar-width: thin;
        scrollbar-color: #CFD8E0 transparent;
    }
    .Def-ListOfBrands:not(.is-full-wall) > p::-webkit-scrollbar { height: 4px; }
    .Def-ListOfBrands:not(.is-full-wall) > p::-webkit-scrollbar-track { background: transparent; }
    .Def-ListOfBrands:not(.is-full-wall) > p::-webkit-scrollbar-thumb { background: #CFD8E0; border-radius: 2px; }

    /* soft fade at the right edge so it is obvious the logos keep going */
    .Def-ListOfBrands:not(.is-full-wall).global-hide-toll-element::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 36px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 82%);
    }
}


/* ==== Mobile hero: brand logos + warranty badge (rev. 2026-09-09) ===========
   1. LOGOS AT ONE SIZE. The five marks have wildly different native ratios -
      Bosch is 4.33:1, LG is 2.0:1, Samsung 3.0, Whirlpool 3.17, GE 3.71 - so
      setting a shared height alone made them look nothing like the same size:
      Bosch came out more than twice as wide as LG. They now sit in a grid of
      IDENTICAL cells with object-fit:contain, which is the only way to give
      marks of different shapes equal visual footprint.
      Two columns, not three: the text column inside that card measures 101px
      (measured live), so three cells would be 30px each and "GE APPLIANCES"
      and "BOSCH" would be illegible. Two gives 48px cells, which stay readable.
   2. WARRANTY BADGE moved onto the hero photo, pinned bottom-right, per
      Andrei. It needs .mh-photo to be a positioning context, and a soft white
      disc behind it so it stays readable over whatever the photo shows there.
   ============================================================================= */
@media only screen and (max-width:767px) {
    /* .mh-c-txt span { display:block } at ~line 1481 has specificity (0,1,1) and
       beats a bare .mh-c-brands (0,1,0) however late it appears, so the grid
       silently computed to display:block and everything sat in one column.
       Scoped through .mh-c-txt to match that specificity and win on order. */
    .mh-c-txt .mh-c-brands {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px 5px;
        margin-top: 4px;
        align-items: center;
        justify-items: center;
    }
    .mh-c-txt .mh-c-brands img {
        width: 100%;
        height: 13px;
        max-width: none;
        margin: 0;
        object-fit: contain;
        object-position: center;
    }

    /* WARRANTY BADGE — drawn by CSS, not by markup.
       First attempt put a .mh-warranty div inside .mh-photo and positioned it
       absolutely. That failed on the live site because .mh-wrap is itself
       position:relative (line ~1400), so whenever the div is NOT inside
       .mh-photo — which is the case for whatever version of the body is in the
       DB — the badge anchored to .mh-wrap and landed bottom-right of the whole
       hero, on top of the CTA.
       Painting it as .mh-photo::after removes the dependency on where the
       markup sits entirely: it is pinned to the photo no matter what the CMS
       body looks like, and needs no import to take effect.
       .mh-photo::before is already taken by the teal band behind the photo, so
       ::after is the only pseudo-element available here.
       The photo carries a 5px white border, hence the 14px inset rather than 8.
       z-index 2 clears .mh-photo img, which sits at 1.
       To change the badge, change the id in the url() below. */
    .mh-photo::after {
        content: "";
        position: absolute;
        z-index: 2;
        right: 14px;
        bottom: 14px;
        width: 92px;
        max-width: 30vw;
        aspect-ratio: 400 / 255;
        background: url("/image/?id=23") no-repeat center / contain;
        border-radius: 8px;
        filter: drop-shadow(0 2px 6px rgba(0, 25, 50, .5));
        pointer-events: none;
    }
    /* superseded by the ::after above; hidden so an imported body that still
       carries the old div does not show the badge twice */
    .mh-warranty { display: none; }
}

/* ==== Desktop coupons: one uniform box (2026-09-09) ==========================
   The four coupon files are all roughly 2.7:1 but not identically so (2.67,
   2.72, 2.75, 2.80), so width-driven sizing produced heights of 98/96/93/95px
   and the row stepped. Fixing the BOX and letting object-fit:contain place each
   image inside it makes every coupon occupy exactly the same rectangle; the
   ratio spread is under 3px, so no visible letterboxing. vertical-align:middle
   keeps them on one baseline. Phones are unaffected - they use the full-width
   one-per-row rule in the <=767px block above. */
@media only screen and (min-width:768px) {
    .coupon-image {
        width: 260px;
        height: 96px;
        max-width: 260px !important;
        object-fit: contain;
        vertical-align: middle;
    }
}


/* ==== Promo block is phone-only (2026-09-09) ================================
   Andrei: hide it on desktop. 768px is the site's own phone boundary, the same
   one .global-show-only-for-phone uses, so the block appears over exactly the
   range where the mobile hero and the 2-up services grid appear.

   Both class names are listed on purpose. .block-call-back is the block that is
   live (its markup comes from the CMS and is re-skinned in CSS); .promo-card is
   the clean-markup version of the SAME design, meant for new blocks. Hiding only
   one would mean the promo quietly reappears on desktop the first time a page
   uses the other. Delete a selector here to bring that variant back on desktop. */
@media only screen and (min-width:768px) {
    .block-call-back,
    .promo-card {
        display: none;
    }
}


/* ==== Mobile menu — rebuilt to new_menu.jpeg (2026-09-09) ====================
   Lives in _Layout.cshtml, NOT the CMS, so this needed no import — only a
   rebuild + restart, because Razor runtime compilation is not installed.

   Kept from the old menu (do not "tidy" these away):
     - #MenuNavigate stays display:none and is opened by MenuAct() in site.js,
       which also sets an inline max-height from the window height and toggles
       .BodyFix on <body>. The panel therefore scrolls internally.
     - The logo and the X live in the site header above the panel, which stays
       visible while the menu is open — that is the mockup's top bar, so the
       menu does not draw its own.

   New here:
     - every top-level row carries a line-art icon as a ::before
     - the services list is ALWAYS expanded (no accordion). With 9 real service
       pages this is more taps saved than screen space lost, and the panel
       already scrolls. The old onclick="ShowMenuDetails('mob_sub0')" is gone.
     - a vertical rail connects the service sub-items, per the mockup
     - a sticky Book/Call bar pinned to the bottom of the panel
   ============================================================================= */
#MenuNavigate {
    padding: 0;
    background: #fff;
    display: none;           /* kept — site.js slides it down */
    overflow: auto;
}
.mnav { padding: 6px 16px 0; }

.mnav-group, .mnav-row { border-bottom: 1px solid #e6e9ee; }
/* only the final ROW loses its rule. .mnav-group must keep its border: there is
   just one group, so :last-of-type matched it and the divider under the services
   list disappeared - the mockup has one there. */
.mnav-row:last-of-type { border-bottom: 0; }

/* a top-level row: icon + label */
.mnav-head, .mnav-row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 62px;
    padding: 12px 2px;
    font-family: Roboto-Regular, Arial, sans-serif;
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: #1f2933;
    text-decoration: none;
}
a.mnav-row:hover, a.mnav-row:focus { color: #1991CB; text-decoration: none; }
.mnav-head::before, .mnav-row::before {
    content: "";
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.mnav-head { padding-bottom: 4px; }

/* the services sub-list, with the mockup's connecting rail */
.mnav-sub {
    margin: 0 0 14px 24px;
    padding: 2px 0 2px 22px;
    border-left: 1.5px solid #d3d8e0;
}
.mnav-sub a {
    display: block;
    padding: 9px 2px;
    font-size: 17px;
    line-height: 1.2;
    color: #33404d;
    text-decoration: none;
}
.mnav-sub a:hover, .mnav-sub a:focus { color: #1991CB; text-decoration: none; }

/* pinned Book / Call bar. sticky (not fixed) so it rides the panel's own
   scroll container and cannot cover content on short screens */
.mnav-cta {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 6px;
    padding: 14px 16px 16px;
    background: #fff;
    border-top: 1px solid #e6e9ee;
    box-shadow: 0 -4px 12px rgba(20, 40, 60, .10);
    text-align: center;
}
a.mnav-book, a.mnav-book:link, a.mnav-book:visited {
    display: block;
    padding: 14px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #F79B36 0%, #EF7F14 100%);
    box-shadow: 0 3px 9px rgba(190, 90, 20, .34);
    font-family: Roboto-Bold, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}
a.mnav-book:hover { background: linear-gradient(180deg, #F9A94D 0%, #E0740D 100%); color: #fff; }
.mnav-book::before {
    content: "";
    display: inline-block;
    vertical-align: -3px;
    margin-right: 9px;
    width: 19px;
    height: 19px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M16.2%202.2a6%206%200%200%200-5.4%208.6L2.9%2018.7a2.3%202.3%200%200%200%203.2%203.2l7.9-7.9a6%206%200%200%200%207.5-7.7l-3.3%203.3-2.8-.7-.7-2.8z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.mnav-call {
    margin: 11px 0 0;
    font-size: 16px;
    color: #33404d;
}
.mnav-call a { color: #1f2933; text-decoration: underline; }
.mnav-call::before {
    content: "";
    display: inline-block;
    vertical-align: -2px;
    margin-right: 7px;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M5.2%203.3c.6%200%201.2.4%201.4%201l1.2%202.8c.2.5%200%201.1-.4%201.5l-1.4%201.1a11.4%2011.4%200%200%200%205.5%205.5l1.1-1.4c.4-.4%201-.6%201.5-.4l2.8%201.2c.6.2%201%20.8%201%201.4v3c0%20.9-.8%201.7-1.7%201.6A17.2%2017.2%200%200%201%203.6%205c-.1-1%20.7-1.7%201.6-1.7z%22%20fill%3D%22%2333404d%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/* header tint while the menu is open, matching the mockup's top bar */
body.BodyFix .nav-bar.sticky-top { background-color: #E9EEFB; }

.mnav-i-services::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%231f2933%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Crect%20x%3D%223.5%22%20y%3D%2217%22%20width%3D%2233%22%20height%3D%2221%22%20rx%3D%223%22%2F%3E%20%3Cpath%20d%3D%22M3.5%2024h33%22%2F%3E%20%3Cpath%20d%3D%22M14%2017v-3a3%203%200%200%201%203-3h6a3%203%200%200%201%203%203v3%22%2F%3E%20%3Crect%20x%3D%2216.5%22%20y%3D%2221%22%20width%3D%227%22%20height%3D%226%22%20rx%3D%221.4%22%2F%3E%20%3Cpath%20d%3D%22M35%206.5a5.5%205.5%200%200%200-5%207.7l-3.2%203.2a2%202%200%200%200%202.8%202.8l3.2-3.2A5.5%205.5%200%200%200%2040.5%2012l-2.8%202.8-2.5-.6-.6-2.5z%22%2F%3E%20%3C%2Fsvg%3E"); }
.mnav-i-areas::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%231f2933%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M24%205.5c-6.6%200-12%205.3-12%2011.9%200%208.5%2012%2021.1%2012%2021.1s12-12.6%2012-21.1c0-6.6-5.4-11.9-12-11.9z%22%2F%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2217.5%22%20r%3D%224.6%22%2F%3E%20%3Cellipse%20cx%3D%2224%22%20cy%3D%2241.5%22%20rx%3D%2212.5%22%20ry%3D%223.2%22%2F%3E%20%3C%2Fsvg%3E"); }
.mnav-i-contact::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%231f2933%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M10.6%206.5c1%200%202%20.6%202.3%201.6l2%204.7c.4.9.1%201.9-.6%202.5l-2.4%201.9a19%2019%200%200%200%209.2%209.2l1.9-2.4c.6-.7%201.6-1%202.5-.6l4.7%202c1%20.3%201.6%201.3%201.6%202.3v5c0%201.6-1.3%202.9-2.9%202.8A28.6%2028.6%200%200%201%207.8%209.4a2.8%202.8%200%200%201%202.8-2.9z%22%2F%3E%20%3Crect%20x%3D%2227%22%20y%3D%226.5%22%20width%3D%2217%22%20height%3D%2212.5%22%20rx%3D%223%22%2F%3E%20%3Cpath%20d%3D%22M33%2022.5l-1.5-3.5H36z%22%2F%3E%20%3Cpath%20d%3D%22M31.5%2012.8h8%22%2F%3E%20%3C%2Fsvg%3E"); }
.mnav-i-commercial::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%231f2933%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M7%2018v21h34V18%22%2F%3E%20%3Cpath%20d%3D%22M4.5%2018l3.2-8.5a2%202%200%200%201%201.9-1.3h28.8a2%202%200%200%201%201.9%201.3L43.5%2018a5%205%200%200%201-9.6%201.6A5%205%200%200%201%2024%2019.7a5%205%200%200%201-9.9-.1A5%205%200%200%201%204.5%2018z%22%2F%3E%20%3Crect%20x%3D%2213%22%20y%3D%2225%22%20width%3D%229.5%22%20height%3D%227.5%22%20rx%3D%221%22%2F%3E%20%3Cpath%20d%3D%22M28%2039V27.5h8V39%22%2F%3E%20%3C%2Fsvg%3E"); }
/* the mockup uses real brand marks here rather than an icon, so two logos are
   stacked as background layers on the one pseudo-element */
.mnav-i-brands::before {
    background-image: url("/files/brands/lg.png"), url("/files/brands/whirlpool.png");
    background-size: 34px auto, 41px auto;
    background-position: center top 4px, center bottom 4px;
    background-repeat: no-repeat, no-repeat;
}


/* ==== Service-page hero: the homepage's tint + teal band (2026-09-10) =======
   Andrei: "home page has BG color and near main image there is a block with
   different color - looks great, let's implement the same".
   Those are .mh-wrap::before (#f4f7fc page tint) and .mh-photo::before (the
   #4f7f96 band the photo sits on) on the homepage. Same values here so the two
   heroes match exactly; if you retune one, retune both.

   Phone only: above 767px #section_about shows its real hero background image,
   and a tint would fight it.
   .svc-photo::after is already the warranty badge, so the band goes on
   ::before - which is why the badge and the band live on different elements
   rather than both on the photo wrapper. */
@media only screen and (max-width:767px) {
    .svc-hero { position: relative; }
    .svc-hero::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background: #f4f7fc;
    }
    /* everything above the tint */
    .svc-hero > * { position: relative; z-index: 1; }

    /* THE positioning context for both the band and the badge below. Without
       this the pseudo-elements resolve against the nearest positioned ancestor
       (.svc-hero / its container) and land at the BOTTOM OF THE WHOLE HERO -
       which is exactly what happened on 2026-09-10. .mh-photo on the homepage
       has always carried it; the service-page copy dropped it. */
    /* .svc-hero prefix: bootstrap's `.row > *` also matches this element at
       0-1-0 and loads later, so a bare `.svc-photo` margin is ignored. The
       bottom margin is what keeps the band (which hangs 18px below the photo)
       off the H1 that follows it. */
    .svc-hero .svc-photo { position: relative; margin: 16px 0 38px; }

    /* ---- Warranty badge: EVERY service page, not just the reshaped ones ----
       Andrei: "we need to mention everywhere on first screen about warranty".

       Desktop already shows the warranty image beside the hero bullet list on all
       eight service pages. On phones it was painted only where .svc-photo exists,
       so the five pages not yet reshaped (washer, dryer, oven, stove-cooktop,
       appliance-installation) showed nothing.

       Rather than edit five page bodies and require five CMS imports, the second
       selector matches the markup those pages ALREADY have:
           <div class="col-md-6"><img class="global-show-only-for-phone ...">
       Verified identical on all five. So the badge appears the moment this file
       is refreshed - no content edit, no import.

       The wrapper must be position:relative or the badge escapes to the hero's
       bottom (see the note above), hence the paired rule. Keep both selectors:
       .svc-photo carries it on reshaped pages, :has() covers the rest, and a
       page that gains .svc-photo later simply matches both. */
    .svc-hero .svc-photo,
    #section_about [class*="col-"]:has(> img.global-show-only-for-phone) {
        position: relative;
    }

    .svc-photo::after,
    #section_about [class*="col-"]:has(> img.global-show-only-for-phone)::after {
        content: "";
        position: absolute;
        z-index: 2;
        right: 14px;
        bottom: 14px;
        width: 92px;
        max-width: 30vw;
        aspect-ratio: 400 / 255;
        background: url("/image/?id=23") no-repeat center / contain;
        border-radius: 8px;
        filter: drop-shadow(0 2px 6px rgba(0, 25, 50, .5));
        pointer-events: none;
    }
    /* With the badge now on the photo, the FULL-SIZE warranty image below the
       bullet list is the same claim twice on one screen. On reshaped pages it is
       already inside .global-show-only-for-PC and hidden here; this hides it on
       the pages that have not been reshaped yet, so phone behaviour matches
       everywhere. Scoped to #section_about so warranty images elsewhere on the
       page are untouched. */
    #section_about img[src*="id=23"] { display: none; }

    /* The band is deliberately NOT extended to un-reshaped pages: it only reads
       correctly against .svc-hero's #f4f7fc tint, which those pages lack. It
       arrives with the rest of the hero when each page gets reshaped. */
    .svc-photo::before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        bottom: -18px;
        height: 78px;
        background: #4f7f96;
    }
    /* the photo itself must clear the band. White frame + radius + shadow are
       copied from .mh-photo img so the two heroes read identically. */
    .svc-photo img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: auto;
        border: 5px solid #fff;
        border-radius: 12px;
        box-shadow: 0 3px 12px rgba(20,40,60,.20);
    }
}

/* ==== Chip rows ============================================================
   Two uses on the service pages, one component:
     .parts-chips            – "Parts We Can Replace": plain white pills, a
                               scannable inventory. Not clickable, so no
                               affordance beyond the pill itself.
     .parts-chips.is-links   – "Other Appliances We Repair": the same pill
                               tinted blue with a chevron, so it reads as
                               navigation rather than a list of words.

   RESTORED 2026-09-10. The base .parts-chips / .part-chip rules were missing
   from this file while the .is-links modifier survived, so BOTH blocks
   rendered as run-on inline text — the modifier was recolouring text that had
   no pill under it. Same stale-snapshot cause as the icon rules below. If a
   modifier appears to work but its base does not, that is the signature. */
.parts-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 8px;
    padding: 0;
    list-style: none;
}
.part-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid #DCE6EE;
    border-radius: 999px;
    background: #fff;
    color: #3B454F;
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
}

/* linked chips (related services) — same pill, now obviously tappable */
.parts-chips.is-links {
    gap: 9px;
    margin-top: 18px;
}
.parts-chips.is-links .part-chip {
    color: #16506F;
    text-decoration: none;
    border-color: #CBDDEC;
    background: #F2F8FD;
    padding: 9px 13px 9px 16px;
    min-height: 40px;          /* comfortable phone tap target */
    font-weight: 600;
    transition: background-color .15s, border-color .15s, color .15s;
}
/* chevron: a rotated square border, so it needs no image and inherits colour */
.parts-chips.is-links .part-chip::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: .55;
    flex: none;
}
.parts-chips.is-links a.part-chip:hover,
.parts-chips.is-links a.part-chip:focus {
    background: #1991CB;
    border-color: #1991CB;
    color: #fff;
    text-decoration: none;
}
.parts-chips.is-links a.part-chip:hover::after,
.parts-chips.is-links a.part-chip:focus::after { opacity: .9; }

/* .is-quiet — a subordinate second row. "Other Appliances We Repair" is an
   accurate heading for the six "<X> Repair" links above it; Appliance
   Installation, Brands and Service Areas are useful internal links but they
   are not appliances, so they sit below in a lighter pill instead of being
   filed under a heading that does not describe them. */
.parts-chips.is-links.is-quiet {
    margin-top: 9px;
    margin-bottom: 4px;
}
.parts-chips.is-links.is-quiet .part-chip {
    background: #fff;
    border-color: #DCE6EE;
    color: #52606D;
    font-weight: 400;
    font-size: 13.5px;
    min-height: 34px;
    padding: 6px 11px 6px 14px;
}
.parts-chips.is-links.is-quiet .part-chip::after { opacity: .4; margin-left: 7px; }

/* Phone: long labels ("Stove & Cooktop Repair") must be allowed to wrap rather
   than force a horizontal scrollbar on a 320px screen. */
@media only screen and (max-width:767px) {
    .parts-chips { gap: 7px; }
    .part-chip { white-space: normal; font-size: 13.5px; padding: 6px 12px; }
    .parts-chips.is-links .part-chip { font-size: 14px; padding: 9px 12px 9px 15px; }
}


/* ==== Value-prop icons + offer cards — RESTORED 2026-09-10 ==================
   These were lost once by copying a stale staged snapshot of this file over a
   newer committed one. If a block you know you added is missing, that is the
   cause: re-stage from the device BEFORE copying, every time.

   Icons are copied verbatim from the .mh-card mobile-hero set so the two
   components cannot drift; re-copy if you restyle a hero icon.
   .ico-cert2 (not .ico-cert) leaves .ico-cert free for a future symptom icon.

   .is-offer promotes a card into the site's gold/CTA family - used for the two
   commercial claims (price, free service call) so they read differently from
   the neutral cards beside them. Layout is untouched, so rows still align. */
.issue-card.ico-cert2::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8.4%2015.4%205.9%2022.6l3.3-1.5%202.2%201.7%201.7-6.6z%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M15.6%2015.4l2.5%207.2-3.3-1.5-2.2%201.7-1.7-6.6z%22%20fill%3D%22%2316506f%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.6%22%20r%3D%227.4%22%20fill%3D%22%2316506f%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.6%22%20r%3D%225.6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220.9%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M9.1%208.7l2.1%202.1%203.8-4%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-sameday::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M1%208.4h4.6M0.4%2012h3.8M1%2015.6h4.6%22%20stroke%3D%22%2316506f%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2214.4%22%20cy%3D%2212%22%20r%3D%228.5%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M14.4%206.9V12l3.4%202%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-freesvc::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.2%202.2a6%206%200%200%200-5.4%208.6L2.9%2018.7a2.3%202.3%200%200%200%203.2%203.2l7.9-7.9a6%206%200%200%200%207.5-7.7l-3.3%203.3-2.8-.7-.7-2.8z%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M2.4%202.4%2021.6%2021.6%22%20stroke%3D%22%23d8452f%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-cost::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%220.9%22%20y%3D%224.8%22%20width%3D%2222.2%22%20height%3D%2214.4%22%20rx%3D%222.2%22%20fill%3D%22%2316506f%22%2F%3E%3Crect%20x%3D%223.1%22%20y%3D%227%22%20width%3D%2217.8%22%20height%3D%2210%22%20rx%3D%221.2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220.9%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.9%22%20fill%3D%22%23fff%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2214.5%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%226.4%22%20font-weight%3D%22bold%22%20fill%3D%22%2316506f%22%20text-anchor%3D%22middle%22%3E%24%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.issue-card.ico-years::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201.4%2015%208l7.2.8-5.4%204.9%201.5%207.1L12%2017.3%205.7%2020.8l1.5-7.1L1.8%208.8%209%208z%22%20fill%3D%22%2316506f%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2213.9%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%226.8%22%20font-weight%3D%22bold%22%20fill%3D%22%23fff%22%20text-anchor%3D%22middle%22%3E15%2B%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.issue-card.ico-tools::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22rotate%28-40%2012%2012%29%22%3E%3Crect%20x%3D%2210.7%22%20y%3D%226.4%22%20width%3D%222.7%22%20height%3D%2215%22%20rx%3D%221.35%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M12%201.8a4%204%200%201%200%200%208%204%204%200%200%200%200-8zm0%202.2a1.8%201.8%200%201%201%200%203.6%201.8%201.8%200%200%201%200-3.6z%22%20fill%3D%22%2316506f%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2840%2012%2012%29%22%3E%3Crect%20x%3D%2210.95%22%20y%3D%222.6%22%20width%3D%222.1%22%20height%3D%2211.2%22%20rx%3D%220.5%22%20fill%3D%22%2316506f%22%2F%3E%3Crect%20x%3D%229.5%22%20y%3D%2213.2%22%20width%3D%225%22%20height%3D%228.2%22%20rx%3D%221.7%22%20fill%3D%22%2316506f%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.issue-card.is-offer {
    border-color: #F0C270;
    background: linear-gradient(180deg, #FFFAF0 0%, #FFF2D9 100%);
    box-shadow: 0 1px 3px rgba(120, 80, 10, .14);
}
.issue-card.is-offer .issue-t { color: #7A4E05; }
.issue-card.is-offer .issue-d { color: #6B5836; }

/* The /book/ page uses .issue-grid for pairs of cards (the two offers above the
   form, the two trust cards below it). The 3-up/4-up steps above would strand
   two cards in a quarter of the row, so pin those grids to 2-up. They stack on
   a phone because each label carries a full sentence, not a two-word symptom. */
.issue-grid.is-duo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .issue-grid.is-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ==== Breadcrumbs (2026-09-10) =============================================
   Added because the site had no trail and no BreadcrumbList markup anywhere.
   Rendered by SystemClass.BuildBreadcrumb from _Layout, above the body, and
   suppressed on the homepage. Kept deliberately quiet: it is orientation, not
   navigation people are meant to notice before the H1. */
.crumbs {
    font-size: 13px;
    line-height: 1.4;
    padding: 9px 0 0;
    color: #6B7A88;
}
.crumbs a {
    color: #16506F;
    text-decoration: none;
}
.crumbs a:hover,
.crumbs a:focus { text-decoration: underline; }
.crumbs-sep { margin: 0 7px; color: #B6C2CD; }
.crumbs-here { color: #6B7A88; }

@media only screen and (max-width:767px) {
    /* the phone hero already starts tight under the sticky header; keep the
       trail from adding another band of vertical space */
    .crumbs { font-size: 12.5px; padding: 7px 12px 0; }
    .crumbs .container { padding-left: 0; padding-right: 0; }
}


/* ==== "Our Happy Customers" — one row that scrolls (2026-09-10) =============
   Andrei: "let's make this block always in one row - and scroll to right".
   Four portrait photos were wrapping to 3 + 1, which reads as a broken grid.

   The photos are inline siblings of the <h2> inside `<div class="text-center ">`
   with no wrapper of their own, so there is nothing to turn into a scroller
   directly. `:has(> .img-thumbsup)` targets that exact div and nothing else —
   the same no-content-edit trick used for the warranty badge, so this needs no
   CMS import and lands on all eight service pages at once.

   /brands/ stores the SAME block in a different shape - three <img
   class="img-thumbnail"> inside <div class="col-md-7 text-center"> with an
   inline max-height and no <h2> - so `.img-thumbsup` never matched there and the
   photos stacked into a column on a phone. Matched on alt="Our Happy Customers"
   instead, which is the one thing both shapes share and which no other image on
   the site carries. The sticky-h2 rule simply finds nothing on /brands/.

   Applied up to 991px, not just phones: the desktop rule caps each photo at
   200px, so four plus gaps need ~830px and they wrap on small tablets too.

   The <h2> is a block child of the scroll container, so it would slide out of
   view as the row scrolls. `position: sticky; left: 0` pins it while the photos
   move underneath. */
@media only screen and (max-width: 991px) {
    .text-center:has(> .img-thumbsup),
    .text-center:has(> img[alt="Our Happy Customers"]) {
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        text-align: left;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        /* thin rail, matching the brands scroller. Left visible on purpose: it
           is the clearest signal the row keeps going, and it fades by itself on
           touch devices. */
        scrollbar-width: thin;
        scrollbar-color: #CFD8E0 transparent;
    }
    .text-center:has(> .img-thumbsup)::-webkit-scrollbar,
    .text-center:has(> img[alt="Our Happy Customers"])::-webkit-scrollbar { height: 4px; }
    .text-center:has(> .img-thumbsup)::-webkit-scrollbar-track,
    .text-center:has(> img[alt="Our Happy Customers"])::-webkit-scrollbar-track { background: transparent; }
    .text-center:has(> .img-thumbsup)::-webkit-scrollbar-thumb,
    .text-center:has(> img[alt="Our Happy Customers"])::-webkit-scrollbar-thumb { background: #CFD8E0; border-radius: 2px; }

    /* pinned so the heading stays put while the photos scroll */
    .text-center:has(> .img-thumbsup) > h2,
    .text-center:has(> img[alt="Our Happy Customers"]) > h2 {
        position: sticky;
        left: 0;
        text-align: center;
        white-space: normal;
    }

    /* Uniform HEIGHT rather than width: these photos have slightly different
       aspect ratios, so matching the height is what makes the row look level.
       max-width beats the 44% !important from the phone block above. */
    .text-center:has(> .img-thumbsup) > .img-thumbsup,
    .text-center:has(> img[alt="Our Happy Customers"]) > img {
        display: inline-block;
        vertical-align: top;
        height: 168px;
        width: auto;
        max-width: none !important;
        max-height: none;
        margin-right: 8px;
        scroll-snap-align: start;
    }
    .text-center:has(> .img-thumbsup) > .img-thumbsup:last-of-type,
    .text-center:has(> img[alt="Our Happy Customers"]) > img:last-of-type { margin-right: 0; }
}


/* ==== Mobile padding trim + appliance-type cards (2026-09-10) ===============
   Andrei: "sometimes there are paddings which are good for desktop but for mobile
   is bad - let's remove for mobile devices."

   Measured at 375px before touching anything:
       .container.max-width.Top-Main-Block   12px each side   (the page gutter)
     + .row.GlobalContentPadding2            10px each side   (desktop 40px, halved)
     = text starting 22px in, 331px of a 375px screen - 12% lost to nested padding.

   The container gutter is the one that should own the side margin, so the inner
   row drops its horizontal padding entirely and keeps a tightened vertical rhythm.
   Six problem sections x 20px top and bottom was also ~240px of dead scroll. */
@media only screen and (max-width: 767px) {
    .GlobalContentPadding2 { padding: 12px 0; }

    /* .GlobalPaddingLeft's phone override is NOT !important while the desktop rule
       IS, so it only wins by cascade order. Pinned here so a later edit upstream
       cannot silently reinstate a 40px indent on phones. */
    .GlobalPaddingLeft  { padding-left: 0 !important; }
    .GlobalPaddingRight { padding-right: 0 !important; }
}

/* "Types of Cooktop/Stove appliances we deal with" - stove page only.
   col-md-3 collapses to one full-width item per row on a phone, so four tall
   photos became four screens of scrolling. Two up, as cards, phone only:
   desktop keeps its untouched 4-across row. */
@media only screen and (max-width: 767px) {
    /* Scoped with .row on purpose: bootstrap's `.row { display:flex }` matches at
       the same 0-1-0 specificity and loads later, so a bare class loses and the
       items fall back to shrink-to-fit flex widths. Same trap as .svc-photo. */
    .row.appliance-types {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 4px 0 16px;
    }
    .row.appliance-types > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: none;
        padding: 10px 8px 12px;
        background: #fff;
        border: 1px solid #E3EAF0;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .row.appliance-types h4 {
        font-size: 14px;
        line-height: 1.25;
        margin: 0 0 8px;
        color: #16506F;
        min-height: 2.5em;          /* keeps the photos on one baseline when a
                                       label wraps to two lines */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* the inline style="max-height:180px" on each img needs !important to beat */
    .row.appliance-types img {
        max-height: 104px !important;
        width: auto;
        max-width: 100%;
        margin: auto auto 0;
        object-fit: contain;
    }
}


/* ==== "Technicians available right now" badge (2026-09-10) ==================
   Andrei: "simple show only 7am-10pm by New York time - that's it."

   The string had sat in _Layout with a hardcoded style="display:none" and no
   code anywhere to ever reveal it. Two things were wrong with just deleting
   that inline style:
     1. nothing gated it by time, so it would have claimed live technicians at 3am;
     2. its wrapper is position:static and only #DopPhone inside it is fixed, so
        the text landed as a stray line BELOW the footer, not by the button.

   So: hidden by default here, positioned as a pill above the floating call
   button, and revealed by site.js only inside business hours. Default-hidden is
   deliberate - if the script fails or JS is off, the claim is simply not made
   rather than shown at the wrong hour. */
.tech-live {
    display: inline-block;
    position: fixed;
    z-index: 9;                 /* same layer as .DivPhoneT: above content, below
                                   the popups at z 10/11/60 */
    right: 10%;                 /* matches .DivPhoneT so the pill and the 64px
                                   button share a right edge */
    bottom: calc(5% + 74px);    /* button bottom 5% + its 64px + 10px gap */
    max-width: 62vw;
    padding: 6px 12px 6px 26px;
    border-radius: 999px;
    background: #14663F;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 40, 20, .28);
    pointer-events: none;       /* never steals a tap from the call button */
}
/* the live dot */
.tech-live::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #46D67F;
}

/* ---- PHONE: a full-width strip pinned to the bottom, always visible --------
   Andrei, 2026-09-10. The badge is a standing fact ("7 technicians across
   Manhattan"), so there is no time gate anywhere any more - it is equally true at
   any hour, and site.js no longer touches it.

   To reinstate a schedule (e.g. if the wording ever becomes an availability
   claim again): give .tech-live `display:none`, add back
   `.tech-live.is-open { display: inline-block; }`, and restore the New-York-hour
   scheduler - the full snippet is preserved in rules.md.

   Sits at bottom:0, so it clears the call button (bottom:5%, 64px tall) instead
   of colliding with it, and body gains matching padding so the strip never
   permanently covers the last line of the footer. */
@media only screen and (max-width: 767px) {
    .tech-live {
        display: block;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        border-radius: 0;
        text-align: center;
        font-size: 13px;
        white-space: nowrap;
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 10px rgba(0, 40, 20, .22);
    }
    /* the dot rejoins the text flow instead of being pinned to a pill's left edge */
    .tech-live::before {
        position: static;
        display: inline-block;
        left: auto;
        top: auto;
        margin: 0 8px 1px 0;
        vertical-align: middle;
    }
    /* keep the strip from sitting on top of the footer's last line */
    body { padding-bottom: 38px; }
}


/* ==== Brand strip: ONE scrolling row on every page but /brands/ (2026-09-10) ==
   Andrei: "brand page let's use in one row and scroll right" + "only on brand
   page should be shown all brands without scrolls."

   ~66 logos wrapped into a 300px-tall inner scroll box is the worst of both
   worlds: it eats a screen of height AND still hides most of the marks. The
   phone-only scroller added 2026-09-09 is now promoted to every width. It stays
   OFF on /brands/, where seeing the whole list IS the page - hence the
   `:not(.is-full-wall)` prefixes on the old phone block above. The marker class
   lives in the CONTENT, not the URL - see the note at the .is-full-wall rules.

   No content edit and no CMS import: this targets markup already in the DB. */
.Def-ListOfBrands:not(.is-full-wall).global-hide-toll-element {
    height: auto;
    overflow: visible;
    position: relative;
    border-top: 0;
    border-bottom: 0;
}
.Def-ListOfBrands:not(.is-full-wall) > p.MainContentBlock {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 12px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #CFD8E0 transparent;
}
.Def-ListOfBrands:not(.is-full-wall) > p.MainContentBlock > * {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
}
/* The tiles carry width:12vw on the base rule, which on a wide desktop makes a
   flex item ~180px and on a narrow one ~85px - inconsistent either way once
   they are on a single track. Fixed cell instead, so every mark gets the same
   footprint no matter its aspect ratio. The phone block sets 104x64 with
   !important and keeps winning below 768px, which is what we want. */
.Def-ListOfBrands:not(.is-full-wall) .brand-block {
    width: 120px;
    max-width: none;
    height: 68px;
    /* margin:0 belongs HERE, not only on the flex item. In the
       <a><span class="brand-block"> shape the flex item is the <a>, so the
       `> * { margin: 0 }` rule above never reaches the tile and the base
       component's `margin: 8px` survived. Measured at 1280px: 59 items at 120px
       and Forno, Gaggenau and Garland at 136px - a 16px gap around exactly the
       three wrapper-shape tiles. The phone block hid it with !important. */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Def-ListOfBrands:not(.is-full-wall) .brand-block::before { display: none; }
.Def-ListOfBrands:not(.is-full-wall) .brand-block > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
/* soft fade at the right edge - the clearest "this keeps going" signal there is */
.Def-ListOfBrands:not(.is-full-wall).global-hide-toll-element::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 44px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 82%);
}
.Def-ListOfBrands:not(.is-full-wall) > p.MainContentBlock::-webkit-scrollbar { height: 5px; }
.Def-ListOfBrands:not(.is-full-wall) > p.MainContentBlock::-webkit-scrollbar-track { background: transparent; }
.Def-ListOfBrands:not(.is-full-wall) > p.MainContentBlock::-webkit-scrollbar-thumb { background: #CFD8E0; border-radius: 3px; }

/* ---- the full wall: no scroll box, no inner scrollbar ---------------------
   🚨 KEYED ON THE CONTENT, NOT THE URL. The first version of this used a
   `page-brands` body class, and Andrei immediately hit the hole in it: he was
   previewing the brands content at /test/, where the slug is "test", so the
   page got the scroller it was supposed to be exempt from.

   A URL is not a property of the content. The same content can be staged at
   /test/, moved, or duplicated, and it should look the same everywhere. So the
   markers live in the markup the CMS stores:

     .is-full-wall   on the Def-ListOfBrands div   -> show every brand, no scroll
     .is-review-row  on the col-md-7 photo column  -> scroll the reviews at all widths
     .is-narrow-col  on the col-md-5 text column   -> 2-up issue-grid, not 4-up

   Every other page keeps the scroller through `:not(.is-full-wall)`, so the
   default is the common case and opting out is explicit and local.

   The `page-<slug>` body class in _Layout.cshtml still exists and is still a
   useful hook - but reach for it only when the behaviour genuinely belongs to
   the URL, not when it belongs to the content that happens to live there. */
.Def-ListOfBrands.is-full-wall.global-hide-toll-element {
    height: auto !important;
    overflow: visible !important;
    border-top: 0;
    border-bottom: 0;
}
/* GRID, not flex, and this is not a style preference - it is the fix for a bug.
   🚨 The tiles come in three markup shapes (see the note at the phone scroller):
       <a class="brand-block">                     57 tiles
       <span class="brand-block"><a><img>          2  tiles  (Admiral, AEG)
       <a><span class="brand-block"><img>          3  tiles  (Forno, Gaggenau, Garland)
   In the third shape the element the row lays out is the OUTER <a>, and
   .brand-block is a span inside it. A percentage width on .brand-block therefore
   resolves against that <a> - not against the row - and the <a> is itself
   content-sized, so it collapses. Measured at 375px with `width: 30.5%`:
   59 tiles at 100px, and Forno at 26px, Gaggenau and Garland at 45px. Exactly
   the three tiles Andrei pointed at.

   With grid, every direct child is a grid item stretched to its track whatever
   its tag, so `width: 100%` on .brand-block is correct in all three shapes: in
   shape 1 the containing block is the track itself, in shape 3 it is an <a>
   already stretched to the track. auto-fill also drops the fixed 2-up/3-up
   breakpoints - the wall simply fits as many 104px tiles as the width allows. */
.Def-ListOfBrands.is-full-wall > p.MainContentBlock {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 4px 0 8px;
    overflow: visible;
}
.Def-ListOfBrands.is-full-wall > p.MainContentBlock > * {
    display: flex;
    margin: 0;
    min-width: 0;
}
.is-full-wall .brand-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    height: 66px;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid #E6EDF3;
    border-radius: 8px;
    background: #fff;
}
/* the base component centres its logo with a 0-width ::before and
   vertical-align; flex centring replaces that, so the strut has to go or it
   adds a phantom item to the row */
.is-full-wall .brand-block::before { display: none; }
/* shape 2 puts an <a> between the tile and the image - make it transparent to
   layout instead of letting the logo sit against one edge of the tile */
.is-full-wall .brand-block > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.is-full-wall .brand-block img { max-width: 100%; max-height: 100%; }
@media only screen and (max-width: 767px) {
    .Def-ListOfBrands.is-full-wall > p.MainContentBlock {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: 8px;
    }
    .is-full-wall .brand-block { height: 56px; padding: 5px 6px; }
}


/* ==== Appliance icons for chip rows - .parts-chips.is-icons (2026-09-10) =====
   Andrei on the /appliance-installation/ list: "remove 'installation' from these
   blocks and add icons." The heading already says What We Install, so repeating
   the word nine times was pure noise - the chips now carry just the appliance,
   and an icon does the work the repeated word was doing.

   Same navy (#16506f) and the same flat-with-white-detail construction as the
   .issue-card icon set, so the two families read as one system. Drawn at 24x24
   and painted at 18px, with every stroke >= 1.3 so nothing dissolves at that
   size. Washer and dryer share a drum on purpose and are told apart by what is
   inside it: water waves vs a tumble swirl. */
.parts-chips.is-icons .part-chip { padding-left: 10px; }
.parts-chips.is-icons .part-chip::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 8px;
    flex: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.parts-chips.is-icons .part-chip.app-fridge::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%225%22%20y%3D%221.6%22%20width%3D%2214%22%20height%3D%2220.8%22%20rx%3D%222.4%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M5.6%209.2h12.8%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M8.4%205v2.6M8.4%2011.4v3.2%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.parts-chips.is-icons .part-chip.app-freezer::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%224.2%22%20y%3D%222.6%22%20width%3D%2215.6%22%20height%3D%2218.8%22%20rx%3D%222.4%22%20fill%3D%22%2316506f%22%2F%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%207.2v9.6M7.8%209.6l8.4%204.8M16.2%209.6l-8.4%204.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.parts-chips.is-icons .part-chip.app-dishwasher::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223.2%22%20y%3D%222.2%22%20width%3D%2217.6%22%20height%3D%2219.6%22%20rx%3D%222.2%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M4%207.4h16%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%2F%3E%3Ccircle%20cx%3D%2217.6%22%20cy%3D%224.8%22%20r%3D%221%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M8.4%2017.8v-6.4M12%2017.8v-6.4M15.6%2017.8v-6.4%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M6.4%2018.6h11.2%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.parts-chips.is-icons .part-chip.app-washer::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223.2%22%20y%3D%222.2%22%20width%3D%2217.6%22%20height%3D%2219.6%22%20rx%3D%222.2%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M4%207h16%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%2F%3E%3Ccircle%20cx%3D%226.6%22%20cy%3D%224.6%22%20r%3D%221%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%229.6%22%20cy%3D%224.6%22%20r%3D%221%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214.4%22%20r%3D%224.6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M8%2014.6c1.3-1.2%202.7%201.1%204%200s2.7%201.2%204%200%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.parts-chips.is-icons .part-chip.app-dryer::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223.2%22%20y%3D%222.2%22%20width%3D%2217.6%22%20height%3D%2219.6%22%20rx%3D%222.2%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M4%207h16%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%2F%3E%3Ccircle%20cx%3D%226.6%22%20cy%3D%224.6%22%20r%3D%221%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%229.6%22%20cy%3D%224.6%22%20r%3D%221%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214.4%22%20r%3D%224.6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M10.2%2017.2c0-1.1%201.1-1.1%201.1-2.2s-1.1-1.1-1.1-2.2%22%2F%3E%3Cpath%20d%3D%22M13.4%2017.2c0-1.1%201.1-1.1%201.1-2.2s-1.1-1.1-1.1-2.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.parts-chips.is-icons .part-chip.app-oven::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222.8%22%20y%3D%222.2%22%20width%3D%2218.4%22%20height%3D%2219.6%22%20rx%3D%222.2%22%20fill%3D%22%2316506f%22%2F%3E%3Ccircle%20cx%3D%226.4%22%20cy%3D%225%22%20r%3D%221%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%229.4%22%20cy%3D%225%22%20r%3D%221%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2212.4%22%20cy%3D%225%22%20r%3D%221%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M5.6%208.6h12.8%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2211%22%20width%3D%2212%22%20height%3D%227.8%22%20rx%3D%221.2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }
.parts-chips.is-icons .part-chip.app-microwave::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%221.4%22%20y%3D%224.8%22%20width%3D%2221.2%22%20height%3D%2214.4%22%20rx%3D%222.2%22%20fill%3D%22%2316506f%22%2F%3E%3Crect%20x%3D%223.4%22%20y%3D%227.2%22%20width%3D%2211.6%22%20height%3D%229.6%22%20rx%3D%221.1%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M17.4%208.6h2.8M17.4%2011h2.8%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2218.8%22%20cy%3D%2214.6%22%20r%3D%221.4%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E"); }
.parts-chips.is-icons .part-chip.app-cooktop::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222.2%22%20y%3D%222.2%22%20width%3D%2219.6%22%20height%3D%2219.6%22%20rx%3D%223%22%20fill%3D%22%2316506f%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%228.2%22%20cy%3D%228.2%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2215.8%22%20cy%3D%228.2%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%228.2%22%20cy%3D%2215.8%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2215.8%22%20cy%3D%2215.8%22%20r%3D%222.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.parts-chips.is-icons .part-chip.app-hood::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M1.8%209.6%205.8%203.4h12.4l4%206.2z%22%20fill%3D%22%2316506f%22%2F%3E%3Crect%20x%3D%221.8%22%20y%3D%229.6%22%20width%3D%2220.4%22%20height%3D%223.6%22%20rx%3D%221.1%22%20fill%3D%22%2316506f%22%2F%3E%3Cpath%20d%3D%22M8%2020.6v-3.2M12%2021.4v-4M16%2020.6v-3.2%22%20stroke%3D%22%2316506f%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E"); }


/* ==== /brands/ right column: reviews scroll at EVERY width (2026-09-10) ======
   Andrei: "brands - users reviews should be scrolled to right".

   The generic "Our Happy Customers" scroller above runs at <=991px, which was
   right for the service pages: there the block is full-width and four photos at
   200px sit happily in one row on a desktop. On /brands/ the same block lives in
   a `col-md-7` (~618px at 1280), so three 260px-tall portraits wrapped 2 + 1 -
   the same broken grid, just at desktop instead of on a phone. Measured: block
   height 801px, scrollWidth == clientWidth, i.e. a column pretending to be a row.

   So the always-on version is scoped to `.is-review-row`, a marker class on that
   column in the content. Below 991px the generic block matches too; the
   declarations are identical, so there is nothing to fight over. */
.is-review-row:has(> img[alt="Our Happy Customers"]) {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    text-align: left;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: #CFD8E0 transparent;
}
.is-review-row:has(> img[alt="Our Happy Customers"])::-webkit-scrollbar { height: 5px; }
.is-review-row:has(> img[alt="Our Happy Customers"])::-webkit-scrollbar-track { background: transparent; }
.is-review-row:has(> img[alt="Our Happy Customers"])::-webkit-scrollbar-thumb { background: #CFD8E0; border-radius: 3px; }
/* uniform HEIGHT, not width - these photos have slightly different aspect
   ratios, and matching height is what makes the row look level. Beats the
   inline style="max-height:260px" because 200 < 260, so no !important needed. */
.is-review-row:has(> img[alt="Our Happy Customers"]) > img {
    display: inline-block;
    vertical-align: top;
    /* 280 rather than 200: the left column of this row is ~700px tall, so short
       photos left a big empty gap under them - and at 280 the three portraits
       measure ~668px against a 618px column, which means the row genuinely
       scrolls instead of merely being allowed to. */
    height: 280px;
    width: auto;
    max-width: none;
    /* !important because the CMS stores style="max-height:260px" INLINE on each
       of these <img>, and an inline declaration beats any stylesheet rule
       without it. Measured: the height above read 260 until this was added -
       i.e. the number in this file was decorative. */
    max-height: none !important;
    margin: 0 10px 0 0;
    scroll-snap-align: start;
}
.is-review-row:has(> img[alt="Our Happy Customers"]) > img:last-of-type { margin-right: 0; }
@media only screen and (max-width: 991px) {
    .is-review-row:has(> img[alt="Our Happy Customers"]) > img { height: 168px; }
}

/* ---- and the cards beside them --------------------------------------------
   .issue-grid steps 2 -> 3 -> 4 columns on VIEWPORT width, which is correct for
   the body grids that run the full container width. On /brands/ the same grid
   sits in a `col-md-5` (~440px at 1280), so the >=1200px rule gave it four
   ~100px cards and clipped every label to "Transpar... competiti... pricing".
   Viewport breakpoints cannot see the column they are inside; this is the fix
   until the codebase is ready for container queries. Watch for the same trap
   anywhere .issue-grid is dropped into a col-md-* narrower than about 700px. */
/* superseded 2026-09-10: `.issue-grid` is auto-fill now, so it sizes itself to
   whatever column it is in and this override is no longer needed. `.is-narrow-col`
   stays on the /brands/ markup - it costs nothing and names the intent. */


/* ==== Round 2026-09-10b: icons everywhere, one-line CTA, tighter desktop =====
   Andrei, seven items in one pass. Each block below says which one it answers. */

/* ---- (5) "here twice the same icon" ---------------------------------------
   The phone-only issues block on /fridge-repair/ used ico-ice for BOTH "Ice
   Maker" and "Frost Build-Up", and ico-cool for both "Not Freezing" and "Too
   Warm" - two pairs of identical icons in one 11-card grid. Two new icons in
   the existing 48x48 / #2b7cc0 + #123c66 family:
     ico-frost  a freezer wall with icicles - unmistakably not an ice cube
     ico-warm   a thermometer running hot, with the red column the cool icons lack
   Repeated icons are fine when the concepts repeat (doors, displays); they are
   a bug when two cards in the SAME grid say different things.                */
.issue-card.ico-frost::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20x%3D%226%22%20y%3D%227%22%20width%3D%2236%22%20height%3D%2227%22%20rx%3D%224%22%20fill%3D%22%232b7cc0%22%2F%3E%3Cpath%20d%3D%22M11%209l2.7%2010.5L16.4%209zM20.3%209l2.4%2013.5L25.1%209zM29.4%209l2.7%2011.5L34.8%209z%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23fff%22%20opacity%3D%22.85%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2227.5%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2229.5%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%2227%22%20r%3D%221.8%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M13%2039.5h22%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-warm::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M24%204a5.6%205.6%200%200%200-5.6%205.6v18.2a9.4%209.4%200%201%200%2011.2%200V9.6A5.6%205.6%200%200%200%2024%204z%22%20fill%3D%22%232b7cc0%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2234.6%22%20r%3D%225.4%22%20fill%3D%22%23d8452f%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2213%22%20width%3D%224%22%20height%3D%2219%22%20rx%3D%222%22%20fill%3D%22%23d8452f%22%2F%3E%3Cg%20stroke%3D%22%23123c66%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M34%2012h5.5M34%2018.5h5.5M34%2025h5.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* ---- (4) check icons on the replacement-parts chips ------------------------
   "let's add checkbox icons to parts that we can replace". Only the plain
   chips: .is-links chips already carry a chevron and are navigation, not a
   list of things we stock. */
.parts-chips:not(.is-links):not(.is-icons) .part-chip { padding-left: 11px; }
.parts-chips:not(.is-links):not(.is-icons) .part-chip::before {
    content: "";
    width: 15px;
    height: 15px;
    margin-right: 7px;
    flex: none;
    background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222.4%22%20y%3D%222.4%22%20width%3D%2219.2%22%20height%3D%2219.2%22%20rx%3D%224.6%22%20fill%3D%22%2316506F%22%2F%3E%3Cpath%20d%3D%22M7.2%2012.2l3.2%203.3%206.4-6.9%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

/* ---- (2) icons on every issue list ----------------------------------------
   "in all pages add icons pls to all issues". Every .issue-card already had an
   icon - audited all 11 pages, 0 without one. The lists still showing plain
   round bullets were the <ul>s in the body copy ("Our washer installation
   service includes:", "Common reasons a washer isn't filling..."). They now get
   the same check mark as the parts chips.

   Scoped to .Top-Main-Block, which wraps the article body on every page, and to
   ul WITHOUT a class - so the footer's plain <ul> and every navbar list are
   untouched. No content edit, so this lands on all 16 pages at once. */
.Top-Main-Block ul:not([class]) {
    list-style: none;
    padding-left: 4px;
    margin: 10px 0 16px;
}
.Top-Main-Block ul:not([class]) > li {
    position: relative;
    padding-left: 27px;
    margin-bottom: 6px;
}
.Top-Main-Block ul:not([class]) > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .28em;
    width: 16px;
    height: 16px;
    background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.6%2012.9l5%205.1%209.8-11.9%22%20fill%3D%22none%22%20stroke%3D%22%2316506F%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

/* ---- (3) the hero CTA must stay on one line -------------------------------
   "Call Now - $25 Off Stove & Cooktop Repair" wrapped to two lines on a phone
   and looked broken. Both levers Andrei offered, applied together: the text is
   shortened to "Call Now - $25 Off" in the content, and the button itself is
   made incapable of wrapping again whatever text a future edit puts in it.

   .MainPhoneNumber ships with font-style:italic, text-decoration:underline and
   word-spacing:4px - a phone-number style that reads as a mistake on a wide
   call-to-action button. Dropped for the full-width variant only; the header
   phone number keeps it. */
.MainPhoneNumber.btn.w-100 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    word-spacing: normal;
    font-style: normal;
    text-decoration: none;
    line-height: 1.25;
    /* shrinks rather than wraps on a narrow phone, caps out on desktop */
    font-size: clamp(14px, 3.9vw, 18px);
    padding: 12px 14px;
}
.MainPhoneNumber.btn.w-100 i { margin-right: 0 !important; }

/* ---- (6) tighter vertical rhythm on desktop -------------------------------
   Measured on /fridge-repair/ at 1280px: 102px of dead space between the last
   brand logo and the "Other Appliances We Repair" heading - .MainContentBlock
   padding 16 + .mt4 margin 30 + section padding 24 + section padding 24 + h2
   margin 24. Each value is defensible alone; stacked they are a screenful of
   nothing. Phones measured 56px and are left exactly as they are. */
@media (min-width: 768px) {
    .setion-row, .section-row { padding-top: 16px; padding-bottom: 16px; }
    .Def-ListOfBrands.mt4 { margin-top: 12px; margin-bottom: 12px; }
    .setion-row > .container > h2,
    .setion-row h2.text-center,
    .section-row h2.text-center { margin-top: 14px; }
    .Def-ListOfBrands > p.MainContentBlock { padding-bottom: 10px; }
}


/* ---- six more symptom icons (2026-09-10b) ---------------------------------
   Added so no two cards in one grid have to share a mark: drain / fill split
   the four different "water" problems, timer covers "takes too long" and
   "cycle won't finish", shake is vibration rather than noise, flame is gas
   rather than generic heat, dry is a garment with heat leaving it. Same
   48x48 / #2b7cc0 + #123c66 construction as the rest of the set. */
.issue-card.ico-drain::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cellipse%20cx%3D%2224%22%20cy%3D%2215%22%20rx%3D%2217%22%20ry%3D%226%22%20fill%3D%22%232b7cc0%22%2F%3E%3Cpath%20d%3D%22M7%2015c0%208%205%2014%2011%2020l3%208h6l3-8c6-6%2011-12%2011-20z%22%20fill%3D%22%232b7cc0%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2215%22%20r%3D%226.5%22%20fill%3D%22%23123c66%22%2F%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M20.5%2013h7M20.5%2015.5h7M20.5%2018h7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.issue-card.ico-fill::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M17%204h14v6H17z%22%20fill%3D%22%23123c66%22%2F%3E%3Cpath%20d%3D%22M22%2010h4v9h-4z%22%20fill%3D%22%23123c66%22%2F%3E%3Cpath%20d%3D%22M24%2021c-5%206-8.5%2010-8.5%2014.5a8.5%208.5%200%200%200%2017%200C32.5%2031%2029%2027%2024%2021z%22%20fill%3D%22%232b7cc0%22%2F%3E%3Cpath%20d%3D%22M9%2030h4M35%2030h4%22%20stroke%3D%22%232b7cc0%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.6%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-timer::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2226%22%20r%3D%2217%22%20fill%3D%22%232b7cc0%22%2F%3E%3Cpath%20d%3D%22M24%2015v11l7.5%204.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M18%204h12%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M24%204v4%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-shake::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20x%3D%2214%22%20y%3D%2210%22%20width%3D%2220%22%20height%3D%2228%22%20rx%3D%223%22%20fill%3D%22%232b7cc0%22%20transform%3D%22rotate%28-6%2024%2024%29%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%226.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.6%22%20transform%3D%22rotate%28-6%2024%2024%29%22%2F%3E%3Cg%20stroke%3D%22%23123c66%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%2017l-2%204%202%204M42%2017l2%204-2%204%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.issue-card.ico-flame::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M24%203c2%208-6%2011-9.5%2017.5A13.5%2013.5%200%201%200%2038%2027c0-6.5-4-10.5-7-14-1.3%202.6-3.2%204.2-5%204.7C27.6%2012.7%2027%208%2024%203z%22%20fill%3D%22%232b7cc0%22%2F%3E%3Cpath%20d%3D%22M24%2025c1%204-3%205.5-4.6%208.6a6.9%206.9%200%201%200%2012.4%203.4c0-3.3-2-5.4-3.6-7.2-.7%201.4-1.7%202.2-2.6%202.4.9-2.5.4-5.1-1.6-7.2z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); }
.issue-card.ico-dry::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M12%2040h24l-4-18a8%208%200%200%200-16%200z%22%20fill%3D%22%232b7cc0%22%2F%3E%3Cpath%20d%3D%22M17%206l7%205%207-5%22%20fill%3D%22none%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23123c66%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.65%22%3E%3Cpath%20d%3D%22M6%2030c0-2.5%202.5-2.5%202.5-5S6%2022.5%206%2020M42%2030c0-2.5-2.5-2.5-2.5-5S42%2022.5%2042%2020%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }