:root {
    --blue: #627ab9;
    --blue-strong: #4c67a7;
    --orange: #d97350;
    --ink: #526f9a;
    --muted: #6e85a6;
    --cloud: #eef3ff;
    --cloud-deep: #e4ebfd;
    --violet: #eeecfc;
    --warm: #fff0e9;
    --line: #cbd8ee;
    --white: #fff;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: Arial, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

.frame {
    width: min(100% - 78px, 1170px);
    margin-inline: auto;
}

h1, h2, h3, p {
    margin-top: 0;
}

h1, h2, h3 {
    color: #576eac;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.17;
    letter-spacing: -.02em;
}

h1 {
    margin-bottom: 25px;
    font-size: 40px;
    font-weight: 700;
}

h2 {
    margin-bottom: 23px;
    font-size: 28px;
    font-weight: 700;
}

h3 {
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 700;
}

p {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.72;
}

p:last-child {
    margin-bottom: 0;
}

.lead {
    color: #4e6da0;
    font-weight: 650;
}

a {
    color: var(--blue-strong);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--orange);
}

main p a[href=""] {
    text-decoration: none;
    font-weight: inherit;
}

a:focus-visible, summary:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 4px;
}

.site-top {
    position: relative;
    z-index: 10;
    background: #fafcff;
    border-bottom: 3px solid #e2e9f7;
}

.top-line {
    display: flex;
    align-items: center;
    gap: 27px;
    min-height: 88px;
}

.site-name {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: none;
    color: #6380ad;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.site-name strong {
    color: var(--orange);
}

.service-sign {
    display: inline-block;
    position: relative;
    width: 43px;
    height: 43px;
    border: 4px solid var(--blue);
    border-radius: 7px 7px 14px 14px;
    background: var(--cloud);
}

.service-sign::before {
    content: "";
    position: absolute;
    inset: 13px 6px 5px;
    border: 4px solid var(--orange);
    border-radius: 50%;
}

.service-sign::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}

.service-sign i {
    position: absolute;
    top: 7px;
    right: 6px;
    width: 9px;
    height: 3px;
    background: #a6bbe0;
}

.header-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: clamp(16px, 2vw, 32px);
}

.header-links a {
    color: #6d87af;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.header-links a:hover, .header-links a[aria-current] {
    color: var(--orange);
}

.header-online {
    flex: none;
    padding: 11px 18px;
    background: var(--blue);
    border: 2px solid var(--blue);
    border-radius: 5px;
    color: white;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.header-online:hover {
    background: var(--blue-strong);
    border-color: var(--blue-strong);
    color: white;
}

.header-menu {
    display: none;
}

.overline, .fine-label {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--orange);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .125em;
    text-transform: uppercase;
}

.cta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 11px 24px;
    border: 2px solid transparent;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.btn-primary {
    background: var(--blue);
    border-color: var(--blue);
    color: white;
}

.btn-primary:hover, .btn-primary:active {
    background: var(--blue-strong);
    border-color: var(--blue-strong);
    color: white;
}

.btn-border {
    border-color: #aabde1;
    background: transparent;
    color: var(--blue-strong);
}

.btn-border:hover, .btn-border:active {
    background: #dee8fa;
    border-color: var(--blue);
}

.front-main {
    padding-block: 70px;
    background: var(--cloud);
}

.front-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(315px, .69fr);
    align-items: center;
    gap: 61px;
}

.front-article p {
    max-width: 730px;
}

.tech-plate {
    padding: 23px 23px 12px;
    border: 1px solid #bdcdeb;
    border-radius: 3px;
    background: #e2eafb;
}

.plate-caption {
    display: block;
    color: #7590b8;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
}

.plate-diagram {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 177px;
    margin-top: 8px;
    border-bottom: 1px solid #c4d3ec;
}

.diagram-outer {
    display: grid;
    place-items: center;
    width: 138px;
    height: 138px;
    border: 18px solid #a8b9df;
    border-radius: 50%;
    background: #f4f7ff;
}

.diagram-inner {
    width: 63px;
    height: 63px;
    border: 13px solid var(--orange);
    border-radius: 50%;
    background: #fff4ef;
}

.plate-light {
    position: absolute;
    right: 16px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #93add9;
}

.plate-light.a {
    top: 44px;
    background: var(--orange);
}

.plate-light.b {
    top: 80px;
}

