/* ============================================================
   #reviews — HORIZONTAL PIN SCROLL (mirrored portfolio)
   ============================================================ */
#reviews.horizontal-reviews{
  height: 340vh;              /* meer scroll: je moet écht “reizen” */
  position: relative;
  margin: 0;
  padding: 0;
  background:
    radial-gradient(1000px 700px at 85% 50%, rgba(168, 120, 255, 0.22), transparent 70%),
    radial-gradient(900px 650px at 80% 80%, rgba(120, 200, 255, 0.14), transparent 65%),
    linear-gradient(105deg, var(--bg-1) 0%, var(--bg-0) 100%);
  background-attachment: scroll;
}

#reviews .sticky-wrapper{
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 10;
}

#reviews .reviews-container{
  display: flex;
  align-items: center;
  gap: 120px;
  padding-right: 10%;
  width: auto !important;
  margin: 0 !important;
  will-change: transform;
}

/* Extra ruimte aan de linkerzijde zodat de laatste review pas later volledig zichtbaar wordt */
#reviews .reviews-spacer{
  flex: 0 0 24vw;   /* tweak: 18vw–30vw */
  height: 1px;
}

/* Intro (rechts) — groter en minder “gepropt” */
#reviews .reviews-intro{
  flex: 0 0 620px;     /* groter blok */
  min-width: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

#reviews .reviews-intro .subtitle{
  letter-spacing: .28em;
  font-size: 12px;
  color: rgba(12,17,23,.55);
  font-weight: 700;
  margin-bottom: 18px;
  text-transform: uppercase;
}

#reviews .reviews-intro .section-title{
  margin: 0 0 18px;
  font-size: clamp(56px, 5.2vw, 92px); /* 🔥 groter */
  line-height: .95;
  letter-spacing: -0.05em;
}

#reviews .reviews-intro .intro-text{
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

/* Cards */
#reviews .review-card{
  flex: 0 0 560px;       /* breed genoeg voor lange review */
  min-width: 560px;
  padding: 44px 44px;
  border-radius: 28px;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 24px 80px rgba(12,17,23,.10);
}

#reviews .review-text{
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(12,17,23,.78);
}

#reviews .review-author strong{
  display:block;
  font-weight: 750;
  letter-spacing: -0.01em;
}

#reviews .review-author span{
  display:block;
  margin-top: 4px;
  opacity: .62;
  font-size: 14px;
}

/* Google sterren + icoon */
#reviews .review-stars{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 22px;
}

#reviews .google-badge{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#reviews .stars{
  font-size: 16px;
  letter-spacing: 2px;
  color: rgba(12,17,23,.88);
}

/* accessibility helper */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* MOBILE: net als portfolio -> verticaal stapelen */
@media (max-width: 980px){
  #reviews.horizontal-reviews{
    height: auto !important;
    background-attachment: scroll !important;
  }

  #reviews .sticky-wrapper{
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }

  #reviews .reviews-container{
    flex-direction: column !important;
    transform: none !important;
    will-change: auto !important;
    padding: 56px 18px !important;
    gap: 18px !important;
  }

  #reviews .reviews-spacer{ display:none !important; }

  #reviews .reviews-intro{
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
    margin-bottom: 10px;
  }

  #reviews .reviews-intro .section-title{
    font-size: 40px !important;
    line-height: 1.05 !important;
  }

  #reviews .review-card{
    min-width: 0 !important;
    width: 100% !important;
    padding: 28px !important;
  }
}
/* ============================================================
   #reviews — HIGH END FINISH (subtiel, premium)
   ============================================================ */

/* zachte fade aan randen (zoals een viewport-mask) */
#reviews .sticky-wrapper::before,
#reviews .sticky-wrapper::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: clamp(48px, 6vw, 120px);
  z-index: 12;
  pointer-events:none;
}

#reviews .sticky-wrapper::before{
  left:0;
  background: linear-gradient(90deg, rgba(231,235,239,1) 0%, rgba(231,235,239,0) 100%);
}

#reviews .sticky-wrapper::after{
  right:0;
  background: linear-gradient(270deg, rgba(231,235,239,1) 0%, rgba(231,235,239,0) 100%);
}

/* cards: meer agency-glass, betere diepte en rand */
#reviews .review-card{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s cubic-bezier(.2,.8,.2,1),
    border-color .45s ease,
    background .45s ease,
    filter .45s ease;
}

