@charset "UTF-8";
:root {
    --rose:#b13d66;
    --rose-rich:#922d58;
    --glacier:#d9eef7;
    --glacier-deep:#8dc2da;
    --mint:#e7f5f9;
    --light:#f6fbff;
    --white:#fff;
    --ink:#324c68;
    --muted:#53687b;
    --border:#bbd8e6;
    --lines:#d3e2ec;
    --dark-rose:#85264e
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Arial,"Helvetica Neue",sans-serif;
    background:var(--light);
    color:var(--ink);
    font-size:16px;
    line-height:1.58;
    overflow-wrap:break-word
}

p {
    font-size:16px;
    margin:0 0 15px;
    line-height:1.62
}

a {
    color:inherit;
    text-decoration:none
}

a:focus-visible {
    outline:3px solid var(--rose);
    outline-offset:3px
}

a:hover {
    transition:color .15s,background-color .15s,border-color .15s,transform .15s
}

h1,h2,h3 {
    line-height:1.15;
    letter-spacing:-.035em;
    margin:0;
    color:var(--ink)
}

h1 {
    font-size:40px;
    font-weight:800;
    margin-bottom:23px
}

h2 {
    font-size:28px;
    font-weight:800;
    margin-bottom:17px
}

h3 {
    font-size:20px;
    font-weight:800;
    margin-bottom:8px
}

.wrap {
    width:min(1200px,calc(100% - 56px));
    margin:0 auto
}

.topbar {
    background:#fff;
    border-bottom:1px solid var(--border)
}

.topbar-line {
    background:#e1f2fa;
    border-bottom:1px solid var(--border);
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
    color:#4f7290
}

.topline-inner {
    display:flex;
    justify-content:space-between;
    padding:8px 0
}

.masthead {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:17px 0
}

.logo {
    display:flex;
    align-items:center;
    gap:11px;
    flex:none
}

.logo-mark {
    width:41px;
    height:42px;
    position:relative;
    border:3px solid var(--rose);
    border-radius:8px;
    display:block;
    background:var(--glacier)
}

.logo-mark i {
    display:block;
    position:absolute;
    left:8px;
    top:11px;
    width:20px;
    height:20px;
    border-radius:50%;
    border:4px solid var(--rose);
    background:#fff
}

.logo-mark b {
    position:absolute;
    right:6px;
    top:4px;
    width:6px;
    height:4px;
    background:var(--rose);
    border-radius:2px
}

.logo-words {
    display:flex;
    flex-direction:column;
    line-height:1.2
}

.logo-words strong {
    font-size:21px;
    color:var(--rose-rich);
    font-weight:800;
    letter-spacing:-.04em
}

.logo-words small {
    font-size:8px;
    color:#62809b;
    letter-spacing:.1em;
    margin-top:3px;
    font-weight:bold
}

.nav {
    display:flex;
    align-items:center;
    gap:25px;
    flex-wrap:wrap;
    justify-content:center
}

.nav a {
    font-size:13px;
    font-weight:700;
    color:#516d84;
    border-bottom:2px solid transparent;
    padding:8px 0
}

.nav a[aria-current] {
    color:var(--rose-rich);
    border-color:var(--rose)
}

.nav a:hover {
    color:var(--rose)
}

.tel-button,.online-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:46px;
    padding:11px 20px;
    border-radius:3px;
    font-size:15px;
    font-weight:800;
    line-height:1.2
}

.tel-button {
    background:var(--rose);
    color:#fff
}

.tel-button:hover {
    background:var(--rose-rich);
    color:#fff
}

.online-button {
    background:#e1f2f9;
    color:#2b5e86;
    border:1px solid #a4cde0
}

.online-button:hover {
    background:#d0eafa
}

.tel-compact {
    min-height:42px;
    padding:10px 14px;
    flex:none;
    font-size:14px
}

.actions {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:22px
}

.intro-places {
    color:var(--rose-rich);
    margin-top:16px;
    margin-bottom:12px
}

.intro-places strong {
    font-weight:800
}

.section-number {
    display:block;
    color:var(--rose-rich);
    font-size:11px;
    font-weight:800;
    letter-spacing:.13em;
    margin-bottom:12px
}

