/* Manrope wordt geladen via een link-tag in head.blade.php, bewust niet via @import.
   Een @import wordt pas ontdekt nadat dit bestand is gedownload, waardoor de
   icoonlettertypen ruim een seconde later kwamen en de iconen even als lege
   blokjes verschenen. Met een link-tag laden beide bestanden tegelijk. */

/* ==========================================================================
   ESTIQ  |  home-v2.css  |  aangemaakt 1 september 2026
   Stijllaag voor de homepage, volgens de goedgekeurde mock-ups.

   SCOPE: alle regels beginnen bij .home-style-three (de hero) of bij een
   element dat daar een sibling van is. Die klasse bestaat alleen op de
   homepage, dus andere pagina's veranderen niet. .contact-section komt ook
   op andere pagina's voor en is daarom altijd gescoped met de sibling-
   combinator.

   TERUGDRAAIEN: dit bestand verwijderen, of de verwijzing weghalen uit
   Beheer > SEO Settings > Custom Head Scripts. Er is geen bestaand bestand
   gewijzigd.
   ========================================================================== */


/* 1. Ontwerpwaarden */
.home-style-three,
.home-style-three ~ * {
    --e-blue:   #0063F6;
    --e-navy:   #0C2340;
    --e-paper:  #F1EFE8;
    --e-body:   #526278;
    --e-line:   #E3E9F1;
    --e-sky:    #9EC5FF;
    --e-white:  #FFFFFF;
    --e-radius: 20px;
    --e-shadow: 0 1px 2px rgba(12,35,64,.05), 0 10px 30px rgba(12,35,64,.07);
    --e-pad:    80px;
}

/* Manrope alleen op tekstelementen, bewust niet op i of span, zodat de
   icoonlettertypen ongemoeid blijven. */
.home-style-three :is(h1,h2,h3,h4,h5,h6,p,a,li,label,button,input,textarea,select,blockquote),
.home-style-three ~ * :is(h1,h2,h3,h4,h5,h6,p,a,li,label,button,input,textarea,select,blockquote) {
    font-family: 'Manrope', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


/* 2. Ritme en breedte */
.home-style-three ~ * > .container,
.home-style-three ~ .container {
    max-width: 1200px;
}

.home-style-three ~ section,
.home-style-three ~ div:not(.modal):not(.switch-box) {
    padding-top: var(--e-pad);
    padding-bottom: var(--e-pad);
}

.home-style-three ~ .trust-feature-section {
    padding-top: 0;
    padding-bottom: 0;
}


/* 3. Typografie */
.home-style-three .home-text-three h1 {
    font-size: clamp(38px, 4.6vw, 64px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--e-navy);
    text-wrap: balance;
}

.home-style-three .hero_label,
.home-style-three ~ * .default_label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--e-blue);
    line-height: 1.4;
    margin-bottom: 12px;
    display: block;
}

.home-style-three ~ * .section-head h2,
.home-style-three ~ * h2 {
    font-size: clamp(28px, 3.1vw, 40px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--e-navy);
    text-wrap: balance;
}

.home-style-three ~ * h3,
.home-style-three ~ * h4 {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--e-navy);
}

.home-style-three .home-text-three p,
.home-style-three ~ * :is(p, li) {
    font-size: 17px;
    line-height: 1.65;
    font-weight: 450;
    color: var(--e-body);
}

.home-style-three ~ * p b,
.home-style-three ~ * p strong {
    font-weight: 700;
    color: var(--e-navy);
}


/* 4. Knoppen */
.home-style-three .theme-button .default-btn,
.home-style-three ~ * .theme-button .default-btn,
.home-style-three ~ * .default-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 26px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.home-style-three .active-btn,
.home-style-three ~ * .active-btn {
    background: var(--e-blue);
    border-color: var(--e-blue);
    color: var(--e-white);
    box-shadow: 0 6px 18px rgba(0,99,246,.22);
}
.home-style-three .active-btn:hover,
.home-style-three ~ * .active-btn:hover {
    background: #0052CE;
    border-color: #0052CE;
    color: var(--e-white);
    transform: translateY(-1px);
}

