/**
 * Over ons — pagina-specifieke stijlen
 * Bron: Figma "X-cel Over ons" (node 1:2, canvas 1440 breed, content-container 1296)
 * Alles is gescoped onder .xo zodat het niet botst met style.css.
 */

.xo {
    --xo-green: #166b3a;
    --xo-green-dark: #0d2b1e;
    --xo-green-mid: #1a5c30;
    --xo-hero-bg: #074120;
    --xo-grey-text: #575656;
    --xo-review-text: #343e40;
    --xo-card-grey: #b3b3b3;
    --xo-card-light: #f1f1f1;
    --xo-band-tint: rgba(74, 103, 13, 0.15);
    --xo-cta-bg: rgba(217, 217, 217, 0.53);
    --xo-star: #fecd58;
    --xo-gradient: linear-gradient(90deg, #3683aa 3.365%, #3aaa36 55.288%, #a6b015 100%);
    --xo-shadow-card: 0 4px 32px rgba(13, 43, 78, 0.08);
    --xo-shadow-stat: 0 2px 8px rgba(13, 43, 78, 0.06);

    font-family: 'Montserrat', sans-serif;
    color: #000;
    overflow-x: hidden;
}

.xo *,
.xo *::before,
.xo *::after {
    box-sizing: border-box;
}

.xo p,
.xo h1,
.xo h2,
.xo h3 {
    margin: 0;
}

.xo__container {
    max-width: 1344px; /* 1296 content + 2x24 padding */
    margin: 0 auto;
    padding: 0 24px;
}

/* Gradient-tekst (XCEL GRADIENT) */
.xo__gradient-text {
    background: var(--xo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Knop */
.xo__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--xo-green);
    color: #fff;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-align: center;
    transition: background-color .2s ease;
}

.xo__btn:hover,
.xo__btn:focus {
    background: #12572f;
    color: #fff;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 1. Hero  (Figma y 133–764, 631 hoog, full-bleed)
 * ------------------------------------------------------------------------ */
/* Breedte is altijd de volle viewport (100vw, los van de paginacontainer);
   de hoogte schaalt mee in de verhouding van het ontwerp: 631/1440 = 43.82%. */
.xo-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 43.82vw;
    min-height: 300px;
    max-height: 820px;
    background-color: var(--xo-hero-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 50%;
}

/* ---------------------------------------------------------------------------
 * 2. Intro  (Figma y 854–1050, 40/1.06, gecentreerd, 1057 breed)
 * ------------------------------------------------------------------------ */
.xo-intro {
    padding: 90px 0 0;
}

.xo .xo-intro__title {
    max-width: 1057px;
    min-height: 196px; /* Figma-tekstvak is hoger dan de tekst */
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.06;
    text-align: center;
}

/* ---------------------------------------------------------------------------
 * 3. Infokaarten  (Figma y 1095–1540, 2 x 634 x 445, gap 28)
 * ------------------------------------------------------------------------ */
.xo-info {
    padding: 45px 0 0;
}

.xo-info__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.xo-info__card {
    position: relative;
    min-height: 445px;
    background: var(--xo-card-grey);
    color: #fff;
    padding: 58px 56px 0;
}

.xo-info__head {
    display: flex;
    align-items: flex-start;
    gap: 38px;
    min-height: 103px; /* icoon top 65 – 58 = 7 + 62 icoon + ruimte */
}

.xo-info__icon {
    flex: 0 0 64px;
    width: 64px;
    margin-top: 7px;
}

/* height: auto houdt de eigen verhouding van elk icoon (64x62 vs 66x66) */
.xo-info__icon svg {
    display: block;
    width: 100%;
    height: auto;
}

.xo-info__title {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 41px;
    color: #fff;
}

.xo .xo-info__text {
    margin-top: 0; /* head heeft min-height 103 => tekst start op 161px vanaf kaarttop */
    max-width: 521px;
    font-size: 16px;
    line-height: normal;
}

.xo-info__text p + p {
    margin-top: 1em;
}

/* ---------------------------------------------------------------------------
 * 4. Ontdek onze opties  (Figma y 1679–2166)
 * ------------------------------------------------------------------------ */
.xo-opties {
    padding: 139px 0 0;
}

.xo .xo-opties__title {
    min-height: 62px; /* Figma-tekstvak 1679–1741 */
    margin: 0 0 11px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: var(--xo-grey-text);
}

.xo-opties__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.xo-optie {
    display: flex;
    flex-direction: column;
    min-height: 414px;
    background: var(--xo-card-light);
    border-radius: 13px;
    padding: 19px 18px 16px;
}

.xo-optie__img {
    display: block;
    width: 100%;
    aspect-ratio: 3508 / 2480;
    object-fit: cover;
    border-radius: 14px;
}

.xo .xo-optie__title {
    margin: 28px 0 0; /* afbeelding eindigt op 208, titel op 236 */
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
    color: var(--xo-grey-text);
}

.xo .xo-optie__text {
    margin-top: 16px;    /* titel eindigt op 265, tekst op 281 */
    margin-bottom: 16px; /* vaste lucht tot de knop, ook bij langere teksten */
    min-height: 45px;    /* 45 + 16 marge => knop blijft op de ontwerppositie 342 */
    font-size: 16px;
    line-height: normal;
    text-align: center;
    color: var(--xo-grey-text);
}

.xo-optie__btn {
    margin-top: auto;
    height: 56px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

/* ---------------------------------------------------------------------------
 * 5. Groene band  (Figma y 2249–3971, full-bleed)
 * ------------------------------------------------------------------------ */
.xo-band {
    position: relative;
    margin-top: 83px;
    padding: 86px 0 96px;
    background-color: #e4e8db; /* rgba(74,103,13,.15) op wit */
    overflow: hidden;
}

.xo-band__pattern {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: .47;
    pointer-events: none;
}

.xo-band__inner {
    position: relative;
    z-index: 1;
}

/* 5a. Thomas Duin */
.xo-thomas {
    display: flex;
    align-items: flex-start;
    gap: 108px; /* foto eindigt op 369, naamblok start op 477 */
}

.xo-thomas__photo {
    position: relative;
    flex: 0 0 297px;
    width: 297px;
    height: 370px;
    background: #fff;
    border-radius: 31px;
    overflow: hidden;
}

/* Exacte uitsnede uit Figma: w 222.1%, h 104.52%, left -8.81%, top -0.03% */
.xo-thomas__photo img {
    position: absolute;
    display: block;
    left: -8.81%;
    top: -0.03%;
    width: 222.1%;
    height: 104.52%;
    max-width: none;
    object-fit: fill;
}

.xo-thomas__body {
    flex: 1 1 auto;
    max-width: 800px; /* houdt naam- en quote-midden op de Figma-positie */
    padding-top: 69px; /* naam y 2404 – foto y 2335 */
    text-align: center;
}

.xo .xo-thomas__name {
    min-height: 96px; /* Figma-tekstvak 2404–2500 */
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.2;
    color: var(--xo-grey-text);
}

.xo-thomas__role {
    display: block;
    margin-top: 4px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: var(--xo-green);
}

.xo .xo-thomas__quote {
    max-width: 622px;
    min-height: 197px; /* Figma-tekstvak 2541–2738 */
    margin: 41px auto 0;
    font-size: 16px;
    line-height: normal;
    text-align: center;
}

/* 5b. Geschiedenis + Visie */
.xo-verhaal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 41px; /* kaarten y 2779 – quotevak-onder 2738 */
    align-items: start;
}

.xo-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--xo-shadow-card);
    padding: 32px;
}