.opening {
    background:linear-gradient(90deg,#fff 0 65%,#e8f6fc 65% 100%)
}

.opening-frame {
    display:grid;
    grid-template-columns:minmax(0,1.17fr) minmax(0,.83fr);
    border-left:1px solid #d5e6ec;
    border-right:1px solid #d5e6ec
}

.opening-lead {
    padding:31px 43px 38px 29px;
    background:#fff
}

.edition,.display-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    color:#7c4a70;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em
}

.edition {
    padding-bottom:25px
}

.opening-lead h1 {
    max-width:650px
}

.technical-display {
    border-left:1px solid var(--border);
    background:#e0f1fa;
    display:flex;
    flex-direction:column;
    min-width:0
}

.display-top {
    padding:19px 22px;
    border-bottom:1px solid #b9d5e5;
    color:#5e7f9b
}

.washer-zone {
    position:relative;
    flex:1;
    min-height:450px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
    overflow:hidden;
    background:repeating-linear-gradient(0deg,transparent 0 29px,rgba(84,135,160,.10) 29px 30px),repeating-linear-gradient(90deg,transparent 0 29px,rgba(84,135,160,.08) 29px 30px)
}

.washer-zone:before {
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    border:2px dashed #9dc1d6;
    border-radius:50%;
    z-index:-1
}

.washer-body {
    width:278px;
    height:342px;
    border:7px solid #648eac;
    border-radius:10px;
    background:#f9fcff;
    box-shadow:14px 15px 0 rgba(57,114,151,.15);
    position:relative;
    padding:12px;
    z-index:2
}

.washer-panel {
    height:57px;
    border-bottom:2px solid #abcadd;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    padding:0 2px
}

.machine-name {
    color:#758da4;
    font-size:9px;
    font-weight:bold
}

.washer-knob {
    height:32px;
    width:32px;
    border:6px solid #afc6d7;
    border-radius:50%;
    background:white;
    box-shadow:inset 0 0 0 2px #6a9bb5
}

.machine-digits {
    background:#b6dfed;
    color:#416986;
    font-size:13px;
    font-weight:800;
    padding:3px 7px;
    border-radius:3px
}

.led {
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--rose)
}

.washer-ring {
    position:absolute;
    top:92px;
    left:50%;
    transform:translateX(-50%);
    width:218px;
    height:218px;
    border-radius:50%;
    border:14px solid #aacadd;
    background:#f0faff;
    box-shadow:inset 0 0 0 7px #4a86a4,0 0 0 3px #e2eff7;
    display:grid;
    place-items:center
}

.washer-drum {
    position:relative;
    width:151px;
    height:151px;
    border-radius:50%;
    background:radial-gradient(circle at 65% 25%,#eafaff,#a8cadd 67%,#79a8c6 100%);
    border:4px solid #7299b6;
    overflow:hidden
}

.washer-drum:before {
    content:"";
    position:absolute;
    width:180px;
    height:80px;
    left:-23px;
    top:80px;
    background:#7cafd0;
    border-radius:50%;
    transform:rotate(-22deg)
}

.bubble {
    position:absolute;
    border:2px solid #f4fcff;
    border-radius:50%;
    width:18px;
    height:18px
}

.b1 {
    left:39px;
    top:35px
}

.b2 {
    left:93px;
    top:60px;
    width:12px;
    height:12px
}

.b3 {
    left:74px;
    top:21px;
    width:8px;
    height:8px
}

.drum-fin {
    position:absolute;
    border:2px solid rgba(242,252,255,.8);
    border-radius:40%;
    width:54px;
    height:15px;
    transform:rotate(30deg)
}

.fin1 {
    left:10px;
    top:70px
}

.fin2 {
    left:81px;
    top:112px
}

.fin3 {
    left:92px;
    top:16px
}

.washer-bottom {
    position:absolute;
    width:235px;
    left:14px;
    bottom:5px;
    height:8px;
    background:#e2edf7;
    border-radius:5px
}

.graphic-callout {
    position:absolute;
    font-size:9px;
    font-weight:bold;
    letter-spacing:.08em;
    color:var(--rose-rich);
    background:#fff;
    padding:6px 8px;
    border-left:3px solid var(--rose);
    z-index:3
}

.c-one {
    top:13%;
    left:2%
}

.c-two {
    bottom:23%;
    right:2%
}

.c-three {
    bottom:6%;
    left:6%
}

.index-line {
    position:absolute;
    background:var(--rose);
    height:1px;
    width:35px;
    z-index:0
}

.line-one {
    top:20%;
    left:8%
}

.line-two {
    bottom:27%;
    right:12%
}

.display-info {
    background:#cbe4f1;
    display:grid;
    grid-template-columns:1fr;
    border-top:1px solid #aacddd
}

.display-info>div {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 20px;
    border-bottom:1px solid #a7cee1
}

.display-info b {
    font-size:12px;
    color:var(--rose-rich)
}

.display-info span {
    font-size:12px;
    font-weight:700;
    color:#4d738a
}

.machine-strip {
    background:var(--rose);
    color:white
}

.strip-items {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:14px 4px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.1em
}

.work-area {
    background:#f4fafd;
    padding:49px 0 55px
}

.work-layout {
    display:grid;
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    gap:65px
}

.work-heading {
    padding-top:8px
}

.work-heading p {
    color:var(--muted)
}

.text-link {
    display:inline-block;
    font-size:13px;
    font-weight:800;
    color:var(--rose-rich);
    border-bottom:2px solid var(--rose);
    margin-top:7px;
    padding-bottom:4px
}

.repair-register {
    border-top:3px solid var(--rose)
}

.register-item {
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:15px;
    padding:17px 0;
    border-bottom:1px solid var(--border)
}

.register-no {
    font-size:13px;
    font-weight:800;
    color:var(--rose);
    padding-top:3px
}

.register-item p {
    margin:0;
    color:#536b81
}

.closing-block {
    background:#e4f1f8;
    padding:39px 0
}

.closing-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.6fr);
    gap:60px;
    align-items:center
}