.home-style-three .service_btn {
    background: var(--e-white);
    border-color: var(--e-line);
    color: var(--e-navy);
    box-shadow: var(--e-shadow);
}
.home-style-three .service_btn:hover {
    border-color: var(--e-blue);
    color: var(--e-blue);
}

/* Geen afspeelicoon: dit is geen video maar een link. Wordt een pijl. */
.home-style-three .service_btn .fa-play::before,
.home-style-three .service_btn .fas.fa-play::before {
    content: "\f061";
}


/* 5. Voordelenbalk */
.home-style-three ~ .trust-feature-section .trust-feature-wrapper {
    background: var(--e-white);
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius);
    box-shadow: var(--e-shadow);
    padding: 22px 12px;
    margin-top: -44px;
    position: relative;
    z-index: 3;
}

.home-style-three ~ .trust-feature-section .trust-feature-item + .trust-feature-item {
    border-left: 1px solid var(--e-line);
}

.home-style-three ~ .trust-feature-section .trust-feature-icon {
    color: var(--e-blue);
}

.home-style-three ~ .trust-feature-section .trust-feature-content p {
    font-size: 15px;
    font-weight: 600;
    color: var(--e-navy);
    margin-bottom: 0;
}


/* 6. Sectiegronden */
.home-style-three ~ .service-style-three,
.home-style-three ~ .team-section {
    background: var(--e-paper);
}

.home-style-three ~ .about-style-two,
.home-style-three ~ .why-us,
.home-style-three ~ .faq-section {
    background: var(--e-white);
}


/* 7. Kaarten */
.home-style-three ~ * .service-item,
.home-style-three ~ * .team-card {
    border-radius: var(--e-radius);
}

