/* ============================================================================
   WeQonnect componenten  ·  wq-components.css
   ----------------------------------------------------------------------------
   Vereist wq-brand.css. Alle maten, kleuren en hoeken komen uit de tokens
   daar — in dit bestand staan geen losse hex-codes of pixelwaarden die niet
   uit een token volgen. Pas je een token aan, dan beweegt alles mee.

   Versie 1.0 · 2026-11-13
   ============================================================================ */


/* ============================================================================
   KNOPPEN
   ----------------------------------------------------------------------------
   Eén primaire knop per beeld. Koraal is de actie, slate is het alternatief,
   outline is "ook mogelijk". Nooit twee koraalknoppen naast elkaar.
   ============================================================================ */

.wq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wq-sp-2);
    padding: 12px 24px;
    font-family: var(--wq-font);
    font-size: var(--wq-fs-sm);
    font-weight: var(--wq-fw-bold);
    letter-spacing: var(--wq-ls-button);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--wq-r);
    cursor: pointer;
    transition: background var(--wq-t-fast), border-color var(--wq-t-fast),
                color var(--wq-t-fast), box-shadow var(--wq-t-fast),
                transform var(--wq-t-fast);
}

.wq-btn:disabled,
.wq-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Een icoon in een knop neemt altijd de kleur van de knop over. Expliciet,
   omdat sommige site-CSS een globale `i { color: … }` heeft staan die anders
   wint van overerving — dan zou het icoon koraal-op-koraal worden. */
.wq-btn i,
.wq-btn svg { color: currentColor; }

/* Primair — de hoofdactie. Koraal met witte tekst. */
.wq-btn--primary,
.wq-btn--primary:hover,
.wq-btn--primary:focus,
.wq-btn--primary:visited {
    color: var(--wq-white);
    -webkit-text-fill-color: var(--wq-white);
}
.wq-btn--primary {
    background: var(--wq-coral);
    border-color: var(--wq-coral);
    box-shadow: var(--wq-shadow-coral);
}
.wq-btn--primary:hover {
    background: var(--wq-coral-dark);
    border-color: var(--wq-coral-dark);
    box-shadow: var(--wq-shadow-coral-h);
    transform: translateY(-1px);
}
.wq-btn--primary:active { transform: translateY(0); }

/* Secundair — zakelijk grijs, óók met witte tekst. */
.wq-btn--secondary,
.wq-btn--secondary:hover,
.wq-btn--secondary:focus,
.wq-btn--secondary:visited {
    color: var(--wq-white);
    -webkit-text-fill-color: var(--wq-white);
}
.wq-btn--secondary {
    background: var(--wq-slate);
    border-color: var(--wq-slate);
}
.wq-btn--secondary:hover {
    background: var(--wq-ink);
    border-color: var(--wq-ink);
}

/* Outline op lichte achtergrond. */
.wq-btn--outline {
    background: transparent;
    border-color: var(--wq-border);
    color: var(--wq-slate);
}
.wq-btn--outline:hover {
    border-color: var(--wq-coral);
    color: var(--wq-coral);
    background: var(--wq-coral-08);
}

/* Outline op donkere achtergrond — witte rand, witte tekst. */
.wq-btn--outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--wq-white);
    -webkit-text-fill-color: var(--wq-white);
}
.wq-btn--outline-light:hover {
    background: var(--wq-white);
    border-color: var(--wq-white);
    color: var(--wq-slate);
    -webkit-text-fill-color: var(--wq-slate);
}

/* Tekstknop. */
.wq-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--wq-slate);
    padding-left: var(--wq-sp-3);
    padding-right: var(--wq-sp-3);
}
.wq-btn--ghost:hover { color: var(--wq-coral); background: var(--wq-coral-08); }

/* Statusknoppen — alleen in formulieren en gereedschap. */
.wq-btn--ok     { background: var(--wq-ok); border-color: var(--wq-ok); color: var(--wq-white); -webkit-text-fill-color: var(--wq-white); }
.wq-btn--danger { background: transparent; border-color: var(--wq-danger-border); color: var(--wq-danger); }
.wq-btn--danger:hover { background: var(--wq-danger); border-color: var(--wq-danger); color: var(--wq-white); }

/* Maten. */
.wq-btn--sm    { padding: 7px 15px; font-size: var(--wq-fs-xs); }
.wq-btn--lg    { padding: 15px 32px; font-size: var(--wq-fs-body); }
.wq-btn--block { display: flex; width: 100%; }

/* Knoppenrij. */
.wq-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wq-sp-3);
    align-items: center;
}
.wq-btn-group--center { justify-content: center; }

@media (max-width: 480px) {
    .wq-btn-group { flex-direction: column; align-items: stretch; }
    .wq-btn-group .wq-btn { width: 100%; }
}


/* ============================================================================
   BADGES
   ============================================================================ */

.wq-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--wq-fs-micro);
    font-weight: var(--wq-fw-bold);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: var(--wq-r-xs);
    white-space: nowrap;
}

.wq-badge--coral   { color: var(--wq-coral-dark); background: var(--wq-coral-08); border-color: var(--wq-coral-25); }
.wq-badge--neutral { color: var(--wq-text-muted); background: var(--wq-border-light); border-color: var(--wq-border); }
.wq-badge--dark    { color: var(--wq-white); background: var(--wq-ink); border-color: var(--wq-ink); }
.wq-badge--ok      { color: var(--wq-ok); background: var(--wq-ok-bg); border-color: var(--wq-ok-border); }
.wq-badge--warn    { color: var(--wq-warn); background: var(--wq-warn-bg); border-color: var(--wq-warn-border); }
.wq-badge--danger  { color: var(--wq-danger); background: var(--wq-danger-bg); border-color: var(--wq-danger-border); }
.wq-badge--info    { color: var(--wq-info); background: var(--wq-info-bg); border-color: var(--wq-info-border); }

/* Pill-variant: sectielabel in de vorm van een afgeronde badge. */
.wq-badge--pill {
    border-radius: var(--wq-r-pill);
    padding: 5px 16px;
    letter-spacing: var(--wq-ls-kicker);
}

/* Cijferbadge, bijvoorbeeld een aantal in de navigatie. */
.wq-badge--count {
    font-family: var(--wq-font-mono);
    text-transform: none;
    letter-spacing: 0;
    padding: 1px 7px;
}


/* ============================================================================
   KAARTEN
   ----------------------------------------------------------------------------
   Eén kaartvorm voor alle drie de sites: wit vlak, zachte schaduw, 12px
   hoeken. Een accentrand geeft nadruk — kies er één per pagina, niet drie.
   ============================================================================ */