.closing-layout p {
    max-width:700px
}

.closing-control {
    border-top:5px solid var(--rose);
    background:#fff;
    padding:24px 25px
}

.control-label {
    display:block;
    color:var(--rose);
    letter-spacing:.12em;
    font-size:10px;
    font-weight:800
}

.closing-control strong {
    display:block;
    margin-top:8px;
    font-size:22px;
    color:#416681
}

.closing-control .actions {
    margin-top:20px
}

.area-extra {
    background:#f8fcff;
    border-top:1px solid var(--border);
    padding:20px 0
}

.area-extra p {
    font-size:14px;
    line-height:1.58;
    margin:0;
    color:#597084
}

.site-foot {
    background:#d7eaf4;
    border-top:2px solid #b5d4e3
}

.foot-grid {
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:flex-start;
    padding:24px 0
}

.foot-name {
    max-width:500px
}

.foot-name strong {
    color:var(--rose-rich);
    font-size:14px
}

.foot-name p {
    font-size:13px;
    margin:7px 0 0;
    color:#536d83
}

.foot-nav {
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    padding-top:5px
}

.foot-nav a {
    font-size:13px;
    color:#4d6982;
    font-weight:700
}

.foot-nav a:hover {
    color:var(--rose-rich)
}

.foot-nav .legal {
    opacity:.72;
    font-size:12px
}

/* home: independent notebook composition */ .service-note {
    background:#e4f1f8
}

.note-topline {
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
    color:#6a8294;
    padding:18px 0 12px
}

.note-grid {
    display:grid;
    grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);
    background:white;
    border:1px solid var(--border)
}

.note-rail {
    background:#d9ecf7;
    padding:27px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-width:0
}

.note-serial {
    color:#55788f;
    font-size:12px;
    font-weight:700;
    display:flex;
    justify-content:space-between;
    gap:8px
}

.note-serial strong {
    color:var(--rose);
    font-size:23px
}

.fault-trace {
    height:290px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center
}

.trace-circle {
    width:190px;
    height:190px;
    border:18px solid #8ab9d3;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f4fafe;
    box-shadow:0 0 0 12px rgba(138,185,211,.3),0 0 0 1px var(--rose)
}

.trace-circle span {
    display:block;
    width:115px;
    height:115px;
    border-radius:50%;
    border:14px dashed var(--rose);
    transform:rotate(25deg);
    background:#e2f5ff
}

.fault-trace i {
    position:absolute;
    height:2px;
    background:var(--rose)
}

.trace-a {
    width:77px;
    top:54px;
    right:0
}

.trace-b {
    width:71px;
    bottom:67px;
    left:0
}

.trace-c {
    width:28px;
    bottom:46px;
    right:26px
}

.note-types {
    border-top:1px solid #a6cddd;
    display:grid;
    gap:0
}

.note-types span {
    display:block;
    color:#57788d;
    font-size:11px;
    font-weight:bold;
    padding:9px 0;
    border-bottom:1px solid #a6cddd
}