.home-style-three ~ .service-style-three .service-item {
    background: var(--e-white);
    border: 1px solid var(--e-line);
    box-shadow: var(--e-shadow);
    padding: 30px 28px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-style-three ~ .service-style-three .service-item:hover {
    transform: translateY(-3px);
    border-color: #CFE0FB;
    box-shadow: 0 2px 4px rgba(12,35,64,.06), 0 16px 40px rgba(12,35,64,.10);
}
.home-style-three ~ .service-style-three .service-item h3 {
    margin-bottom: 10px;
}

/* Drie gelijkwaardige kaarten zonder afgesneden tekst. */
.home-style-three ~ .service-style-three .service-slider .owl-stage {
    display: flex;
}
.home-style-three ~ .service-style-three .service-slider .owl-item {
    display: flex;
    height: auto;
}
.home-style-three ~ .service-style-three .service-slider .owl-item > *,
.home-style-three ~ .service-style-three .service-slider .service-item {
    width: 100%;
}

.home-style-three ~ .about-style-two .about-image img,
.home-style-three ~ .why-us .why-us-img img,
.home-style-three ~ .team-section .team-img img {
    border-radius: var(--e-radius);
}

.home-style-three ~ .about-style-two .about-text .icofont-check-circled,
.home-style-three ~ .why-us .icofont-check-circled {
    color: var(--e-blue);
}


/* 8. Werkwijze, donkerblauwe sectie */
.home-style-three ~ .process-section {
    background: var(--e-navy);
}
.home-style-three ~ .process-section :is(h2, h3, h4) {
    color: var(--e-white);
}
.home-style-three ~ .process-section :is(p, li) {
    color: #C3D2E6;
}
.home-style-three ~ .process-section .default_label,
.home-style-three ~ .process-section .secondary_bg_label {
    color: var(--e-sky);
}
.home-style-three ~ .process-section .process-card {
    background: transparent;
    color: #C3D2E6;
}


/* 9. Veelgestelde vragen */
.home-style-three ~ .faq-section .faq-item {
    border-radius: 18px;
    border-color: var(--e-line);
}
.home-style-three ~ .faq-section .faq-item :is(button, h3, h4) {
    color: var(--e-navy);
    font-weight: 700;
}


/* 10. Afsluitend contactblok */
.home-style-three ~ .contact-section {
    background: var(--e-blue);
}
.home-style-three ~ .contact-section :is(h2, h3, h4, .h3) {
    color: var(--e-white);
}
.home-style-three ~ .contact-section :is(p, li, label) {
    color: #DCE9FF;
}
.home-style-three ~ .contact-section .default_label {
    color: #BBD6FF;
}
.home-style-three ~ .contact-section .contact-form {
    background: var(--e-white);
    border-radius: var(--e-radius);
    padding: 30px;
    box-shadow: 0 10px 40px rgba(12,35,64,.18);
}
.home-style-three ~ .contact-section .contact-form :is(h2, h3, h4, .h3) {
    color: var(--e-navy);
}
.home-style-three ~ .contact-section .contact-form :is(p, label) {
    color: var(--e-body);
}
.home-style-three ~ .contact-section .form-control {
    border: 1px solid var(--e-line);
    border-radius: 12px;
    min-height: 48px;
    font-size: 16px;
    color: var(--e-navy);
    background: var(--e-white);
}
.home-style-three ~ .contact-section .form-control:focus {
    border-color: var(--e-blue);
    box-shadow: 0 0 0 3px rgba(0,99,246,.14);
}
.home-style-three ~ .contact-section .contact-form .default-btn {
    background: var(--e-blue);
    border-color: var(--e-blue);
    color: var(--e-white);
}
.home-style-three ~ .contact-section .contact-img img {
    border-radius: var(--e-radius);
}


/* 11. Toegankelijkheid */
.home-style-three :is(a, button, input, textarea, select):focus-visible,
.home-style-three ~ * :is(a, button, input, textarea, select):focus-visible {
    outline: 3px solid var(--e-blue);
    outline-offset: 2px;
    border-radius: 6px;
}
.home-style-three ~ .process-section a:focus-visible,
.home-style-three ~ .contact-section a:focus-visible {
    outline-color: var(--e-white);
}

@media (prefers-reduced-motion: reduce) {
    .home-style-three ~ * .service-item,
    .home-style-three ~ * .default-btn {
        transition: none;
    }
    .home-style-three ~ * .service-item:hover,
    .home-style-three ~ * .active-btn:hover {
        transform: none;
    }
}


/* 12. Tablet */
@media (max-width: 991px) {
    .home-style-three,
    .home-style-three ~ * {
        --e-pad: 56px;
    }
    .home-style-three ~ .trust-feature-section .trust-feature-wrapper {
        margin-top: -28px;
        padding: 16px 8px;
    }
    .home-style-three ~ .trust-feature-section .trust-feature-item + .trust-feature-item {
        border-left: 0;
    }
}


/* 13. Mobiel */
@media (max-width: 767px) {
    .home-style-three,
    .home-style-three ~ * {
        --e-pad: 44px;
        --e-radius: 18px;
    }
    .home-style-three .home-text-three h1 {
        font-size: 38px;
        line-height: 1.12;
    }
    .home-style-three ~ * .section-head h2,
    .home-style-three ~ * h2 {
        font-size: 30px;
        line-height: 1.2;
    }
    .home-style-three ~ * h3,
    .home-style-three ~ * h4 {
        font-size: 21px;
    }
    .home-style-three .home-text-three p,
    .home-style-three ~ * :is(p, li) {
        font-size: 16px;
        line-height: 1.6;
    }
    .home-style-three ~ * > .container,
    .home-style-three ~ .container {
        padding-left: 22px;
        padding-right: 22px;
    }
    .home-style-three ~ .trust-feature-section .trust-feature-wrapper {
        margin-top: -20px;
        padding: 10px 6px;
    }
    .home-style-three ~ .contact-section .contact-form {
        padding: 22px;
    }
    .home-style-three .theme-button .default-btn {
        width: 100%;
        justify-content: center;
    }
}


/* 14. Correcties na de eerste visuele controle op 1 september 2026.
   Vier regels verloren het van themastijlen met een hogere specificiteit.
   Deze regels zijn bewust specifieker en staan daarom achteraan. */

/* Het thema geeft elk woord in een knop een hoofdletter. Dat hoort hier niet. */
.home-style-three .theme-button .default-btn,
.home-style-three ~ * .theme-button .default-btn,
.home-style-three ~ .service-style-three .service-slider .service-item .theme-button .default-btn {
    text-transform: none;
}

/* Het kleine label boven de titel werd overschreven door de alinearegel. */
.home-style-three .home-text-three .hero_label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--e-blue);
}