.plate-light.c {
    top: 116px;
}

.plate-facts > div {
    display: flex;
    align-items: baseline;
    gap: 15px;
    padding-block: 14px;
    border-bottom: 1px solid #c4d3ec;
}

.plate-facts > div:last-child {
    border-bottom: 0;
}

.plate-facts span {
    flex: none;
    color: var(--orange);
    font-size: 13px;
    font-weight: 900;
}

.plate-facts strong {
    color: #6481b0;
    font-size: 14px;
    font-weight: 750;
}

.city-band {
    padding-block: 60px;
    background: #fff;
}

.section-label {
    display: flex;
    align-items: baseline;
    gap: 21px;
    margin-bottom: 25px;
}

.section-label span {
    color: var(--orange);
    font-size: 16px;
    font-weight: 900;
}

.section-label h2 {
    margin-bottom: 0;
}

.city-band > .frame > p {
    max-width: 980px;
}

.city-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin-top: 25px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.city-columns strong {
    color: #ce734e;
}

.device-work {
    padding-block: 65px 71px;
    background: var(--violet);
}

.work-records {
    max-width: 1050px;
    margin-inline: auto;
}

.work-record {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 23px;
    padding-block: 25px;
    border-top: 1px solid #cdd2ef;
}

.work-record:last-child {
    border-bottom: 1px solid #cdd2ef;
}

.record-number {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border: 2px solid var(--orange);
    border-radius: 50%;
    color: var(--orange);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;
}

.work-record p {
    max-width: 955px;
}

.cost-section {
    padding-block: 65px;
    background: #fff;
}

.cost-section p {
    max-width: 1020px;
}

.cost-rules, .payment-highlight {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 28px;
    border-top: 3px solid #d8e3f6;
    border-bottom: 3px solid #d8e3f6;
}

.cost-rules > div {
    padding: 18px 27px;
    border-left: 1px solid #d1ddf0;
}

.cost-rules > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.cost-rules span {
    display: block;
    color: #7f94b5;
    font-size: 13px;
    font-weight: 750;
}

.cost-rules strong {
    display: block;
    margin-top: 6px;
    color: var(--orange);
    font-size: 25px;
    font-weight: 850;
}

.availability {
    padding-block: 59px 53px;
    background: var(--cloud-deep);
}

.availability-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(295px, .85fr);
    align-items: center;
    gap: 65px;
}

.availability-hours {
    border-top: 2px solid #bccbe9;
}

.availability-hours > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-block: 16px;
    border-bottom: 2px solid #bccbe9;
}

.availability-hours span {
    color: #718bb4;
    font-size: 14px;
    font-weight: 750;
}

.availability-hours strong {
    color: var(--blue-strong);
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

.final-buttons {
    margin-top: 21px;
}

.site-bottom {
    border-top: 1px solid #dce5f4;
    background: #fafcff;
}

.bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 30px;
}

.bottom-inner > strong {
    color: #607eb2;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
}

.bottom-inner nav {
    display: flex;
    flex-wrap: wrap;
    gap: 23px;
}

.bottom-inner a {
    color: #8299ba;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.bottom-inner a:hover {
    color: var(--orange);
}

.bottom-inner .privacy {
    color: #9eb0c8;
}

.wash-intro {
    padding-block: 66px 64px;
    background: var(--warm);
    border-bottom: 5px solid #f0cab7;
}

.wash-intro h1, .wash-intro p, .offer-head h1, .offer-head p {
    max-width: 970px;
}

.wash-service {
    padding-block: 64px;
    background: white;
}

.wash-service p, .dish-service p, .wash-final p, .service-scope p, .service-contact p {
    max-width: 1030px;
}

.wash-inspection {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 29px;
    border-block: 2px solid #cedbf0;
}

.wash-inspection > div {
    padding: 17px 22px;
    border-left: 1px solid #cedbf0;
}

.wash-inspection > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.wash-inspection strong {
    display: block;
    color: var(--orange);
    font-size: 12px;
    letter-spacing: .1em;
}

.wash-inspection span {
    display: block;
    margin-top: 5px;
    color: #7390b9;
    font-size: 14px;
}

.dish-service {
    padding-block: 64px;
    background: var(--cloud);
}

.wash-final {
    padding-block: 64px;
    background: white;
}

.offer-head {
    padding-block: 66px 64px;
    background: var(--cloud);
    border-bottom: 5px solid #dbe4f6;
}

