/* ============================================================
   MOBILE: PORTFOLIO VAN HORIZONTAAL -> VERTICAAL
   ============================================================ */
@media (max-width: 980px){

  /* Stop elke horizontale overflow die uit portfolio komt */
  #portfolio.horizontal-portfolio{
    height: auto !important;
    overflow: hidden !important;
  }

  /* Sticky uit op mobiel */
  #portfolio .sticky-wrapper{
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Container wordt column, geen translateX */
  #portfolio .portfolio-container{
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    will-change: auto !important;
    padding: 56px 18px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Intro blok full width */
  #portfolio .portfolio-intro{
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 0 26px 0 !important;
  }

  /* Items full width + normale hoogte */
  #portfolio .portfolio-item{
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 22px 0 !important;
  }

  /* Kaart krijgt vaste, mooie mobiele verhouding */
  #portfolio .glass-card{
    width: 100% !important;
    height: 260px !important;      /* voelt premium op mobiel */
    border-radius: 26px !important;
  }

  /* Tekst overlay netjes onderin */
  #portfolio .parallax-text{
    bottom: 18px !important;
    left: 18px !important;
    transform: none !important;     /* JS parallax neutraliseren */
    width: calc(100% - 36px) !important;
  }

  #portfolio .project-title{
    white-space: normal !important; /* op mobiel mag hij afbreken */
    font-size: 28px !important;
    line-height: 1.05 !important;
  }

  #portfolio .category{
    font-size: 12px !important;
    letter-spacing: 2px !important;
  }
}
/* ============================================================
   MOBILE FIX: #werkwijze / process-section (geen horizontale scroll)
   ============================================================ */
@media (max-width: 980px){

  /* extra zekerheid tegen overflow uit deze sectie */
  #werkwijze.process-section{
    overflow: visible !important;
  }

  /* van 3 kolommen -> 1 kolom */
  #werkwijze .process-wrapper{
    flex-direction: column !important;
    gap: 18px !important;
    max-width: 100% !important;
    padding: 0 18px !important;
  }

  /* sticky + vaste breedtes uit */
  #werkwijze .process-left{
    position: relative !important;
    top: auto !important;
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
  }

  /* nummer niet meer “duwen” */
  #werkwijze .number-container{
    font-size: clamp(48px, 14vw, 84px) !important;
    text-align: left !important;
    width: 100% !important;
    white-space: normal !important;
    margin-top: 0 !important;
  }

  /* verticale lijn op mobiel uit (scheelt breedte/gedoe) */
  #werkwijze .process-line-container{
    display: none !important;
  }

  /* tekstkolom full width, geen padding-left */
  #werkwijze .process-right{
    flex: none !important;
    width: 100% !important;
    padding-left: 0 !important;
  }

  /* stappen compacter zodat het lekker scrollt */
  #werkwijze .step{
    padding-bottom: 18vh !important;
  }
  #werkwijze .step:last-child{
    padding-bottom: 8vh !important;
  }

  /* typografie iets vriendelijker op mobiel */
  #werkwijze .step h2{
    font-size: clamp(28px, 7vw, 38px) !important;
  }
  #werkwijze .step p{
    font-size: 1rem !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   MOBILE HEADER + HIGH-END HAMBURGER
   ============================================================ */