.xo-geschiedenis {
    min-height: 564px; /* Figma 2779–3343 */
}

.xo-visie__card {
    min-height: 269px; /* Figma 2779–3048 */
}

.xo .xo-card__title {
    margin: 0 0 16px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
    color: var(--xo-grey-text);
}

.xo-card__text {
    font-size: 16px;
    line-height: normal;
    color: #000;
}

.xo-card__text p + p {
    margin-top: 1em;
}

.xo-visie__card {
    padding: 28px 32px 32px;
}

.xo .xo-visie__sub {
    margin: 0 0 11px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.4;
    color: var(--xo-grey-text);
}

.xo-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 126px 130px; /* Figma-rijhoogtes */
    gap: 20px 40px;
    margin-top: 20px;
}

.xo-stat {
    height: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--xo-shadow-stat);
    padding: 15px 24px 18px;
    overflow: hidden;
}

.xo-stat--green {
    background: var(--xo-green);
    box-shadow: 0 4px 10px rgba(22, 107, 58, 0.25);
}

.xo-stat__value {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 30px;
    color: var(--xo-green-dark);
    white-space: nowrap;
}

.xo-stat--green .xo-stat__value {
    color: #fff;
}

.xo .xo-stat__label {
    margin-top: 8px;
    font-size: 16px;
    line-height: normal;
    color: #000;
}