/* Secundaire knop in de hero. */
.home-style-three .home-text-three .service_btn {
    color: var(--e-navy);
}

/* Afronding van de dienstenkaarten. */
.home-style-three ~ .service-style-three .service-slider .service-item,
.home-style-three ~ .service-style-three .service-slider .service-item::before {
    border-radius: var(--e-radius);
}

/* Knop in de dienstenkaart gelijk aan de andere knoppen. */
.home-style-three ~ .service-style-three .service-slider .service-item .theme-button .default-btn {
    min-height: 50px;
    padding: 0 26px;
    border-radius: 999px;
}

/* Invoervelden in het contactblok. */
.home-style-three ~ .contact-section .contact-form .form-control {
    border-radius: 12px;
}


/* 15. responsive.css bevat p { font-size: 14px !important } onder 992px en
   15px !important tussen 992 en 1199px. Dat maakt de bodytekst op tablet en
   mobiel kleiner dan afgesproken. Alleen daarom gebruiken de regels hieronder
   ook !important, strikt binnen de homepage. */

@media (max-width: 991px) {
    .home-style-three .home-text-three p,
    .home-style-three ~ * :is(p, li) {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home-style-three .home-text-three p,
    .home-style-three ~ * :is(p, li) {
        font-size: 17px !important;
        line-height: 1.65 !important;
    }
}

@media (max-width: 1199px) {
    .home-style-three .home-text-three .hero_label {
        font-size: 13px !important;
    }
    .home-style-three ~ * .default_label {
        font-size: 12.5px !important;
    }
    .home-style-three ~ .trust-feature-section .trust-feature-content p {
        font-size: 15px !important;
    }
}


/* 16. Afronding homepage, 1 september 2026. Het thema zet .hero_label op
   position relative met top 30px, waardoor het label visueel bovenop de
   eerste regel van de titel viel. */
.home-style-three .home-text-three .hero_label {
    position: static;
    top: auto;
    margin-bottom: 14px;
}

.home-style-three .home-text-three h1 .hero-accent {
    display: block;
    color: var(--e-blue);
}

.home-style-three ~ .about-style-two .theme-button .default-btn:nth-of-type(2) {
    display: none;
}

.home-style-three ~ .team-section .team-text :is(h3, h4, p) {
    overflow-wrap: anywhere;
}

/* === Blok 16: contactblok leesbaar maken (2 sep 2026) ===
   style.css tekent .contact-area als witte kaart bovenop het blauwe
   .contact-section, waardoor de witte koppen onzichtbaar werden.
   Kaart transparant maken zodat het blauwe blok uit de mock-up zichtbaar wordt.
   Terugdraaien: dit hele blok verwijderen. */
.home-style-three ~ .contact-section .contact-area {
  background: transparent !important;
  box-shadow: none !important;
  padding: 24px 0 !important;
}
.home-style-three ~ .contact-section .contact-area .section-head p {
  color: #EAF2FF !important;
}
.home-style-three ~ .contact-section .contact-area input:not([type="hidden"]),
.home-style-three ~ .contact-section .contact-area textarea {
  background: #fff !important;
  border: 1px solid #C9DCFF !important;
  color: #0C2340 !important;
}
.home-style-three ~ .contact-section .contact-area button[type="submit"] {
  background: #fff !important;
  color: #0C2340 !important;
  border: none !important;
}