/* Fridge-Repair.co.za | Official stylesheet v1.0
   Bootstrap 5.3.8 overrides; visual layout preserved from approved release candidate.
   Keep media queries in cascade order when editing. */

:root {

    --navy: #061f3d;

    --navy2: #0a315a;

    --blue: #0588ef;

    --cyan: #04c8ef;

    --orange: #ff5a1f;

    --text: #15273a;

    --muted: #687888;

    --soft: #f2f8fc;

    --radius: 14px;

    --shadow: 0 14px 35px rgba(4,31,61,.10);

}

* {

    box-sizing: border-box;

}

body {

    font-family: Manrope,sans-serif;

    color: var(--text);

    line-height: 1.6;

}

a {

    text-decoration: none;

}

.container {

    max-width: 1220px;

}

.navbar {

    min-height: 84px;

}

.navbar-brand img {

    width: 190px;

    height: 58px;

    object-fit: contain;

}

.nav-link {

    font-weight: 700;

    color: var(--text) !important;

    font-size: .9rem;

}

.btn {

    border-radius: 9px;

    font-weight: 800;

}

.btn-action {

    background: var(--orange);

    border-color: var(--orange);

    color: #fff;

}

.btn-action:hover {

    background: #e94b12;

    border-color: #e94b12;

    color: #fff;

}