.xo-stat--green .xo-stat__label {
    color: rgba(255, 255, 255, .8);
}

/* 5c. Missie + waarden */
.xo-missie {
    margin-top: 47px; /* missie y 3390 – verhaal-onder 3343 */
}

.xo-missie__box {
    position: relative;
    min-height: 306px;
    border-radius: 24px;
    background-image: linear-gradient(166.6deg, var(--xo-green-dark) 0%, var(--xo-green-mid) 100%);
    box-shadow: 0 4px 32px rgba(13, 43, 78, 0.2);
    overflow: hidden;
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.xo-missie__box::before,
.xo-missie__box::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.xo-missie__box::before {
    width: 192px;
    height: 192px;
    left: 752px;
    top: -48px;
    background: var(--xo-green);
    opacity: .1;
}

.xo-missie__box::after {
    width: 224px;
    height: 224px;
    left: -32px;
    top: 125px;
    background: #fff;
    opacity: .05;
}

.xo-missie__content {
    position: relative;
    z-index: 1;
}

.xo .xo-missie__title {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 46px;
    color: #fff;
}

.xo .xo-missie__quote {
    max-width: 1189px;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 33px;
    color: #fff;
}

.xo .xo-missie__text {
    margin-top: 24px;
    font-size: 16px;
    line-height: normal;
    color: rgba(255, 255, 255, .65);
}

.xo-waarden {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;
    margin-top: 20px;
}

.xo-waarde {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--xo-shadow-stat);
    padding: 24px;
    min-height: 159px;
}

.xo .xo-waarde__title {
    margin: 12px 0 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 20px;
    color: var(--xo-grey-text);
}

.xo .xo-waarde__text {
    margin-top: 16px;
    font-size: 16px;
    line-height: normal;
    color: var(--xo-grey-text);
}

/* ---------------------------------------------------------------------------
 * 6. Onze successen  (Figma y 4078–4388)
 * ------------------------------------------------------------------------ */
.xo-successen {
    padding: 107px 0 0;
}

.xo .xo-successen__title {
    min-height: 62px; /* Figma-tekstvak 4078–4140 */
    margin: 0 0 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.2;
    color: var(--xo-grey-text);
}

.xo .xo-successen__intro {
    min-height: 61px; /* Figma-tekstvak 4150–4211 */
    font-size: 16px;
    line-height: normal;
    color: var(--xo-grey-text);
}

.xo-successen__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 19px;
    align-items: start;
}

.xo-succes {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 158px;
    padding: 24px 21px;
    background: var(--xo-green);
    border-radius: 13px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
    color: #fff;
}