.wq-card {
    position: relative;
    background: var(--wq-surface);
    border: 1px solid var(--wq-border-light);
    border-radius: var(--wq-r-lg);
    padding: var(--wq-sp-8);
    box-shadow: var(--wq-shadow-sm);
    transition: box-shadow var(--wq-t), transform var(--wq-t), border-color var(--wq-t);
}

/* Reageert op de muis — alleen voor kaarten die een link zijn. */
.wq-card--interactive:hover {
    box-shadow: var(--wq-shadow-lg);
    transform: translateY(-3px);
    border-color: var(--wq-border);
}

/* Accentranden. */
.wq-card--accent-top    { border-top: 3px solid var(--wq-coral); }
.wq-card--accent-left   { border-left: 4px solid var(--wq-slate); }
.wq-card--accent-left:hover { border-left-color: var(--wq-coral); }
.wq-card--accent-bottom { border-bottom: 3px solid var(--wq-coral); }

/* Uitgelicht, bijvoorbeeld het middelste prijspakket. */
.wq-card--featured {
    border: 2px solid var(--wq-coral);
    box-shadow: var(--wq-shadow);
}

/* Kaart op een donkere sectie. */
.wq-card--dark {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--wq-border-dark);
    box-shadow: none;
    color: var(--wq-text-on-dark);
}

.wq-card--flush { padding: 0; overflow: hidden; }
.wq-card--tight { padding: var(--wq-sp-5); }

.wq-card-title { margin-bottom: var(--wq-sp-2); }
.wq-card-text  { color: var(--wq-text-muted); margin: 0; }
.wq-card-foot  { margin-top: var(--wq-sp-5); padding-top: var(--wq-sp-4); border-top: 1px solid var(--wq-border-light); }


/* ============================================================================
   ICONEN
   ----------------------------------------------------------------------------
   Plat koraal in een zacht vierkant. Geen gradients: die vallen uit elkaar op
   kleine maten en zijn niet reproduceerbaar in print of e-mail.
   ============================================================================ */

.wq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    font-size: 19px;
    color: var(--wq-coral);
    background: var(--wq-coral-08);
    border-radius: var(--wq-r-md);
    margin-bottom: var(--wq-sp-4);
}

.wq-icon--slate  { color: var(--wq-slate); background: var(--wq-border-light); }
.wq-icon--solid  { color: var(--wq-white); background: var(--wq-coral); }
.wq-icon--round  { border-radius: var(--wq-r-pill); }
.wq-icon--sm     { width: 34px; height: 34px; font-size: 15px; margin-bottom: var(--wq-sp-3); }
.wq-icon--lg     { width: 58px; height: 58px; font-size: 24px; }
.wq-icon--bare   { width: auto; height: auto; background: none; border-radius: 0; }

/* Icoon op een donkere sectie. */
.wq-on-dark .wq-icon,
.wq-card--dark .wq-icon {
    color: var(--wq-coral-light);
    background: rgba(254, 86, 74, 0.14);
}


/* ============================================================================
   STAPPEN
   ----------------------------------------------------------------------------
   "Hoe werkt het" — genummerde stappen in één aaneengesloten blok, zoals op
   ITPrijzen.nl. Rustiger dan drie losse kaarten.
   ============================================================================ */

.wq-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    background: var(--wq-surface);
    border: 1px solid var(--wq-border);
    border-radius: var(--wq-r-lg);
    overflow: hidden;
    box-shadow: var(--wq-shadow);
}

.wq-step {
    padding: var(--wq-sp-8);
    border-right: 1px solid var(--wq-border-light);
}
.wq-step:last-child { border-right: none; }

.wq-step-num {
    display: flex;
    align-items: center;
    gap: var(--wq-sp-2);
    font-family: var(--wq-font-mono);
    font-size: var(--wq-fs-xs);
    font-weight: var(--wq-fw-medium);
    letter-spacing: 1px;
    color: var(--wq-coral-dark);
    margin-bottom: var(--wq-sp-5);
}
.wq-step-num::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--wq-border);
}

.wq-step-title { margin-bottom: var(--wq-sp-2); }
.wq-step-text  { color: var(--wq-text-muted); font-size: var(--wq-fs-sm); margin: 0; }

@media (max-width: 768px) {
    .wq-step { border-right: none; border-bottom: 1px solid var(--wq-border-light); }
    .wq-step:last-child { border-bottom: none; }
}


/* ============================================================================
   FORMULIEREN
   ============================================================================ */

.wq-field { margin-bottom: var(--wq-sp-5); }

.wq-label {
    display: block;
    font-size: var(--wq-fs-micro);
    font-weight: var(--wq-fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--wq-text-muted);
    margin-bottom: var(--wq-sp-2);
}
.wq-label .wq-req { color: var(--wq-coral); }
.wq-label .wq-opt {
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--wq-fw-regular);
    color: var(--wq-text-faint);
}

.wq-input,
.wq-select,
.wq-textarea {
    display: block;
    width: 100%;
    padding: 11px 13px;
    font-size: var(--wq-fs-sm);
    color: var(--wq-text);
    background: var(--wq-surface-alt);
    border: 1px solid #D0D4D9;
    border-radius: var(--wq-r);
    outline: none;
    transition: border-color var(--wq-t-fast), box-shadow var(--wq-t-fast), background var(--wq-t-fast);
}

.wq-input:focus,
.wq-select:focus,
.wq-textarea:focus {
    background: var(--wq-white);
    border-color: var(--wq-coral);
    box-shadow: var(--wq-ring);
}

.wq-input::placeholder,
.wq-textarea::placeholder { color: var(--wq-text-faint); }

.wq-textarea { resize: vertical; min-height: 110px; line-height: var(--wq-lh-body); }

.wq-select {
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7076' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px;
    cursor: pointer;
}

.wq-input[aria-invalid="true"],
.wq-textarea[aria-invalid="true"] { border-color: var(--wq-danger); }

.wq-field-hint  { font-size: var(--wq-fs-xs); color: var(--wq-text-faint); margin-top: var(--wq-sp-1); }
.wq-field-error { font-size: var(--wq-fs-xs); color: var(--wq-danger); margin-top: var(--wq-sp-1); }

/* Keuzevakje en keuzerondje. */
.wq-check {
    display: flex;
    align-items: flex-start;
    gap: var(--wq-sp-3);
    font-size: var(--wq-fs-sm);
    cursor: pointer;
    margin-bottom: var(--wq-sp-3);
}
.wq-check input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--wq-coral);
    flex-shrink: 0;
    cursor: pointer;
}

/* Formulierkaart: het aanvraagblok. */
.wq-form-card {
    background: var(--wq-surface);
    border: 1px solid var(--wq-border-light);
    border-top: 4px solid var(--wq-coral);
    border-radius: var(--wq-r-lg);
    padding: var(--wq-sp-10);
    box-shadow: var(--wq-shadow);
}