@media (max-width: 980px){

  .nav.nav--desktop,
  .header-cta--desktop{
    display:none !important;
  }

  .site-header{
    z-index: 80;
  }

  .site-header .container{
    width: calc(100% - 24px) !important;
  }

  .header-inner{
    height: 72px;
    gap: 12px;
  }

  .brand{
    min-width: 0;
    flex: 1 1 auto;
    gap: 10px;
  }

  .brand img{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }

  .brand-text{
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 56vw;
  }

  .nav-toggle{
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.55);
    background:
      linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
      0 10px 30px rgba(12,17,23,.10),
      inset 0 1px 0 rgba(255,255,255,.72);
    cursor: pointer;
    transition:
      transform .28s cubic-bezier(.2,.8,.2,1),
      box-shadow .28s cubic-bezier(.2,.8,.2,1),
      background .28s ease,
      border-color .28s ease;
  }

  .nav-toggle:hover{
    transform: translateY(-1px);
    box-shadow:
      0 14px 36px rgba(12,17,23,.14),
      inset 0 1px 0 rgba(255,255,255,.85);
  }

  .nav-toggle:active{
    transform: scale(.97);
  }

  .nav-toggle__icon{
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #0c1117;
    position: relative;
    display: block;
    transition: background .22s ease;
  }

  .nav-toggle__icon::before,
  .nav-toggle__icon::after{
    content:"";
    position:absolute;
    left:0;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #0c1117;
    transition:
      transform .32s cubic-bezier(.2,.8,.2,1),
      top .32s cubic-bezier(.2,.8,.2,1),
      opacity .2s ease;
  }

  .nav-toggle__icon::before{ top:-6px; }
  .nav-toggle__icon::after{ top: 6px; }

  body.menu-open .nav-toggle{
    background:
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    box-shadow:
      0 16px 40px rgba(12,17,23,.16),
      inset 0 1px 0 rgba(255,255,255,.95);
  }

  body.menu-open .nav-toggle__icon{
    background: transparent;
  }

  body.menu-open .nav-toggle__icon::before{
    top: 0;
    transform: rotate(45deg);
  }

  body.menu-open .nav-toggle__icon::after{
    top: 0;
    transform: rotate(-45deg);
  }
}

/* ============================================================
   HIGH-END MOBILE MENU
   ============================================================ */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;
}

body.menu-open .mobile-menu{
  pointer-events: auto;
}

body.menu-open{
  overflow: hidden;
}

.mobile-menu__backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 20% 90%, rgba(168,120,255,.16), transparent 60%),
    radial-gradient(1000px 600px at 80% 10%, rgba(120,200,255,.12), transparent 60%),
    rgba(12,17,23,.44);
  backdrop-filter: blur(14px) saturate(1.04);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  opacity: 0;
  transition: opacity .42s cubic-bezier(.2,.8,.2,1);
}

body.menu-open .mobile-menu__backdrop{
  opacity: 1;
}

.mobile-menu__panel{
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(392px, calc(100% - 24px));

  display: flex;
  flex-direction: column;
  overflow: hidden;

  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.52);
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,250,252,.74));
  backdrop-filter: blur(24px) saturate(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(1.05);

  box-shadow:
    0 32px 90px rgba(12,17,23,.20),
    0 10px 30px rgba(12,17,23,.08),
    inset 0 1px 0 rgba(255,255,255,.88);

  transform: translateX(24px) scale(.985);
  opacity: 0;
  transition:
    transform .46s cubic-bezier(.16,1,.3,1),
    opacity .32s ease;
}

.mobile-menu__panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background:
    radial-gradient(300px 180px at 15% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(320px 220px at 100% 100%, rgba(59,102,245,.06), transparent 60%);
  opacity: .9;
}

body.menu-open .mobile-menu__panel{
  transform: translateX(0) scale(1);
  opacity: 1;
}

.mobile-menu__top{
  position: relative;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(12,17,23,.06);
}

.mobile-menu__title{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(12,17,23,.52);
}

.mobile-menu__close{
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  border: 1px solid rgba(12,17,23,.06);
  background: rgba(255,255,255,.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 8px 18px rgba(12,17,23,.06);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    background .24s ease,
    box-shadow .24s ease;
}

.mobile-menu__close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 12px 24px rgba(12,17,23,.08);
}

.mobile-menu__close svg,
.mobile-menu__close i{
  pointer-events: none;
}

.mobile-nav{
  position: relative;
  z-index: 2;
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* subtiele divider tussen top en links */
.mobile-nav::before{
  content:"";
  display:block;
  height: 2px;
  width: 54px;
  margin: 2px 0 10px 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(12,17,23,.12), rgba(12,17,23,0));
}

