:root {
    color-scheme: light;
    --ink: #4b637b;
    --ink-soft: #66849a;
    --coral: #ba5665;
    --coral-deep: #a74858;
    --marine: #357f98;
    --marine-strong: #2f738b;
    --pale-blue: #e7f3f9;
    --pale-rose: #f9ecef;
    --surface: #f9fcfe;
    --white: #fff;
    --rule: #cddde7;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--surface);
    font-family: "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--marine);
    text-decoration: none;
}

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

a:focus-visible {
    outline: 3px solid #d47b83;
    outline-offset: 4px;
}

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

h1 {
    font-size: 40px;
    line-height: 1.16;
    letter-spacing: -.035em;
    color: var(--ink);
    margin-bottom: 24px;
}

h2 {
    font-size: 28px;
    line-height: 1.24;
    letter-spacing: -.025em;
    margin-bottom: 20px;
    color: var(--ink);
}

h3 {
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin-bottom: 15px;
    color: var(--ink);
}

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

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

.site-width {
    width: min(1190px, calc(100% - 64px));
    margin-inline: auto;
}

.masthead {
    border-bottom: 1px solid var(--rule);
    background: var(--white);
}

.masthead-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 34px;
    min-height: 88px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 760;
    letter-spacing: -.05em;
    color: var(--ink);
    white-space: nowrap;
}

.brand strong {
    color: var(--coral);
    font-weight: 760;
}

.brand:hover {
    color: var(--ink);
}

.brand-sign {
    position: relative;
    width: 35px;
    height: 35px;
    background: var(--marine);
    border-radius: 9px;
    display: grid;
    place-items: center;
    transform: rotate(-8deg);
}

.brand-sign::before {
    content: "";
    position: absolute;
    width: 19px;
    height: 19px;
    border: 4px solid #d4e9f0;
    border-radius: 50%;
}

.brand-sign span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral);
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 28px;
    row-gap: 12px;
}

.main-nav a {
    font-size: 14px;
    font-weight: 650;
    color: var(--ink);
    padding-block: 7px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
    color: var(--coral);
    border-bottom-color: var(--coral);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--coral);
    color: var(--white);
    padding: 15px 24px;
    border: 2px solid var(--coral);
    border-radius: 5px;
    font-weight: 750;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.button:hover {
    background: var(--coral-deep);
    color: var(--white);
    border-color: var(--coral-deep);
}

.button:active {
    background: var(--marine);
    border-color: var(--marine);
}

.button-small {
    padding: 11px 17px;
    font-size: 14px;
}

.button-inverse {
    background: var(--white);
    border-color: var(--white);
    color: var(--marine);
}

.button-inverse:hover {
    background: var(--pale-blue);
    border-color: var(--pale-blue);
    color: var(--marine-strong);
}

.button-light {
    color: var(--coral);
    background: var(--white);
    border-color: var(--white);
}

.button-light:hover {
    color: var(--marine);
    background: var(--pale-blue);
    border-color: var(--pale-blue);
}

.text-action {
    display: inline-flex;
    align-items: center;
    font-weight: 750;
    color: var(--marine);
    border-bottom: 2px solid currentColor;
    padding: 10px 0;
}

.eyebrow,
.section-tag {
    display: inline-block;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 850;
    letter-spacing: .13em;
    color: var(--coral);
    margin-bottom: 16px;
}

.section-tag {
    margin-bottom: 13px;
}

.section-headline {
    margin-bottom: 24px;
}

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

.opening {
    background: linear-gradient(90deg, var(--surface) 0%, var(--surface) 66%, #edf7fb 66%, #edf7fb 100%);
    padding: 50px 0 48px;
}

.opening-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
    gap: 46px;
}

.opening-story {
    padding-top: 23px;
}

.opening-story h1 {
    margin-bottom: 26px;
}

.hero-actions,
.home-intro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 23px;
}

.repair-display {
    background: var(--white);
    border: 1px solid #c9dce6;
    padding: 23px 27px 28px;
    border-radius: 6px;
    box-shadow: 12px 12px 0 #d7ebf3;
}

.display-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--marine);
}