.hero {

    background: linear-gradient(115deg,#041a34 0%,#07335e 55%,#0a5480 100%);

    color: #fff;

    overflow: hidden;

}

.min-vh-hero {

    min-height: 600px;

}

.eyebrow {

    text-transform: uppercase;

    letter-spacing: .12em;

    font-weight: 800;

    font-size: .75rem;

}

.hero h1 {

    font-size: clamp(2.6rem,5vw,4.7rem);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -.05em;

}

.hero h1 span {

    display: block;

    color: var(--cyan);

}

.hero .lead {

    max-width: 650px;

    font-size: 1.05rem;

    margin: 1.5rem 0 2rem;

}

.hero-tags {

    display: flex;

    gap: 1.25rem;

    flex-wrap: wrap;

    margin-top: 2rem;

    font-size: .78rem;

    font-weight: 700;

}

.hero-visual {

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.router-wrap {

    margin-top: -45px;

    position: relative;

    z-index: 3;

}

.repair-router {

    background: #fff;

    border-radius: var(--radius);

    padding: 22px;

    display: grid;

    grid-template-columns: 1.25fr 1fr 1fr 1.15fr auto;

    gap: 14px;

    align-items: end;

}

.router-title {

    display: flex;

    align-items: center;

    gap: 12px;

}

.router-title small {

    display: block;

    color: var(--muted);

    font-size: .7rem;

}

.router-field label {

    font-size: .67rem;

    font-weight: 800;

    display: block;

    margin-bottom: 5px;

}

.form-control,.form-select {

    border-radius: 8px;

    border-color: #dce5ed;

    min-height: 44px;

    font-size: .85rem;

}

.section {

    padding: 85px 0;

}

.section-soft {

    background: var(--soft);

}

.section-heading {

    text-align: center;

    max-width: 800px;

    margin: 0 auto 38px;

}

.section h2,.commercial-copy h2,.how h2,.aircon h2,.final-cta h2 {

    font-weight: 800;

    letter-spacing: -.035em;

}

.section-heading p {

    color: var(--muted);

}

.service-card,.editorial-card,.blog-card {

    height: 100%;

    background: #fff;

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

    border: 1px solid #e9f0f5;

}

.service-card h3,.editorial-card h3,.blog-card h3,.problem-card h3 {

    font-size: 1.05rem;

    font-weight: 800;

}

.service-card p,.editorial-card p,.blog-card p,.problem-card p {

    font-size: .83rem;

    color: var(--muted);

}

.service-card a,.editorial-card a,.blog-card a,.problem-card b {

    font-size: .82rem;

    font-weight: 800;

    color: #087fe2;

}

.service-img {

    height: 165px;

    display: flex;

    align-items: end;

    padding: 18px;

    color: #fff;

    font-weight: 800;

    background: linear-gradient(135deg,#164b78,#91b6ce);

}

.freezer-bg {

    background: linear-gradient(135deg,#8daabf,#e8f4fa);

    color: #173550;

}

.commercial-bg {

    background: linear-gradient(135deg,#052341,#0b77a5);

}

.aircon-bg {

    background: linear-gradient(135deg,#c7e7f5,#6ab1d4);

}

.problem-card {

    display: flex;

    gap: 14px;

    background: #fff;

    border: 1px solid #e3edf4;

    border-radius: 12px;

    padding: 22px;

    height: 100%;

    color: var(--text);

    transition: .2s;

}

.problem-card:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow);

}

.problem-card>span {

    font-size: 1.7rem;

}

.emergency {

    background: linear-gradient(90deg,var(--navy),#073b6c);

    color: #fff;

    padding: 38px 0;

}

.emergency .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}

.emergency h2 {

    font-weight: 800;

}

.emergency p {

    margin: 0;

    max-width: 700px;

}

.commercial-photo {

    min-height: 570px;

    background: linear-gradient(rgba(4,31,61,.12),rgba(4,31,61,.35)),linear-gradient(135deg,#133f63,#59a6c8);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 2.2rem;

    font-weight: 800;

    text-align: center;

}

.commercial-copy {

    padding: 80px max(6vw,45px);

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.check-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    color: #31506b;

    font-weight: 700;

}

.area-links h3 {

    font-size: 1rem;

    font-weight: 800;

}

.area-links a {

    display: inline-block;

    padding: 6px 11px;

    border: 1px solid #bad8ed;

    border-radius: 6px;

    margin: 3px;

    color: #087fe2;

    font-size: .78rem;

    font-weight: 700;

}

.editorial-img,.blog-img {

    height: 150px;

    background: linear-gradient(135deg,#e6f4fc,#7db5d5);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 3rem;

    font-weight: 800;

    color: #fff;

}

.editorial-card>div:last-child {

    padding: 22px;

}

.blog-card {

    padding-bottom: 22px;

}

.blog-card>*:not(.blog-img) {

    margin-left: 22px;

    margin-right: 22px;

}

.blog-card span {

    display: inline-block;

    margin-top: 18px;

    text-transform: uppercase;

    font-size: .62rem;

    color: #078be9;

    font-weight: 800;

}

.how {

    padding: 65px 0;

    background: linear-gradient(110deg,#052341,#07548a);

    color: #fff;

    text-align: center;

}

.aircon {

    background: #edf8fd;

}

.final-cta {

    background: linear-gradient(90deg,#041b35,#083e70);

    color: #fff;

    padding: 50px 0;

}

.final-cta a:not(.btn) {

    color: #50cfff;

}

footer {

    background: #03182e;

    color: #b8c8d6;

    padding: 65px 0 25px;

}

footer .footer-logo {

    width: 230px;

    max-height: 100px;

    object-fit: contain;

    object-position: left center;

    margin-bottom: 20px;

}

footer h3 {

    color: #fff;

    font-size: .9rem;

    font-weight: 800;

}

footer a {

    display: block;

    color: #b8c8d6;

    font-size: .78rem;

    margin: 7px 0;

}

footer a:hover {

    color: #fff;

}

.mobile-cta {

    display: none;

}

@media (max-width:991.98px) {
    .navbar-brand img {
        width: 150px;
    }
    .navbar-collapse {
        padding: 20px 0;
    }
    .min-vh-hero {
        min-height: auto;
    }
    .hero-visual {
        min-height: 430px;
    }
    .repair-router {
        grid-template-columns: 1fr 1fr;
    }
    .router-title {
        grid-column: 1/-1;
    }
    .repair-router>.btn {
        grid-column: 1/-1;
    }
    .emergency .container {
        display: block;
    }
    .emergency .d-flex {
        margin-top: 20px;
    }
    .commercial-photo {
        min-height: 380px;
    }
    .mobile-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        padding: 10px;
        background: #fff;
        box-shadow: 0 -5px 20px #0002;
    }
    .mobile-cta a {
        display: block;
        background: var(--orange);
        color: #fff;
        text-align: center;
        padding: 12px;
        border-radius: 8px;
        font-weight: 800;
    }
    body {
        padding-bottom: 66px;
    }
}

@media (max-width:575.98px) {
    .hero h1 {
        font-size: 2.55rem;
    }
    .hero-visual {
        min-height: 330px;
    }
    .hero-tags {
        gap: .7rem;
    }
    .repair-router {
        grid-template-columns: 1fr;
    }
    .router-title,.repair-router>.btn {
        grid-column: auto;
    }
    .section {
        padding: 65px 0;
    }
    .check-grid {
        grid-template-columns: 1fr;
    }
    .commercial-copy {
        padding: 55px 25px;
    }
    .footer-logo {
        width: 180px !important;
    }
}

.hero-visual {

    position: relative;

    overflow: hidden;

}

.hero-photo {

    width: 100%;

    height: 520px;

    object-fit: cover;

    object-position: center;

    border-radius: 0;

    display: block;

    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%);

    mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%);

}

.service-img {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.domestic-bg {

    background-image: linear-gradient(rgba(4,31,61,.05), rgba(4,31,61,.12)), url("../img/services/domestic-fridge-repair.jpg");

}

.freezer-bg {

    background-image: linear-gradient(rgba(4,31,61,.03), rgba(4,31,61,.10)), url("../img/services/freezer-repair.jpg");

}

.commercial-bg {

    background-image: linear-gradient(rgba(4,31,61,.05), rgba(4,31,61,.15)), url("../img/services/commercial-refrigeration.jpg");

}

.aircon-bg {

    background-image: linear-gradient(rgba(4,31,61,.02), rgba(4,31,61,.08)), url("../img/services/air-conditioning.jpg");

}

.commercial-photo {

    background-image: linear-gradient(rgba(4,31,61,.10), rgba(4,31,61,.25)), url("../img/commercial/commercial-refrigeration-feature.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

@media (max-width: 991.98px) {
    .hero-photo {
        height: 420px;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
    }
}

@media (max-width: 575.98px) {
    .hero-photo {
        height: 330px;
    }
}

.service-map img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 28px;

}

.editorial-img, .blog-img {

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg,#e7f6fd,#b9e0f3);

}

.editorial-img img {

    width: 72px;

    height: 72px;

}

.blog-img img {

    width: 70px;

    height: 70px;

}

.trust-icon {

    width: 48px;

    height: 48px;

    margin: 0 auto 18px;

    display: block;

}

@media (min-width: 992px) {
    .hero h1 {
        font-size: clamp(3.4rem,4.5vw,5.4rem);
        line-height: 1.02;
    }
    .min-vh-hero {
        min-height: 640px;
    }
}

@media (max-width: 991.98px) {
    .service-map {
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {
    .hero {
        overflow: hidden;
    }
    .hero > .container {
        width: calc(100% - 80px);
        max-width: 1660px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 12px;
        padding-right: 12px;
    }
    .hero .min-vh-hero {
        min-height: 500px;
    }
    .hero .row {
        --bs-gutter-x: 2rem;
    }
    .hero .col-lg-6:first-child {
        flex: 0 0 46%;
        max-width: 46%;
        padding-top: 52px !important;
        padding-bottom: 70px !important;
    }
    .hero .hero-visual {
        flex: 0 0 54%;
        max-width: 54%;
        min-height: 425px;
        align-self: center;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        overflow: hidden;
    }
    .hero h1 {
        max-width: 680px;
        margin-top: 10px;
        font-size: clamp(3.35rem, 3.65vw, 4.45rem);
        line-height: 0.99;
        letter-spacing: -0.045em;
    }
    .hero .lead {
        max-width: 690px;
        margin-top: 1.3rem;
        margin-bottom: 1.55rem;
        font-size: 1rem;
    }
    .hero-tags {
        margin-top: 1.55rem;
        gap: 1.35rem;
    }
    .hero-photo {
        width: 100%;
        height: 425px;
        display: block;
        object-fit: cover;
        object-position: center center;
        border-radius: 0;
        -webkit-mask-image: linear-gradient(
			to right,
			transparent 0%,
			rgba(0, 0, 0, 0.35) 5%,
			#000 12%,
			#000 100%
		);
        mask-image: linear-gradient(
			to right,
			transparent 0%,
			rgba(0, 0, 0, 0.35) 5%,
			#000 12%,
			#000 100%
		);
    }
    .router-wrap {
        margin-top: -45px;
    }
    .router-wrap > .container {
        max-width: 1620px;
    }
    .repair-router {
        padding: 20px 28px;
        grid-template-columns: 1.35fr 1fr 1fr 1.15fr auto;
    }
}

@media (min-width: 1600px) {
    .hero > .container {
        width: calc(100% - 120px);
        max-width: 1680px;
    }
    .hero h1 {
        font-size: 4.55rem;
    }
}

@media (min-width: 992px) {
    .hero {
        position: relative;
        overflow: hidden;
    }
    .hero > .container {
        position: relative;
        z-index: 1;
    }
    .hero .min-vh-hero {
        position: relative;
    }
    .hero .col-lg-6:first-child {
        position: relative;
        z-index: 3;
    }
    .hero .hero-visual {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        right: calc((100vw - 100%) / -2);
        width: min(58vw, 1100px);
        max-width: none;
        min-height: 100%;
        padding: 0;
        margin: 0;
        display: block;
        overflow: hidden;
    }
    .hero .hero-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center center;
        border-radius: 0;
        display: block;
        -webkit-mask-image: linear-gradient(
			to right,
			transparent 0%,
			rgba(0,0,0,.08) 7%,
			rgba(0,0,0,.32) 14%,
			rgba(0,0,0,.72) 23%,
			#000 32%,
			#000 100%
		);
        mask-image: linear-gradient(
			to right,
			transparent 0%,
			rgba(0,0,0,.08) 7%,
			rgba(0,0,0,.32) 14%,
			rgba(0,0,0,.72) 23%,
			#000 32%,
			#000 100%
		);
    }
}

@media (min-width: 1200px) {
    .hero .min-vh-hero {
        min-height: 560px;
    }
    .hero .col-lg-6:first-child {
        flex: 0 0 49%;
        max-width: 49%;
    }
    .hero .hero-visual {
        flex: none;
        max-width: none;
        min-height: 100%;
    }
}

.hero a.btn.btn-outline-light {

    color: #fff;

    background: rgba(3, 31, 61, 0.18);

    border: 2px solid #00bdf2;

    border-radius: 14px;

    box-shadow: 0 0 0 3px rgba(0, 189, 242, 0.18),
        0 0 12px rgba(0, 189, 242, 0.38),
        inset 0 0 10px rgba(0, 189, 242, 0.08);

    padding: 0.78rem 1.35rem;

    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;

}

.hero a.btn.btn-outline-light:hover,
.hero a.btn.btn-outline-light:focus {

    color: #fff;

    background: rgba(0, 189, 242, 0.12);

    border-color: #19c9f5;

    box-shadow: 0 0 0 3px rgba(0, 189, 242, 0.22),
        0 0 16px rgba(0, 189, 242, 0.52),
        inset 0 0 12px rgba(0, 189, 242, 0.10);

}

.btn,
.mobile-cta a {

    border-radius: 14px;

}

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

}

/* Keep the hero CTA pair visually aligned and centred. */

.hero .btn {

    min-height: 56px;

    line-height: 1.15;

}

/* Repair router button uses the same corner radius and centres its label vertically. */

.repair-router > .btn {

    align-self: end;

    min-height: 44px;

    border-radius: 14px;

}

.hero-tags {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1.35rem;

}

.hero-tag-item {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: #ffffff;

    font-weight: 700;

    line-height: 1.15;

    white-space: nowrap;

}

.hero-tag-icon {

    width: 38px;

    height: 38px;

    object-fit: contain;

    flex: 0 0 38px;

}

@media (max-width: 575.98px) {
    .hero-tags {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem 1rem;
    }
    .hero-tag-item {
        white-space: normal;
    }
    .hero-tag-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}

.router-wrap {

    margin-top: -52px;

    position: relative;

    z-index: 5;

    padding: 0 14px;

}

.router-wrap > .container {

    max-width: 1660px;

}

.repair-router {

    min-height: 144px;

    padding: 25px 32px;

    border-radius: 20px;

    grid-template-columns: 1.35fr 1fr 1fr 1.15fr auto;

    gap: 20px;

    align-items: center;

    box-shadow: 0 18px 42px rgba(4,31,61,.14) !important;

}

.router-title {

    align-items: center;

    gap: 18px;

    min-width: 0;

}

.router-location-icon {

    width: 62px;

    height: 78px;

    object-fit: contain;

    flex: 0 0 62px;

    display: block;

}

.router-title strong {

    display: block;

    font-size: 1.18rem;

    line-height: 1.2;

    font-weight: 800;

    color: var(--navy);

    margin-bottom: 5px;

}

.router-title small {

    display: block;

    font-size: .74rem;

    line-height: 1.4;

    color: #6d7f90;

}

.router-field {

    align-self: center;

}

.router-field label {

    font-size: .71rem;

    font-weight: 800;

    color: var(--navy);

    margin-bottom: 8px;

}

.repair-router .form-control,
.repair-router .form-select {

    min-height: 58px;

    border: 1px solid #d8e3ec;

    border-radius: 12px;

    background-color: #f6f9fb;

    font-size: .95rem;

    color: var(--text);

    padding-left: 16px;

    padding-right: 42px;

    box-shadow: none;

}

.repair-router .form-control {

    background-color: #fff;

}

.repair-router .form-control::placeholder {

    color: #758494;

    opacity: 1;

}

.repair-router .form-control:focus,
.repair-router .form-select:focus {

    border-color: #91cbe9;

    box-shadow: 0 0 0 3px rgba(5,136,239,.08);

}

.repair-router > .router-submit {

    align-self: end;

    min-height: 58px;

    padding: 0 24px;

    border-radius: 14px;

    white-space: nowrap;

    font-size: 1rem;

    margin-bottom: 5px;

}

@media (max-width: 1199.98px) {
    .repair-router {
        grid-template-columns: 1.2fr 1fr 1fr;
    }
    .router-title {
        grid-row: span 2;
    }
    .repair-router > .router-submit {
        grid-column: 2 / 4;
        justify-self: end;
    }
}

@media (max-width: 991.98px) {
    .router-wrap {
        margin-top: -30px;
    }
    .repair-router {
        grid-template-columns: 1fr 1fr;
        min-height: 0;
        padding: 24px;
    }
    .router-title {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .repair-router > .router-submit {
        grid-column: 1 / -1;
        width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 575.98px) {
    .router-wrap {
        padding: 0 10px;
    }
    .repair-router {
        grid-template-columns: 1fr;
        padding: 22px 18px;
        gap: 16px;
        border-radius: 18px;
    }
    .router-title,
	.repair-router > .router-submit {
        grid-column: auto;
    }
    .router-location-icon {
        width: 52px;
        height: 66px;
        flex-basis: 52px;
    }
}

.service-card {

    display: flex;

    flex-direction: column;

    height: 100%;

}

.service-card .card-body {

    display: flex;

    flex-direction: column;

    flex: 1 1 auto;

}

.service-card .card-body > a:last-child {

    margin-top: auto;

}

.problem-card {

    align-items: flex-start;

}

.problem-card .problem-icon {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    object-fit: contain;

    display: block;

    margin-top: 1px;

}

.problem-card > div {

    min-width: 0;

}

@media (max-width: 575.98px) {
    .problem-card .problem-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}

.commercial-section {

    overflow: hidden;

    background: #fff;

}

.commercial-section .commercial-photo {

    position: relative;

    min-height: 465px;

    background-image: url("../img/commercial/commercial-refrigeration-feature.jpg");

    background-size: cover;

    background-position: center center;

}

.commercial-section .commercial-photo::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to right, transparent 62%, rgba(255,255,255,.32) 77%, #fff 100%);

    pointer-events: none;

}

.commercial-section .commercial-copy {

    padding: 45px clamp(28px, 5.5vw, 100px) 45px clamp(25px, 3.2vw, 65px);

    align-items: flex-start;

}

.commercial-section .commercial-copy h2 {

    font-size: clamp(1.85rem, 2.35vw, 2.75rem);

    line-height: 1.13;

    margin: 7px 0 16px;

    max-width: 650px;

}

.commercial-section .commercial-copy p {

    font-size: 1rem;

    line-height: 1.6;

    margin-bottom: 22px;

}

.commercial-section .check-grid {

    width: 100%;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px 20px;

    color: var(--text);

    font-size: .92rem;

}

.commercial-section .check-grid > span {

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 0;

    line-height: 1.3;

}

.commercial-section .check-icon {

    width: 23px;

    height: 23px;

    flex: 0 0 23px;

    object-fit: contain;

}

.commercial-section .commercial-copy > .btn {

    width: auto;

    max-width: 100%;

    padding: 14px 24px;

    margin-top: 27px !important;

    font-size: .94rem;

    text-transform: uppercase;

}

@media (max-width: 991.98px) {
    .commercial-section .commercial-photo {
        min-height: 330px;
    }
    .commercial-section .commercial-photo::after {
        background: linear-gradient(to bottom, transparent 65%, #fff 100%);
    }
    .commercial-section .commercial-copy {
        padding: 35px 30px 55px;
    }
}

@media (max-width: 575.98px) {
    .commercial-section .commercial-photo {
        min-height: 260px;
    }
    .commercial-section .check-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }
    .commercial-section .commercial-copy {
        padding: 28px 24px 45px;
    }
    .commercial-section .commercial-copy > .btn {
        width: 100%;
        font-size: .82rem;
    }
}

.service-areas-section {

    padding: 36px 0 44px;

    overflow: hidden;

    background: #fff;

}

.service-areas-container {

    max-width: 1740px;

    padding-left: 30px;

    padding-right: 30px;

}

.service-areas-layout {

    --bs-gutter-x: 2.5rem;

}

.service-areas-map-column {

    align-self: stretch;

    display: flex;

    align-items: center;

}

.service-areas-section .service-map {

    width: 100%;

}

.service-areas-section .service-map img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 0;

}

.service-areas-content {

    padding-top: 12px;

    padding-bottom: 12px;

}

.service-areas-content h2 {

    color: var(--navy);

    font-size: clamp(2rem, 2.65vw, 2.85rem);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -.04em;

    margin: 0 0 16px;

}

.service-areas-intro {

    font-size: 1rem;

    line-height: 1.6;

    max-width: 820px;

    margin-bottom: 26px;

}

.service-areas-section .area-group {

    padding: 0 22px;

    min-width: 0;

}

.service-areas-section .area-group:first-child {

    padding-left: 0;

}

.service-areas-section .area-group + .area-group {

    border-left: 1px solid #dce5ec;

}

.service-areas-section .area-links h3 {

    color: var(--navy);

    font-size: 1.2rem;

    font-weight: 800;

    margin: 0 0 15px;

}

.service-areas-section .area-button-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;

}

.service-areas-section .area-links .area-button-grid a {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 41px;

    margin: 0;

    padding: 6px 7px;

    border: 2px solid #d2e4f1;

    border-radius: 9px;

    background: #fff;

    color: #087fe2;

    font-size: .85rem;

    font-weight: 800;

    text-align: center;

    white-space: nowrap;

}

.service-areas-section .area-links .area-button-grid a:hover {

    border-color: #087fe2;

    background: #f2f8fc;

}

.service-areas-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 28px;

}

.service-areas-note {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;

    font-size: .86rem;

    line-height: 1.5;

}

.service-areas-note span {

    font-size: 1.35rem;

    flex-shrink: 0;

}

.service-areas-all {

    flex-shrink: 0;

    min-height: 52px;

    padding: 12px 23px;

    border: 2px solid #087fe2;

    border-radius: 13px;

    color: #087fe2;

    background: #fff;

    box-shadow: 0 0 0 3px rgba(8,127,226,.10);

    font-size: .84rem;

    font-weight: 800;

    white-space: nowrap;

}

.service-areas-all:hover {

    background: #087fe2;

    color: #fff;

}

.service-areas-all span {

    margin-left: 8px;

    font-size: 1.2rem;

}

@media (max-width: 1399.98px) {
    .service-areas-container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .service-areas-layout {
        --bs-gutter-x: 1.8rem;
    }
    .service-areas-section .area-group {
        padding: 0 12px;
    }
    .service-areas-section .area-links h3 {
        font-size: 1.02rem;
    }
    .service-areas-section .area-links .area-button-grid a {
        font-size: .75rem;
    }
    .service-areas-bottom {
        flex-wrap: wrap;
    }
}

@media (max-width: 991.98px) {
    .service-areas-section {
        padding: 50px 0;
    }
    .service-areas-section .service-map {
        max-width: 580px;
        margin: 0 auto 25px;
    }
    .service-areas-content {
        padding-top: 0;
    }
    .service-areas-bottom {
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    .service-areas-section .area-group {
        padding: 20px 0;
    }
    .service-areas-section .area-group:first-child {
        padding-top: 0;
    }
    .service-areas-section .area-group + .area-group {
        border-left: 0;
        border-top: 1px solid #dce5ec;
    }
    .service-areas-section .area-button-grid {
        max-width: 380px;
    }
    .service-areas-all {
        width: 100%;
    }
}

.service-areas-note .service-areas-note-icon {

    width: 24px;

    height: 30px;

    object-fit: contain;

    display: block;

    flex: 0 0 24px;

}

.repair-decisions-section {

    padding: 48px 0 60px;

}

.repair-decisions-section .section-heading {

    max-width: 920px;

    margin-bottom: 28px;

}

.repair-decisions-section .section-heading h2 {

    margin-bottom: 8px;

}

.repair-decisions-section .section-heading p {

    margin-bottom: 0;

}

.repair-decisions-section .editorial-card {

    display: flex;

    flex-direction: column;

    border-radius: 13px;

}

.repair-decisions-section .editorial-img {

    height: 165px;

    background: #dcebf4;

    overflow: hidden;

}

.repair-decisions-section .editorial-img img {

    width: 100%;

    height: 100%;

    max-width: none;

    object-fit: cover;

    display: block;

}

.repair-decisions-section .editorial-card > .editorial-content {

    padding: 18px 22px 20px;

    flex: 1;

    display: flex;

    flex-direction: column;

}

.repair-decisions-section .editorial-card h3 {

    font-size: 1.12rem;

    line-height: 1.32;

    margin-bottom: 9px;

}

.repair-decisions-section .editorial-card p {

    font-size: .88rem;

    line-height: 1.55;

    margin-bottom: 14px;

}

.repair-decisions-section .editorial-card a {

    margin-top: auto;

    align-self: flex-start;

}

@media (max-width: 767.98px) {
    .repair-decisions-section {
        padding: 52px 0;
    }
    .repair-decisions-section .editorial-img {
        height: 190px;
    }
}

.advice-section {

    padding: 42px 0 54px;

}

.advice-section .container {

    max-width: 1220px;

}

.advice-section .blog-card {

    display: flex;

    flex-direction: column;

    position: relative;

    padding: 0 0 16px;

    border-radius: 13px;

    overflow: hidden;

}

.advice-section .blog-img {

    height: 145px;

    overflow: hidden;

    background: #dcebf4;

}

.advice-section .blog-img img {

    width: 100%;

    height: 100%;

    max-width: none;

    object-fit: cover;

    display: block;

}

.advice-section .blog-card > .advice-category {

    position: relative;

    z-index: 1;

    align-self: flex-start;

    margin: -16px 0 9px 18px;

    padding: 5px 13px;

    border: 2px solid #9adfff;

    border-radius: 999px;

    background: #fff;

    box-shadow: 0 2px 7px rgba(4,31,61,.09);

    color: #078be9;

    font-size: .63rem;

    line-height: 1.25;

    font-weight: 800;

    text-transform: uppercase;

}

.advice-section .blog-card h3, .advice-section .blog-card p, .advice-section .blog-card > a {

    margin-left: 20px;

    margin-right: 20px;

}

.advice-section .blog-card h3 {

    font-size: 1.04rem;

    line-height: 1.32;

    margin-bottom: 7px;

}

.advice-section .blog-card p {

    font-size: .83rem;

    line-height: 1.45;

    margin-bottom: 12px;

}

.advice-section .blog-card > a {

    margin-top: auto;

    align-self: flex-start;

}

.advice-section .btn-outline-primary {

    border: 2px solid #087fe2;

    border-radius: 12px;

    font-size: .8rem;

    padding: 10px 18px;

}

@media (max-width:767.98px) {
    .advice-section {
        padding: 52px 0;
    }
    .advice-section .blog-img {
        height: 190px;
    }
}

.how {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    padding: 26px 0 22px;

    background: radial-gradient(ellipse at 0% 10%, rgba(21,117,209,.36), transparent 28%),
              radial-gradient(ellipse at 100% 100%, rgba(15,94,168,.28), transparent 30%),
              linear-gradient(110deg, #06274c, #031b37 62%, #062b50);

    color: #fff;

    text-align: left;

}

.how .container {

    position: relative;

    z-index: 1;

    max-width: 1380px;

}

.how h2 {

    margin: 0 0 19px;

    font-size: clamp(1.35rem, 2.1vw, 2rem);

    line-height: 1.2;

    font-weight: 800;

}

.how-steps {

    display: grid;

    grid-template-columns: repeat(3, minmax(0,1fr));

    gap: 42px;

}

.how-step {

    display: flex;

    align-items: center;

    gap: 15px;

    position: relative;

    min-width: 0;

}

.how-step:not(:last-child)::after {

    content: "→";

    position: absolute;

    right: -31px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 1.9rem;

    line-height: 1;

    color: #13bff1;

}

.how-number {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 64px;

    height: 64px;

    border-radius: 13px;

    background: linear-gradient(135deg,#167bd8,#0ac9f1);

    box-shadow: 0 0 15px rgba(7,178,247,.23);

    font-size: 1.55rem;

    font-weight: 800;

}

.how-step-copy {

    min-width: 0;

}

.how-step h3 {

    margin: 0 0 3px;

    font-size: 1.05rem;

    font-weight: 800;

    line-height: 1.3;

}

.how-step p {

    margin: 0;

    font-size: .85rem;

    line-height: 1.5;

    color: #e3edf7;

}

.how .how-cta {

    display: flex;

    width: fit-content;

    margin: 18px auto 0;

    padding: 11px 23px;

    text-transform: uppercase;

    font-size: .83rem;

    letter-spacing: .015em;

    gap: 12px;

    border-radius: 12px;

}

@media (max-width: 991.98px) {
    .how {
        padding: 38px 0;
    }
    .how-steps {
        gap: 22px;
    }
    .how-step {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .how-step:not(:last-child)::after {
        right: -22px;
        top: 35px;
    }
    .how-number {
        flex: 0 0 58px;
        width: 58px;
        height: 58px;
    }
}

@media (max-width: 575.98px) {
    .how h2 {
        text-align: center;
        margin-bottom: 24px;
    }
    .how-steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .how-step {
        flex-direction: row;
        text-align: left;
        gap: 15px;
    }
    .how-step:not(:last-child)::after {
        display: none;
    }
    .how-number {
        flex: 0 0 58px;
    }
    .how .how-cta {
        width: 100%;
    }
}

.how {

    background-color: #031b37;

    background-image: linear-gradient(90deg, rgba(3,27,55,.18), rgba(3,27,55,.10) 50%, rgba(3,27,55,.18)), url("../img/repair-help-ice-background-clean.jpg");

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;

}

@media (max-width: 575.98px) {
    .how {
        background-position: center center;
    }
}

.trust-v49 {

    padding: 24px 0 26px;

    background: #fff;

}

.trust-v49 .container {

    max-width: 1280px;

}

.trust-v49 .trust-heading {

    text-align: center;

    font-size: clamp(1.4rem, 2vw, 2rem);

    line-height: 1.25;

    font-weight: 800;

    margin: 0 0 23px;

}

.trust-benefits {

    display: grid;

    grid-template-columns: repeat(3, minmax(0,1fr));

    gap: 32px;

}

.trust-benefit {

    display: flex;

    align-items: center;

    gap: 18px;

    min-width: 0;

    text-align: left;

}

.trust-benefit-icon {

    flex: 0 0 60px;

    width: 60px;

    height: 60px;

    object-fit: contain;

}

.trust-benefit h3 {

    margin: 0 0 3px;

    font-size: 1rem;

    font-weight: 800;

    line-height: 1.3;

}

.trust-benefit p {

    margin: 0;

    color: #526477;

    font-size: .83rem;

    line-height: 1.4;

}

.aircon-v49 {

    position: relative;

    isolation: isolate;

    display: grid;

    grid-template-columns: 50% 50%;

    min-height: 245px;

    overflow: hidden;

    background: #edf8fd;

}

.aircon-v49-photo {

    position: absolute;

    z-index: -1;

    inset: 0 39% 0 0;

    background-image: linear-gradient(90deg, rgba(237,248,253,0) 58%, #edf8fd 100%), url("../img/services/air-conditioning-feature.jpg");

    background-size: cover;

    background-position: center 48%;

    background-repeat: no-repeat;

}

.aircon-v49-content {

    grid-column: 2;

    align-self: center;

    padding: 32px max(28px, calc((100vw - 1280px)/2)) 32px 18px;

}

.aircon-v49-content .eyebrow {

    display: block;

    margin-bottom: 5px;

    font-size: .72rem;

}

.aircon-v49-content h2 {

    margin: 0 0 8px;

    font-size: clamp(1.55rem, 2.2vw, 2.25rem);

    line-height: 1.18;

}

.aircon-v49-content p {

    margin-bottom: 15px;

    font-size: .91rem;

    line-height: 1.5;

}

.aircon-v49-content .btn {

    padding: 10px 24px;

    text-transform: uppercase;

    font-size: .83rem;

}

@media (max-width:991.98px) {
    .trust-benefits {
        gap: 18px;
    }
    .trust-benefit {
        gap: 10px;
    }
    .trust-benefit-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
    }
    .aircon-v49-content {
        padding: 28px 25px 28px 12px;
    }
}

@media (max-width:767.98px) {
    .trust-v49 {
        padding: 42px 0;
    }
    .trust-benefits {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto;
        gap: 22px;
    }
    .aircon-v49 {
        display: block;
    }
    .aircon-v49-photo {
        position: relative;
        z-index: auto;
        inset: auto;
        height: 245px;
        background-image: url("../img/services/air-conditioning-feature.jpg");
    }
    .aircon-v49-content {
        padding: 30px 24px 38px;
    }
}

.trust-v49 .trust-benefit-icon {

    width: 68px;

    height: 68px;

    flex: 0 0 68px;

    object-fit: contain;

}

.aircon.aircon-v49 {

    display: grid;

    grid-template-columns: minmax(0, 46%) minmax(0, 54%);

    isolation: isolate;

    min-height: 245px;

    overflow: hidden;

    background: #edf8fd;

}

.aircon.aircon-v49 .aircon-v49-photo {

    position: relative;

    z-index: 0;

    inset: auto;

    grid-column: 1;

    grid-row: 1;

    min-width: 0;

    width: 100%;

    height: 100%;

    background-image: url("../img/services/air-conditioning-feature.jpg");

    background-size: cover;

    background-position: center 47%;

}

.aircon.aircon-v49 .aircon-v49-photo::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to right, transparent 72%, #edf8fd 100%);

    pointer-events: none;

}

.aircon.aircon-v49 .aircon-v49-content {

    position: relative;

    z-index: 1;

    grid-column: 2;

    grid-row: 1;

    min-width: 0;

    background: #edf8fd;

    padding: 32px max(28px, calc((100vw - 1280px)/2)) 32px 22px;

}

@media (max-width:991.98px) {
    .trust-v49 .trust-benefit-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }
    .aircon.aircon-v49 .aircon-v49-content {
        padding: 28px 25px 28px 18px;
    }
}

@media (max-width:767.98px) {
    .aircon.aircon-v49 {
        display: block;
    }
    .aircon.aircon-v49 .aircon-v49-photo {
        height: 245px;
    }
    .aircon.aircon-v49 .aircon-v49-photo::after {
        background: linear-gradient(to bottom, transparent 72%, #edf8fd 100%);
    }
    .aircon.aircon-v49 .aircon-v49-content {
        padding: 30px 24px 38px;
    }
}

.final-cta.final-cta-v411 {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: 22px 0 20px;

    background: #052343;

}

.final-cta-v411::before {

    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    background-image: linear-gradient(90deg, rgba(4,31,61,.02) 0%, rgba(4,31,61,.42) 22%, #052343 38%, #052343 100%), url("../img/footer-cta-refrigeration.jpg");

    background-position: center, left center;

    background-size: cover, auto 100%;

    background-repeat: no-repeat;

}

.final-cta-v411 .container {

    max-width: 1280px;

    padding-left: 225px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}

.final-cta-v411 h2 {

    font-size: clamp(1.15rem, 1.8vw, 1.55rem);

    margin-bottom: 4px;

    line-height: 1.25;

}

.final-cta-v411 p {

    font-size: .83rem;

    line-height: 1.4;

    margin: 0;

}

.final-cta-v411 .btn {

    white-space: nowrap;

    text-transform: uppercase;

    padding: 10px 23px;

    font-size: .83rem;

}

.final-cta-v411 .small {

    font-size: .75rem;

}

footer {

    padding-top: 29px;

}

footer .footer-logo {

    width: 205px;

    height: auto;

    max-height: 92px;

    object-fit: contain;

    object-position: left center;

    margin-bottom: 12px;

    background: transparent;

}

@media (max-width: 991.98px) {
    .final-cta-v411 .container {
        padding-left: 145px;
    }
}

@media (max-width: 767.98px) {
    .final-cta.final-cta-v411 {
        padding: 30px 0;
    }
    .final-cta-v411::before {
        background-image: linear-gradient(90deg,rgba(4,31,61,.75),#052343 68%),url("../img/footer-cta-refrigeration.jpg");
    }
    .final-cta-v411 .container {
        padding-left: 12px;
        display: block;
    }
    .final-cta-v411 .btn {
        margin-top: 16px;
    }
}

.final-cta.final-cta-v411 {

    background: #052343;

    padding: 20px 0;

}

.final-cta-v411::before {

    background-image: url("../img/footer-cta-photo-only-v4-12.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}

.final-cta-v411 .container {

    max-width: 1280px;

    padding-left: 225px;

    gap: 28px;

}

.final-cta-v411 .container > div:first-child {

    flex: 1 1 auto;

    min-width: 0;

}

.final-cta-v411 .container > div:last-child {

    flex: 0 0 auto;

}

.final-cta-v411 h2 {

    font-size: clamp(1.12rem, 1.65vw, 1.48rem);

}

@media (max-width:991.98px) {
    .final-cta-v411 .container {
        padding-left: 165px;
    }
}

@media (max-width:767.98px) {
    .final-cta.final-cta-v411 {
        padding: 26px 0;
    }
    .final-cta-v411::before {
        background-image: linear-gradient(90deg,rgba(5,35,67,.88),rgba(5,35,67,.94)),url("../img/footer-cta-photo-only-v4-12.jpg");
    }
    .final-cta-v411 .container {
        padding-left: 12px;
    }
}

.final-cta.final-cta-v411 {

    background: #052343;

}

.final-cta-v411::before {

    background-image: linear-gradient(90deg, rgba(5,35,67,0) 0%, rgba(5,35,67,.08) 52%, #052343 100%), url("../img/footer-cta-photo-only-v4-12.jpg");

    background-size: 100% 100%, auto 100%;

    background-position: left center, left center;

    background-repeat: no-repeat;

    width: 440px;

    right: auto;

}

.final-cta-v411 .container {

    padding-left: 175px;

}

@media (max-width:991.98px) {
    .final-cta-v411::before {
        width: 340px;
    }
    .final-cta-v411 .container {
        padding-left: 130px;
    }
}

@media (max-width:767.98px) {
    .final-cta-v411::before {
        width: 100%;
        background-image: linear-gradient(90deg,rgba(5,35,67,.78),#052343 80%),url("../img/footer-cta-photo-only-v4-12.jpg");
        background-size: 100% 100%, auto 100%;
    }
    .final-cta-v411 .container {
        padding-left: 12px;
    }
}

.final-cta.final-cta-v411 {

    background-color: #052343;

}

.final-cta-v411::before {

    width: min(46vw, 680px);

    right: auto;

    background-image: linear-gradient(90deg, rgba(5,35,67,0) 0%, rgba(5,35,67,0) 55%, rgba(5,35,67,.6) 77%, #052343 100%), url("../img/footer-cta-refrigeration-v4-14.jpg");

    background-size: 100% 100%, cover;

    background-position: left center, left center;

    background-repeat: no-repeat;

}

.final-cta-v411 .container {

    position: relative;

    z-index: 1;

    padding-left: 185px;

}

@media (max-width: 991.98px) {
    .final-cta-v411::before {
        width: 48vw;
    }
    .final-cta-v411 .container {
        padding-left: 145px;
    }
}

@media (max-width: 767.98px) {
    .final-cta-v411::before {
        width: 100%;
        background-image: linear-gradient(90deg,rgba(5,35,67,.78),#052343 88%),url("../img/footer-cta-refrigeration-v4-14.jpg");
        background-size: 100% 100%, cover;
    }
    .final-cta-v411 .container {
        padding-left: 12px;
    }
}

@media (min-width: 1200px) {
    .final-cta-v411 .container > div:first-child {
        margin-left: 120px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .final-cta-v411 .container > div:first-child {
        margin-left: 50px;
    }
}

@media (min-width: 1200px) {
    .final-cta-v411::before {
        width: min(39vw, 570px);
        background-image: linear-gradient(90deg, rgba(5,35,67,0) 0%, rgba(5,35,67,0) 40%, rgba(5,35,67,.55) 66%, #052343 100%), url("../img/footer-cta-refrigeration-v4-14.jpg");
        background-size: 100% 100%, auto 100%;
        background-position: left center, left center;
    }
    .final-cta-v411 .container > div:first-child {
        margin-left: 220px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .final-cta-v411::before {
        width: 39vw;
        background-image: linear-gradient(90deg, transparent 35%, #052343 100%), url("../img/footer-cta-refrigeration-v4-14.jpg");
        background-size: 100% 100%, auto 100%;
    }
    .final-cta-v411 .container > div:first-child {
        margin-left: 90px;
    }
}

.final-cta.final-cta-v411 {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    background: #052343;

}

@media (min-width: 992px) {
    .final-cta-v411::before {
        inset: 0 auto 0 0;
        width: min(38vw, 560px);
        background-image: linear-gradient(90deg, transparent 0%, transparent 48%, rgba(5,35,67,.28) 64%, rgba(5,35,67,.78) 82%, #052343 100%),
      url("../img/footer-cta-refrigeration-v4-17.jpg");
        background-size: 100% 100%, cover;
        background-position: left center, center center;
        background-repeat: no-repeat;
        z-index: -1;
    }
}

@media (min-width: 1200px) {
    .final-cta-v411 .container > div:first-child {
        margin-left: 220px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .final-cta-v411 .container > div:first-child {
        margin-left: 90px;
    }
}

@media (max-width: 991.98px) {
    .final-cta-v411::before {
        background-image: linear-gradient(90deg, rgba(5,35,67,.76), #052343 90%), url("../img/footer-cta-refrigeration-v4-17.jpg");
        background-size: 100% 100%, cover;
        background-position: left center, center center;
    }
}

.emergency-image-banner {

    position: relative;

    min-height: 255px;

    overflow: hidden;

    background: #062c52;

    padding: 0;

    color: #fff;

}

.emergency-bg-image {

    position: absolute;

    inset: 0 0 0 auto;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center right;

    z-index: 0;

}

.emergency-image-banner::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background: linear-gradient(90deg,#062c52 0%,#062c52 43%,rgba(6,44,82,.96) 52%,rgba(6,44,82,.60) 64%,rgba(6,44,82,.12) 75%,rgba(6,44,82,0) 84%);

    pointer-events: none;

}

.emergency-inner {

    position: relative;

    z-index: 2;

    min-height: 255px;

    display: flex;

    align-items: center;

}

.emergency-copy {

    width: min(760px,62%);

    padding: 38px 0;

}

.emergency-copy h2 {

    margin: 0 0 8px;

    font-size: clamp(1.8rem,2.4vw,2.55rem);

    font-weight: 800;

    line-height: 1.08;

    color: #fff;

}

.emergency-copy p {

    max-width: 720px;

    margin: 0 0 22px;

    font-size: 1.05rem;

    line-height: 1.55;

    color: #fff;

}

.emergency-actions {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

    align-items: center;

}

.emergency-actions .btn {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    padding: 0 24px;

    font-weight: 800;

}

.emergency-check-btn {

    border-color: #0bbcff !important;

    box-shadow: 0 0 0 2px rgba(11,188,255,.18),0 0 18px rgba(11,188,255,.35);

}

@media (max-width:991.98px) {
    .emergency-copy {
        width: 72%;
    }
    .emergency-image-banner::after {
        background: linear-gradient(90deg,#062c52 0%,#062c52 50%,rgba(6,44,82,.90) 66%,rgba(6,44,82,.18) 88%);
    }
}

@media (max-width:767.98px) {
    .emergency-image-banner,.emergency-inner {
        min-height: 360px;
    }
    .emergency-bg-image {
        opacity: .42;
        object-position: 68% center;
    }
    .emergency-image-banner::after {
        background: linear-gradient(90deg,rgba(6,44,82,.98),rgba(6,44,82,.78));
    }
    .emergency-copy {
        width: 100%;
        padding: 42px 0;
    }
    .emergency-actions .btn {
        width: 100%;
    }
}

.btn:not(.btn-lg),
.mobile-cta a,
.emergency-actions .btn,
.repair-router > .router-submit,
.service-areas-all,
.how .how-cta {

    border-radius: 9px;

}

/* Keyboard navigation */
.skip-link {
    position: absolute;
    left: 12px;
    top: -70px;
    z-index: 9999;
    padding: 10px 16px;
    background: #fff;
    color: #061f3d;
    border: 2px solid #0588ef;
    border-radius: 9px;
}
.skip-link:focus {
    top: 12px;
}


/* Navigation redesign v1.1 — scoped to header to preserve existing sections */
.nav-redesign .navbar {padding: 12px 0;}
.nav-redesign .nav-redesign-inner {max-width: 1320px; gap: 18px;}
.nav-redesign .navbar-brand {margin-right: auto; flex: 0 0 auto;}
.nav-redesign .navbar-brand img {width: 175px; max-width: 100%; height: auto;}
.nav-redesign .navbar-collapse {flex-grow: 0;}
.nav-redesign .nav-icon-list {gap: clamp(8px,1.25vw,22px); align-items: center;}
.nav-redesign .nav-icon-link {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 88px; padding: 4px 5px; color: #102b4d; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-align: center; transition: color .2s ease;}
.nav-redesign .nav-icon-link img {width: 38px; height: 38px; object-fit: contain; transition: transform .2s ease;}
.nav-redesign .nav-icon-link:hover, .nav-redesign .nav-icon-link:focus-visible {color: #1679c4;}
.nav-redesign .nav-icon-link:hover img {transform: translateY(-2px);}
.nav-redesign .emergency-call {background: #f21b19; color: #fff; text-decoration: none; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 14px; min-height: 66px; box-shadow: 0 2px 6px rgba(0,0,0,.10); transition: background .2s ease;}
.nav-redesign .emergency-call:hover, .nav-redesign .emergency-call:focus-visible {background: #d91412; color: #fff;}
.nav-redesign .emergency-call img {width: 33px; height: 33px; flex: 0 0 auto;}
.nav-redesign .nav-emergency-text {display: flex; flex-direction: column; line-height: 1.15; text-align: left;}
.nav-redesign .emergency-label {font-size: 13px; font-weight: 600;}
.nav-redesign .nav-emergency-text strong {font-size: 22px; font-weight: 800; white-space: nowrap; letter-spacing: -.3px;}
.nav-redesign .emergency-mobile {display: none;}
@media (max-width:1199.98px) and (min-width:992px) {
 .nav-redesign .navbar-brand img {width: 145px;}
 .nav-redesign .nav-icon-list {gap: 1px;}
 .nav-redesign .nav-icon-link {min-width: 74px; font-size: 11px;}
 .nav-redesign .nav-icon-link img {width: 33px;height:33px;}
 .nav-redesign .emergency-call {padding: 9px;gap:6px;}
 .nav-redesign .nav-emergency-text strong {font-size: 17px;}
 .nav-redesign .emergency-label {font-size: 11px;}
}
@media (max-width:991.98px) {
 .nav-redesign .nav-redesign-inner {gap: 10px;}
 .nav-redesign .navbar-brand img {width: 160px;}
 .nav-redesign .emergency-desktop {display: none;}
 .nav-redesign .emergency-mobile {display: inline-flex; min-height: 42px; padding: 7px 11px; margin-left: auto; font-size: 13px; font-weight: 800;}
 .nav-redesign .emergency-mobile img {width: 21px; height: 21px;}
 .nav-redesign .navbar-toggler {padding: 6px 9px;}
 .nav-redesign .navbar-collapse {flex-basis: 100%; order: 4;}
 .nav-redesign .nav-icon-list {align-items: stretch; padding: 12px 0; gap: 0;}
 .nav-redesign .nav-icon-link {flex-direction: row; justify-content: flex-start; gap: 13px; text-align: left; min-height: 54px; font-size: 15px; border-bottom: 1px solid #e7edf4;}
 .nav-redesign .nav-icon-link img {width: 29px; height: 29px;}
}
@media (max-width:420px) {
 .nav-redesign .navbar-brand img {width: 130px;}
 .nav-redesign .emergency-mobile {font-size: 12px; padding: 6px 8px;}
}

/* v1.1.1: header emergency CTA sizing and collision safeguard */
.nav-redesign .emergency-desktop {
    flex: 0 0 auto;
    width: auto;
    min-width: 216px;
    max-width: 230px;
    height: 70px;
    min-height: 0;
    padding: 10px 12px;
    white-space: nowrap;
}
.nav-redesign .nav-emergency-text {
    width: auto;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}
.nav-redesign .emergency-label {white-space: nowrap; font-size: 12px;}
.nav-redesign .nav-emergency-text strong {white-space: nowrap; font-size: 22px;}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nav-redesign .emergency-desktop {min-width: 170px; max-width: 180px; height: 60px; padding: 8px;}
    .nav-redesign .nav-emergency-text strong {font-size: 17px;}
    .nav-redesign .emergency-label {font-size: 10px;}
}


/* v1.1.2 — align problem-card "Find out why" links at the bottom of each card */
.problem-grid .problem-card > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}
.problem-grid .problem-card b {
    display: block;
    margin-top: auto;
    padding-top: 14px;
}

/* v1.1.3: stretch content vertically so link auto-margin works */
.problem-grid .problem-card > div {
    align-self: stretch;
}