/* =====================================================================
   weClairify — Modern Theme v2 (BentoML-geïnspireerd, UITGESPROKEN)
   ---------------------------------------------------------------------
   Steviger doorgevoerde moderne dev-tool/SaaS-branding: grote bold
   typografie, monospace "eyebrow"-labels (tech-signatuur), uitgesproken
   "bento"-kaarten met duidelijke randen en hover-glow, pill-knoppen,
   een subtiel stippenraster, en een donker contrast-CTA-paneel.

   MET BEHOUD van het weClairify-kleurenpalet (paars #7f0545, lavendel,
   geel, roze). Geen kleuren van BentoML overgenomen — alleen de
   vormtaal/branding. Inhoud en structuur blijven gelijk.
   Laadt ná brand-refinements.css. Volledig terugdraaibaar.
   ===================================================================== */

:root {
  --wc-brand: #7f0545;
  --wc-brand-dark: #5e0333;
  --wc-ink: #14080f;
  --wc-radius-card: 20px;
  --wc-border: rgba(16, 24, 40, .10);
  --wc-ease: cubic-bezier(.4, 0, .2, 1);
  --wc-mono: 'Inconsolata', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wc-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --wc-shadow-md: 0 8px 24px -6px rgba(16, 24, 40, .12);
  --wc-shadow-lg: 0 32px 60px -16px rgba(16, 24, 40, .22);
  --wc-shadow-brand: 0 18px 40px -12px rgba(127, 5, 69, .45);
}

/* ---------------------------------------------------------------------
   1. Subtiel tech-stippenraster op de achtergrond (dev-tool signatuur)
   --------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  background-color: #fafafa !important;
  background-image: radial-gradient(rgba(16, 24, 40, .055) 1px, transparent 1.4px);
  background-size: 26px 26px;
  background-attachment: fixed;
}

/* ---------------------------------------------------------------------
   2. Typografie — groot, bold, strak (BentoML-achtige koppen)
   --------------------------------------------------------------------- */
h1, h2,
.uui-heading-xlarge-3, .lynx-heading-white,
.h2-heading, .combine-heading-style-h2-18 {
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.02 !important;
}
.uui-heading-xlarge-3,
.lynx-heading-white { font-size: clamp(2.6rem, 5.5vw, 4.6rem) !important; }
.h2-heading,
.combine-heading-style-h2-18 { font-size: clamp(1.9rem, 3.6vw, 3rem) !important; }

h3, h4, h5,
.heading-38, .heading-39, .heading-40, .heading-28, .heading-36 {
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

p, .paragraph-6, .paragraph-7, .paragraph-11,
.uui-text-size-xlarge-4, .text-block-17,
.combine-text-size-regular-19, .combine-text-size-regular-20 {
  line-height: 1.65 !important;
  color: #475467;
}

/* ---------------------------------------------------------------------
   3. Monospace "eyebrow"-labels — tech-signatuur (geen BentoML-kleur)
   --------------------------------------------------------------------- */
.badge, .badge.gray,
.uui-heading-medium-7 {
  font-family: var(--wc-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
}
.badge, .badge.gray {
  border-radius: 999px !important;
  border: 1px solid rgba(127, 5, 69, .25) !important;
  color: var(--wc-brand) !important;
  background: rgba(127, 5, 69, .06) !important;
  box-shadow: none !important;
  padding: 6px 14px !important;
}
.uui-heading-medium-7 { color: var(--wc-brand) !important; }

/* ---------------------------------------------------------------------
   4. "Bento"-kaarten — uitgesproken rand, sterke hover-lift + glow
   --------------------------------------------------------------------- */
.service-home,
.contact-card,
.wc-card,
.combine-faq4_accordion-3 {
  border: 1.5px solid var(--wc-border) !important;
  border-radius: var(--wc-radius-card) !important;
  box-shadow: var(--wc-shadow-sm) !important;
  background-color: #fff !important;
  transition: transform .28s var(--wc-ease),
              box-shadow .28s var(--wc-ease),
              border-color .28s var(--wc-ease) !important;
}
.service-home:hover,
.contact-card:hover {
  transform: translateY(-8px) scale(1.012) !important;
  box-shadow: var(--wc-shadow-brand) !important;
  border-color: rgba(127, 5, 69, .45) !important;
}
.combine-faq4_accordion-3 {
  margin-bottom: 12px !important;
  padding: 6px 10px !important;
}
.combine-faq4_accordion-3:hover {
  border-color: rgba(127, 5, 69, .4) !important;
  box-shadow: var(--wc-shadow-md) !important;
}

/* Service-icoonvlakken: groter afgerond, met lichte merk-ring */
.category-icon-wrapper,
.contact-icon-wrapper {
  border-radius: 14px !important;
  transition: transform .28s var(--wc-ease) !important;
}
.service-home:hover .category-icon-wrapper { transform: scale(1.08) rotate(-3deg) !important; }

/* ---------------------------------------------------------------------
   5. Pill-knoppen — steviger, bold, zachte schaduw (kleuren blijven)
   --------------------------------------------------------------------- */
.button-primary,
.button-primary-small,
.button-primary-full,
.button-primary-full-copy,
.combine-button-small-2,
.button-primary-right-icon,
.w-button {
  border: none !important;
  border-radius: 999px !important;
  box-shadow: var(--wc-shadow-sm) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  transition: transform .2s var(--wc-ease),
              box-shadow .2s var(--wc-ease) !important;
}
.button-primary:hover,
.button-primary-small:hover,
.button-primary-full:hover,
.button-primary-full-copy:hover,
.combine-button-small-2:hover,
.button-primary-right-icon:hover,
.w-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--wc-shadow-md) !important;
}
.button-primary-full:hover,
.combine-button-small-2:hover { box-shadow: var(--wc-shadow-brand) !important; }