.display-dots {
    display: flex;
    gap: 5px;
}

.display-dots i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b9d7e4;
}

.display-dots i:first-child {
    background: var(--coral);
}

.machine-scene {
    position: relative;
    height: 257px;
    margin: 18px 0 19px;
    background: radial-gradient(circle at 58% 38%, #e5f5fa 0 33%, transparent 34%), linear-gradient(125deg, #edf6f9, #f7fafd);
    border-radius: 3px;
    overflow: hidden;
}

.machine-shadow {
    position: absolute;
    bottom: 17px;
    left: 22%;
    width: 62%;
    height: 18px;
    background: rgba(91, 139, 157, .16);
    border-radius: 50%;
    filter: blur(5px);
}

.machine-body {
    position: absolute;
    left: 25%;
    top: 20px;
    width: 162px;
    height: 218px;
    background: #fefefe;
    border: 6px solid #a6c5d2;
    border-radius: 11px 11px 6px 6px;
    box-shadow: inset 0 5px 0 #e5f1f5, 7px 5px 0 rgba(86, 135, 155, .13);
}

.machine-panel {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    height: 33px;
    border-bottom: 3px solid #d0e4eb;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.machine-lights {
    display: flex;
    gap: 5px;
    padding-top: 7px;
}

.machine-lights i {
    display: block;
    height: 5px;
    width: 15px;
    background: #a6d3de;
    border-radius: 3px;
}

.machine-lights i:first-child {
    background: var(--coral);
}

.machine-knob {
    width: 24px;
    height: 24px;
    border: 5px solid #77aabe;
    background: #f7fbfd;
    border-radius: 50%;
}

.machine-door {
    position: absolute;
    top: 67px;
    left: 17px;
    right: 17px;
    height: 119px;
    border: 11px solid #bbd4de;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 4px var(--marine);
}

.machine-drum {
    width: 80%;
    height: 80%;
    background: #78afc0;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #a7d1db;
}

.drum-shine {
    display: block;
    width: 72%;
    height: 110%;
    margin-left: 31%;
    background: #aed8e3;
    border-radius: 52% 0 0 43%;
    transform: rotate(-29deg);
}

.tool-wrench {
    position: absolute;
    width: 119px;
    height: 16px;
    background: var(--coral);
    top: 165px;
    left: 58%;
    border-radius: 10px;
    transform: rotate(-42deg);
    box-shadow: 3px 5px 0 rgba(143, 75, 87, .13);
}

.tool-wrench::before {
    content: "";
    position: absolute;
    width: 35px;
    height: 35px;
    background: var(--coral);
    border: 8px solid #f7fbfd;
    border-radius: 50%;
    left: -22px;
    top: -9px;
    box-shadow: 0 0 0 7px var(--coral);
}

.tool-wrench::after {
    content: "";
    position: absolute;
    height: 29px;
    width: 29px;
    border: 10px solid var(--coral);
    border-top-color: transparent;
    border-radius: 50%;
    right: -18px;
    top: -16px;
}

.gearwheel {
    position: absolute;
    width: 56px;
    height: 56px;
    top: 38px;
    right: 13%;
    border: 13px solid #8db7c5;
    border-radius: 15px;
    transform: rotate(16deg);
}

.gearwheel i {
    position: absolute;
    width: 13px;
    height: 13px;
    background: #d3eaf0;
    border-radius: 50%;
    left: 9px;
    top: 9px;
}

.display-caption h2 {
    font-size: 28px;
    margin: 0 0 9px;
}

.display-caption p {
    color: var(--ink-soft);
    margin-bottom: 11px;
}

.display-caption a {
    font-size: 14px;
    font-weight: 750;
    border-bottom: 1px solid currentColor;
}

.local-area {
    padding: 42px 0 47px;
    background: var(--marine);
    color: #f0f8fd;
}

.local-area .section-tag,
.local-area h2 {
    color: #fff;
}

.local-area .section-headline {
    margin-bottom: 18px;
}

.local-area p {
    max-width: 1130px;
}

.local-area strong {
    color: #fff;
    font-weight: 800;
}

.technical-services {
    padding: 62px 0 56px;
}

.repair-ledger {
    border-top: 1px solid var(--rule);
}

.ledger-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 27px;
    border-bottom: 1px solid var(--rule);
    padding: 27px 0 28px;
}

