/* ---------------- shared site classes (from brand system) ---------------- */

.text-span{ color: var(--light-green); }
.text-span-2{ color: #0f5662; }

.boeken-btn{
background-image: linear-gradient(0deg, #65b33e, var(--light-green));
text-align: left;
border-radius: 12px;
align-self: center;
padding: 12px 25px;
font-size: 16px;
color: #fff;
font-weight: 600;
border: none;
cursor: pointer;
display: inline-block;
text-decoration: none;
}

.boeken-btn:hover{ filter: brightness(1.04); }

.text-block{ font-size: 16px; }

.image,
.image-2{ border-radius: 17px; }

.vision-card{
grid-column-gap: 80px;
grid-row-gap: 80px;
border-radius: 0;
justify-content: center;
align-items: flex-start;
margin: 50px;
display: flex;
}

.vision-card-txt{
background-color: #fff;
border-radius: 17px;
max-width: 500px;
width: 100%;
padding: 30px;
box-shadow: 0 2px 9px 2px #0003;
}

.steps-sect{
grid-column-gap: 14px;
grid-row-gap: 14px;
flex-flow: column;
margin: 38px 38px 38px 117px;
display: flex;
}

.steps-wrapper{
grid-column-gap: 56px;
grid-row-gap: 56px;
justify-content: center;
align-items: stretch;
margin: 20px 20px 20px 0;
display: flex;
flex-wrap: wrap;
}

.steps-card{
grid-column-gap: 4px;
grid-row-gap: 4px;
text-align: left;
background-color: #fff;
border-radius: 20px;
flex-flow: column;
flex: 1 1 260px;
justify-content: space-between;
align-items: flex-start;
max-width: 300px;
padding: 21px;
display: flex;
box-shadow: 0 2px 12px #0003;
}

.about-txt{
max-width: 500px;
font-size: 16px;
}

/* ---------------- HERO ---------------- */

.about-hero-sect{
grid-column-gap: 43px;
grid-row-gap: 43px;
text-align: left;
justify-content: center;
align-items: center;
display: flex;
padding: 80px 50px 40px;
}

.about-hero-txt-wrapper{
grid-column-gap: 26px;
grid-row-gap: 26px;
flex-flow: column;
max-width: 445px;
display: flex;
}

.about-hero-header{ font-size: 45px; line-height: 1.1; }

.about-hero-sect .vision-card-txt{
margin: 0;
max-width: 380px;
}

/* ---------------- BENEFITS (reuses steps pattern) ---------------- */

.benefits-icon{
width: 34px;
height: 34px;
border-radius: 8px;
background: #eef5e6;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
}

.benefits-icon svg{ width: 17px; height: 17px; stroke: var(--teal); }

.steps-card h3{
font-size: 18px;
margin: 4px 0 0;
}

.steps-card p{
font-size: 15px;
color: #555;
margin: 6px 0 0;
}

/* ---------------- CONTACT + FAQ ---------------- */

.contact-section{ background: #f7faf3; padding: 10px 0 60px; }

.contact-section .vision-card{ margin: 50px auto; max-width: 1100px; align-items: flex-start; }

.vision-card-txt h3{
margin: 0 0 18px;
font-size: 22px;
}

.field{
margin-bottom: 16px;
display: flex;
flex-direction: column;
gap: 6px;
}

.field-row{
display: flex;
gap: 14px;
}

.field-row .field{ flex: 1; }

.field label{
font-size: 13px;
font-weight: 600;
color: #444;
}

.field input,
.field textarea{
border: 1px solid #ddd;
border-radius: 10px;
padding: 11px 13px;
font-size: 15px;
font-family: inherit;
resize: vertical;
}

.field input:focus,
.field textarea:focus{
outline: none;
border-color: var(--light-green);
box-shadow: 0 0 0 3px rgba(164,198,109,0.25);
}

button[type="submit"].boeken-btn{
width: 100%;
text-align: center;
margin-top: 4px;
}

#form-status{
margin-top: 12px;
font-size: 13.5px;
color: #555;
min-height: 18px;
}

.faq-item{
border-bottom: 1px solid #eee;
padding: 16px 0;
}

.faq-item:first-of-type{ padding-top: 0; }
.faq-item:last-of-type{ border-bottom: none; }

.faq-item strong{ display: block; margin-bottom: 6px; font-size: 15px; }
.faq-item p{ margin: 0; color: #555; font-size: 14.5px; }

/* ---------------- HOW TO REACH (steps-card numbered) ---------------- */

.how-it-works-sect{ padding: 20px 0 70px; }

.how-it-works-sect .heading-2{
text-align: center;
font-size: 32px;
margin-bottom: 0;
}

.steps-card .step-number{
color: var(--light-green);
font-size: 14px;
font-weight: 700;
}

/* ---------------- responsive (mirrors brand breakpoints) ---------------- */

@media screen and (max-width: 991px) {
.about-hero-sect{
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    margin: 0;
    padding: 15px;
}

.about-hero-txt-wrapper{
    grid-column-gap: 17px;
    grid-row-gap: 17px;
    margin: 0;
    padding: 0;
}

.vision-card{
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.vision-card-txt{ max-width: 500px; }

.steps-wrapper{
    grid-column-gap: 21px;
    grid-row-gap: 21px;
}

.steps-card{
    grid-column-gap: 8px;
    grid-row-gap: 8px;
}
}

@media screen and (max-width: 767px) {
.about-hero-sect,
.vision-card{ flex-flow: column; }

.about-hero-sect .vision-card-txt{ max-width: 100%; }

.steps-sect{ margin-left: 20px; margin-right: 20px; }

.steps-wrapper{
    grid-column-gap: 17px;
    grid-row-gap: 17px;
}

.steps-card{
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    max-width: 100%;
}

.field-row{ flex-direction: column; gap: 16px; }
}

@media screen and (max-width: 479px) {
.about-hero-header{ text-align: center; }
.about-hero-txt-wrapper{ align-items: center; text-align: center; }
.steps-wrapper{ flex-flow: column; }
.about-txt,
.heading,
.heading-2{ text-align: center; }
}