@media (max-width: 560px) {
    .wq-form-card { padding: var(--wq-sp-6); }
}


/* ============================================================================
   NAVIGATIE
   ----------------------------------------------------------------------------
   Het vaste merkpatroon voor alle drie de sites: donkere balk met een koraal
   streepje eronder, logo links, links in het midden, telefoon en CTA rechts.
   Op ≤1024px wordt alles een drawer.
   ============================================================================ */

.wq-nav {
    position: sticky;
    top: 0;
    z-index: var(--wq-z-nav);
    background: var(--wq-ink-dark);
    border-bottom: 2px solid var(--wq-coral);
    transition: box-shadow var(--wq-t);
}

/* Schaduw pas zodra de pagina gescrold is — wq-nav.js zet deze klasse.
   Boven aan de pagina ligt de balk plat tegen de inhoud aan. */
.wq-nav.is-scrolled { box-shadow: var(--wq-shadow-nav); }

/* Volle breedte, niet gecentreerd in een container. Dat maakt de balk
   strakker: hij ligt als een rand over de pagina in plaats van als een blok
   dat met de inhoud meeloopt.

   Merk links, telefoon in het midden, menu en knop rechts.

   De telefoon staat midden op de balk. Dat werkt doordat het merkblok en
   het rechterblok allebei `flex: 1 1 0` krijgen: ze delen de vrije ruimte
   gelijk, dus wat ertussen staat ligt precies op de middenas — ongeacht
   hoe breed het logo of het menu is.

   Bewust niet absoluut gepositioneerd. Dat centreert ook, maar bij een lang
   menu (wifimeting.nu heeft er zeven) valt de knop dan over de tabs heen.
   Zo blijft alles in de stroom: is er te weinig ruimte, dan schuift de
   telefoon op in plaats van te overlappen. */
.wq-nav-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--wq-sp-8);
    height: var(--wq-nav-h);
    width: 100%;
    padding: 0 var(--wq-sp-8);
}

/* ── Merkblok links ──────────────────────────────────────────────────────── */

.wq-nav-brand {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wq-sp-4);
}
/* Het logo staat altijd op volle dekking — nooit opacity of een filter.
   Hoogte stuurt de maat; de breedte volgt. */
.wq-nav-brand img { height: 36px; width: auto; opacity: 1; filter: none; }

/* Het WeQonnect-logo vóór het woordmerk van een label. Zo staat het
   moedermerk helemaal links en is meteen zichtbaar dat de drie sites bij
   elkaar horen.

   Op ≤1024px vervalt het en blijft alleen het woordmerk staan. Daar telt
   maar één vraag: op welke site ben ik? Bovendien is de ruimte naast de
   knop in het midden en de hamburger dan op. */
.wq-nav-parent {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.wq-nav-parent img {
    height: 30px;
    width: auto;
    opacity: 1;
    filter: none;
}

/* Scheidingslijntje tussen moedermerk en label. */
.wq-nav-divider {
    width: 1px;
    height: 22px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 1024px) {
    .wq-nav-parent,
    .wq-nav-divider { display: none; }
}

/* Woordmerk als tekst (ITPrijzen, WiFimeting). */
.wq-wordmark {
    font-size: 17px;
    font-weight: var(--wq-fw-bold);
    letter-spacing: -0.4px;
    color: var(--wq-white);
}
.wq-wordmark em { font-style: normal; color: var(--wq-coral); }

/* Ondertitel naast het woordmerk, alleen op ruime schermen. */
.wq-nav-tagline {
    display: none;
    padding-left: var(--wq-sp-3);
    border-left: 1px solid var(--wq-border-dark);
    font-size: var(--wq-fs-micro);
    font-weight: var(--wq-fw-medium);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--wq-text-on-dark-f);
}
@media (min-width: 1280px) { .wq-nav-tagline { display: block; } }

/* ── Links ───────────────────────────────────────────────────────────────── */

/* Menu en knop vormen samen het rechterblok. Zelfde flexwaarde als het
   merkblok, zodat de telefoon ertussen op de middenas uitkomt. */
.wq-nav-right {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--wq-sp-6);
}

/* Tabs, geen losse links: 2px tussenruimte en een eigen klikvlak per item.
   Dit is wat de balk strak maakt — de items vormen samen één rij in plaats
   van losse woorden met ruimte ertussen. */
.wq-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Menulinks staan wit op de donkere balk — niet gedempt. De koraal
   onderrand markeert de pagina waar je bent. */
.wq-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    font-size: 13.5px;
    font-weight: var(--wq-fw-medium);
    letter-spacing: 0.1px;
    color: var(--wq-white);
    -webkit-text-fill-color: var(--wq-white);
    white-space: nowrap;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: color var(--wq-t-fast), border-color var(--wq-t-fast),
                background var(--wq-t-fast);
}
.wq-nav-link i,
.wq-nav-link svg { color: currentColor; }

.wq-nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    border-bottom-color: rgba(254, 86, 74, 0.45);
}

.wq-nav-link.is-active {
    border-bottom-color: var(--wq-coral);
}

/* ── Uitklapmenu ─────────────────────────────────────────────────────────── */

.wq-nav-dropdown { position: relative; }

.wq-nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--wq-z-dropdown);
    min-width: 230px;
    padding: var(--wq-sp-2) 0;
    background: var(--wq-ink);
    border-top: 3px solid var(--wq-coral);
    border-radius: var(--wq-r-md);
    box-shadow: var(--wq-shadow-xl), 0 0 0 1px var(--wq-border-dark);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--wq-t-fast), transform var(--wq-t-fast), visibility var(--wq-t-fast);
}
/* Brug zodat de muis het gat tussen tab en menu kan oversteken. */
.wq-nav-menu::before {
    content: '';
    position: absolute;
    top: -8px; left: 0;
    width: 100%; height: 8px;
}
.wq-nav-dropdown:hover > .wq-nav-menu,
.wq-nav-dropdown:focus-within > .wq-nav-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.wq-nav-menu a {
    display: flex;
    align-items: center;
    gap: var(--wq-sp-3);
    padding: 10px var(--wq-sp-5);
    font-size: var(--wq-fs-sm);
    font-weight: var(--wq-fw-medium);
    color: var(--wq-white);
    -webkit-text-fill-color: var(--wq-white);
    border-left: 3px solid transparent;
    transition: background var(--wq-t-fast), padding-left var(--wq-t-fast),
                border-color var(--wq-t-fast);
}
.wq-nav-menu a:hover {
    background: var(--wq-ink-hover);
    padding-left: calc(var(--wq-sp-5) + 4px);
    border-left-color: var(--wq-coral);
}
.wq-nav-menu a.is-active { border-left-color: var(--wq-coral); }
.wq-nav-menu i           { width: 16px; font-size: 13px; color: var(--wq-coral); }