/* inner hairline (super subtiel) */
#reviews .review-card::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: calc(28px - 1px);
  border: 1px solid rgba(255,255,255,.55);
  opacity: .65;
  pointer-events:none;
}

/* glow layer (subtiel, niet neon) */
#reviews .review-card::after{
  content:"";
  position:absolute;
  inset:-40px;
  border-radius: 60px;
  background:
    radial-gradient(300px 220px at 20% 20%, rgba(168,120,255,.18), transparent 65%),
    radial-gradient(320px 240px at 80% 60%, rgba(120,200,255,.14), transparent 68%),
    radial-gradient(280px 220px at 50% 110%, rgba(255,140,180,.10), transparent 70%);
  filter: blur(22px);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* “shine sweep” bij hover */
#reviews .review-card .shine{
  display:none; /* fallback als iemand ooit een extra div toevoegt; niet nodig */
}

#reviews .review-card:hover{
  transform: translateY(-8px);
  border-color: rgba(255,255,255,.72);
  box-shadow:
    0 34px 90px rgba(12,17,23,.14),
    0 12px 30px rgba(12,17,23,.08);
  filter: saturate(1.02);
}

#reviews .review-card:hover::after{
  opacity: 1;
}

#reviews .review-card{
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.60);
  box-shadow: 0 16px 40px rgba(12,17,23,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* tekst: iets strakker (premium) */
#reviews .review-text{
  letter-spacing: -0.005em;
}

/* sterren + google badge: netter, klein accent */
#reviews .review-stars{
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(12,17,23,.06);
}

#reviews .stars{
  letter-spacing: 3px;
  transform: translateY(-0.5px);
}

/* micro hover op de sterren alleen */
#reviews .review-card:hover .stars{
  transform: translateY(-1px);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

/* author blok: meer “signature” feel */
#reviews .review-author strong{
  font-weight: 800;
}
#reviews .review-author span{
  color: rgba(12,17,23,.58);
}

/* Intro rechts: iets meer presence + finesse */
#reviews .reviews-intro .section-title{
  text-shadow: 0 18px 45px rgba(12,17,23,.06);
}

#reviews .reviews-intro{
  position: relative;
}

#reviews .reviews-intro::before{
  content:"";
  position:absolute;
  inset:-30px -40px;
  border-radius: 42px;
  background:
    radial-gradient(420px 260px at 25% 35%, rgba(168,120,255,.18), transparent 70%),
    radial-gradient(420px 260px at 80% 60%, rgba(120,200,255,.14), transparent 72%);
  filter: blur(26px);
  opacity: .55;
  z-index:-1;
  pointer-events:none;
}

/* Respecteer reduced motion */
@media (prefers-reduced-motion: reduce){
  #reviews .review-card,
  #reviews .review-card::after,
  #reviews .sticky-wrapper::before,
  #reviews .sticky-wrapper::after{
    transition: none !important;
  }
  #reviews .review-card:hover{
    transform: none !important;
  }
}
/* ============================================================
   #reviews — TYPOGRAFIE MATCH FAQ / CONTACT
   ============================================================ */

#reviews .section-title{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink);
}

#reviews .section-title .italic-text{
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  display: inline-block;
}

/* subtiele finesse zoals bij andere hero-koppen */
#reviews .section-title{
  text-shadow: 0 18px 45px rgba(12,17,23,.06);
}
/* ============================================================
   #reviews — MOBILE OPTIMALISATIE (intro bovenaan + cards auto)
   ============================================================ */