.service-scope {
    padding-block: 65px;
    background: white;
}

.service-scope article {
    padding-block: 22px 19px;
    border-top: 1px solid var(--line);
}

.service-scope article:last-child {
    border-bottom: 1px solid var(--line);
}

.service-payment {
    padding-block: 65px;
    background: var(--violet);
}

.service-payment p {
    max-width: 1020px;
}

.payment-highlight {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block: 22px;
}

.payment-highlight span {
    color: #7d92b3;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .09em;
}

.payment-highlight strong {
    color: var(--orange);
    font-size: 26px;
}

.service-contact {
    padding-block: 65px;
    background: white;
}

@media (max-width: 1100px) {
    .frame {
        width: min(100% - 62px, 1170px);
    }

    .top-line {
        gap: 17px;
    }

    .header-links {
        gap: 17px;
    }

    .header-links a {
        font-size: 13px;
    }

    .front-grid, .availability-layout {
        gap: 35px;
    }
}

@media (max-width: 900px) {
    .header-links, .header-online {
        display: none;
    }

    .top-line {
        justify-content: space-between;
        min-height: 75px;
    }

    .header-menu {
        display: block;
        position: relative;
    }

    .header-menu summary {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 10px 13px;
        border: 1px solid #aebfdf;
        border-radius: 5px;
        color: var(--blue);
        font-size: 14px;
        font-weight: 800;
        list-style: none;
        cursor: pointer;
    }

    .header-menu summary::-webkit-details-marker {
        display: none;
    }

    .burger {
        position: relative;
        width: 16px;
        height: 12px;
        border-top: 2px solid var(--blue);
        border-bottom: 2px solid var(--blue);
    }

    .burger::after {
        content: "";
        position: absolute;
        top: 4px;
        left: 0;
        width: 16px;
        border-top: 2px solid var(--blue);
    }

    .header-menu nav {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        display: flex;
        flex-direction: column;
        width: min(310px, calc(100vw - 36px));
        padding: 8px;
        border: 1px solid #cbd8ed;
        border-radius: 8px;
        background: white;
        box-shadow: 0 11px 24px rgba(90, 119, 166, .13);
    }

    .header-menu nav a {
        padding: 10px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 750;
        text-decoration: none;
    }

    .header-menu nav a:hover, .header-menu nav a[aria-current] {
        background: var(--cloud);
    }

    .front-grid, .availability-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .tech-plate {
        width: min(100%, 530px);
        margin-inline: auto;
    }

    .city-columns {
        gap: 26px;
    }

    .availability-hours {
        width: min(100%, 540px);
    }
}

@media (max-width: 650px) {
    .frame {
        width: min(100% - 36px, 1170px);
    }

    .site-name {
        gap: 8px;
        font-size: 16px;
    }

    .service-sign {
        width: 35px;
        height: 35px;
    }

    .service-sign::before {
        inset: 12px 5px 4px;
    }

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 28px;
    }

    p {
        font-size: 16px;
    }

    .front-main, .city-band, .device-work, .cost-section, .availability, .wash-intro, .wash-service, .dish-service, .wash-final, .offer-head, .service-scope, .service-payment, .service-contact {
        padding-block: 47px;
    }

    .cta-line {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
    }

    .section-label {
        gap: 13px;
    }

    .section-label span {
        font-size: 14px;
    }

    .city-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .work-record {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 13px;
    }

    .record-number {
        width: 29px;
        height: 29px;
        font-size: 14px;
    }

    .cost-rules {
        grid-template-columns: 1fr;
    }

    .cost-rules > div {
        padding: 14px 0;
        border-left: 0;
    }

    .cost-rules > div + div {
        border-top: 1px solid #d1ddf0;
    }

    .wash-inspection {
        grid-template-columns: 1fr;
    }

    .wash-inspection > div {
        padding: 12px 0;
        border-left: 0;
    }

    .wash-inspection > div + div {
        border-top: 1px solid #cedbf0;
    }

    .payment-highlight {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 15px;
    }

    .payment-highlight strong {
        font-size: 22px;
    }

    .bottom-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .bottom-inner nav {
        gap: 15px 22px;
    }
}

@media (max-width: 360px) {
    .frame {
        width: min(100% - 28px, 1170px);
    }

    .site-name {
        font-size: 15px;
    }
}