.mobile-nav a{
  --delay: 0ms;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  text-decoration: none;
  color: #0c1117;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;

  padding: 16px 16px;
  border-radius: 18px;

  background: rgba(255,255,255,.34);
  border: 1px solid rgba(12,17,23,.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 18px rgba(12,17,23,.035);

  transform: translateY(14px);
  opacity: 0;

  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    opacity .34s ease,
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
  transition-delay: var(--delay);
}

body.menu-open .mobile-nav a{
  transform: translateY(0);
  opacity: 1;
}

.mobile-nav a::after{
  content: "↗";
  font-size: 14px;
  color: rgba(12,17,23,.34);
  transform: translateX(-4px);
  opacity: 0;
  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    opacity .22s ease,
    color .22s ease;
}

.mobile-nav a:hover{
  background: rgba(255,255,255,.62);
  border-color: rgba(12,17,23,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 14px 28px rgba(12,17,23,.07);
}

.mobile-nav a:hover::after{
  opacity: 1;
  transform: translateX(0);
  color: rgba(12,17,23,.58);
}

.mobile-nav a:active{
  transform: scale(.992);
}

/* stagger */
.mobile-nav a:nth-child(1){ --delay: 70ms; }
.mobile-nav a:nth-child(2){ --delay: 110ms; }
.mobile-nav a:nth-child(3){ --delay: 150ms; }
.mobile-nav a:nth-child(4){ --delay: 190ms; }
.mobile-nav a:nth-child(5){ --delay: 230ms; }
.mobile-nav a:nth-child(6){ --delay: 270ms; }

.mobile-nav__cta{
  margin-top: 6px !important;
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(59,102,245,.98), rgba(32,86,255,.92)) !important;
  border: 1px solid rgba(59,102,245,.26) !important;
  box-shadow:
    0 18px 34px rgba(32,86,255,.22),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.mobile-nav__cta::after{
  color: rgba(255,255,255,.76) !important;
}

.mobile-nav__cta:hover{
  background:
    linear-gradient(180deg, rgba(59,102,245,1), rgba(32,86,255,.96)) !important;
  box-shadow:
    0 24px 40px rgba(32,86,255,.28),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* onderaan zachte fade voor diepte */
.mobile-menu__panel::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 88px;
  pointer-events:none;
  background: linear-gradient(to top, rgba(255,255,255,.72), rgba(255,255,255,0));
}

/* toegankelijk / rustig op touch */
@media (hover: none), (pointer: coarse){
  .mobile-nav a:hover,
  .mobile-menu__close:hover,
  .nav-toggle:hover{
    transform: none !important;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .mobile-menu__backdrop,
  .mobile-menu__panel,
  .mobile-nav a,
  .mobile-menu__close,
  .nav-toggle,
  .nav-toggle__icon,
  .nav-toggle__icon::before,
  .nav-toggle__icon::after{
    transition: none !important;
  }
}

@media (max-width: 980px){

  /* FAQ: force 1 kolom op mobiel */
  #faq.faq-master-wrapper{
    overflow-x: hidden;
  }

  #faq .faq-container{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 18px !important;
  }

  /* Zorg dat rechterkolom niet buiten beeld kan steken */
  #faq .faq-accordion-right{
    width: 100% !important;
    min-width: 0 !important;
  }

  #faq .faq-item,
  #faq .faq-trigger,
  #faq .faq-panel{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Lange tekst mag afbreken */
  #faq .faq-trigger{
    word-break: break-word;
  }
}
@media (max-width: 980px){
  #werkwijze .process-wrapper{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  #werkwijze .process-left,
  #werkwijze .process-right{
    min-width: 0 !important;
  }
}
@media (max-width: 980px){
  .stack-wrapper,
  main#page,
  .site-header{
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }
}
@media (max-width: 980px){
  body.menu-open{
    overflow: hidden;
  }
}
/* ✅ DESKTOP: hamburger + mobile menu volledig uit */
@media (min-width: 981px){
  .nav-toggle,
  #mobile-menu,
  .mobile-menu{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* ============================================================
   MOBILE HERO OPTIMALISATIE
   ============================================================ */
@media (max-width: 980px) {
  
  /* 1. Zet de grid om naar 1 kolom */
  .hero-grid {
    grid-template-columns: 1fr !important; /* Forceert alles onder elkaar */
    gap: 40px; /* Ruimte tussen tekst en afbeelding */
    padding-top: 40px;
    text-align: left; /* Zorg dat de container links lijnt */
  }

  /* 2. Tekst links uitgelijnd houden */
  .hero-title, 
  .hero-text, 
  .hero-eyebrow {
    text-align: left !important;
    margin-left: 0;
    margin-right: auto;
  }

  /* 3. CTA knoppen ook links uitlijnen */
  .hero-cta {
    justify-content: flex-start !important;
  }

  /* 4. De afbeelding (hero-right) onder de tekst */
  .hero-right {
    order: 2; /* Zorgt dat deze na de tekst komt */
    height: 450px; /* Vaste hoogte voor de kaart op mobiel */
    width: 100%;
  }

  /* 5. De kaart zelf full-width maken */
  .hero-photo {
    width: 100% !important;
    height: 100% !important;
  }
}
/* ============================================================
   MOBILE SCROLL WHEEL FIX
   ============================================================ */
@media (max-width: 980px) {
  
  /* Zorg dat de sectie op mobiel genoeg hoogte heeft om te scrollen */
  #scroll.scroll-pin-section {
    height: 200vh !important; /* Iets korter dan desktop, maar genoeg voor rotatie */
  }

  /* Forceer de sticky container naar de juiste hoogte */
  #scroll .sticky-container {
    height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Verklein het wiel voor mobiele schermen zodat het niet buiten beeld valt */
  .wheel-wrapper {
    width: 90vw !important;
    height: 90vw !important;
    max-width: 350px;
    max-height: 350px;
  }

  /* Het logo in het midden ook iets kleiner */
  #scroll .wheel-logo {
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
  }

  #scroll .wheel-logo img {
    width: 30px !important;
  }

  /* Zorg dat de tekst op het wiel leesbaar blijft */
  .scroll-wheel svg text {
    font-size: 16px !important; /* Iets groter op mobiel voor leesbaarheid */
  }
}
@media (max-width: 980px) {
  /* Forceer hardware versnelling voor het wiel */
  .scroll-wheel {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
  }

  /* Zorg dat de sticky container niet wordt gehinderd door overbodige clips */
  .scroll-pin-section {
    overflow: visible !important;
  }
}
/* ============================================================
   HERO PHOTO SUBTIELE HOVER (Gelijk aan #actie kaarten)
   ============================================================ */