@media (max-width: 980px){

  /* 1) Hele section weer "normaal" scrollen */
  #reviews.horizontal-reviews{
    height: auto !important;
    background-attachment: scroll !important;
    padding: 72px 0 64px !important;
  }

  #reviews .sticky-wrapper{
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* 2) Intro ALTIJD eerst + netjes bovenaan */
  #reviews .reviews-container{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    /* belangrijk: geen desktop-achtige "reisruimte" */
    gap: 14px !important;
    padding: 0 18px !important;

    transform: none !important;
    will-change: auto !important;
  }

  #reviews .reviews-spacer{
    display: none !important;
  }

  #reviews .reviews-intro{
    order: -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 0 10px 0 !important;
  }

  #reviews .reviews-intro .subtitle{
    margin-bottom: 12px !important;
  }

  #reviews .reviews-intro .section-title{
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: 1.02 !important;
    margin-bottom: 12px !important;
  }

  #reviews .reviews-intro .intro-text{
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 60ch !important;
  }

  /* 3) Cards: laat ze "content-sized" zijn (geen rare whitespace) */
  #reviews .review-card{
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;

    padding: 22px !important;
    border-radius: 22px !important;

    /* key: nooit vaste hoogte/min-height op mobiel */
    height: auto !important;
    min-height: 0 !important;
  }

  /* 4) Interne spacing in cards strakker -> Willemijn geen mega "bodem" */
  #reviews .review-stars{
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
  }

  #reviews .review-text{
    margin: 0 0 14px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;

    /* zorg dat niets wordt afgekapt */
    max-height: none !important;
    overflow: visible !important;
  }

  #reviews .review-author{
    margin-top: 0 !important;
  }

  /* 5) If ergens per ongeluk een "min-height" op p/span staat: neutraliseer */
  #reviews .review-card *{
    min-height: 0 !important;
  }
}
@media (max-width: 980px){
  #reviews .review-card,
  #reviews .review-card .review-text{
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
  }
}
/* ============================================================
   #reviews — MOBILE CLEANUP (gloed links weg + bottom block weg)
   ============================================================ */
@media (max-width: 980px){

  /* Zorg dat de section zelf altijd volledig “doorloopt” */
  #reviews.horizontal-reviews{
    background-attachment: scroll !important;
    background-color: #e7ebef !important; /* vangnet */
    padding-bottom: 64px !important;      /* voorkomt rare cutoff onderaan */
    overflow: hidden !important;          /* snijdt eventuele glow aan randen af */
  }

  /* Weg met de edge-fade masks (die geven vaak die vage rand/gloed) */
  #reviews .sticky-wrapper::before,
  #reviews .sticky-wrapper::after{
    display: none !important;
  }

  /* Weg met intro-glow op mobiel (kan links “lekken”) */
  #reviews .reviews-intro::before{
    display: none !important;
  }

  /* Weg met card-glow layer op mobiel (deze veroorzaakt vaak de vage gloed) */
  #reviews .review-card::after{
    display: none !important;
  }

  /* Extra vangrail: geen rare horizontale “bleed” */
  #reviews .reviews-container{
    overflow: hidden !important;
  }

  /* Als je nog een heel subtiele premium look wil zónder glow */
  #reviews .review-card{
    box-shadow: 0 18px 55px rgba(12,17,23,.10) !important;
  }
}
/* #actie: italic wordmark zoals in hero/portfolio/reviews */
#actie .main-title{
  letter-spacing: -0.04em;
  line-height: 1.05;
}

#actie .main-title .italic-text{
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  display: inline-block;
}
/* ============================================================
   #actie — header links gecentreerd zoals #faq
   ============================================================ */

#actie .section-header{
  max-width: 560px;          /* zelfde gevoel als faq-left */
  margin-left: 0;
  margin-right: auto;        /* duwt 'm naar links */
  text-align: left;
}

/* eyebrow netjes uitgelijnd */
#actie .section-header .sub-text{
  display: block;
  margin-bottom: 12px;
}

/* titel spacing match faq */
#actie .section-header .main-title{
  margin: 0;
  line-height: 1.05;
}
@media (max-width: 980px){

  /* 1) Stop met verticaal centeren in de hero op mobiel */
  .sticky-hero{
    align-items: flex-start !important;
  }

  /* 2) Minder top padding in je hero content */
  .hero-grid{
    padding-top: 80px !important; /* was 40px (mobile) / 46px (desktop) */
  }

  /* 3) (optioneel) als je nóg iets strakker wilt: minder algemene page padding */
  .page{
    padding-top: 50px !important; /* was 40px */
  }
}
.process-header .italic-text{
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  display: inline-block;
}
/* ============================================================
   Globale italic stijl — gebruikt in hero / faq / reviews / portfolio / proces
   ============================================================ */
.italic-text{
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  display: inline-block;
}
#portfolio .section-title{
  font-size: clamp(56px, 5.2vw, 92px);
  line-height: .95;
}
.process-header{
  font-size: clamp(56px, 5.2vw, 92px);
  line-height: .95;
  letter-spacing: -0.04em;
  margin-bottom: 180px;
  padding-left: 20px;
  font-weight: 800;
}
@media (max-width: 980px){
  #portfolio .section-title{
    font-size: clamp(34px, 10vw, 44px) !important; /* kleiner op mobiel */
    line-height: 1.02 !important;
  }
}

