/* Cleaning & Assembly */

:root {
    --bodycolor1: #fff; /* background */    
    --bodycolor2: #eef6f6; /* accents */
    --bodycolor3: #cad4d6; /* second accents */
    --bodycolor4: #1c344f; /* footer (dark blue) */

    --textcolor1: #5d7072; /* main text color */

    --color1: #3ab9b5; /* primary color */
    --color2: #184b4e; /* secondary color */

    --success: #54c142; /* :-) */
    --error: #f00; /* %!$!%!^&#!!11 */

    --colorfilter1: invert(74%) sepia(18%) saturate(1390%) hue-rotate(135deg) brightness(84%) contrast(89%); /* like --color1 */
    --colorfilterwhite: brightness(0) saturate(100%) invert(100%) sepia(99%) saturate(0%) hue-rotate(66deg) brightness(104%) contrast(100%); /* standard: white */
    --colorfilterblack: brightness(0) saturate(100%) invert(0%) sepia(92%) saturate(18%) hue-rotate(92deg) brightness(107%) contrast(101%); /* standard: black */
}

body { /*font-family: "Inter", sans-serif;*/ font-size: 18px; color: var(--textcolor1); line-height: 1.8; }

main { padding-top: 150px; }

h1,h2,h3,h4 { color: var(--color2); font-weight: 700; line-height: 1; }
h1 { margin-bottom: 30px; font-size: 48px; font-size: 40px; line-height: 1.2; }
h2 { margin-bottom: 25px; font-size: 40px; line-height: 1.2; }
h3 { margin-bottom: 15px; font-size: 24px; line-height: 1.2; }

p { margin-bottom: 20px; }

