/*
Theme Name: MK-Videoproductie Stable
Theme URI: https://www.mk-videoproductie.nl/
Author: MK-Videoproductie
Description: Stabiele WordPress-versie op basis van de goedgekeurde v1.7 preview.
Version: 3.2.8
Text Domain: mk-video
*/
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f4f5f6;color:#090b0d;font-family:Inter,Arial,sans-serif;overflow-x:hidden}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}h1,h2,h3{font-family:'Space Grotesk',sans-serif}.shell{padding-left:6vw;padding-right:6vw}.header{position:absolute;z-index:50;width:100%;padding:22px 4vw;display:flex;justify-content:space-between;align-items:center;color:#fff}.logo img{width:220px}.header nav{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:600}.pill{border:1px solid #ffffff88;padding:11px 17px;border-radius:999px}.hero-stage{background:#f4f5f6}.hero{height:88vh;min-height:720px;position:relative;background:#111;color:#fff;overflow:hidden;padding-bottom:66px}.hero-media{position:absolute;inset:0 0 66px;overflow:hidden;transform-origin:center center;will-change:transform;transition:transform .08s linear}.hero-vimeo{position:absolute;inset:-4%;width:108%;height:108%;border:0}.hero-shade{position:absolute;inset:0 0 66px;background:linear-gradient(90deg,#000c,#0003)}.hero-mark{position:absolute;right:-6vw;bottom:82px;width:48vw;opacity:.07}.hero-copy{position:absolute;left:6vw;top:47%;transform:translateY(-47%);z-index:2;max-width:870px}.kicker,.label{font-size:11px;letter-spacing:.18em;font-weight:700}.hero h1{font-size:clamp(72px,8.7vw,132px);line-height:.84;letter-spacing:-.065em;margin:22px 0 30px}.hero h1 span,.manifesto h2 span,.weddings h2 span,.about h2 span,.cta h2 span{color:#00b6d4}.hero p{font-size:19px;line-height:1.65;max-width:650px;color:#eee}.actions{display:flex;gap:12px;margin-top:28px}.button{display:inline-flex;padding:15px 22px;font-weight:700;border:0;transition:.25s}.primary{background:#00b6d4;color:#07131a}.ghost{border:1px solid #ffffff88}.button:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 28px #0003}.scroll{position:absolute;right:4vw;bottom:90px;font-size:10px;letter-spacing:.15em;z-index:3}.hero-ticker{position:absolute;left:0;right:0;bottom:0;height:66px;background:#0067b3;color:#fff;overflow:hidden;display:flex;align-items:center;z-index:5}.ticker-track{display:flex;width:max-content;animation:tickerLoop 40s linear infinite;font-family:'Space Grotesk';font-weight:700;font-size:18px;letter-spacing:.07em}.ticker-set{display:flex;align-items:center;gap:20px;white-space:nowrap;padding-right:20px}.ticker-set b{color:#00b6d4}@keyframes @keyframes tickerLoop{from{transform:translateX(0)}to{transform:translateX(-25%)}}.manifesto{padding-top:102px;padding-bottom:90px}.manifesto-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:11vw}.manifesto h2,.section-top h2,.weddings h2,.about h2,.contact h2{font-size:clamp(44px,6vw,82px);line-height:.95;letter-spacing:-.055em;margin:18px 0 0}.manifesto-copy{padding-top:85px}.manifesto-copy p,.small-copy,.about-head p,.about-story p,.contact p{font-size:18px;line-height:1.75;color:#555}.textlink{color:#0067b3;font-weight:700;display:inline-block;transition:.25s}.textlink:hover{transform:translateX(6px);color:#00b6d4}.story-bridge{position:relative;width:calc(100% - 12vw);height:300px;margin:0 6vw 105px;overflow:hidden;color:#fff}.story-bg{position:absolute;inset:0;background-position:center 35%;background-size:cover;background-repeat:no-repeat;transition:.6s}.story-bridge:hover .story-bg{transform:scale(1.04)}.story-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#000c,#0004)}.story-content{position:absolute;left:34px;bottom:30px;z-index:2}.story-content>span{font-size:10px;letter-spacing:.18em;color:#00d2ef}.story-content>div{display:flex;gap:13px;font-family:'Space Grotesk';font-size:32px;margin-top:10px}.story-content i{color:#00b6d4;font-style:normal}.work{padding-bottom:115px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:35px}.small-copy{max-width:380px}.project-slide{display:none;grid-template-columns:repeat(3,1fr);gap:14px}.project-slide.active{display:grid;animation:slide .45s ease}@keyframes slide{from{opacity:.2;transform:translateX(18px)}to{opacity:1;transform:none}}.case{height:390px;position:relative;overflow:hidden;background:#111;transition:.28s;cursor:pointer}.case img{width:100%;height:100%;object-fit:cover;transition:.55s}.case:hover{transform:translateY(-7px);box-shadow:0 18px 42px #0002}.case:hover img{transform:scale(1.045)}.case-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#000b)}.case-meta{position:absolute;left:24px;bottom:22px;color:#fff}.case-meta span{font-size:10px;letter-spacing:.15em}.case-meta h3{font-size:28px;margin:5px 0}.play{position:absolute;right:18px;top:18px;width:50px;height:50px;border:0;border-radius:50%;background:#00b6d4;color:#fff;transition:.25s}.case:hover .play{transform:scale(1.13);background:#fff;color:#0067b3}.project-controls{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:22px}.project-controls>button{width:48px;height:48px;border:1px solid #bbb;background:#fff;font-size:20px;transition:.2s}.project-controls>button:hover{background:#0067b3;color:#fff}.dots{display:flex;gap:7px}.dot{width:9px!important;height:9px!important;border:0!important;border-radius:50%;background:#c5cbd0!important;padding:0}.dot.active{background:#00b6d4!important}.services{padding:110px 6vw}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.service{background:#fff;border:1px solid #d8dde0;padding:28px;min-height:250px;transition:.28s}.service:hover{transform:translateY(-7px);border-color:#00b6d4;box-shadow:0 18px 42px #0001}.service span{color:#00b6d4;font-size:11px}.service h3{font-size:28px}.service p{color:#60696e;line-height:1.65}.clients{background:#090b0d;color:#fff;padding:80px 0}.logo-marquee{overflow:hidden;margin-top:28px}.logo-track{display:flex;width:max-content;animation:logoLoop 45s linear infinite}.logo-set{display:flex;gap:18px;padding-right:18px}.client-logo{width:220px;height:100px;border:1px solid #2a2e31;display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;color:#d7dadd}@keyframes logoLoop{to{transform:translateX(-50%)}}.weddings{background:#0a0c0e;color:#fff;padding:95px 0}.wedding-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:6vw}.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.package{padding:25px;border:1px solid #2a2e31;min-height:390px;display:flex;flex-direction:column;transition:.32s}.package:hover{transform:translateY(-13px) scale(1.055);border-color:#00d2ef;box-shadow:0 28px 64px #00b6d448;background:#172126}.package.featured{background:#0067b3}.package.featured:hover{background:#0a78c6}.package h3{font-size:28px;transition:.3s}.package:hover h3{transform:scale(1.04);transform-origin:left}.package strong{color:#00d2ef}.package ul{
  list-style:disc;
  padding-left:20px;
}