.note-content {
    padding:36px 43px 43px
}

.troubleshooting {
    padding:52px 0;
    background:#f6fbff
}

.trouble-head {
    border-left:5px solid var(--rose);
    padding-left:19px;
    margin-bottom:25px
}

.trouble-list {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px
}

.trouble-list article {
    border-top:3px solid #90bfd6;
    background:#e9f5fb;
    padding:20px 19px 8px
}

.trouble-index {
    font-size:25px;
    color:var(--rose);
    font-weight:800;
    display:block;
    margin-bottom:12px
}

.trouble-list p {
    font-size:16px
}

.home-visit {
    background:#e1f0f8;
    padding:42px 0
}

.home-visit-grid {
    display:grid;
    grid-template-columns:1fr .62fr;
    gap:50px;
    align-items:center
}

.visit-action {
    border:1px solid #b2d1e2;
    background:white;
    padding:25px
}

.visit-action>strong {
    display:block;
    color:var(--rose);
    font-weight:800;
    font-size:35px;
    line-height:1.1
}

.visit-action>span {
    color:#61758a;
    font-size:14px;
    font-weight:700
}

.visit-action p {
    margin-top:10px;
    color:#526c85
}

.visit-action .actions {
    margin-top:13px
}

/* offer: vertical parts catalogue rather than hero grid */ .catalog-lead {
    padding:43px 0 36px;
    background:#e1f2fa
}

.catalog-heading {
    border-left:6px solid var(--rose);
    padding-left:26px
}

.catalog-heading h1 {
    margin-bottom:22px
}

.catalog-intro {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:25px
}

.catalog-intro p {
    margin:0
}

.catalog-body {
    background:#fff
}

.catalog-row {
    display:grid;
    grid-template-columns:150px minmax(0,1fr) 85px;
    gap:26px;
    align-items:center;
    border-bottom:1px solid var(--border);
    padding:23px 0
}

.catalog-row h2 {
    margin-bottom:10px
}

.catalog-row p {
    margin:0
}

.cat-number {
    font-weight:800;
    font-size:12px;
    letter-spacing:.1em;
    color:var(--rose)
}

.cat-icon {
    font-size:55px;
    color:#8ebdd4;
    text-align:center;
    font-weight:500;
    line-height:1
}

.catalog-terms {
    background:#e2f0f8;
    padding:45px 0
}

.terms-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.67fr);
    gap:60px;
    align-items:center
}

.terms-side {
    background:#fff;
    padding:27px;
    border-top:5px solid var(--rose)
}

.terms-title {
    font-size:11px;
    font-weight:800;
    color:var(--rose);
    letter-spacing:.1em
}

.terms-side strong {
    font-size:21px;
    color:#45647b;
    display:block;
    margin:9px 0
}

.terms-side p {
    font-size:15px;
    margin:0
}

.terms-side .actions {
    margin-top:18px
}

@media(max-width:1120px) {
    .wrap {
        width:min(1100px,calc(100% - 42px))
    }

    .nav {
        gap:12px
    }

    .nav a {
        font-size:12px
    }

    .logo-words strong {
        font-size:19px
    }

    .opening-lead {
        padding:25px 25px 30px
    }

    .opening-frame {
        grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)
    }

    .washer-zone {
        min-height:360px
    }

    .washer-body {
        transform:scale(.82)
    }

    .washer-zone:before {
        width:280px;
        height:280px
    }

    .graphic-callout {
        font-size:8px
    }

    .work-layout {
        gap:34px
    }

    .closing-layout {
        gap:28px
    }

    .note-content {
        padding:28px
    }

    .catalog-intro {
        gap:15px
    }

}