/* Lang menu (de 22 sectoren van WiFimeting) in kolommen. */
.wq-nav-menu--columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    min-width: 440px;
}
.wq-nav-dropdown:hover > .wq-nav-menu--columns { display: grid; }

.wq-nav-chevron { font-size: 9px; transition: transform var(--wq-t-fast); }
.wq-nav-dropdown:hover .wq-nav-chevron { transform: rotate(180deg); }

/* ── Rechterblok: telefoon en CTA ────────────────────────────────────────── */

.wq-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--wq-sp-3);
    flex-shrink: 0;
}

/* Supportknop met telefoonnummer: staat in de middelste kolom, dus midden
   op de balk — ook op mobiel, tussen het logo en de hamburger. Witte tekst,
   koraal icoon. */
/* De middelste plek op de balk. Wat daar staat verschilt per site:
   weqonnect.nl en itprijzen.nl zetten er het telefoonnummer neer,
   wifimeting.nu de knop "Plan een meting". Zie de toelichting bij
   .wq-nav-inner voor hoe het centreren werkt.

   Dit blok blijft ook op mobiel staan, als enige naast het logo en de
   hamburger. Zet er dus neer wat op een telefoon het belangrijkst is. */
.wq-nav-center,
.wq-nav-phone { flex: 0 0 auto; }

.wq-nav-phone,
.wq-nav-phone:hover,
.wq-nav-phone:focus,
.wq-nav-phone:visited {
    color: var(--wq-white);
    -webkit-text-fill-color: var(--wq-white);
}
.wq-nav-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--wq-sp-2);
    padding: 8px 15px;
    font-size: 13.5px;
    font-weight: var(--wq-fw-semi);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--wq-border-dark);
    border-radius: var(--wq-r);
    white-space: nowrap;
    transition: background var(--wq-t-fast), border-color var(--wq-t-fast);
}
.wq-nav-phone:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--wq-coral); }
.wq-nav-phone i     { color: var(--wq-coral); font-size: 13px; }

/* De knop in de balk volgt de compacte maat van de tabs. */
.wq-nav-actions .wq-btn { padding: 9px 18px; font-size: 13.5px; }

/* ── Hamburger ───────────────────────────────────────────────────────────── */

.wq-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    background: none;
    border: none;
    border-radius: var(--wq-r);
    cursor: pointer;
}
.wq-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--wq-white);
    border-radius: 2px;
    transition: transform var(--wq-t-fast), opacity var(--wq-t-fast);
}
.wq-burger:hover { background: rgba(255, 255, 255, 0.08); }
.wq-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wq-burger.is-open span:nth-child(2) { opacity: 0; }
.wq-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Drawer ──────────────────────────────────────────────────────────────── */

.wq-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--wq-z-overlay);
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--wq-t-slow), visibility 0s linear 0.35s;
}
.wq-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--wq-t-slow), visibility 0s;
}

.wq-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: -340px;
    z-index: var(--wq-z-drawer);
    flex-direction: column;
    width: 320px;
    max-width: 88vw;
    height: 100dvh;
    background: var(--wq-ink-dark);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.6);
    visibility: hidden;
    transition: right var(--wq-t-slow), visibility 0s linear 0.35s;
}
.wq-drawer.is-open {
    right: 0;
    visibility: visible;
    transition: right var(--wq-t-slow), visibility 0s;
}

.wq-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wq-sp-5) var(--wq-sp-6);
    background: var(--wq-ink);
    border-bottom: 1px solid var(--wq-border-dark);
    flex-shrink: 0;
}
.wq-drawer-head span {
    font-size: var(--wq-fs-micro);
    font-weight: var(--wq-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--wq-ls-kicker);
    color: var(--wq-white);
}
.wq-drawer-close {
    background: none;
    border: none;
    color: var(--wq-white);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    transition: color var(--wq-t-fast), transform var(--wq-t-fast);
}
.wq-drawer-close:hover { color: var(--wq-coral); transform: rotate(90deg); }

.wq-drawer-links { list-style: none; margin: 0; padding: 0; }

/* Drawerlinks staan wit. De koraal rand links markeert hover en actief,
   zodat de tekst overal leesbaar blijft. */
.wq-drawer-link,
.wq-drawer-link:hover,
.wq-drawer-link:focus,
.wq-drawer-link:visited,
.wq-drawer-link.is-active {
    color: var(--wq-white);
    -webkit-text-fill-color: var(--wq-white);
}
.wq-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--wq-sp-4) var(--wq-sp-6);
    font-size: var(--wq-fs-body);
    font-weight: var(--wq-fw-semi);
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--wq-border-dark);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background var(--wq-t-fast), border-color var(--wq-t-fast);
}
.wq-drawer-link:hover,
.wq-drawer-link.is-active {
    background: var(--wq-ink);
    border-left-color: var(--wq-coral);
}
.wq-drawer-link i         { font-size: 11px; color: var(--wq-coral); transition: transform var(--wq-t-fast); }
.wq-drawer-link.is-open i { transform: rotate(180deg); }

/* Submenu in de drawer: via display, nooit via opacity — anders vecht
   de desktop-hover met touch. */
.wq-drawer-sub {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #13161A;
}
.wq-drawer-sub.is-open { display: block; }
.wq-drawer-sub a,
.wq-drawer-sub a:hover,
.wq-drawer-sub a:focus,
.wq-drawer-sub a:visited {
    color: var(--wq-white);
    -webkit-text-fill-color: var(--wq-white);
}
.wq-drawer-sub a {
    display: block;
    padding: 12px var(--wq-sp-6) 12px var(--wq-sp-10);
    font-size: var(--wq-fs-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background var(--wq-t-fast), padding-left var(--wq-t-fast);
}
.wq-drawer-sub a::before { content: '\203A'; color: var(--wq-coral); margin-right: var(--wq-sp-3); }
.wq-drawer-sub a:hover {
    background: var(--wq-ink);
    padding-left: calc(var(--wq-sp-10) + 4px);
}
.wq-drawer-sub a i { color: var(--wq-coral); }

.wq-drawer-foot {
    margin-top: auto;
    padding: var(--wq-sp-6);
    border-top: 1px solid var(--wq-border-dark);
    display: flex;
    flex-direction: column;
    gap: var(--wq-sp-3);
}

/* ── Nav op mobiel ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .wq-nav-inner     { gap: var(--wq-sp-4); padding: 0 var(--wq-sp-5); }
    .wq-nav-right     { display: none; }

    /* De hamburger wordt een even brede strook als het merkblok, met de
       streepjes rechts erin. Zo komt de telefoon er precies tussenin te
       staan: midden op de balk, niet midden in de restruimte. */
    .wq-burger        {
        display: flex;
        flex: 1 1 0;
        width: auto;
        align-items: flex-end;
        padding: 0;
        background: none;
    }
    .wq-burger span   { width: 24px; }
    .wq-burger:hover  { background: none; }
    .wq-burger:hover span { background: var(--wq-coral-light); }
    .wq-drawer        { display: flex; }
    .wq-nav-brand img { height: 28px; }
}