.package li{
  margin-bottom:8px;
}.package a{margin-top:auto;font-weight:700}.about{padding:78px 6vw 76px}.about-head{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:end;margin-bottom:26px}.about-head .label{grid-column:1/-1}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.about-photo{height:420px;overflow:hidden;background:#0b0d0f}.about-photo img{width:100%;height:100%;object-fit:cover;transition:.5s}.about-photo:hover img{transform:scale(1.035)}.about-story{background:#fff;padding:32px}.experience{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-top:1px solid #ddd}.experience span{color:#0067b3;font-size:10px;letter-spacing:.14em}.about-question{color:#0067b3!important;font-family:'Space Grotesk';font-size:25px!important;font-weight:700}.reviews{padding:95px 6vw}.review{background:#fff;padding:46px;border:1px solid #ddd;transition:.28s}.review:hover{transform:translateY(-5px);box-shadow:0 18px 42px #0001}.stars{color:#0067b3}.review blockquote{font-family:'Space Grotesk';font-size:40px;line-height:1.1;margin:20px 0}.cta{text-align:center;background:#0067b3;color:#fff;padding:110px 6vw}.cta h2{font-size:70px;line-height:.95}.contact{padding:110px 6vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw}.socials{display:grid;gap:10px;color:#0067b3;font-weight:700;margin-top:25px}.contact form{display:grid;gap:12px;transition:.28s}.contact form:hover{transform:translateY(-4px)}.contact input,.contact select,.contact textarea{padding:16px;border:1px solid #bbb;background:#fff;font:inherit}footer{background:#090b0d;color:#aeb5b9}.footer-main{padding:55px 6vw 35px;display:grid;grid-template-columns:1.3fr .7fr;gap:50px}.footer-main img{width:230px}.footer-links{display:flex;gap:18px;justify-content:flex-end;align-items:end}.footer-business{margin:0 6vw;padding:22px 0;border-top:1px solid #24282b;display:flex;gap:10px 24px;flex-wrap:wrap}.footer-business strong{color:#fff}.reveal{opacity:0;transform:translateY(34px);transition:opacity .75s cubic-bezier(.2,.65,.25,1),transform .75s cubic-bezier(.2,.65,.25,1)}.reveal.is-visible{opacity:1;transform:none}.video-modal{position:fixed;inset:0;z-index:100;background:#000e;display:none;align-items:center;justify-content:center;padding:6vw}.video-modal.open{display:flex}.video-frame{width:min(1200px,92vw);aspect-ratio:16/9}.video-frame iframe{width:100%;height:100%;border:0}.modal-close{position:absolute;right:28px;top:20px;background:none;border:0;color:#fff;font-size:46px}@media(max-width:900px){.header nav a:not(.pill){display:none}.manifesto-grid,.wedding-grid,.about-head,.about-grid,.contact{grid-template-columns:1fr}.manifesto-copy{padding-top:5px}.project-slide{grid-template-columns:1fr 1fr}.project-slide .case:last-child{grid-column:1/-1}.service-grid{grid-template-columns:1fr 1fr}.packages{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr}.footer-links{justify-content:flex-start}}@media(max-width:600px){.header{padding:18px 20px}.logo img{width:160px}.shell{padding-left:20px;padding-right:20px}.hero{height:90vh;min-height:720px}.hero-copy{left:20px;right:20px}.hero h1{font-size:58px}.hero-ticker{height:58px}.ticker-track{font-size:14px}.manifesto,.work,.services,.about,.reviews,.contact{padding:75px 20px}.project-slide{grid-template-columns:1fr}.project-slide .case:last-child{grid-column:auto}.case{height:290px}.service-grid{grid-template-columns:1fr}.story-bridge{width:calc(100% - 40px);margin:0 20px 75px}.review blockquote{font-size:28px}.cta{padding:90px 20px}.cta h2{font-size:48px}.footer-main{padding:45px 20px}.footer-business{margin:0 20px;display:grid}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker-track,.logo-track{animation:none}.reveal{opacity:1;transform:none;transition:none}}


/* ===== v1.6 gerichte correcties ===== */

/* Hero: tekst ruim boven de ticker houden, zoals in de gekozen referentie. */
.hero-copy{
  top:34% !important;
  transform:none !important;
}
.hero h1{
  margin-bottom:26px !important;
}
.hero p{
  margin-top:0;
}
.actions{
  margin-top:24px !important;
}

/* Ruimte tussen OVER MIJ en de kop sterk verkleinen. */
.about{
  padding-top:72px !important;
}
.about-head,
.about-heading{
  row-gap:18px !important;
  margin-bottom:26px !important;
}
.about-head .label,
.about-heading .label{
  margin:0 !important;
}
.about-head h2,
.about-heading h2{
  margin-top:0 !important;
}

/* Exact de subtielere pakketinteractie uit de eerdere V5-richting. */
.package{
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease !important;
}
.package:hover{
  transform:translateY(-9px) scale(1.018) !important;
  border-color:#00b6d4 !important;
  box-shadow:0 22px 50px rgba(0,182,212,.15) !important;
}
.package h3,.package strong,.package ul,.package a{
  transition:transform .28s ease !important;
}
.package:hover h3,
.package:hover strong,
.package:hover ul,
.package:hover a{
  transform:scale(1.015) !important;
  transform-origin:left center !important;
}

/* Reviews zoals V5: één review zichtbaar, automatisch wisselend. */
.review-slider{
  position:relative;
  background:#fff;
  padding:50px;
  min-height:330px;
  border:1px solid #d8dde0;
  transition:.28s;
}
.review-slider:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(0,0,0,.08);
}
.review{
  display:none;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  transform:none !important;
}
.review.active{
  display:block;
  animation:reviewFade .45s ease;
}
.review blockquote{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(28px,4vw,54px);
  line-height:1.1;
  letter-spacing:-.035em;
  max-width:1100px;
  margin:25px 0;
}
.review p{color:#6a7277}
.review-dots{
  display:flex;
  gap:8px;
  margin-top:30px;
}
.review-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:0;
  background:#c7cdd1;
  padding:0;
  cursor:pointer;
}
.review-dot.active{background:#00b6d4}
@keyframes reviewFade{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

@media(max-width:900px){
  .hero-copy{
    top:31% !important;
  }
}
@media(max-width:600px){
  .hero-copy{
    top:24% !important;
    left:20px !important;
    right:20px !important;
  }
  .hero h1{
    font-size:56px !important;
  }
  .review-slider{padding:28px}
}


/* ===== v1.7 laatste gerichte correcties ===== */

/* Hero: tekst duidelijk hoger zodat knoppen en tekst volledig vrij blijven van de blauwe ticker. */
.hero-copy{
  top:28% !important;
  transform:none !important;
}

/* Transparant MK-logo lager, ongeveer halverwege/rechtsonder zoals referentie. */
.hero-mark{
  bottom:8% !important;
  right:-5vw !important;
  width:47vw !important;
}

/* Diensten exact dezelfde hover-beleving als de trouwpakketten. */
.service-card{
  transition:transform .28s ease,
             border-color .28s ease,
             box-shadow .28s ease,
             background .28s ease !important;
}
.service-card:hover{
  transform:translateY(-9px) scale(1.018) !important;
  border-color:#00b6d4 !important;
  box-shadow:0 22px 50px rgba(0,182,212,.15) !important;
  background:#fff !important;
}
.service-card h3,
.service-card span,
.service-card p{
  transition:transform .28s ease !important;
}
.service-card:hover h3,
.service-card:hover span,
.service-card:hover p{
  transform:scale(1.015) !important;
  transform-origin:left center !important;
}

@media(max-width:900px){
  .hero-copy{
    top:26% !important;
  }
  .hero-mark{
    bottom:10% !important;
    width:62vw !important;
  }
}
@media(max-width:600px){
  .hero-copy{
    top:20% !important;
  }
  .hero-mark{
    bottom:12% !important;
    width:78vw !important;
  }
}


.header nav ul{display:contents}
.header .menu-item{list-style:none}
.project-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0b0d0f,#0067b3)}
.client-logo img{max-width:160px;max-height:64px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(0) invert(92%);opacity:.86}
.client-logo{color:transparent!important}
.about-photo-fallback{width:100%;height:100%;display:grid;place-items:center;background:#0b0d0f}
.about-photo-fallback img{width:55%;height:auto}
.admin-bar .header{top:32px}
@media(max-width:782px){.admin-bar .header{top:46px}}


/* ===== v3.2 exact screenshot corrections ===== */

/* Diensten: dezelfde subtiele pakket-hover, nu op de echte .service class. */
.service{
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease !important;
}
.service:hover{
  transform:translateY(-9px) scale(1.018) !important;
  border-color:#00b6d4 !important;
  box-shadow:0 22px 50px rgba(0,182,212,.15) !important;
  background:#fff !important;
}
.service h3,.service span,.service p{
  transition:transform .28s ease !important;
}
.service:hover h3,.service:hover span,.service:hover p{
  transform:scale(1.015) !important;
  transform-origin:left center !important;
}

/* Klanten fallbacktekst moet zichtbaar zijn; geüploade logo's blijven monochroom. */
.client-logo{
  color:#d7dadd !important;
}
.client-logo img{
  color:transparent;
  max-width:160px;
  max-height:64px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(0) invert(92%);
  opacity:.86;
}

/* Over mij: titel en rechter intro starten op dezelfde hoogte, zoals referentie. */
.about{
  padding-top:64px !important;
}
.about-head{
  align-items:start !important;
  row-gap:14px !important;
  margin-bottom:26px !important;
}
.about-head .label{
  margin:0 0 12px 0 !important;
}
.about-head h2{
  margin-top:0 !important;
}

/* Footer moet dezelfde complete uitstraling houden. */
.footer-links a{
  color:#aeb5b9;
}
.footer-links a:hover{
  color:#00b6d4;
}

}

.client-logo img{

  max-width:180px !important;

  max-height:78px !important;

  width:auto !important;

  height:auto !important;

  object-fit:contain !important;

  filter:grayscale(1) brightness(1.15) contrast(.9) !important;

  opacity:.88 !important;

}

#mk-loader{position:fixed;inset:0;z-index:99999;background:#0067b3;display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible;transition:opacity .4s ease,visibility .4s ease}#mk-loader.mk-loaded{opacity:0;visibility:hidden;pointer-events:none}.mk-loader-logo{width:min(520px,82vw);text-align:center}.mk-loader-logo img{width:100%;height:auto;opacity:0;transform:scale(.78) rotate(-3deg);filter:blur(8px);animation:mkLogoReveal .55s cubic-bezier(.2,.8,.2,1) forwards}.mk-loader-line{display:block;width:0;height:3px;margin:22px auto 0;background:#00d2ef;box-shadow:0 0 18px rgba(0,210,239,.45);animation:mkLine .75s .05s cubic-bezier(.4,0,.2,1) forwards}@keyframes mkLogoReveal{0%{opacity:0;transform:scale(.78) rotate(-3deg);filter:blur(8px)}65%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1) rotate(0deg);filter:blur(0)}}@keyframes mkLine{0%{width:0}100%{width:100%}}

/* v3.2.5: vertically stacked intro brand and non-emoji link icons */
.mk-loader-logo{width:min(360px,74vw);display:flex;flex-direction:column;align-items:center}.mk-loader-logo .mk-loader-mark{width:min(240px,62vw);animation:mkLogoReveal .55s cubic-bezier(.2,.8,.2,1) forwards}.mk-loader-word{display:block;width:min(240px,62vw);margin-top:16px;color:#fff;font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(17px,5.1vw,27px);font-weight:700;letter-spacing:.035em;line-height:1;text-align:center;white-space:nowrap;opacity:0;transform:translateY(10px);animation:mkWordReveal .42s .3s ease forwards}.mk-loader-line{margin-top:20px;animation-delay:.38s}@keyframes mkWordReveal{to{opacity:1;transform:none}}
.link-with-arrow{display:inline-flex!important;align-items:center;gap:.42em}.link-arrow{width:.82em;height:.82em;display:inline-block;flex:0 0 auto;overflow:visible}.link-arrow path{fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.link-with-arrow .link-arrow{transition:transform .2s ease}.link-with-arrow:hover .link-arrow{transform:translate(2px,-2px)}

@keyframes tickerLoop{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-25%);
  }
}

.hero-ticker{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:66px;
  background:#0067b3;
  color:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  z-index:5;
}

.ticker-track{
  display:flex;
  flex-wrap:nowrap;
  width:max-content;
  animation:mkTickerLoop 35s linear infinite !important;
  will-change:transform;
}

.ticker-set{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:20px;
  white-space:nowrap;
  padding-right:20px;
}

@keyframes mkTickerLoop{
  from{
    transform:translate3d(0,0,0);
  }
  to{
    transform:translate3d(-25%,0,0);
  }
}

.package ul{
  list-style-type:disc !important;
  list-style-position:outside !important;
  padding-left:22px !important;
  margin-left:0 !important;
}

.package ul li{
  display:list-item !important;
  margin-bottom:8px;
  padding-left:2px;
}

.package ul li::marker{
  color:#00b6d4;
  font-size:.9em;
}

/* QA/UX improvements */
.menu-toggle{display:none;background:transparent;border:0;color:#fff;font:inherit;font-weight:700;min-width:48px;min-height:48px;padding:10px;position:relative;z-index:52}
.menu-toggle-lines,.menu-toggle-lines::before,.menu-toggle-lines::after{display:block;width:24px;height:2px;background:currentColor;content:"";transition:.2s}
.menu-toggle-lines{margin:7px auto 0}.menu-toggle-lines::before{transform:translateY(-7px)}.menu-toggle-lines::after{transform:translateY(5px)}
.menu-open .menu-toggle-lines{background:transparent}.menu-open .menu-toggle-lines::before{transform:translateY(0) rotate(45deg)}.menu-open .menu-toggle-lines::after{transform:translateY(-2px) rotate(-45deg)}
.modal-open{overflow:hidden}
.case:focus-within,.button:focus-visible,.textlink:focus-visible,.header a:focus-visible,.header button:focus-visible,.project-controls button:focus-visible,.review-dot:focus-visible,.footer-links a:focus-visible,.footer-business a:focus-visible{outline:3px solid #00d2ef;outline-offset:4px}
.contact-form-wrap{min-width:0}.contact form label{font-size:14px;font-weight:700;margin:6px 0 -7px}.contact form label:first-of-type{margin-top:0}
.mk-hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact form label span{font-weight:400;color:#697277}.contact form button:disabled{cursor:wait;opacity:.7;transform:none;box-shadow:none}
.form-notice{display:flex;align-items:center;gap:18px;padding:20px 22px;margin:0 0 20px;border-radius:4px;animation:noticePop .45s cubic-bezier(.2,.8,.2,1) both}.form-notice strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:20px}.form-notice p{font-size:15px;line-height:1.5;margin:4px 0 0;color:inherit}.form-notice--success{background:#e7f9f4;border:1px solid #78d4bd;color:#073d31}.form-notice--error{background:#fff0f0;border:1px solid #e69a9a;color:#721c24}.success-check{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:#00b6d4;color:#fff;font-size:30px;font-weight:700;animation:checkPop .55s .15s cubic-bezier(.2,1.4,.4,1) both}
@keyframes noticePop{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes checkPop{from{opacity:0;transform:scale(.35) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.dots,.review-dots{align-items:center}.dot,.review-dot{position:relative;box-sizing:content-box!important;background-clip:content-box!important;padding:17px!important;width:10px!important;height:10px!important;border:0!important}.review-dot{border-radius:50%;background:#c5cbd0;background-clip:content-box!important}.review-dot.active{background:#00b6d4;background-clip:content-box!important}

@media(max-width:900px){
  .menu-toggle{display:block}
  .header nav{position:fixed;inset:0;background:#07131af7;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:90px 32px 40px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:.25s;z-index:51}
  .header nav a,.header nav a:not(.pill){display:block;width:100%;padding:14px 0;font-family:'Space Grotesk',sans-serif;font-size:28px}
  .header nav .pill{width:auto;font-size:17px;padding:13px 18px;margin-top:12px}
  .menu-open .header nav{opacity:1;visibility:visible;transform:none}
  .menu-open{overflow:hidden}
}

@media(max-width:600px){
  .hero h1{font-size:clamp(46px,14.5vw,56px);line-height:.94}
  .story-bridge{height:auto;min-height:0;overflow:hidden}
  .story-content{position:relative;left:auto;right:auto;bottom:auto;width:auto;min-height:430px;padding:30px 28px;display:flex;flex-direction:column;justify-content:flex-start}
  .story-content>span{display:block;margin-bottom:24px;line-height:1.4}
  .story-content>div{display:grid;grid-template-columns:1fr;gap:9px;font-size:clamp(27px,8.5vw,34px);line-height:1.05;margin-top:0}
  .story-content i{transform:rotate(90deg);width:max-content;margin:0 0 0 4px;line-height:.8}
  .story-bg{background-position:center center!important}
  .button,.textlink,.package a,.socials a{min-height:44px;align-items:center}
  .project-controls{gap:2px;justify-content:space-between}
  .dots{gap:0}
  .form-notice{align-items:flex-start;padding:18px 16px}
}

@media(prefers-reduced-motion:reduce){
  .form-notice,.success-check{animation:none}
  .story-bg,.case,.case img,.button,.textlink,.package,.review{transition:none}
}

/* Herstel van de tickeranimatie na een foutieve dubbele @keyframes-declaratie. */
@keyframes tickerLoop{from{transform:translateX(0)}to{transform:translateX(-25%)}}