.xo .xo-successen__note {
    padding-top: 49px; /* tekst y 4279 – kaarten y 4230 */
    font-size: 16px;
    line-height: normal;
    color: #000;
}

/* ---------------------------------------------------------------------------
 * 7. CTA-band  (Figma y 4499–4930, full-bleed)
 * ------------------------------------------------------------------------ */
.xo-cta {
    margin-top: 111px;
    padding: 111px 0;
    background: var(--xo-cta-bg);
    text-align: center;
}

.xo .xo-cta__title {
    min-height: 54px; /* Figma-tekstvak 4610–4664 */
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.06;
}

.xo .xo-cta__text {
    min-height: 61px; /* Figma-tekstvak 4672–4733 */
    margin-top: 8px;
    font-size: 16px;
    line-height: normal;
}

.xo-cta__btn {
    margin-top: 13px;
    min-width: 353px;
    height: 73px;
    border-radius: 9px;
    font-size: 24px;
}

/* ---------------------------------------------------------------------------
 * 8. Reviews + contactband  (Figma y 5022–6009; band ligt achter de kaarten)
 * ------------------------------------------------------------------------ */
.xo-outro {
    position: relative;
    padding-top: 92px;
}

/**
 * Contactband-achtergrond.
 * Hangt aan .xo-contact zelf, zodat de band altijd 286px boven de merknaam
 * begint en tot onder de inhoud doorloopt — ongeacht hoe hoog het formulier is.
 * Het "blad" is 1080x1350 en wordt full-bleed getoond met een verticale offset
 * van -63.125% van de breedte (= -909px bij 1440). Daaronder loopt de band door
 * in de eindkleur van de afbeelding.
 */
.xo-contact__bg {
    position: absolute;
    top: -286px; /* bandtop 5277 – merknaam 5563 */
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.xo-contact__bg-img {
    flex: 0 0 auto;
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin-top: -63.125%;
}

.xo-contact__bg-fill {
    flex: 1 1 auto;
    background: #0a2c0b;
}

.xo-reviews {
    position: relative;
    z-index: 1;
}

.xo-reviews__title {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    text-align: center;
    color: var(--xo-grey-text);
}

.xo-reviews__title em {
    font-style: normal;
    color: var(--xo-green);
}

.xo-reviews__score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 11px;
    margin-bottom: 35px; /* kaarten y 5131 – score-onder 5096 */
    color: var(--xo-review-text);
}

.xo-reviews__cijfer {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 23px;
    line-height: 22px;
}

.xo-reviews__stars {
    display: flex;
    gap: 1px;
}

.xo-reviews__stars svg {
    display: block;
    width: 20px;
    height: 18px;
}

.xo-reviews__aantal {
    font-size: 16px;
    line-height: normal;
}

.xo-reviews__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    min-height: 269px; /* Figma-grid 5131–5400 */
    align-items: start;
}

.xo-review {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: #fff;
    border: 1px solid var(--xo-green);
    border-radius: 8px;
    padding: 24px;
}

.xo-review__rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.xo-review__rating svg {
    display: block;
    width: 20px;
    height: 20px;
}

.xo-review__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.xo-review__name {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: var(--xo-grey-text);
}

.xo-review__text {
    font-size: 16px;
    line-height: normal;
    color: var(--xo-review-text);
}

/* Contactblok in de groene band */
.xo-contact {
    position: relative;
    margin-top: 161px; /* merknaam y 5563 – reviewgrid-onder 5402 */
    padding-bottom: 120px;
    color: #fff;
}

.xo-contact > .xo__container {
    position: relative;
    z-index: 1;
}

.xo-contact__inner {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.xo-contact__left {
    flex: 0 0 659px;
    max-width: 659px;
}

.xo-contact__brand {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: #fff;
}

.xo-contact__brand strong {
    display: block;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.2;
}

.xo-contact__cols {
    display: flex;
    gap: 0;
    margin-top: 27px; /* adresregels y 5674 – merknaam-onder 5647 */
}

.xo-contact__col {
    flex: 0 0 331px;
    max-width: 331px;
}

.xo-contact__col + .xo-contact__col {
    flex-basis: 303px; /* Figma-tekstvak 403–706 */
    max-width: 303px;
}

.xo-contact__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.35;
}