/* Op een smal scherm blijft het nummer staan; alleen de ruimte eromheen
   krimpt. Het telefoonnummer is op mobiel juist het belangrijkste element
   van de balk, dus dat verbergen we niet. */
@media (max-width: 560px) {
    .wq-nav-inner     { gap: var(--wq-sp-3); padding: 0 var(--wq-sp-4); }
    .wq-nav-phone     { padding: 6px 10px; font-size: 12.5px; gap: 6px; }
    .wq-nav-brand img { height: 24px; }
    .wq-wordmark      { font-size: 14px; }
}

@media (max-width: 480px) {
    .wq-nav-center .wq-btn { padding: 7px 12px; font-size: 12.5px; }
}

@media (max-width: 380px) {
    .wq-nav-phone i { display: none; }
    .wq-nav-center .wq-btn i { display: none; }
    .wq-wordmark { font-size: 13px; }
}


/* ============================================================================
   MERKONDERSCHRIFT
   ----------------------------------------------------------------------------
   Het lockup dat de twee labels aan het hoofdmerk verbindt. Staat in de nav
   van de labels en in elke footer. Dit is wat de drie sites tot één familie
   maakt — dus altijd dezelfde woorden, dezelfde plek.
   ============================================================================ */

.wq-endorse {
    display: inline-flex;
    align-items: center;
    gap: var(--wq-sp-2);
    font-size: var(--wq-fs-xs);
    font-weight: var(--wq-fw-medium);
    color: var(--wq-text-muted);
    white-space: nowrap;
}
.wq-endorse strong { font-weight: var(--wq-fw-bold); color: var(--wq-slate); }
.wq-endorse img    { height: 17px; width: auto; }

.wq-endorse--on-dark        { color: var(--wq-text-on-dark-f); }
.wq-endorse--on-dark strong { color: var(--wq-text-on-dark); }

/* Niet in de navigatiebalk: daar werd het een tweede merknaam naast het
   woordmerk en dat maakt de balk druk. Het merkverband staat in de footer,
   waar er ruimte voor is. */


/* ============================================================================
   FOOTER
   ----------------------------------------------------------------------------
   Vier kolommen voor marketingsites, een compacte regel voor gereedschap.
   Zelfde donkere vlak als de nav: de pagina staat tussen twee merkbalken.
   ============================================================================ */

.wq-footer {
    background: var(--wq-ink-dark);
    color: var(--wq-text-on-dark-m);
    border-top: 3px solid var(--wq-coral);
    font-size: var(--wq-fs-sm);
}

.wq-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--wq-sp-10);
    max-width: var(--wq-maxw);
    margin: 0 auto;
    padding: var(--wq-sp-16) var(--wq-gutter) var(--wq-sp-12);
}

.wq-footer h4 {
    font-size: var(--wq-fs-xs);
    font-weight: var(--wq-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--wq-ls-kicker);
    color: var(--wq-white);
    margin: 0 0 var(--wq-sp-5);
}

.wq-footer p   { margin: 0 0 var(--wq-sp-4); line-height: 1.7; }
.wq-footer ul  { list-style: none; margin: 0; padding: 0; }
.wq-footer li  { margin-bottom: var(--wq-sp-3); }

.wq-footer a {
    color: var(--wq-text-on-dark-m);
    transition: color var(--wq-t-fast);
}
.wq-footer a:hover { color: var(--wq-coral-light); }

.wq-footer-brand img { height: 34px; margin-bottom: var(--wq-sp-5); }

/* Contactregel met icoon. */
.wq-footer-contact {
    display: flex;
    align-items: flex-start;
    gap: var(--wq-sp-3);
    margin-bottom: var(--wq-sp-3);
}
.wq-footer-contact i { color: var(--wq-coral); width: 15px; margin-top: 5px; flex-shrink: 0; }

/* De labels van WeQonnect, zichtbaar in elke footer. */
.wq-footer-family {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wq-sp-2);
    margin-top: var(--wq-sp-4);
}
.wq-footer-family a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: var(--wq-fs-xs);
    font-weight: var(--wq-fw-medium);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--wq-border-dark);
    border-radius: var(--wq-r-sm);
    transition: background var(--wq-t-fast), border-color var(--wq-t-fast);
}
.wq-footer-family a:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--wq-coral); }

.wq-footer-social {
    display: flex;
    gap: var(--wq-sp-3);
    margin-top: var(--wq-sp-5);
}
.wq-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--wq-r-sm);
    transition: background var(--wq-t-fast), color var(--wq-t-fast);
}
.wq-footer-social a:hover { background: var(--wq-coral); color: var(--wq-white); }

/* Onderrand. */
.wq-footer-bottom {
    border-top: 1px solid var(--wq-border-dark);
    font-size: var(--wq-fs-xs);
    color: var(--wq-text-on-dark-f);
}
.wq-footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wq-sp-4);
    max-width: var(--wq-maxw);
    margin: 0 auto;
    padding: var(--wq-sp-5) var(--wq-gutter);
}
.wq-footer-legal { display: flex; gap: var(--wq-sp-4); flex-wrap: wrap; }

/* Compacte variant: één regel, voor de configurator en prijstabellen. */
.wq-footer--compact .wq-footer-bottom-inner { padding: var(--wq-sp-4) var(--wq-gutter); }
.wq-footer--compact { border-top-width: 2px; }

@media (max-width: 1024px) {
    .wq-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wq-sp-8); padding-top: var(--wq-sp-12); }
}
@media (max-width: 600px) {
    .wq-footer-grid { grid-template-columns: minmax(0, 1fr); }
    .wq-footer-bottom-inner { flex-direction: column; align-items: flex-start; text-align: left; }
}


/* ============================================================================
   HERO
   ============================================================================ */

.wq-hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--wq-section-y) * 1.4) 0 var(--wq-section-y);
    background:
        radial-gradient(circle at 82% 18%, rgba(254, 86, 74, 0.20), transparent 55%),
        linear-gradient(180deg, #3A3F45 0%, var(--wq-ink) 100%);
    color: var(--wq-text-on-dark);
}

/* Variant met foto. Geen background-attachment: fixed — dat hapert op iOS. */
.wq-hero--image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.wq-hero--image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(34, 34, 34, 0.82), rgba(51, 56, 61, 0.88));
}
.wq-hero--image > * { position: relative; z-index: 1; }

/* Licht alternatief, voor subpagina's. */
.wq-hero--light {
    background: var(--wq-surface);
    border-bottom: 1px solid var(--wq-border);
    color: var(--wq-text);
}