.ledger-side {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.ledger-number {
    font-size: 33px;
    font-weight: 820;
    line-height: 1;
    color: #9bbbc9;
}

.ledger-mark {
    display: block;
    position: relative;
    height: 31px;
    width: 31px;
    border: 4px solid var(--marine);
    border-radius: 50%;
    opacity: .75;
}

.water-mark::after {
    content: "";
    position: absolute;
    inset: 5px;
    background: var(--coral);
    border-radius: 50%;
}

.heat-mark {
    border-radius: 8px 8px 50% 50%;
    transform: rotate(-38deg);
}

.heat-mark::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    background: var(--coral);
    top: 5px;
    left: 5px;
    border-radius: 50%;
}

.motion-mark {
    border-style: dashed;
}

.ledger-body h3 {
    margin-bottom: 14px;
}

.ledger-body p {
    max-width: 920px;
}

.symptom-notes {
    padding: 54px 0 57px;
    background: #f6fafc;
    border-top: 1px solid var(--rule);
}

.symptom-notes p {
    max-width: 1120px;
}

.visit-section {
    padding: 57px 0 65px;
    background: var(--pale-rose);
}

.visit-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #dfc8cf;
    border: 1px solid #dfc8cf;
}

.visit-steps li {
    background: #fffafc;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    min-width: 0;
}

.visit-steps strong {
    font-size: 16px;
    color: var(--coral);
}

.visit-steps span {
    font-size: 14px;
    line-height: 1.55;
}

.repair-conditions {
    background: #e5f1f7;
    padding: 59px 0 66px;
}

.conditions-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr);
    align-items: start;
    gap: 46px;
}

.hours-note {
    color: #f9fcff;
    background: var(--marine);
    padding: 28px;
    border-top: 7px solid var(--coral);
}

.hours-note h3 {
    color: #fff;
    margin-bottom: 18px;
}

.hours-note dl {
    margin: 0 0 24px;
}

.hours-note dl div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .26);
    padding: 10px 0;
}

.hours-note dt,
.hours-note dd {
    font-size: 14px;
    margin: 0;
}

.hours-note dd {
    font-weight: 800;
}

.footer {
    padding: 25px 0;
    background: #f2f8fb;
    border-top: 1px solid var(--rule);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 30px;
    font-size: 14px;
    font-weight: 650;
}

.footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 27px;
}

.footer a {
    font-weight: 750;
}

.home-opening {
    padding: 57px 0 59px;
    background: linear-gradient(135deg, var(--pale-rose), #fff9fb 65%);
    border-bottom: 6px solid #e7c9d0;
}

.home-opening-inner {
    max-width: 1050px;
}

.home-opening h1 {
    max-width: 990px;
}

.home-opening p {
    max-width: 1000px;
}

.machine-comparison {
    padding: 63px 0 65px;
}

.comparison-shell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.comparison-part {
    padding: 30px 32px;
    background: #fff;
    border: 1px solid var(--rule);
    border-top: 7px solid var(--coral);
}

.comparison-part + .comparison-part {
    border-top-color: var(--marine);
}

.appliance-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 21px;
}

.appliance-heading h3 {
    margin-bottom: 0;
    font-size: 25px;
}

.appliance-icon {
    position: relative;
    display: block;
    flex: 0 0 48px;
    width: 48px;
    height: 52px;
    border: 5px solid var(--marine);
    border-radius: 6px;
    background: #e7f4fa;
}

.washer-mini::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border: 5px solid var(--coral);
    border-radius: 50%;
    left: 7px;
    top: 14px;
}

.washer-mini::after {
    content: "";
    position: absolute;
    height: 4px;
    width: 26px;
    top: 5px;
    left: 7px;
    background: var(--marine);
}

.dishwasher-mini::before {
    content: "";
    position: absolute;
    width: 27px;
    height: 19px;
    left: 6px;
    top: 20px;
    border: 3px solid var(--coral);
    border-radius: 3px;
}