.xo-contact__list li {
    position: relative;
    padding-left: 48px;
    margin-bottom: 4px;
}

.xo-contact__list li.has-gap {
    margin-top: 26px;
}

.xo-contact__list a {
    color: #fff;
    text-decoration: none;
}

.xo-contact__list a:hover {
    text-decoration: underline;
    color: #fff;
}

.xo-contact__list .xo-ico {
    position: absolute;
    left: 9px;
    top: 2px;
    display: block;
}

.xo-contact__list .xo-ico svg {
    display: block;
    fill: #fff;
}

.xo-contact__hours {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.35;
}

.xo-contact__hours strong {
    display: block;
    font-weight: 700;
}

.xo-contact__hours p + p {
    margin-top: 26px;
}

.xo-contact__form {
    flex: 0 0 632px;
    max-width: 632px;
    min-height: 258px;
    margin-top: 81px; /* formulier y 5649 - merknaam y 5568 */
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 27px 38px 35px 29px; /* velden eindigen op 1325, kaart op 1363 */
    color: #1e1e1e;
}

/* ---------------------------------------------------------------------------
 * Gravity Forms binnen het contactblok — formulier 10 "Contact Over ons"
 *
 * Het ontwerp heeft een 2x2 raster van 272px kolommen:
 *     Naam         | Uw bericht
 *     E-mailadres  | Versturen
 * De verzendknop staat bij Gravity Forms buiten .gform_fields, daarom wordt
 * het <form> zelf de grid en krijgen de tussenliggende wrappers display:contents.
 *
 * De selectors zijn bewust specifiek: gravity-theme zet zelf een 12-koloms grid
 * op .gform_fields en laadt ná deze stylesheet.
 * ------------------------------------------------------------------------ */
.xo .xo-contact__form .gform_wrapper,
.xo .xo-contact__form .gform_wrapper form {
    margin: 0;
}

/* De "* geeft vereiste velden aan"-regel staat niet in het ontwerp */
.xo .xo-contact__form .gform_wrapper .gform_heading {
    display: none;
}

.xo .xo-contact__form .gform_wrapper.gravity-theme form {
    display: grid;
    grid-template-columns: 272px 272px; /* exact uit het ontwerp */
    grid-template-rows: 100px auto;     /* rij 1 vast; het berichtveld (108) mag eroverheen */
    column-gap: 21px;
    row-gap: 24px;
    align-items: start;
}

.xo .xo-contact__form .gform_wrapper.gravity-theme .gform-body,
.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_body,
.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_fields {
    display: contents;
}

.xo .xo-contact__form .gform_wrapper.gravity-theme .gfield {
    margin: 0;
    padding: 0;
}

/* Vaste plek per veld op volgorde, niet op id: zo blijft de indeling staan
   als er via ACF een ander formulier gekozen wordt (naam / e-mail / bericht). */
/* nth-child, niet nth-of-type: het instemmingsveld is een <fieldset> en zou
   bij nth-of-type als "eerste fieldset" bovenop het naamveld belanden. */
.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_fields > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_fields > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_fields > *:nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_footer                  { grid-area: 2 / 2 / 3 / 3; }

/* Instemming en captcha op eigen regels eronder */
.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_fields > *:nth-child(4),
.xo .xo-contact__form .gform_wrapper.gravity-theme .gfield--type-consent { grid-area: 3 / 1 / 4 / 3; }
.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_fields > *:nth-child(5),
.xo .xo-contact__form .gform_wrapper.gravity-theme .gfield--type-captcha { grid-area: 4 / 1 / 5 / 3; }
.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_fields > *:nth-child(n+6) { grid-column: 1 / -1; }
.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_validation_errors { grid-area: 1 / 1 / 2 / 3; }