.wq-hero-content { max-width: 720px; }
.wq-hero--center .wq-hero-content { max-width: 780px; margin: 0 auto; text-align: center; }


/* ============================================================================
   PRIJSKAARTEN
   ============================================================================ */

.wq-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--wq-sp-6);
    align-items: stretch;
}

.wq-price {
    display: flex;
    flex-direction: column;
    background: var(--wq-surface);
    border: 1px solid var(--wq-border);
    border-radius: var(--wq-r-lg);
    padding: var(--wq-sp-8);
    box-shadow: var(--wq-shadow-sm);
    transition: box-shadow var(--wq-t), transform var(--wq-t);
}
.wq-price:hover { box-shadow: var(--wq-shadow-lg); transform: translateY(-3px); }

.wq-price--featured {
    border: 2px solid var(--wq-coral);
    box-shadow: var(--wq-shadow);
}

.wq-price-label  { margin-bottom: var(--wq-sp-2); }
.wq-price-amount {
    font-family: var(--wq-font-mono);
    font-size: 34px;
    font-weight: var(--wq-fw-medium);
    color: var(--wq-ink);
    letter-spacing: -1px;
    line-height: 1.1;
    margin: var(--wq-sp-4) 0 var(--wq-sp-1);
}
.wq-price-unit   { font-size: var(--wq-fs-xs); color: var(--wq-text-faint); }

.wq-price-list   { list-style: none; margin: var(--wq-sp-6) 0; padding: 0; flex: 1; }
.wq-price-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--wq-sp-3);
    font-size: var(--wq-fs-sm);
    margin-bottom: var(--wq-sp-3);
}
.wq-price-list i { color: var(--wq-ok); margin-top: 4px; font-size: 12px; flex-shrink: 0; }


/* ============================================================================
   VEELGESTELDE VRAGEN
   ============================================================================ */

.wq-faq { max-width: var(--wq-maxw-narrow); margin: 0 auto; }

.wq-faq-item {
    background: var(--wq-surface);
    border: 1px solid var(--wq-border);
    border-radius: var(--wq-r-md);
    margin-bottom: var(--wq-sp-3);
    overflow: hidden;
    transition: border-color var(--wq-t), box-shadow var(--wq-t);
}
.wq-faq-item[open] { border-color: var(--wq-coral-25); box-shadow: var(--wq-shadow-sm); }

.wq-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wq-sp-4);
    padding: var(--wq-sp-5) var(--wq-sp-6);
    font-size: var(--wq-fs-body);
    font-weight: var(--wq-fw-semi);
    color: var(--wq-slate);
    cursor: pointer;
    list-style: none;
    transition: color var(--wq-t-fast);
}
.wq-faq-q::-webkit-details-marker { display: none; }
.wq-faq-q:hover { color: var(--wq-coral); }
.wq-faq-q::after {
    content: '+';
    flex-shrink: 0;
    font-size: 20px;
    font-weight: var(--wq-fw-regular);
    color: var(--wq-coral);
    transition: transform var(--wq-t);
}
.wq-faq-item[open] .wq-faq-q::after { transform: rotate(45deg); }

.wq-faq-a {
    padding: 0 var(--wq-sp-6) var(--wq-sp-6);
    color: var(--wq-text-muted);
}
.wq-faq-a p:last-child { margin-bottom: 0; }


/* ============================================================================
   TABEL
   ============================================================================ */

.wq-table-wrap {
    overflow-x: auto;
    background: var(--wq-surface);
    border: 1px solid var(--wq-border);
    border-radius: var(--wq-r-lg);
    box-shadow: var(--wq-shadow-sm);
}

.wq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wq-fs-sm);
}

.wq-table th {
    position: sticky;
    top: 0;
    padding: var(--wq-sp-3) var(--wq-sp-4);
    font-size: var(--wq-fs-micro);
    font-weight: var(--wq-fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    text-align: left;
    color: var(--wq-text-muted);
    background: var(--wq-bg-soft);
    border-bottom: 1px solid var(--wq-border);
    white-space: nowrap;
}

.wq-table td {
    padding: var(--wq-sp-3) var(--wq-sp-4);
    border-bottom: 1px solid var(--wq-border-light);
    vertical-align: middle;
}
.wq-table tbody tr:last-child td { border-bottom: none; }
.wq-table tbody tr:hover         { background: var(--wq-row-hover); }

.wq-table .wq-num {
    font-family: var(--wq-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}


/* ============================================================================
   MELDING
   ============================================================================ */

.wq-note {
    display: flex;
    align-items: flex-start;
    gap: var(--wq-sp-4);
    padding: var(--wq-sp-5);
    border: 1px solid var(--wq-border);
    border-left: 4px solid var(--wq-slate);
    border-radius: var(--wq-r);
    background: var(--wq-surface);
    font-size: var(--wq-fs-sm);
}
.wq-note i       { font-size: 17px; color: var(--wq-slate); margin-top: 2px; flex-shrink: 0; }
.wq-note p:last-child { margin-bottom: 0; }

.wq-note--info   { border-left-color: var(--wq-info); background: var(--wq-info-bg); }
.wq-note--info i { color: var(--wq-info); }
.wq-note--ok     { border-left-color: var(--wq-ok); background: var(--wq-ok-bg); }
.wq-note--ok i   { color: var(--wq-ok); }
.wq-note--warn   { border-left-color: var(--wq-amber); background: var(--wq-warn-bg); }
.wq-note--warn i { color: var(--wq-warn); }
.wq-note--danger   { border-left-color: var(--wq-danger); background: var(--wq-danger-bg); }
.wq-note--danger i { color: var(--wq-danger); }


/* ============================================================================
   CTA-BALK
   ----------------------------------------------------------------------------
   De afsluitende oproep onderaan een pagina. Zelfde donkere vlak als nav en
   footer, zodat de pagina visueel netjes dichtklapt.
   ============================================================================ */

.wq-cta {
    padding: var(--wq-section-y) 0;
    background:
        radial-gradient(circle at 18% 82%, rgba(254, 86, 74, 0.18), transparent 55%),
        linear-gradient(180deg, var(--wq-ink) 0%, var(--wq-ink-dark) 100%);
    color: var(--wq-text-on-dark);
    text-align: center;
}
.wq-cta .wq-h2   { color: var(--wq-white); }
.wq-cta .wq-lead { color: var(--wq-text-on-dark-m); margin-left: auto; margin-right: auto; }


/* ============================================================================
   LOGOBALK
   ============================================================================ */

.wq-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--wq-sp-10);
    padding: var(--wq-sp-8) 0;
}
.wq-logos img {
    height: 26px;
    width: auto;
    opacity: 0.5;
    filter: grayscale(1);
    transition: opacity var(--wq-t), filter var(--wq-t);
}
.wq-logos img:hover { opacity: 1; filter: grayscale(0); }


