/* /garantie/ (page-garantie.php). Kleuren uit de huisstijl, zoals managed-hosting.css:
   #383158 paars, #FF785C koraal, #FFA82F oranje, #5a5478 tekst, #f9f9f9/#e6e8ee vlakken.
   Alleen classes, nooit op heading-tagnaam: de heading-normalisatie herschrijft h3 -> h2. */

.gar-hero { padding: 6rem 0 0; }
.gar-hero__inner { max-width: 82rem; }
.gar-hero__title { color: #383158; font-size: 5.6rem; line-height: 1.1; margin-bottom: 2rem; }
.gar-hero__text { color: #5a5478; font-size: 2rem; line-height: 1.5; max-width: 60ch; }
.gar-eyebrow {
    color: #FF785C; font-size: 1.4rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.2rem;
}

.gar-section { margin: 8rem 0; }
.gar-heading { color: #383158; font-size: 3.2rem; line-height: 1.2; margin-bottom: 1.6rem; }
.gar-lead { color: #383158; font-size: 2rem; line-height: 1.5; max-width: 60ch; margin-bottom: 3.2rem; }
.gar-section p { max-width: 68ch; }
.gar-section a:not(.c-btn) { color: #383158; text-decoration: underline; }
.gar-section a:not(.c-btn):hover { color: #FF785C; }

/* Twee beloftes naast elkaar */
.gar-promises { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.gar-promise {
    background: #f9f9f9; border: 1px solid #e6e8ee; border-radius: 1.6rem;
    padding: 3.6rem; display: flex; flex-direction: column; gap: 1.6rem;
}
.gar-promise--accent { background: #383158; border-color: #383158; color: #e6e4f0; }
.gar-promise__label {
    color: #FF785C; font-size: 1.3rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; margin: 0;
}
.gar-promise__title { color: #383158; font-size: 2.6rem; line-height: 1.25; margin: 0; }
.gar-promise--accent p,
.gar-promise--accent li { color: #e6e4f0; }
.gar-promise--accent .gar-promise__title,
.gar-promise--accent strong { color: #fff; }
.gar-promise--accent .gar-promise__label { color: #FFA82F; }
.gar-promise p { margin: 0; }
.gar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.gar-list li { position: relative; padding-left: 2.8rem; line-height: 1.5; }
.gar-list li::before {
    content: ""; position: absolute; left: 0; top: .35em;
    width: 1.4rem; height: .8rem; border-left: 3px solid #FF785C; border-bottom: 3px solid #FF785C;
    transform: rotate(-45deg);
}
.gar-section .gar-promise__link { margin-top: auto; font-weight: 700; }
.gar-section .gar-promise--accent .gar-promise__link { color: #FFA82F; }
.gar-section .gar-promise--accent .gar-promise__link:hover { color: #fff; }

/* Verantwoordelijkheden */
.gar-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.gar-split__col { border-top: 4px solid #e6e8ee; padding-top: 2rem; }
.gar-split__col:first-child { border-top-color: #383158; }
.gar-split__title { color: #383158; font-size: 2rem; line-height: 1.3; margin-bottom: 1rem; }
.gar-callout {
    margin-top: 4rem; border-left: 4px solid #FF785C; background: #fff5f2;
    border-radius: 0 1.6rem 1.6rem 0; padding: 2.8rem 3.2rem;
}
.gar-callout__title { color: #383158; font-size: 2rem; line-height: 1.3; margin-bottom: 1rem; }
.gar-callout p { margin: 0; }

/* Stappen: echte volgorde, dus genummerd */
.gar-steps { counter-reset: gar; list-style: none; margin: 3.2rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.gar-steps__item { counter-increment: gar; position: relative; padding-top: 6rem; }
.gar-steps__item::before {
    content: counter(gar); position: absolute; top: 0; left: 0;
    width: 4.4rem; height: 4.4rem; border-radius: 50%;
    background: #FFA82F; color: #383158; font-weight: 700; font-size: 1.9rem;
    display: grid; place-items: center;
}
.gar-steps__title { color: #383158; font-size: 1.9rem; line-height: 1.3; margin-bottom: .8rem; }
.gar-steps__item p { margin: 0; }

.gar-closing { background: #f9f9f9; border-radius: 1.6rem; padding: 4.8rem; }
.gar-closing__buttons { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.4rem; }

@media (max-width: 820px) {
    .gar-hero { padding: 4rem 0 0; }
    .gar-hero__title { font-size: 3.6rem; }
    .gar-hero__text { font-size: 1.8rem; }
    .gar-section { margin: 5.6rem 0; }
    .gar-heading { font-size: 2.6rem; }
    .gar-lead { font-size: 1.8rem; }
    .gar-promises, .gar-split, .gar-steps { grid-template-columns: 1fr; }
    .gar-promise { padding: 2.6rem; }
    .gar-promise__title { font-size: 2.2rem; }
    .gar-steps__item { padding-top: 0; padding-left: 6rem; min-height: 4.4rem; }
    .gar-callout, .gar-closing { padding: 2.4rem; }
}