/* Zorg voor een zachte transitie op de kaart zelf */
.hero-photo {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* De hover actie: lift en schaduw */
.hero-photo:hover {
    transform: translateY(-10px) !important; /* De subtiele lift omhoog */
    border-color: rgba(255, 255, 255, 0.2) !important; /* Optioneel: border licht oplichten */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1) !important; /* Versterkte schaduw voor diepte */
}

/* We halen de zoom op de afbeelding eruit voor die rustige 'premium' look */
.hero-photo:hover .hero-image-portrait {
    transform: none !important; 
}
/* ============================================================
   DEFINITIEVE FIX: KILL HORIZONTALE SCROLL OP MOBIEL
   ============================================================ */

@media (max-width: 980px) {
    /* 1. De absolute blokkade op de hoofdcontainers */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        /* We laten overflow op visible voor de scripts, maar blokkeren de 'lek' in de wrapper */
        overflow-x: visible !important; 
    }

    /* 2. De wrapper fungeert als de harde vangrail */
    .stack-wrapper, 
    main#page, 
    .page,
    section {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: clip !important; /* 'clip' stopt scrollen zonder sticky te breken */
        box-sizing: border-box !important;
    }

    /* 3. Forceer alle sectie-inhoud binnen het scherm */
    .container {
        width: calc(100% - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important; /* Voorkomt dat inhoud de container opzij duwt */
    }

    /* 4. Onzichtbare schaduwen en gloeden van foto's temmen */
    .hero-photo, 
    .hero-photo::before, 
    .hero-photo::after {
        max-width: 100% !important;
    }
    
    /* 5. Voorkom dat extreem lange woorden de boel oprekken */
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ============================================================
   FIX #actie: card randen/shadows niet afknippen (mobiel)
   ============================================================ */
@media (max-width: 980px){

  /* laat deze sectie weer overflow tonen */
  #actie,
  #actie.pricing-section{
    overflow: visible !important;
  }

  /* container mag NIET hidden zijn in deze sectie */
  #actie .container{
    overflow: visible !important;
  }

  /* geef iets extra ruimte zodat schaduw/glow niet tegen de rand plakt */
  #actie .pricing-grid{
    padding-inline: 10px !important;
  }
}
@media (max-width: 980px){
  #actie .pricing-grid{
    grid-template-columns: 1fr !important;
  }
}
/* ============================================================
   MOBIEL: foto in hero uitzetten
   ============================================================ */