a { color: var(--textcolor1); text-decoration: underline; }
a:hover { color: var(--textcolor1); text-decoration: none; }
a.btn { padding: 16px 25px 18px 25px; padding: 16px 20px 18px 20px; font-size: 16px; color: #fff; line-height: 1; text-decoration: none; border: 2px solid var(--color2); border-radius: 3px; transition: all ease 0.15s; background-color: var(--color2); }
a.btn:hover { border: 2px solid #0f383a!important; background-color: #0f383a!important; }
a.btn + a.btn { color: var(--color2); background-color: transparent; }
a.btn + a.btn:hover { color: #fff; }

.row ul { margin-bottom: 20px; list-style-type: disc; }
.row ul li { position: relative; margin-left: 20px; padding: 5px 0; line-height: 1.4; }

.row.checks ul { list-style-type: none; }
.row.checks ul li { margin: 0; padding-left: 35px; }
.row.checks ul li:before { position: absolute; display: block; top: 8px; left: 0; width: 20px; height: 20px; content: ""; filter: var(--colorfilter1); background-image: url("/images/icons/check.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; }

#header { box-shadow: 0 8px 8px rgba(0, 0, 0, 0.025); }
#header #header-container { max-width: 1200px; max-width: 1100px; }
#header #logo a { background-image: url("/images/logo-kusters-goumans-cleaning-assembly.png"); }

#header .payoff { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#header .payoff a {	font-size: 16px; color: #666; text-decoration: none; }

#langmenu { }
#langmenu:hover { }
#langmenu a.active { border-bottom:1px solid rgba(222,222,222,0.8); }
#langmenu a { color: var(--color2)!important; text-decoration: none; }
#langmenu a:hover,
#langmenu a.active { color: var(--color1)!important; }

.row { position: relative; padding: 90px 0; }
.row:nth-of-type(even) { background-color: var(--bodycolor2); }
.row .content { margin: 0 auto; width: 90%; max-width: 1200px; max-width: 1100px; box-sizing: border-box; }
.row .content .block-content { display: flex; gap: 90px; align-items: flex-start; }

.row.dark { color: #fff; background-color: var(--color2); }
.row.dark .eyebrow,
.row.dark h2,
.row.dark h3 { color: #fff; }
.row.dark a { color: #fff; }

.row.dark a.btn { color: var(--color2); border: 2px solid #fff; background-color: #fff; }
.row.dark a.btn:hover { color: #fff; border: 2px solid var(--color1)!important; background-color: var(--color1)!important; }
.row.dark a.btn + a.btn { color: #fff; background-color: transparent; }
.row.dark a.btn + a.btn:hover { color: #fff; }

.row .text { flex: 1; width: 100%; }
.row .text > :last-child,
.row aside > :last-child,
.row .card > :last-child { margin-bottom: 0; }
.row .text p:has(.btn) { display: flex; gap: 15px; margin-top: 40px; margin-bottom: 40px; }

.row aside { flex: 1; width: 50%; }
.row aside.note { padding: 45px; font-size: 16px; line-height: 1.6; border-top: 5px solid var(--color1); box-sizing: border-box; background-color: var(--bodycolor2); }

.row .media { flex: 1; width: 50%; }
.row .media figure.image { position: relative; margin: 0; padding: 0; }
.row .media figure.image a { display: block; width: 100%; aspect-ratio: 1 / 1; pointer-events: none; background-color: var(--bodycolor2); }
.row .media figure.image a img { display: block; width: 100%; height: 100%; object-fit: cover; }
.row:nth-of-type(even) .media figure.image img { background-color: #fff; }
.row .media figure.image figcaption { margin-top: 20px; font-size: 12px; line-height: 1.6; }

.eyebrow { position: relative; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color2); text-transform: uppercase; letter-spacing: 2px; }
.eyebrow:before { display: block; top: 0; left: 0; width: 35px; height: 3px; content: ""; background-color: var(--color1); }

/* .row.hero */
.row.hero ul.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 45px; }
.row.hero ul.tags li { margin: 0; padding: 5px 10px; font-size: 14px; color: var(--color2); white-space: nowrap; border-left: 3px solid var(--color1); list-style: none; background-color: var(--bodycolor2); }

.row.hero .media figure.image figcaption { position: absolute; bottom: -20px; right: 0; padding: 20px 25px; max-width: 90%; font-size: 14px; color: #fff; line-height: 1.5; border-left: 5px solid var(--color1); box-sizing: border-box; background-color: var(--color2); }

/* proof */
.row.row-proof { padding: 0; color: #fff; border-top: 10px solid var(--color1); background-color: var(--color2); }
.row.row-proof .content .block-content { gap: 0; }
.row.row-proof .item { padding: 45px 25px; width: 25%; box-sizing: border-box; }
.row.row-proof .item:not(:last-of-type) { border-right: 1px solid rgba(255, 255, 255, 0.2); }
.row.row-proof .item span.value { display: block; margin-bottom: 15px; font-size: 36px; color: var(--color1); font-weight: 700; line-height: 1; }
.row.row-proof .item span.label { display: block; font-size: 13px; line-height: 1.6; }

/* note */
.row.row-text-note .content .block-content { align-items: center; }

/* cards */
.row.row-text-cards .text h2 { max-width: 70%; }
.row.row-text-cards .text h2 + p { max-width: 70%; }
.row.row-text-cards .text .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 45px; }
.row.row-text-cards .text .cards .card { background-color: rgb(0 0 0 / 15%); }
.row.row-text-cards .text .cards .card:not(:has(img)) { padding: 30px; padding-bottom: 35px; border-top: 5px solid var(--color1); border-bottom: 1px solid #cfe0e0; background-color: #fff; }
.row.row-text-cards .text .cards .card span.number { display: block; margin-bottom: 15px; font-size: 16px; color: var(--color1); }
.row.row-text-cards .text .cards .card h3 { margin-bottom: 10px; }
.row.row-text-cards .text .cards .card p { font-size: 16px; line-height: 1.6; }

.row.row-text-cards .text .cards .card a { display: block; width: 100%; aspect-ratio: 16 / 9; background-color: var(--bodycolor2); }
.row.row-text-cards .text .cards .card a img { display: block; width: 100%; height: 100%; object-fit: cover; }
.row.row-text-cards .text .cards .card .text { padding: 25px 25px 30px 25px; box-sizing: border-box; }
.row.row-text-cards .text .cards .card .text h3 { font-size: 21px; }
.row.row-text-cards .text .cards .card .text p { font-size: 14px; line-height: 1.8; }

/* process */
.row.row-text-process .text h2,
.row.row-text-process .text p { max-width: 70%; }

.row.row-text-process .text ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: steps; margin-top: 60px; }
.row.row-text-process .text ol li { position: relative; display: flex; flex-direction: column; counter-increment: steps; padding: 45px 0 0 30px; font-size: 16px; line-height: 1.6; border-top: 2px solid #cfe0e0; }
.row.row-text-process .text ol li:before { position: absolute; display: flex; align-items: center; justify-content: center; top: -24px; left: 26px; width: 40px; height: 40px; content: counter(steps, decimal-leading-zero); font-size: 14px; color: #fff; text-align: center; border: 4px solid #fff; background-color: var(--color1); }
.row.row-text-process .text ol li strong { display: block; margin-bottom: 5px; font-size: 18px; }

/* points */
.row.row-text-points .points { display: flex; flex-wrap: wrap; flex: 1; width: 50%; }
.row.row-text-points .points .point { padding: 30px 25px; width: 50%; box-sizing: border-box; }
.row.row-text-points .points .point:nth-of-type(1) { border-right: 1px solid rgba(255,255,255,0.25); border-bottom: 1px solid rgba(255,255,255,0.25); }
.row.row-text-points .points .point:nth-of-type(2) { border-bottom: 1px solid rgba(255,255,255,0.25); }
.row.row-text-points .points .point:nth-of-type(3) { border-right: 1px solid rgba(255,255,255,0.25); }
.row.row-text-points .points .point strong { display: block; margin-bottom: 5px; color: var(--color1); }
.row.row-text-points .points .point span { display: block; font-size: 14px; line-height: 1.6; }

/* faq */
.row.row-text-faq { background-color: #fff; }
.row.row-text-faq .text h2,
.row.row-text-faq .text p { max-width: 70%; }
.row.row-text-faq .text .faq { margin-top: 45px; border-top: 1px solid #cfe0e0; }
.row.row-text-faq .text .faq details { border-bottom: 1px solid #cfe0e0; cursor: pointer; }
.row.row-text-faq .text .faq details summary { position: relative; padding: 25px 50px 25px 0; font-weight: 700; line-height: 1; }
.row.row-text-faq .text .faq details summary:hover { opacity: 0.6; }
.row.row-text-faq .text .faq details summary::marker { content: none; }
.row.row-text-faq .text .faq details summary:after { position: absolute; display: flex; align-items: center; justify-content: center; top: 18px; right: 0; content: "＋"; color: var(--color2); text-align: center; width: 32px; height: 32px; border-radius: 3px; background-color: var(--bodycolor2); }
.row.row-text-faq .text .faq details .answer { padding-right: 50px; font-size: 16px; line-height: 1.6; }

.row.row-text-faq .text .faq details[open] { padding: 0 0 25px 0; cursor: auto; }
.row.row-text-faq .text .faq details[open] summary { padding: 25px 0 15px 0; cursor: pointer; }
.row.row-text-faq .text .faq details[open] summary:after { content: "-"; }

/* title */
.row.row-title-text .title { flex: 1; width: 50%; }

#footer,
#copyright { background-color: #2f9390; }
#footer-container,
#copyright span { /*font-family: "Inter", sans-serif!important;*/ }
#footer #footer-container a { text-decoration: none; }

#social-media-buttons { gap: 10px; }
#social-media-buttons a { margin: 0!important; background-color: rgba(0,0,0,0.15); }
#social-media-buttons a:hover { background-color: rgba(0,0,0,0.25); }


@media screen and (max-width: 900px) {

    body { font-size: 16px; line-height: 1.6; }
    main { padding-top: 100px; }
    
    #header .payoff { width: 150px; font-size: 12.8px; line-height: 1.4; display: block; right: 0; top: auto; bottom: 15px; text-align: right; transform: none; }
    #header .payoff a { font-size: 12.8px; }
    #header .payoff span { display: none; }
    
    #header #langmenu { opacity: 1; top: 5px; left: auto; right: 5%; transform: none; }
    #header #langmenu a { margin-right: 0; border-bottom: 1px solid rgba(222,222,222,0); }
    #header #langmenu a:hover,
    #header #langmenu a.active { border-bottom: 1px solid rgba(222,222,222,0.8) }

    h1 { margin-bottom: 25px; font-size: 28px; }
    h2 { margin-bottom: 20px; font-size: 24px; }
    h3 { font-size: 21px; }
    
    a.btn { padding: 16px 20px 18px 20px; }
    .row .text p:has(.btn) { flex-direction: column; gap: 15px; margin-top: 30px; margin-bottom: 30px; }
    
    .row ul li { font-size: 15px; }
    
    .eyebrow { font-size: 12px; letter-spacing: 1px; }
    .eyebrow:before { width: 30px; height: 2px; }
    
    .row { padding: 45px 0; }
    .row .content { width: 85%; }
    .row .content .block-content { flex-direction: column; gap: 30px; }
    .row .media { width: 100%; }
    .row .media figure.image a { aspect-ratio: 4 / 3; }
    
    .row.hero { padding: 45px 0 60px 0; }
    .row.hero .media figure.image figcaption { padding: 15px 20px; font-size: 12px; }
    
    .row.row-proof { padding: 45px 0; width: 100%; }
    .row.row-proof .content .block-content { gap: 30px; }
    .row.row-proof .item { padding: 0 0 0 20px; width: 100%; border: none!important; }
    .row.row-proof .item span.value { font-size: 28px; }
    
    .row aside { width: 100%; }
    .row aside.note { padding: 30px; font-size: 14px; }
    
    .row.row-text-cards .text h2,
    .row.row-text-cards .text h2 + p { max-width: none; }
    .row.row-text-cards .text .cards { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
    .row.row-text-cards .text .cards .card { background-color: transparent; }
    .row.row-text-cards .text .cards .card:has(img) { margin-bottom: 20px; }
    .row.row-text-cards .text .cards .card p { font-size: 14px; }
    .row.row-text-cards .text .cards .card span.number { margin-bottom: 10px; }
    .row.row-text-cards .text .cards .card .text { padding: 25px 0 0 0; }
    .row.row-text-cards .text .cards .card .text p { line-height: 1.6; }
    
    .row.checks ul li { padding-left: 30px; }
    .row.checks ul li:before { width: 18px; height: 18px; }
    
    .row.row-text-process .text h2,
    .row.row-text-process .text p { max-width: none; }
    .row.row-text-process .text ol { display: flex; flex-direction: column; gap: 45px; }
    .row.row-text-process .text ol li { padding: 40px 0 0 20px; font-size: 14px; }
    .row.row-text-process .text ol li:before { left: 16px; }
    
    .row.row-text-points .points { flex-direction: column; margin-top: -15px; width: 100%; }
    .row.row-text-points .points .point { padding: 20px 0; width: 100%; }
    .row.row-text-points .points .point:not(:last-of-type) { border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
    .row.row-text-points .points .point:first-of-type { padding-top: 0; }
    .row.row-text-points .points .point:last-of-type { padding-bottom: 0; }
    
    .row.row-text-faq .text h2,
    .row.row-text-faq .text p { max-width: none; }
    .row.row-text-faq .text .faq { margin-top: 30px; }
    .row.row-text-faq .text .faq details summary { padding: 20px 40px 20px 0; line-height: 1.2; }
    .row.row-text-faq .text .faq details[open] summary { padding: 20px 0 10px 0; }
    .row.row-text-faq .text .faq details .answer { padding-right: 0; font-size: 14px; }
    
    .row.row-title-text .title { width: 100%; }
    .row.row-title-text .title h2 { margin-bottom: 0; }

}