.dishwasher-mini::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 4px;
    top: 7px;
    left: 7px;
    border-top: 4px dotted var(--marine);
}

.failure-patterns {
    padding: 57px 0 66px;
    background: #e5f3f9;
}

.pattern-copy {
    border-top: 1px solid #bfd5e0;
}

.pattern-entry {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 22px;
    border-bottom: 1px solid #bfd5e0;
    padding: 24px 0;
}

.pattern-code {
    display: block;
    width: 44px;
    height: 44px;
    border: 2px solid var(--coral);
    border-radius: 50%;
    font-weight: 850;
    font-size: 18px;
    color: var(--coral);
    display: grid;
    place-items: center;
}

.pattern-entry h3 {
    font-size: 19px;
    margin-bottom: 8px;
}

.home-contact {
    padding: 65px 0 75px;
}

.home-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 50px;
    align-items: start;
}

.contact-plate {
    background: var(--marine);
    padding: 28px 32px 32px;
    color: #fff;
}

.contact-plate h3 {
    color: #fff;
    margin-bottom: 12px;
}

.contact-plate p {
    margin-bottom: 23px;
}

.plate-circle {
    width: 111px;
    height: 111px;
    border: 12px solid #b7d9e6;
    border-radius: 50%;
    position: relative;
    margin-bottom: 24px;
    display: grid;
    place-items: center;
}

.plate-circle::before,
.plate-circle::after {
    content: "";
    position: absolute;
    width: 133px;
    height: 16px;
    background: #85b4c5;
    z-index: 0;
    transform: rotate(45deg);
}

.plate-circle::after {
    transform: rotate(-45deg);
}

.plate-pump {
    position: relative;
    z-index: 1;
    display: block;
    height: 48px;
    width: 48px;
    border: 12px solid var(--coral);
    border-radius: 50%;
    background: #fff;
}

.service-opening {
    padding: 54px 0 57px;
    background: #ebf5fa;
}

.service-opening-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 50px;
    align-items: start;
}

.service-opening-copy {
    padding-top: 22px;
}

.service-opening-copy .button {
    margin-top: 14px;
}

.service-factbox {
    background: #fff;
    border: 1px solid var(--rule);
    padding: 26px 30px 30px;
    border-left: 8px solid var(--coral);
}

.factbox-emblem {
    height: 114px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 12px;
    position: relative;
    margin-bottom: 16px;
}

.emblem-gear {
    width: 84px;
    height: 84px;
    background: var(--marine);
    border: 15px dashed #84b7ca;
    border-radius: 50%;
    box-shadow: 0 0 0 7px #d5eaf2;
}

.emblem-core {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--coral);
    top: 42px;
    left: 39px;
}

.service-factbox h2 {
    margin-bottom: 10px;
}

.service-factbox p {
    margin-bottom: 18px;
}

.factbox-hours {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    border-top: 1px solid var(--rule);
    padding-top: 13px;
    font-size: 12px;
    font-weight: 750;
    color: var(--marine);
}

.service-scope {
    padding: 58px 0 62px;
}

.service-scope p {
    max-width: 1120px;
}

.service-operations {
    background: var(--pale-rose);
    padding: 57px 0 66px;
}

.operation-group {
    display: grid;
    grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr);
    gap: 32px;
    padding: 23px 0;
    border-top: 1px solid #decad0;
}

.operation-group:last-child {
    border-bottom: 1px solid #decad0;
}

.operation-label span {
    font-weight: 850;
    color: var(--coral);
    font-size: 13px;
}

.operation-label h3 {
    margin: 6px 0 0;
    font-size: 20px;
}

.service-terms {
    padding: 64px 0 75px;
}

.terms-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 47px;
    align-items: start;
}

.terms-side {
    background: var(--marine);
    border-top: 7px solid var(--coral);
    color: #f7fcff;
    padding: 30px;
}

.terms-side h3 {
    color: #fff;
}

.terms-side p {
    margin-bottom: 21px;
}

.terms-side .button {
    margin-bottom: 16px;
}