@media (max-width: 980px){
  .hero-right{
    display: none !important;
  }

  /* hero wordt dan 1 kolom tekst */
  .hero-grid{
    grid-template-columns: 1fr !important;
  }
}
/* ============================================================
   MOBIEL: #actie titel kleiner en rustiger
   ============================================================ */
@media (max-width: 980px){

  #actie .main-title{
    font-size: 2rem !important;     /* was ~3–4rem */
    line-height: 1.15 !important;
  }

  /* optioneel: de grijze tweede regel iets subtieler */
  #actie .main-title span{
    font-size: 1.8rem !important;
    display: block;
  }
}
/* ============================================================
   MOBIEL: "Meest gekozen" badge netjes boven tekst
   ============================================================ */
@media (max-width: 980px){

  #actie .price-card.featured{
    padding-top: 56px !important; /* ruimte voor badge */
  }

  #actie .price-card.featured .badge{
    position: static !important;  /* uit absolute modus */
    display: inline-block;
    margin-bottom: 12px;
  }
}
/* ============================================================
   MOBIEL: "Op aanvraag" kleiner in Premium kaart
   ============================================================ */
@media (max-width: 980px){

  /* target de Premium kaart (3e card) */
  #actie .pricing-grid .price-card:nth-child(3) .price{
    font-size: 1.6rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    word-break: keep-all; /* voorkomt rare afbreking */
  }
}
/* ============================================================
   MOBIEL: scroll wheel tekst fixen
   ============================================================ */
@media (max-width: 980px){

  #scroll .scroll-wheel svg text{
    font-size: 12px !important;        /* iets kleiner */
    letter-spacing: 2.5px !important;   /* VEEL belangrijker */
  }
}
@media (max-width: 980px){
  #scroll .scroll-wheel svg text{
    font-size: 16px !important;   /* was ±12–14 */
    letter-spacing: 2.5px !important;
  }
}
/* ============================================================
   #werkwijze (mobiel): compacter + groene progress-lijn terug
   ============================================================ */
@media (max-width: 980px){

  /* 1) Compacter overall */
  #werkwijze.process-section{
    padding: 60px 0 !important;          /* was 100px */
  }

  #werkwijze .process-header{
    margin-bottom: 40px !important;      /* was 180px */
    font-size: 2rem !important;
    line-height: 1.1 !important;
  }

  #werkwijze .process-wrapper{
    gap: 14px !important;
    padding: 0 18px !important;
  }

  /* steps minder “mega lang” */
  #werkwijze .step{
    padding-bottom: 10vh !important;     /* was 18vh */
  }
  #werkwijze .step:last-child{
    padding-bottom: 6vh !important;
  }

  #werkwijze .step h2{
    margin-bottom: 12px !important;
  }
  #werkwijze .step p{
    line-height: 1.55 !important;
  }

  /* 2) Groene lijn terug op mobiel */
  #werkwijze .process-line-container{
    display: block !important;           /* jij had 'none' */
    width: 2px !important;
    margin-top: 8px !important;
  }

  /* lijn netjes zichtbaar */
  #werkwijze .line-background{
    background: rgba(0,0,0,0.08) !important;
  }

  #werkwijze #progress-line.line-active{
    display: block !important;
    background: #20c997 !important;
    box-shadow: 0 0 15px rgba(32, 201, 151, 0.3) !important;
  }

  /* 3) Op mobiel: lijn tussen nummer en tekst zetten */
  #werkwijze .process-left{
    padding-right: 0 !important;
  }
  #werkwijze .process-right{
    padding-left: 18px !important;       /* ruimte voor lijn */
  }
}
/* ============================================================
   #werkwijze (mobiel): groene lijn zichtbaar (simpel)
   ============================================================ */