/* ---------------------------------------------------------------------
   6. Formuliervelden — strak en zacht
   --------------------------------------------------------------------- */
.text-field, .text-field-plain {
  border-radius: 12px !important;
}
.text-field-wrapper {
  border: 1.5px solid var(--wc-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--wc-shadow-sm) !important;
  transition: border-color .2s var(--wc-ease), box-shadow .2s var(--wc-ease) !important;
}
.text-field-wrapper:focus-within {
  border-color: var(--wc-brand) !important;
  box-shadow: 0 0 0 4px rgba(127, 5, 69, .12) !important;
}

/* ---------------------------------------------------------------------
   7. Navigatie — sticky glas-balk
   --------------------------------------------------------------------- */
.navigation {
  position: sticky !important;
  top: 0 !important;
  background-color: rgba(255, 255, 255, .8) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  border-bottom: 1px solid var(--wc-border) !important;
  height: 78px !important;
}

/* ---------------------------------------------------------------------
   8. Donker contrast-CTA-paneel (BentoML-achtige donkere band)
   Gebruikt het donkere merk-paars/ink — niet BentoML's kleuren.
   --------------------------------------------------------------------- */
.cta-inner-wrapper {
  background: linear-gradient(135deg, #1b0a13 0%, #2e0f20 55%, #14080f 100%) !important;
  border: 1px solid rgba(127, 5, 69, .4) !important;
  border-radius: 24px !important;
  box-shadow: var(--wc-shadow-lg) !important;
  padding: 56px 48px !important;
}
.cta-inner-wrapper .h2-heading { color: #fff !important; }
.cta-inner-wrapper .text-block-17 { color: rgba(255, 255, 255, .72) !important; }
.cta-inner-wrapper .badge,
.cta-inner-wrapper .badge.gray {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .3) !important;
  background: rgba(255, 255, 255, .08) !important;
}

/* ---------------------------------------------------------------------
   9. Meer witruimte / dramatischer ritme
   --------------------------------------------------------------------- */
.section-small,
.section-small-copy {
  padding-top: 104px !important;
  padding-bottom: 104px !important;
}

/* ---------------------------------------------------------------------
   10. "Waarom kiezen voor weClairify?" — gecentreerd blok met
       scheidingslijnen en icoon rechts (geïnspireerd op screenshot 2)
   --------------------------------------------------------------------- */
h4:has(+ .uui-section_layout21) {
  text-align: center !important;
}
.uui-layout20_component-copy {
  grid-template-columns: 1fr !important;   /* lege 2e kolom verwijderen */
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.uui-layout21_item-list { margin-top: 1.5rem !important; }
.uui-layout21_item {
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  border-top: 1px solid var(--wc-border) !important;
  padding: 22px 4px !important;
}
.uui-layout21_item > *:not(.uui-layout21_item-icon-wrapper) {
  flex: 1 1 auto !important;
}
.uui-layout21_item-icon-wrapper {
  order: 2 !important;                 /* icoon naar rechts */
  align-self: center !important;
  margin: 0 0 0 1rem !important;
  background: rgba(127, 5, 69, .08) !important;
  color: var(--wc-brand) !important;
  border-radius: 10px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

/* ---------------------------------------------------------------------
   11. "Let's talk" + contactblokken naast elkaar (compacter)
   --------------------------------------------------------------------- */
#contact-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.5rem !important;
}
#contact-container .form-block {
  flex: 1 1 360px !important;
  max-width: 460px !important;
  margin: 0 !important;
}
#contact-container .about-testimonial-container {
  flex: 1 1 300px !important;
  max-width: 420px !important;
}
#contact-container .contact-grid {
  grid-template-columns: 1fr !important;   /* 3 kaarten onder elkaar naast het formulier */
  gap: 1rem !important;
}
/* contactkaarten compact als horizontale rijen (icoon links, label rechts) */
#contact-container .contact-card {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  min-height: 0 !important;
}
#contact-container .contact-card .margin-bottom-08 { margin-bottom: 0 !important; }