.xo .xo-contact__form .gform_wrapper.gravity-theme .gfield_label,
.xo .xo-contact__form .gform_wrapper.gravity-theme legend.gfield_label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #1e1e1e;
}

/* Sterretjes en "(Vereist)" staan niet in het ontwerp; alle velden zijn
   verplicht en dat blijft voor schermlezers zichtbaar via aria-required. */
.xo .xo-contact__form .gform_wrapper.gravity-theme .gfield_required,
.xo .xo-contact__form .gform_wrapper.gravity-theme .gfield_required_text,
.xo .xo-contact__form .gform_wrapper.gravity-theme .gfield_required_asterisk {
    display: none;
}

.xo .xo-contact__form .gform_wrapper.gravity-theme input[type="text"],
.xo .xo-contact__form .gform_wrapper.gravity-theme input[type="email"],
.xo .xo-contact__form .gform_wrapper.gravity-theme textarea {
    width: 100%;
    height: 44px; /* ontwerp: 12px padding + 20px regel */
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: #1e1e1e;
    background: #fff;
    box-shadow: none;
}

.xo .xo-contact__form .gform_wrapper.gravity-theme textarea.textarea {
    height: 80px;
    min-height: 80px;
    resize: vertical;
}

.xo .xo-contact__form .gform_wrapper.gravity-theme input::placeholder,
.xo .xo-contact__form .gform_wrapper.gravity-theme textarea::placeholder {
    color: #b3b3b3;
}

.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_footer {
    display: block;
    margin: 0;
    padding: 0;
    align-self: start;
}

.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
    width: 100%;
    height: 70px;
    background: var(--xo-green);
    border: 1px solid #2c2c2c;
    border-radius: 8px;
    color: #f5f5f5;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}

.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover {
    background: #12572f;
}

/* Instemming + captcha: compact onder het raster */
.xo .xo-contact__form .gform_wrapper.gravity-theme .ginput_container_consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.xo .xo-contact__form .gform_wrapper.gravity-theme .gfield--type-consent .gfield_label {
    display: none; /* legenda 'Instemming' is dubbelop naast de checkboxtekst */
}

.xo .xo-contact__form .gform_wrapper.gravity-theme .gfield_consent_label,
.xo .xo-contact__form .gform_wrapper.gravity-theme .gfield_description {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #575656;
}