.service-secondary {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.service-secondary:hover {
    color: #cfeaf4;
}

@media (max-width: 1120px) {
    .masthead-inner {
        gap: 20px;
    }

    .main-nav {
        column-gap: 17px;
    }

    .opening-grid,
    .service-opening-layout {
        gap: 33px;
    }

    .opening-story {
        padding-top: 8px;
    }

    .repair-display {
        padding: 21px;
    }
}

@media (max-width: 900px) {
    .site-width {
        width: min(100% - 42px, 700px);
    }

    .masthead-inner {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        min-height: 0;
        padding: 16px 0;
    }

    .masthead .main-nav {
        order: 3;
        flex: 0 0 100%;
        justify-content: flex-start;
    }

    .opening {
        background: var(--surface);
    }

    .opening-grid,
    .conditions-inner,
    .home-contact-layout,
    .service-opening-layout,
    .terms-layout {
        grid-template-columns: 1fr;
        gap: 29px;
    }

    .opening-story,
    .service-opening-copy {
        padding-top: 0;
    }

    .machine-scene {
        max-width: none;
    }

    .comparison-shell {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .repair-display {
        box-shadow: 7px 7px 0 #d7ebf3;
    }

    .hours-note,
    .contact-plate,
    .service-factbox,
    .terms-side {
        max-width: none;
    }

    .factbox-emblem {
        height: 90px;
    }

    .emblem-core {
        top: 30px;
    }
}

@media (max-width: 620px) {
    .site-width {
        width: calc(100% - 34px);
    }

    .masthead-inner {
        gap: 13px 9px;
    }

    .brand {
        font-size: 19px;
        gap: 8px;
    }

    .brand-sign {
        height: 31px;
        width: 31px;
    }

    .masthead .button-small {
        padding: 9px 10px;
        font-size: 12px;
    }

    .masthead .main-nav {
        gap: 7px 15px;
    }

    .main-nav a {
        font-size: 12px;
        padding-block: 5px;
    }

    h1 {
        font-size: 40px;
        overflow-wrap: break-word;
    }

    h2 {
        font-size: 28px;
    }

    p {
        font-size: 16px;
    }

    .opening,
    .home-opening,
    .service-opening {
        padding: 39px 0 46px;
    }

    .local-area,
    .technical-services,
    .visit-section,
    .symptom-notes,
    .repair-conditions,
    .machine-comparison,
    .failure-patterns,
    .home-contact,
    .service-scope,
    .service-operations,
    .service-terms {
        padding: 40px 0 46px;
    }

    .hero-actions,
    .home-intro-actions {
        gap: 10px 22px;
    }

    .hero-actions .button,
    .home-intro-actions .button {
        width: 100%;
    }

    .repair-display,
    .comparison-part,
    .contact-plate,
    .service-factbox,
    .terms-side,
    .hours-note {
        padding: 22px;
    }

    .machine-scene {
        height: 250px;
    }

    .machine-body {
        left: 15%;
    }

    .gearwheel {
        right: 8%;
    }

    .tool-wrench {
        left: 50%;
    }

    .ledger-row {
        grid-template-columns: 49px minmax(0, 1fr);
        gap: 12px;
    }

    .ledger-number {
        font-size: 26px;
    }

    .ledger-mark {
        transform: scale(.7);
        transform-origin: left center;
    }

    .visit-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .visit-steps li {
        padding: 18px;
    }

    .pattern-entry {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 15px;
    }

    .pattern-code {
        width: 40px;
        height: 40px;
    }

    .operation-group {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 375px) {
    .site-width {
        width: calc(100% - 28px);
    }

    .brand {
        font-size: 17px;
    }

    .brand-sign {
        flex: 0 0 27px;
        width: 27px;
        height: 27px;
    }

    .masthead .button-small {
        font-size: 11px;
        padding: 9px 8px;
    }

    .visit-steps {
        grid-template-columns: 1fr;
    }

    .machine-body {
        left: 11%;
        transform: scale(.9);
        transform-origin: left top;
    }

    .tool-wrench {
        left: 51%;
        transform: rotate(-42deg) scale(.82);
    }
}