/* ============================================================
   FAQ CTA — ultra high-end, rustig & agency-grade
   ============================================================ */

#faq .faq-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 20px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;

  color: #ffffff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);

  box-shadow:
    0 14px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10);

  position: relative;
  overflow: hidden;
  isolation: isolate;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease;
}

/* ============================================================
   FAQ CTA — high-end dark glass variant
   ============================================================ */
#faq .btn-faq{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  box-shadow:
    0 14px 44px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.10);

  position: relative;
  overflow: hidden;
  isolation: isolate;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease;
}

/* subtle sweep */
#faq .btn-faq::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,.20) 35%,
    rgba(255,255,255,.07) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform .75s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
  mix-blend-mode: screen;
}

/* soft glow */
#faq .btn-faq::after{
  content:"";
  position:absolute;
  inset:-20px;
  border-radius: inherit;
  background:
    radial-gradient(280px 120px at 50% 120%, rgba(120,200,255,.22), transparent 60%),
    radial-gradient(240px 120px at 20% 0%, rgba(179,120,255,.18), transparent 60%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .35s ease;
  z-index:-1;
}

/* hover */
#faq .btn-faq:hover{
  transform: translateY(-2px);
  border-color: rgba(120,160,255,.55);
  background: rgba(255,255,255,.12);
  box-shadow:
    0 24px 70px rgba(0,0,0,.45),
    0 8px 24px rgba(12,17,23,.35),
    inset 0 1px 0 rgba(255,255,255,.14);
}

#faq .btn-faq:hover::before{ transform: translateX(120%); }
#faq .btn-faq:hover::after{ opacity: 1; }

#faq .btn-faq:active{ transform: translateY(-1px); }

#faq .btn-faq:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(61,116,255,.28),
    0 22px 60px rgba(0,0,0,.45);
}
/* ============================================================
   #actie — Start Groei button: exact dezelfde hover/sweep/glow
   ============================================================ */

#actie .btn-primary{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* behoud jouw blauwe look */
  background: rgba(59, 102, 245, .98);
  border: 1px solid rgba(59, 102, 245, .35);
  color: #fff;

  /* premium diepte */
  box-shadow:
    0 18px 45px rgba(32, 86, 255, .22),
    0 1px 0 rgba(255,255,255,.10) inset;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease,
    filter .35s ease;
}

/* sweep */
#actie .btn-primary::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,.20) 35%,
    rgba(255,255,255,.07) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform .75s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
  mix-blend-mode: screen;
}

/* glow */
#actie .btn-primary::after{
  content:"";
  position:absolute;
  inset:-20px;
  border-radius: inherit;
  background:
    radial-gradient(280px 120px at 50% 120%, rgba(120,200,255,.22), transparent 60%),
    radial-gradient(240px 120px at 20% 0%, rgba(179,120,255,.18), transparent 60%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .35s ease;
  z-index:-1;
  pointer-events:none;
}

/* hover */
#actie .btn-primary:hover{
  transform: translateY(-2px);
  background: rgba(59, 102, 245, 1);
  border-color: rgba(120,160,255,.55);
  box-shadow:
    0 26px 70px rgba(32, 86, 255, .30),
    0 10px 28px rgba(12, 17, 23, .22),
    0 1px 0 rgba(255,255,255,.12) inset;
  filter: saturate(1.03);
}

#actie .btn-primary:hover::before{ transform: translateX(120%); }
#actie .btn-primary:hover::after{ opacity: 1; }

#actie .btn-primary:active{ transform: translateY(-1px); }

#actie .btn-primary:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(61,116,255,.22),
    0 26px 70px rgba(32, 86, 255, .26);
}

/* ============================================================
   #actie — titel gecentreerd op desktop, links op mobiel
   ============================================================ */

@media (min-width: 981px){
  #actie .section-header{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  #actie .section-header .sub-text{
    justify-content: center;
  }

  #actie .section-header .main-title{
    margin-left: auto;
    margin-right: auto;
  }
}
/* ============================================================
   #actie — titel inline op desktop, stacked op mobiel
   ============================================================ */

@media (min-width: 981px){
  #actie .main-title{
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: .4ch;
    white-space: nowrap;
  }

  #actie .main-title > *{
    display: inline;
  }
}