/* ---------------------------------------------------------------------
   12. Team — nette kaarten in een raster (bento-stijl)
   --------------------------------------------------------------------- */
.uui-team08_component { display: block !important; }
.uui-team08_content { margin-bottom: 2.5rem !important; max-width: 760px !important; }
.uui-team08_list {
  grid-template-columns: repeat(3, 1fr) !important;
  grid-column-gap: 1rem !important;
  grid-row-gap: 1rem !important;
}
@media (max-width: 991px) { .uui-team08_list { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px) { .uui-team08_list { grid-template-columns: 1fr !important; } }
.uui-team08_item {
  border: 1.5px solid var(--wc-border) !important;
  border-radius: 16px !important;
  background-color: #fff !important;
  padding: 18px !important;
  box-shadow: var(--wc-shadow-sm) !important;
  align-items: center !important;
  transition: transform .25s var(--wc-ease),
              box-shadow .25s var(--wc-ease),
              border-color .25s var(--wc-ease) !important;
}
.uui-team08_item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--wc-shadow-md) !important;
  border-color: rgba(127, 5, 69, .3) !important;
}
.uui-team08_image,
.uui-team08_image-wrapper { border-radius: 12px !important; }

/* ---------------------------------------------------------------------
   13. Reviews / testimonials — bento-kaarten met merk-accenten
   --------------------------------------------------------------------- */
.wc-reviews { padding: 96px 5%; }
.wc-reviews-inner { max-width: 1140px; margin: 0 auto; }
.wc-reviews-eyebrow {
  font-family: var(--wc-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--wc-brand);
  text-align: center;
}
.wc-reviews-title {
  font-weight: 800;
  letter-spacing: -.04em;
  text-align: center;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.05;
  margin: .5rem 0 2.5rem;
  color: var(--wc-ink);
}
.wc-reviews-grid { columns: 2; column-gap: 1.25rem; }
@media (max-width: 720px) { .wc-reviews-grid { columns: 1; } }
.wc-review {
  break-inside: avoid;
  margin: 0 0 1.25rem;
  background: #fff;
  border: 1.5px solid var(--wc-border);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--wc-shadow-sm);
  transition: transform .25s var(--wc-ease),
              box-shadow .25s var(--wc-ease),
              border-color .25s var(--wc-ease);
}
.wc-review:hover {
  transform: translateY(-4px);
  box-shadow: var(--wc-shadow-md);
  border-color: rgba(127, 5, 69, .3);
}
.wc-review-stars { color: var(--wc-brand); letter-spacing: 2px; font-size: 1rem; margin-bottom: 12px; }
.wc-review-quote {
  margin: 0 0 18px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #344054;
  font-style: normal;
}
.wc-review-by { display: flex; flex-direction: column; }
.wc-review-name { font-weight: 700; color: var(--wc-ink); }
.wc-review-role { color: var(--wc-brand); font-size: .9rem; }

/* Avatar-fallback: gebroken team-afbeelding -> initialen in merk-vlak */
.wc-avatar-fallback {
  position: relative;
  background: linear-gradient(135deg, #7f0545, #b3286b) !important;
  border-radius: 12px !important;
  min-width: 64px;
  min-height: 64px;
  align-self: stretch;
}
.wc-avatar-fallback::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  font-family: Inter, sans-serif;
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------------
   14. Reduceer beweging op verzoek
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
  body { background-attachment: scroll; }
}

/* ---------------------------------------------------------------------
   15. Over-pagina: overtollige witruimte weghalen
   Lege leftover-containers (overgebleven na het verplaatsen van het
   contactblok) verbergen, zodat het Team-blok dichter aansluit.
   --------------------------------------------------------------------- */