@media(max-width:860px) {
    .masthead {
        flex-wrap:wrap;
        justify-content:space-between
    }

    .nav {
        order:3;
        width:100%;
        justify-content:flex-start;
        border-top:1px solid var(--border);
        padding-top:9px
    }

    .opening {
        background:white
    }

    .opening-frame {
        grid-template-columns:1fr
    }

    .opening-lead {
        padding:28px 20px
    }

    .technical-display {
        border-left:0;
        border-top:1px solid var(--border);
        display:grid;
        grid-template-columns:1fr .48fr;
        min-height:320px
    }

    .display-top {
        grid-column:1/-1
    }

    .washer-zone {
        min-height:310px
    }

    .display-info {
        align-self:stretch;
        align-content:center;
        border-top:0;
        border-left:1px solid var(--border)
    }

    .display-info>div {
        padding:20px 12px
    }

    .machine-strip .strip-items {
        justify-content:flex-start;
        flex-wrap:wrap
    }

    .work-layout {
        grid-template-columns:1fr;
        gap:18px
    }

    .work-heading p {
        max-width:720px
    }

    .closing-layout {
        grid-template-columns:1fr;
        gap:12px
    }

    .closing-control {
        max-width:550px
    }

    .note-grid {
        grid-template-columns:1fr
    }

    .note-rail {
        display:none
    }

    .trouble-list {
        grid-template-columns:1fr;
        gap:10px
    }

    .trouble-list article {
        display:grid;
        grid-template-columns:45px 1fr;
        column-gap:13px;
        padding:14px
    }

    .trouble-list article h3 {
        grid-column:2
    }

    .trouble-list article p {
        grid-column:2
    }

    .trouble-index {
        grid-row:1/3;
        margin:0
    }

    .home-visit-grid {
        grid-template-columns:1fr;
        gap:15px
    }

    .visit-action {
        max-width:550px
    }

    .catalog-intro {
        grid-template-columns:1fr
    }

    .catalog-row {
        grid-template-columns:110px minmax(0,1fr) 50px;
        gap:14px
    }

    .catalog-terms .terms-grid {
        grid-template-columns:1fr;
        gap:18px
    }

    .terms-side {
        max-width:600px
    }

}

@media(max-width:580px) {
    .wrap {
        width:calc(100% - 28px)
    }

    .topline-inner {
        gap:8px;
        font-size:9px;
        letter-spacing:.03em
    }

    .masthead {
        gap:10px;
        padding:11px 0
    }

    .logo-mark {
        width:36px;
        height:37px
    }

    .logo-mark i {
        left:6px;
        top:10px
    }

    .logo-words strong {
        font-size:17px
    }

    .logo-words small {
        font-size:7px
    }

    .tel-compact {
        font-size:12px;
        padding:9px 8px
    }

    .nav {
        gap:12px 16px
    }

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

    .opening-lead {
        padding:22px 9px 26px
    }

    .edition {
        font-size:9px;
        letter-spacing:.02em;
        padding-bottom:16px
    }

    .opening-lead h1 {
        margin-bottom:18px
    }

    .technical-display {
        display:block
    }

    .washer-zone {
        min-height:300px
    }

    .washer-body {
        transform:scale(.75)
    }

    .display-info {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        border-left:0;
        border-top:1px solid var(--border)
    }

    .display-info>div {
        padding:8px;
        display:flex;
        flex-direction:column;
        gap:3px;
        text-align:center;
        border-right:1px solid var(--border)
    }

    .display-info span {
        font-size:10px
    }

    .graphic-callout {
        display:none
    }

    .strip-items {
        font-size:10px;
        gap:11px 17px
    }

    .work-area {
        padding:32px 0
    }

    .register-item {
        gap:6px;
        grid-template-columns:28px 1fr
    }

    .register-item p {
        font-size:16px
    }

    .closing-block {
        padding:30px 0
    }

    .closing-control {
        padding:19px
    }

    .actions {
        gap:9px
    }

    .tel-button,.online-button {
        font-size:14px;
        padding:11px 12px;
        min-height:44px
    }

    .area-extra {
        padding:14px 0
    }

    .foot-grid {
        display:block;
        padding:23px 0
    }

    .foot-nav {
        margin-top:20px;
        gap:11px 17px
    }

    .note-topline {
        font-size:9px
    }

    .note-content {
        padding:25px 12px 28px
    }

    .troubleshooting {
        padding:33px 0
    }

    .trouble-list article {
        display:block;
        padding:16px
    }

    .trouble-index {
        margin-bottom:7px
    }

    .home-visit {
        padding:28px 0
    }

    .visit-action {
        padding:17px
    }

    .catalog-lead {
        padding:28px 0
    }

    .catalog-heading {
        padding-left:13px
    }

    .catalog-row {
        grid-template-columns:1fr 45px;
        gap:9px;
        padding:20px 0
    }

    .cat-number {
        grid-column:1/-1
    }

    .catalog-row h2 {
        margin-bottom:9px
    }

    .cat-icon {
        font-size:37px
    }

    .catalog-terms {
        padding:27px 0
    }

    .terms-side {
        padding:17px
    }

}