.xo .xo-contact__form .gform_wrapper.gravity-theme .gform_validation_errors {
    font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
 * Responsive
 * De basisregels hierboven zijn 1-op-1 het Figma-ontwerp op 1440 breed en
 * gebruiken .xo-prefixen; de regels hieronder doen dat ook, anders winnen
 * de desktopregels op specificiteit.
 * ------------------------------------------------------------------------ */
@media (max-width: 1343px) {
    .xo .xo-missie__box::before {
        left: auto;
        right: 8%;
    }

    /* Contactblok: tekstkolom (659) + formulier (632) = 1291px en dat past
       vanaf hier niet meer naast elkaar in de container. Onder elkaar dus. */
    .xo .xo-contact {
        margin-top: 140px;
        padding-bottom: 80px;
    }

    .xo .xo-contact__bg {
        top: -180px;
    }

    .xo .xo-contact__inner {
        flex-wrap: wrap;
        gap: 40px;
    }

    .xo .xo-contact__left,
    .xo .xo-contact__form {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .xo .xo-contact__form {
        margin-top: 0;
        min-height: 0;
        padding: 27px 29px 29px;
    }

    /* Kaart is nu volle breedte: kolommen mee laten schalen */
    .xo .xo-contact__form .gform_wrapper.gravity-theme form {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .xo .xo-contact__form .gform_wrapper.gravity-theme textarea.textarea {
        height: 100px;
        min-height: 100px;
    }
}

@media (max-width: 1199px) {
    /* Figma-tekstvakken loslaten: teksten breken hier anders af */
    .xo .xo-intro__title,
    .xo .xo-opties__title,
    .xo .xo-thomas__name,
    .xo .xo-thomas__quote,
    .xo .xo-successen__title,
    .xo .xo-successen__intro,
    .xo .xo-cta__title,
    .xo .xo-cta__text,
    .xo .xo-optie__text,
    .xo .xo-info__head,
    .xo .xo-geschiedenis,
    .xo .xo-visie__card,
    .xo .xo-reviews__grid,
    .xo .xo-info__card,
    .xo .xo-optie,
    .xo .xo-waarde,
    .xo .xo-missie__box {
        min-height: 0;
    }

    .xo .xo-stats {
        grid-template-rows: auto auto;
    }

    .xo .xo-stat {
        height: auto;
        min-height: 110px;
    }
    .xo .xo-hero {
        min-height: 260px;
    }

    .xo .xo-intro {
        padding-top: 64px;
    }

    .xo .xo-intro__title {
        font-size: 32px;
    }

    .xo .xo-info {
        padding-top: 40px;
    }

    .xo .xo-info__grid {
        gap: 24px;
    }

    .xo .xo-info__card {
        padding: 40px 32px;
    }

    .xo .xo-info__head {
        gap: 24px;
    }

    .xo .xo-info__title {
        font-size: 26px;
        line-height: 34px;
    }

    .xo .xo-info__text {
        margin-top: 20px;
    }

    .xo .xo-opties {
        padding-top: 80px;
    }

    .xo .xo-opties__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .xo .xo-band {
        margin-top: 64px;
        padding: 64px 0 72px;
    }

    .xo .xo-thomas {
        gap: 48px;
    }

    .xo .xo-thomas__body {
        max-width: none;
        padding-top: 24px;
    }

    .xo .xo-thomas__name {
        font-size: 32px;
    }

    .xo .xo-thomas__role {
        font-size: 26px;
    }

    .xo .xo-thomas__quote {
        margin-top: 24px;
    }

    .xo .xo-verhaal {
        margin-top: 48px;
        gap: 24px;
    }

    .xo .xo-stats {
        gap: 16px 20px;
    }

    .xo .xo-missie {
        margin-top: 32px;
    }

    .xo .xo-missie__quote {
        font-size: 20px;
        line-height: 28px;
    }

    .xo .xo-waarden {
        gap: 24px;
    }

    .xo .xo-successen {
        padding-top: 72px;
    }

    .xo .xo-successen__title {
        font-size: 32px;
    }

    .xo .xo-successen__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .xo .xo-successen__note {
        padding-top: 0;
        align-self: center;
    }

    .xo .xo-cta {
        margin-top: 72px;
        padding: 72px 0;
    }

    .xo .xo-cta__title {
        font-size: 32px;
    }

    .xo .xo-outro {
        padding-top: 64px;
    }

    .xo .xo-reviews__title {
        font-size: 32px;
    }

    .xo .xo-reviews__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* het contactblok stapelt al vanaf 1343px, zie daar */

    .xo .xo-contact__brand strong {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .xo .xo__container {
        padding: 0 16px;
    }
    .xo .xo-hero {
        min-height: 200px;
    }

    .xo .xo-intro {
        padding-top: 40px;
    }

    .xo .xo-intro__title {
        font-size: 24px;
    }

    .xo .xo-info {
        padding-top: 32px;
    }

    .xo .xo-info__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .xo .xo-info__card {
        padding: 28px 24px;
    }

    .xo .xo-info__head {
        gap: 16px;
    }

    .xo .xo-info__icon {
        flex-basis: 48px;
        width: 48px;
        height: auto;
        margin-top: 4px;
    }

    .xo .xo-info__title {
        font-size: 22px;
        line-height: 28px;
    }

    .xo .xo-opties {
        padding-top: 48px;
    }

    .xo .xo-opties__title,
    .xo .xo-successen__title,
    .xo .xo-reviews__title {
        font-size: 24px;
    }

    .xo .xo-opties__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .xo .xo-band {
        margin-top: 40px;
        padding: 40px 0 48px;
    }

    .xo .xo-thomas {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .xo .xo-thomas__body {
        padding-top: 0;
    }

    .xo .xo-thomas__name {
        font-size: 28px;
    }

    .xo .xo-thomas__role {
        font-size: 22px;
    }

    .xo .xo-thomas__quote {
        margin-top: 24px;
    }

    .xo .xo-verhaal {
        grid-template-columns: 1fr;
        margin-top: 32px;
        gap: 16px;
    }

    .xo .xo-card,
    .xo .xo-visie__card {
        padding: 24px;
    }

    .xo .xo-stats {
        grid-template-columns: 1fr;
    }

    .xo .xo-missie__box {
        padding: 24px;
    }

    .xo .xo-missie__title {
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .xo .xo-missie__quote {
        font-size: 18px;
        line-height: 26px;
    }

    .xo .xo-waarden {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .xo .xo-successen {
        padding-top: 48px;
    }

    .xo .xo-successen__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .xo .xo-succes {
        min-height: 110px;
        font-size: 18px;
    }

    .xo .xo-cta {
        margin-top: 48px;
        padding: 48px 0;
    }

    .xo .xo-cta__title {
        font-size: 24px;
    }

    .xo .xo-cta__btn {
        min-width: 0;
        width: 100%;
        height: 60px;
        font-size: 18px;
    }

    .xo .xo-outro {
        padding-top: 48px;
    }

    .xo .xo-reviews__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .xo .xo-reviews__score {
        flex-wrap: wrap;
        gap: 6px;
    }

    .xo .xo-contact {
        margin-top: 100px;
        padding-bottom: 56px;
    }

    .xo .xo-contact__bg {
        top: -110px;
    }

    .xo .xo-contact__cols {
        flex-direction: column;
        gap: 28px;
        margin-top: 24px;
    }

    .xo .xo-contact__col,
    .xo .xo-contact__col + .xo-contact__col {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .xo .xo-contact__brand {
        font-size: 18px;
    }

    .xo .xo-contact__brand strong {
        font-size: 28px;
    }

    .xo .xo-contact__list,
    .xo .xo-contact__hours {
        font-size: 17px;
    }

    .xo .xo-contact__form {
        padding: 20px 16px;
    }

    /* Op kleine schermen alles onder elkaar: één kolom, rijen op eigen hoogte.
       grid-template-rows moet expliciet terug naar auto, anders houdt rij 1
       de vaste 100px uit het ontwerp en lopen de velden over elkaar heen. */
    .xo .xo-contact__form .gform_wrapper.gravity-theme form {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-auto-rows: auto;
        grid-auto-flow: row;
        row-gap: 20px;
        column-gap: 0;
    }

    .xo .xo-contact__form .gform_wrapper.gravity-theme .gform_fields > *,
    .xo .xo-contact__form .gform_wrapper.gravity-theme .gfield,
    .xo .xo-contact__form .gform_wrapper.gravity-theme .gfield--type-consent,
    .xo .xo-contact__form .gform_wrapper.gravity-theme .gfield--type-captcha,
    .xo .xo-contact__form .gform_wrapper.gravity-theme .gform_footer,
    .xo .xo-contact__form .gform_wrapper.gravity-theme .gform_validation_errors {
        grid-area: auto !important;
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
    }

    .xo .xo-contact__form .gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
        height: 56px;
        font-size: 18px;
    }

    .xo .xo-contact__form .gform_wrapper.gravity-theme textarea.textarea {
        min-height: 110px;
        height: 110px;
    }
}