/* ============================================================================
   LOGO
   ----------------------------------------------------------------------------
   Op donkere vlakken de witte variant, op lichte de gewone. Altijd via een
   vaste hoogte — nooit via breedte, anders verspringt de balk per site.
   ============================================================================ */

/* Volle dekking, altijd. Het bronbestand assets/wq-logo-wit.png is een
   dekkend wit woordmerk met koraal/amber bogen op een transparante
   achtergrond — geen opacity of filter eroverheen.

   Let op: de bestanden weqonnect-wit.png en _weqonnect-logo.png die bij
   ITPrijzen stonden zijn vervaagde watermerkversies. Niet gebruiken. */
.wq-logo,
.wq-nav-brand .wq-logo {
    height: 38px;
    width: auto;
    opacity: 1;
    filter: none;
}
.wq-logo--sm,
.wq-nav-brand .wq-logo--sm { height: 28px; }
.wq-logo--lg,
.wq-nav-brand .wq-logo--lg { height: 46px; }

/* In de footer, in plaats van de geschreven merknaam. */
.wq-footer-logo {
    height: 40px;
    width: auto;
    opacity: 1;
    filter: none;
    margin-bottom: var(--wq-sp-5);
}


/* ============================================================================
   FOTO
   ----------------------------------------------------------------------------
   Eén behandeling voor alle beeld: zelfde hoeken, zelfde schaduw, zelfde
   verhouding. Zonder dit gaan foto's op drie sites alle kanten op.

   Belangrijk: geen zware grijsfilter over het beeld. De huidige hero's van
   weqonnect.nl leggen 80% grijs over de foto, waardoor de mensen erop vrijwel
   verdwijnen. Een gradient die alleen onderaan donker is houdt de tekst
   leesbaar en de foto zichtbaar — en dat is precies wat een site vertrouwd
   en persoonlijk maakt.
   ============================================================================ */

.wq-photo {
    display: block;
    width: 100%;
    border-radius: var(--wq-r-lg);
    overflow: hidden;
    background: var(--wq-bg-soft);
    box-shadow: var(--wq-shadow);
}
.wq-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vaste verhoudingen, zodat een rij foto's nooit scheef loopt. */
.wq-photo--wide     { aspect-ratio: 16 / 9; }
.wq-photo--photo    { aspect-ratio: 4 / 3; }
.wq-photo--square   { aspect-ratio: 1 / 1; }
.wq-photo--portrait { aspect-ratio: 3 / 4; }

/* Koraal randje onderaan: verbindt het beeld met de huisstijl zonder filter. */
.wq-photo--framed { border-bottom: 4px solid var(--wq-coral); }

/* Beeld met tekst erover. De gradient is onderaan zwaar en bovenaan vrijwel
   weg, zodat het gezicht op de foto zichtbaar blijft. */
.wq-photo-caption {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 300px;
    padding: var(--wq-sp-8);
    border-radius: var(--wq-r-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: var(--wq-white);
}
.wq-photo-caption::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(34, 34, 34, 0.05) 0%,
        rgba(34, 34, 34, 0.35) 45%,
        rgba(34, 34, 34, 0.88) 100%);
}
.wq-photo-caption > * { position: relative; z-index: 1; }


/* ============================================================================
   FOTO NAAST TEKST
   ----------------------------------------------------------------------------
   Het werkpaard voor de dienstenpagina's van WeQonnect: een echte foto van
   het werk of de mensen, naast de uitleg. Veel persoonlijker dan een rij
   iconen, en het beeldmateriaal staat er al.
   ============================================================================ */

.wq-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wq-sp-12);
    align-items: center;
}

/* Foto rechts in plaats van links. Wissel dit af per sectie. */
.wq-split--flip .wq-split-media { order: 2; }

.wq-split-body { max-width: 56ch; }

@media (max-width: 860px) {
    .wq-split { grid-template-columns: minmax(0, 1fr); gap: var(--wq-sp-8); }
    .wq-split--flip .wq-split-media { order: 0; }
}


/* ============================================================================
   PERSOON
   ----------------------------------------------------------------------------
   Een naam, een gezicht en een doorkiesnummer. Voor het Nederlandse MKB is
   dit het sterkste vertrouwenssignaal op een pagina: je ziet wie je aan de
   lijn krijgt.
   ============================================================================ */

.wq-person {
    display: flex;
    align-items: center;
    gap: var(--wq-sp-5);
    padding: var(--wq-sp-6);
    background: var(--wq-surface);
    border: 1px solid var(--wq-border-light);
    border-left: 4px solid var(--wq-coral);
    border-radius: var(--wq-r-lg);
    box-shadow: var(--wq-shadow-sm);
}

.wq-person-photo {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: var(--wq-r-pill);
    object-fit: cover;
    object-position: center top;
    background: var(--wq-bg-soft);
}

.wq-person-name {
    font-size: var(--wq-fs-h4);
    font-weight: var(--wq-fw-bold);
    color: var(--wq-slate);
    margin: 0;
}
.wq-person-role {
    font-size: var(--wq-fs-sm);
    color: var(--wq-text-muted);
    margin: 0 0 var(--wq-sp-2);
}
.wq-person-contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wq-sp-4);
    font-size: var(--wq-fs-sm);
    font-weight: var(--wq-fw-semi);
}
.wq-person-contact a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wq-coral-dark);
}
.wq-person-contact a:hover { color: var(--wq-coral); }
.wq-person-contact i       { font-size: 12px; }

/* Als kaart in een raster: gezicht boven de naam. */
.wq-person--stacked {
    flex-direction: column;
    align-items: flex-start;
    border-left-width: 1px;
    border-top: 4px solid var(--wq-coral);
}
.wq-person--stacked .wq-person-photo { width: 92px; height: 92px; }

/* Op een donkere sectie. */
.wq-person--on-dark {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--wq-border-dark);
    border-left-color: var(--wq-coral);
    box-shadow: none;
}
.wq-person--on-dark .wq-person-name      { color: var(--wq-white); }
.wq-person--on-dark .wq-person-role      { color: var(--wq-text-on-dark-m); }
.wq-person--on-dark .wq-person-contact a { color: var(--wq-coral-light); }

@media (max-width: 480px) {
    .wq-person { flex-direction: column; align-items: flex-start; }
}


/* ============================================================================
   KLANTVERHAAL
   ----------------------------------------------------------------------------
   Een citaat met een gezicht of een klantlogo erbij. Zonder beeld is een
   quote vrijblijvend; met beeld wordt het een referentie.
   ============================================================================ */