@media (max-width: 980px){

  /* lijn als vaste linkerrand naast de tekstkolom */
  #werkwijze .process-right{
    position: relative !important;
    padding-left: 22px !important;       /* ruimte voor lijn */
  }

  /* grijze basislijn */
  #werkwijze .process-right::before{
    content: "";
    position: absolute;
    left: 10px;                          /* positie van de lijn */
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0,0,0,0.10);
    border-radius: 999px;
  }

  /* groene “fill” (nu gewoon zichtbaar; later kunnen we hem dynamisch vullen) */
  #werkwijze .process-right::after{
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    height: 130px;                        /* start: klein stukje groen */
    width: 2px;
    background: #20c997;
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(32,201,151,0.35);
  }

  /* oude lijnkolom op mobiel uit laten (die werkt niet in column-layout) */
  #werkwijze .process-line-container{
    display: none !important;
  }
}
@media (max-width: 980px){
  #werkwijze .process-right::after{
    height: var(--fill, 130px); /* 👈 start al zichtbaar */
  }
}
@media (max-width: 980px){
  #werkwijze .process-right::after{
    height: var(--fill, 130px);
  }
}
/* ============================================================
   MOBIEL: toon 02/03/04 per step (zonder JS / zonder HTML edits)
   ============================================================ */
@media (max-width: 980px){

  /* we laten het grote losse nummer (01.) bovenaan staan */
  #werkwijze #active-number{
    display: block !important;
  }

  /* elke step krijgt zijn eigen nummer boven de titel */
  #werkwijze .step{
    position: relative;
    padding-top: 18px !important;
  }

  #werkwijze .step::before{
    content: attr(data-step);
    display: block;
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(12,17,23,.35);
    margin-bottom: 10px;
  }
}
@media (max-width: 980px){
  #werkwijze .process-left{ display:none !important; }
}
/* ============================================================
   #portfolio (mobiel): minder druk -> tekst onder de kaart
   ============================================================ */
@media (max-width: 980px){

  /* kaart iets minder massaal */
  #portfolio .glass-card{
    height: 210px !important;            /* was 260 */
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  /* image rustiger (minder contrast/druk) */
  #portfolio .glass-card img{
    filter: saturate(0.85) contrast(0.92) brightness(0.92);
    transform: scale(1.02);
  }

  /* overlay donkerder onderin voor leesbaarheid, maar subtiel */
  #portfolio .card-overlay{
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.10) 55%, transparent 100%) !important;
  }

  /* ✅ BELANGRIJK: zet de tekst NIET meer over de afbeelding */
  #portfolio .parallax-text{
    position: static !important;
    transform: none !important;
    margin-top: 12px !important;
    padding: 0 2px !important;
    width: 100% !important;
    pointer-events: auto !important;
  }

  /* tekst kleuren weer "normaal" (niet wit) omdat hij onder de kaart staat */
  #portfolio .category{
    color: #3b71fe !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
  }

  #portfolio .project-title{
    color: #0c1117 !important;
    text-shadow: none !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  #portfolio .project-title .italic-text{
    color: #0c1117 !important;
  }

  /* extra spacing tussen items */
  #portfolio .portfolio-item{
    margin-bottom: 28px !important;
  }
}
/* ============================================================
   #portfolio (mobiel): image boven, tekst onder (fix layout)
   ============================================================ */
@media (max-width: 980px){

  /* item wordt column */
  #portfolio .portfolio-item{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* kaart full width */
  #portfolio .glass-card{
    width: 100% !important;
    height: 210px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
  }

  /* tekstblok onder de kaart */
  #portfolio .parallax-text{
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 4px !important;
    transform: none !important;
  }

  /* tekst niet wit (want niet meer in image) */
  #portfolio .project-title,
  #portfolio .project-title .italic-text{
    color: #0c1117 !important;
    text-shadow: none !important;
    white-space: normal !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
  }

  #portfolio .category{
    font-size: 12px !important;
    letter-spacing: 2px !important;
    margin-bottom: 6px !important;
  }
}
@media (max-width: 980px), (hover: none), (pointer: coarse){
  #portfolio.horizontal-portfolio{
    background-attachment: scroll !important;
  }

  #scroll .sticky-container{
    background-attachment: scroll !important;
  }
}
@media (max-width: 980px), (hover: none), (pointer: coarse){
  .hero-photo::before,
  .hero-photo::after{
    display: none !important;
  }
}
@media (hover: none), (pointer: coarse){
  .nav a:hover,
  .header-cta:hover,
  .price-card:hover,
  .hero-photo:hover{
    transform: none !important;
    box-shadow: none !important;
  }
}
html, body{
  -webkit-text-size-adjust: 100%;
}

body{
  overscroll-behavior-y: auto; /* optioneel */
}

/* Alleen als je ooit interne scroll containers hebt */
.mobile-nav{
  -webkit-overflow-scrolling: touch;
}