.banner-home-mobiel > .container-16,
.banner-home-mobiel > .rich-text,
.banner-home-mobiel > .container-contact-home { display: none !important; }
.combine-section_team2 .combine-padding-global-14 { padding-top: 0 !important; }


/* ---------------------------------------------------------------------
   16. 'Vertrouwd door'-logo's groter
   --------------------------------------------------------------------- */
.uui-cta12_logo-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  grid-column-gap: 1.25rem !important;
  gap: 1.25rem !important;
}
.uui-cta12_logo {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: 3.5rem !important;
  object-fit: contain !important;
}


/* ---------------------------------------------------------------------
   17. Footer (BentoML-stijl in weClairify-branding) + oude footer verbergen
   --------------------------------------------------------------------- */
.footer, .lynx-footer { display: none !important; }   /* oude minimale footer */

.wc-footer {
  background: linear-gradient(180deg, #f6eefb 0%, #f1e7f8 100%);
  border-radius: 36px 36px 0 0;
  margin-top: 56px;
  padding: 64px 6% 32px;
  color: #475467;
  font-family: Inter, sans-serif;
}
.wc-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 2fr; gap: 3rem; align-items: start;
}
.wc-footer-brand { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.wc-footer-logo img { height: 44px; width: auto; display: block; }
.wc-footer-linkedin { display: inline-flex; }
.wc-footer-linkedin img { display: block; opacity: .8; transition: opacity .2s; }
.wc-footer-linkedin:hover img { opacity: 1; }
.wc-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.wc-footer-head {
  font-family: var(--wc-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: .78rem; font-weight: 700; color: var(--wc-brand); margin-bottom: 1.1rem;
}
.wc-footer-col a {
  display: block; color: #475467; text-decoration: none; margin-bottom: .7rem;
  font-size: .98rem; transition: color .2s var(--wc-ease);
}
.wc-footer-col a:hover { color: var(--wc-brand); }
.wc-footer-bottom {
  max-width: 1200px; margin: 2.5rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(127, 5, 69, .14);
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .88rem; color: #667085;
}
@media (max-width: 860px) {
  .wc-footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .wc-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .wc-footer-cols { grid-template-columns: 1fr; }
  .wc-footer-bottom { flex-direction: column; }
}

/* ---------------------------------------------------------------------
   18. Team-overlap fix: ingeklapte ouders laten meegroeien (BFC)
   --------------------------------------------------------------------- */
.banner-home-mobiel,
.banner-home-mobiel > section { display: flow-root !important; height: auto !important; min-height: 0 !important; }
.uui-team08_component { position: relative !important; z-index: 2 !important; }

/* ---------------------------------------------------------------------
   19. Privacy / juridische pagina (strak & leesbaar, caide.io-stijl)
   --------------------------------------------------------------------- */
.heading-10 {
  text-align: left;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--wc-ink);
  font-size: clamp(2rem, 3.2vw, 2.6rem) !important;
  line-height: 1.1 !important;
  max-width: 760px;
  margin: 56px auto 10px;
}
.wc-legal-lead {
  max-width: 760px;
  margin: 0 auto 40px;
  color: #667085;
  font-size: 1.12rem;
  line-height: 1.6;
}
.rich-text-block-2 {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 88px;
  color: #475467;
  line-height: 1.75;
  font-size: 1rem;
}
.rich-text-block-2 h2 {
  color: var(--wc-ink) !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
  margin: 2.5rem 0 .75rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid rgba(16, 24, 40, .08) !important;
}
.rich-text-block-2 h2:first-of-type {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 1rem !important;
}
.rich-text-block-2 p { margin: 0 0 1rem !important; }
.rich-text-block-2 ul,
.rich-text-block-2 ol { margin: 1rem 0 1.5rem !important; padding-left: 1.5rem !important; }
.rich-text-block-2 li { margin-bottom: .5rem !important; }
.rich-text-block-2 a {
  color: var(--wc-brand) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ---------------------------------------------------------------------
   20. Meer ruimte tussen de (sticky) menubalk en de pagina-header
   --------------------------------------------------------------------- */
.combine-padding-section-medium-13 { padding-top: 80px !important; }

/* ---------------------------------------------------------------------
   21. FAQ: blok dichter bij de vragen + geheel gecentreerd
   --------------------------------------------------------------------- */
.combine-faq4_component-2 {
  max-width: 64rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-column-gap: 2.5rem !important;
}
.combine-faq4_content-2 { justify-self: end !important; }