.wq-quote {
    display: flex;
    flex-direction: column;
    gap: var(--wq-sp-5);
    padding: var(--wq-sp-8);
    background: var(--wq-surface);
    border: 1px solid var(--wq-border-light);
    border-radius: var(--wq-r-lg);
    box-shadow: var(--wq-shadow-sm);
}

.wq-quote-text {
    font-size: var(--wq-fs-lead);
    line-height: 1.7;
    color: var(--wq-text);
    margin: 0;
}
/* Groot aanhalingsteken in koraal, als rustig accent. */
.wq-quote-text::before {
    content: '\201C';
    display: block;
    font-size: 48px;
    font-weight: var(--wq-fw-heavy);
    line-height: 0.6;
    color: var(--wq-coral-25);
    margin-bottom: var(--wq-sp-3);
}

.wq-quote-by {
    display: flex;
    align-items: center;
    gap: var(--wq-sp-4);
    margin-top: auto;
    padding-top: var(--wq-sp-4);
    border-top: 1px solid var(--wq-border-light);
}
.wq-quote-by img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--wq-r-pill);
    object-fit: cover;
    background: var(--wq-bg-soft);
}
/* Klantlogo in plaats van portret. */
.wq-quote-by img.wq-quote-logo {
    width: auto;
    height: 32px;
    border-radius: 0;
    object-fit: contain;
}
.wq-quote-name { font-size: var(--wq-fs-sm); font-weight: var(--wq-fw-bold); color: var(--wq-slate); }
.wq-quote-org  { font-size: var(--wq-fs-xs); color: var(--wq-text-muted); }


/* ============================================================================
   HERO MET FOTO ERNAAST
   ----------------------------------------------------------------------------
   Variant op .wq-hero waarbij het beeld naast de tekst staat in plaats van
   erachter. De foto blijft volledig zichtbaar — geen overlay nodig.
   ============================================================================ */

.wq-hero--split {
    background: var(--wq-surface);
    border-bottom: 1px solid var(--wq-border);
    color: var(--wq-text);
    padding: var(--wq-section-y) 0;
}
.wq-hero--split .wq-display,
.wq-hero--split .wq-h1 { color: var(--wq-ink); }

.wq-hero-split-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--wq-sp-12);
    align-items: center;
}

@media (max-width: 860px) {
    .wq-hero-split-grid { grid-template-columns: minmax(0, 1fr); gap: var(--wq-sp-8); }
}


/* ============================================================================
   VERTROUWENSREGEL
   ----------------------------------------------------------------------------
   Kleine, controleerbare feiten onder de hero-knoppen. Geen loze claims.
   ============================================================================ */

.wq-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wq-sp-6);
    margin-top: var(--wq-sp-8);
    padding-top: var(--wq-sp-6);
    border-top: 1px solid var(--wq-border);
    font-size: var(--wq-fs-sm);
    color: var(--wq-text-muted);
}
.wq-trust span { display: inline-flex; align-items: center; gap: var(--wq-sp-2); }
.wq-trust i    { color: var(--wq-coral); }

.wq-on-dark .wq-trust,
.wq-hero .wq-trust {
    border-top-color: var(--wq-border-dark);
    color: var(--wq-text-on-dark-m);
}


/* ============================================================================
   COLLEGA-BLOK IN DE AFSLUITENDE CTA
   ----------------------------------------------------------------------------
   Dit patroon staat al op elke WeQonnect-pagina en is het meest persoonlijke
   element van de site: een uitnodiging in de ik-vorm, naast de foto van de
   collega die je daadwerkelijk spreekt.

       "Jack maakt graag kennis met je!"   +   foto van Jack Gerrits

   Elke pagina heeft er een eigen portret bij staan — Jack op de homepage en
   projecten, Tristan op de technische diensten, Selina op telefonie. Die
   koppeling blijft zoals hij is; alleen de opmaak wordt die van de huisstijl.
   ============================================================================ */

.wq-cta-person {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--wq-sp-12);
    align-items: end;
    max-width: var(--wq-maxw);
    margin: 0 auto;
    padding: 0 var(--wq-gutter);
    text-align: left;
}

.wq-cta-person-body { max-width: 56ch; padding-bottom: var(--wq-sp-6); }

/* De collega. Let op de leesrichting: op de portretten wijst de collega naar
   links, dus de foto hoort rechts en de uitnodiging links — dan wijst hij naar
   de tekst en de knop.

   De naam staat dus NIET naast de foto, maar erop. Anders wijst hij naar zijn
   eigen naam, en dat is een vreemd gezicht. */
.wq-cta-person-who {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Het naamplaatje: zweeft onderaan over de foto, zoals op de huidige site. */
.wq-cta-person-meta {
    position: absolute;
    bottom: var(--wq-sp-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: max-content;
    max-width: 80%;
    padding: 7px var(--wq-sp-4);
    text-align: center;
    background: rgba(28, 30, 33, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--wq-r-md);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* De naam in handschrift: dit is de handtekening onder de uitnodiging en het
   enige plekje in de hele huisstijl waar Caveat staat. Handschriftfonts lopen
   klein, dus de maat is bewust ruimer dan een gewone kop van dezelfde rang. */
/* Het plaatje blijft bewust smal: het is een naamkaartje op de borst, geen
   banner over het hele lichaam. Caveat loopt klein, dus 23px leest hier als
   een normale naam. */
.wq-cta-person-name {
    font-family: var(--wq-font-hand);
    font-size: 23px;
    font-weight: var(--wq-fw-bold);
    line-height: 1;
    letter-spacing: 0;
    color: var(--wq-white);
    margin: 0 0 1px;
    white-space: nowrap;
}
.wq-cta-person-role {
    font-size: 9.5px;
    font-weight: var(--wq-fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    line-height: 1.3;
    color: var(--wq-coral-light);
    margin: 0;
    white-space: nowrap;
}

/* Zelfde handtekening in het compacte persoonsblok. */
.wq-person--signed .wq-person-name {
    font-family: var(--wq-font-hand);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 0;
}

/* Het portret zelf. Uitgesneden foto's staan met hun voeten op de onderrand,
   dus geen hoeken of schaduw — alleen een maximale hoogte. */
.wq-cta-person-photo {
    height: 260px;
    width: auto;
    align-self: flex-end;
    object-fit: contain;
    object-position: bottom;
}

@media (max-width: 860px) {
    .wq-cta-person {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--wq-sp-6);
        text-align: center;
    }
    .wq-cta-person-body  { max-width: none; padding-bottom: 0; margin: 0 auto; }
    .wq-cta-person-photo { height: 230px; }
}

@media (max-width: 480px) {
    .wq-cta-person-photo { height: 200px; }
    .wq-cta-person-name  { font-size: 20px; }
    .wq-cta-person-meta  { bottom: var(--wq-sp-4); padding: 6px var(--wq-sp-3); }
}