@font-face {
        font-family: 'Goodly_bold';
        src: url('fonts/GoodlyBold.woff2') format('woff2'),
            url('fonts/GoodlyBold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Goodly_extra_light';
        src: url('fonts/GoodlyExtraLight.woff2') format('woff2'),
            url('fonts/GoodlyExtraLight.woff') format('woff');
        font-weight: 200;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Goodly_light';
        src: url('fonts/GoodlyLight.woff2') format('woff2'),
            url('fonts/GoodlyLight.woff') format('woff');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Goodly_medium';
        src: url('fonts/GoodlyMedium.woff2') format('woff2'),
            url('fonts/GoodlyMedium.woff') format('woff');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Goodly_regular';
        src: url('fonts/GoodlyRegular.woff2') format('woff2'),
            url('fonts/GoodlyRegular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Goodly_semibold';
        src: url('fonts/GoodlySemibold.woff2') format('woff2'),
            url('fonts/GoodlySemibold.woff') format('woff');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

/*Social icons font*/
@import 'https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?rd5re8';

::selection {
    background: #555;   
    color: #fff;
}
::-moz-selection {
    background: #555;    
    color: #fff;
}
body {
    background: #151515;
    padding: 0;
    margin: 0 auto;
    min-height: 100vh;
    /* Algemene tekst: een gewone, neutrale sans-serif i.p.v. het merklettertype
       Goodly - dat blijft voorbehouden voor titels/subtitels (zie de expliciete
       h1-h6 regel verderop, die deze body-instelling overschrijft). */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #151515;
}
article,
aside,
details,
figcaption,
footer,
header,
hgroup,
nav,
section {
    display: block;
}
a {
    color: #285F63;
    text-decoration: none;
}
blockquote {
    padding: 10px 20px;
    color: #151515;
    font-size: 1.4em;
    font-style: italic;
    font-weight: 300;
    margin: 0 auto 30px;
}
ul {
    list-style-type: none;
    list-style: none;
    padding-left: 0 !important;
    -webkit-padding-start: initial !important;
    -moz-padding-start: initial;
}
menu,
ol,
ul {
    padding: 0 !important;
}
button {
    background: transparent;
    border: none;
}
button:focus {
    outline: none;
}
input,
textarea {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
textarea {
    padding: 14px;
}
input:focus,
textarea:focus {
    outline: none !important;
    border: 1px solid #285F63;
    box-shadow: none;
}
input[type="submit"] {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
input[type="submit"]:focus {
    outline: none;
}
img {
    width: 100%;
}

/* 1.1 Typography */

/* Titels en subtitels (h1-h6) blijven op het merklettertype Goodly staan,
   ook al is de algemene tekst hierboven omgezet naar Helvetica Neue. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Goodly_regular', Arial, sans-serif;
}
h1,
h2,
h4,
h5,
h6 {
    color: #151515;
    margin-top: 0;
    text-transform: uppercase;
}
h1 {
    font-size: calc(80px + 1vw);
}
h2 {
    font-size: calc(36px + 16 * (100vw - 992px) / 1508);
}
h3 {
    font-size: calc(28px + 16 * (100vw - 992px) / 1508);
    margin-bottom: 20px;
}
h4 {
    font-size: calc(24px + 16 * (100vw - 992px) / 1508);
    font-weight: 300;
}
h5 {
    font-size: 20px;
    font-weight: 400;
}
h6 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: calc(10px + 10 * (100vw - 992px) / 1508);
}
p {
    font-size: calc(18px + 2 * (100vw - 992px) / 1508);
    line-height: 1.8;
    font-weight: 300;
}

/* 1.2 Specials Classes */

.c-white {
    color: #fff !important;
}
.navbar-white {
    color: #fff;
    background-color: transparent !important;
}
.center-block {
    display: flex;
    justify-content: center;
}
.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}
.align-center {
    text-align: center;
    display: block;
}
.socials li {
    display: inline-block;
}
.share-links a {
    font-size: 19px;
    padding: .5em;
}
[class*="socicon-"] {
  display: inline-block;
  color: inherit;
  margin: 0;
  transition: opacity .3s ease;
}
#contact [class*="socicon-"] {
  padding-right: .7em;
}
[class*="socicon-"]:hover {
  opacity: .4;
}
/* 1.3 Button */

.ms-button {
  color: #151515;
  display: inline-block;
  position: relative;
  padding: .5em 1em;
  margin-bottom: 0;
  font-weight: 400 !important;
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  text-decoration: none;
  border: solid 1px;
  transition: color .4s ease;
}
.ms-button:after {
    position: absolute;
    display: block;
    content: attr(data-title);
    padding: 7px 0;
    font-size: 14px;
    left: 0;
    top: 0;
    width: 0%;
    background: #285F63;
    color: #fff;
    text-indent: 1rem;
    transition: all .3s ease;
    overflow: hidden;
    border: none;
    bottom: 0;
}
.ms-button:hover {
  color: #285F63;
}
.ms-button:active::after,
.ms-button:focus::after,
.ms-button:hover::after {
    width: 100%;
    padding-right: 25px;
}

.ms-btn--slider {
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  width: 11em;
  font-weight: 600;
  letter-spacing: .15em;
}
.ms-btn--slider::before{
    content: '';
    height: .1rem;
    width: 2rem;
    margin-right: .7rem;
    background: #285F63;
    transition: width .3s ease;
}
.ms-btn--slider:hover::before {
  width: 3rem;
}

/**
 * 2. Header
 */

.ms-header {
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 3;
}
/* 2.1 Menu */

.ms-logo {
    position: relative;
    z-index: 7;
    height: 50px;
}
.logo-dark,
.logo-light {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .3s ease .4s;
}
.ms-logo img {
    width: auto;
    height: 100%;
}
.logo-dark.current,
.logo-light.current {
    opacity: 1;
}
.logo-dark.active,
.logo-light.active {
    opacity: 1;
    transition: opacity .1s;
}
.ms-nav {
    padding: 2em 3em;
    color: inherit;
}

/* 2.2 Burger button */

.hamburger {
    margin-right: 0;
    margin-left: auto;
    overflow: visible;
    cursor: pointer;
    z-index: 7;
    border: 0;
    transition-timing-function: linear;
    transition-duration: .3s ease;
    transition-property: opacity, -webkit-filter;
    transition-property: opacity, filter;
    transition-property: opacity, filter, -webkit-filter;
}
.navbar-white .hamburger-label {
    color: #fff;
}
.hamburger-label {
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: -4em;
    padding-right: 4em;
    text-transform: uppercase;
    line-height: 1.5em;
    transition: color .3s ease .4s;
    color: #151515;
}
.hamburger.is-active .hamburger-label {
    color: #fff !important;
    transition: color .1s ease;
}
.hamburger-box {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 20px;
    vertical-align: middle;
}
.hamburger-inner {
    display: block;
    top: 0;
}
.navbar-white .hamburger-inner,
.navbar-white .hamburger-inner:after,
.navbar-white .hamburger-inner:before {
    background-color: #fff;
}
.hamburger-inner:after,
.hamburger-inner:before {
    display: block;
    content: '';
}
.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #151515;
    transition: all .3s ease .5s;
}
.hamburger-inner:before {
    top: 8px;
    left: -8px;
}
.hamburger-inner:after {
    top: 16px;
    width: 26px;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner:after {
    background-color: #fff;
    transition-delay: .1s;
}
.hamburger.is-active .hamburger-inner {
    -webkit-transform: translate3d(0, 8px, 0) rotate(45deg);
    transform: translate3d(0, 8px, 0) rotate(45deg);
}
.hamburger.is-active .hamburger-inner:before {
    opacity: 0;
    transition: opacity .3s ease 0s
}
.hamburger.is-active .hamburger-inner:after {
    width: 30px;
    -webkit-transform: translate3d(0, -16px, 0) rotate(-90deg);
    transform: translate3d(0, -16px, 0) rotate(-90deg);
}

/* 2.3 Collapse navigation */

.ms-nav {
    display: flex;
    align-items: center;
}

.height-full-viewport {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: #2A3F42;
    background: radial-gradient(circle, rgba(40, 95, 99, 1) 0%, rgba(42, 63, 66, 1) 100%);

    /* Zorgt voor een zachtere, premium uitstraling */
    z-index: 5;
    overflow: hidden;
    transition: height .8s cubic-bezier(0.3, 1, 0.3, 1) .1s;
}
.ms-navbar {
    z-index: 6;
    margin: 0 auto;
    display: block;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
}
.ms-nav.is-visible .height-full-viewport {
    height: 100vh;
    transition: height 1s ease;
}
.nav-item {
    cursor: pointer;
    padding: .75em;
    opacity: 0;
    /* Breder dan de langste label ("Your Momnt") + de 2.4rem hover-inspring
       hieronder, zodat de tekst nooit naar een tweede lijn moet omklappen
       en het item niet meer van grootte/positie verspringt bij hover. */
    width: 320px;
    margin-left: 3em;
    transition: opacity .3s ease;
}
.ms-navbar a {
    display: block;
}
.ms-navbar .ms-btn {
    display: inline-block;
    text-transform: uppercase;
    line-height: 1;
    padding: 0 0.25em;
    position: relative;
    white-space: nowrap; /* nooit meer omklappen naar een 2de lijn */
}
.ms-navbar .ms-btn {
    font-size: 1.75em;
    letter-spacing: .02em;
    color: #fff;
    font-weight: 700 !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.ms-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--momnts-light-teal, #7AC7CC);
    height: .1rem;
    top: 50%;
    width: 0;
    transition: width .3s ease;
}
.nav-item__label {
    position: relative;
    display: block;
    margin: 0.5em 0 0 0;
    margin-top: 0.25em;
    padding: 0.5em;
    /* Paper-tint i.p.v. donkergrijs: donkergrijs (#555/#9a9a9a) was zo goed
       als onleesbaar op de donkere teal-achtergrond van het uitgeklapte
       menu. */
    color: rgba(246, 244, 239, 0.55);
    transition: color .3s ease;
    text-decoration: none;
}
.nav-item:hover .nav-item__label {
    color: rgba(246, 244, 239, 0.9);
}
.is-visible .nav-item {
    opacity: 1;
    transition: opacity 2s cubic-bezier(0.16, 1.08, 0.38, 0.98) .3s;
}
.nav-item .ms-btn {
    transition: all .3s ease;
}
.nav-item:active .ms-btn,
.nav-item:focus .ms-btn,
.nav-item:hover .ms-btn {
    /* Was #285F63 - exact dezelfde kleur als de menu-achtergrond, dus de
       tekst werd bijna onzichtbaar bij hover. Light Teal geeft wél contrast
       op de donkere achtergrond. */
    color: var(--momnts-light-teal, #7AC7CC);
    opacity: 1;
    padding-left: 2.4rem;
}
.nav-item:active .ms-btn::before,
.nav-item:focus .ms-btn::before,
.nav-item:hover .ms-btn::before {
    width: 2rem;
}

/**
 * 3. Pages Style
 */

.ms-preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 8;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    background-color: #151515;
}
.ms-main-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    opacity: 0;
    background-color: #fff;
}
.ms-container {
    width: 100%;
    height: 100%;
    position: relative;
}
.ms-section__block {
    width: 85%;
    max-width: 88em;
    margin: 0 auto 6em;
}
.ms-page-title span {
    text-transform: uppercase;
    letter-spacing: .15em;
    color: #285F63;
}
.page-header {
    text-transform: uppercase;
    position: relative;
    margin: 15px 0;
}
.page-desc {
    width: 50vh;
    font-size: 1.5em;
    line-height: 1.5;
    color: #151515;
    letter-spacing: .05em;
}

/**
 * 4. Home Slider
 */

.home-slider {
    padding-top: 0 !important;
}
.swiper-container {
    width: 100%;
    height: 100vh;
}
.swiper-slide {
    overflow: hidden;
}
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 1;
    background: -moz-linear-gradient(top, black 0, transparent 50%, transparent 63%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-linear-gradient(top, black 0, transparent 50%, transparent 63%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, black 0, transparent 50%, transparent 63%, rgba(0, 0, 0, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#c9000000', GradientType=0);
    transition: all .65s ease;
}
.swiper-slide-duplicate-active .overlay,
.swiper-slide-active .overlay {
    opacity: .4;
}
.slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.slide-inner--image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: .2;
    transform: scale(1.07);
    -webkit-transition: opacity .6s ease-in-out, transform 2s ease .7s;
    -moz-transition: opacity .6s ease-in-out, transform 2s ease .7s;
    transition: opacity .6s ease-in-out, transform 2s ease .7s;
}
.swiper-slide-duplicate-active .slide-inner--image,
.swiper-slide-active .slide-inner--image {
    opacity: 1;
    transform: scale(1);
}

/* 4.1 Slider navigation buttons */

.swiper-button-prev,
.swiper-button-next {
    text-transform: uppercase;
    color: #fff;
    letter-spacing: .2em;
    line-height: 2em;
    font-size: 12px;
    width: auto;
    height: 24px;
    background-image: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.swiper-button-prev {
    padding-left: 6em;
    left: 0;
    -webkit-transition: padding-left .3s ease;
    -moz-transition: padding-left .3s ease;
    transition: padding-left .3s ease;
}
.swiper-button-next {
    padding-right: 6em;
    right: 0;
    -webkit-transition: padding-right .3s ease;
    -moz-transition: padding-right .3s ease;
    transition: padding-right .3s ease;
}
.swiper-button-prev::after {
    content: "";
    width: 4em;
    height: 1px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: calc(50% - 1px);
    -webkit-transition: width .3s ease;
    -moz-transition: width .3s ease;
    transition: width .3s ease;
}
.swiper-button-next::after {
    content: "";
    width: 4em;
    height: 1px;
    background-color: #fff;
    position: absolute;
    right: 0;
    top: calc(50% - 1px);
    -webkit-transition: width .3s ease;
    -moz-transition: width .3s ease;
    transition: width .3s ease;
}
.swiper-button-prev:hover {
    padding-left: 90px;
}
.swiper-button-prev:hover::after {
    width: 75px;
}
.swiper-button-next:hover {
    padding-right: 90px;
}
.swiper-button-next:hover::after {
    width: 75px;
}

/* 4.2 Slider inner info */

.slide-inner--info {
    position: absolute;
    width: auto;
    min-height: 50px;
    bottom: 3em;
    padding-left: 3em;
    color: #fff;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.swiper-slide-active .slide-inner--info {
    opacity: 1;
    transition: opacity 1s ease 1s;
}
.slide-inner--info h1 {
    margin: 10px 0;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1em;
    color: #fff;
}
.slide-inner--desc {
    max-width: 24em;
    margin: .6em 0 1.5em;
    font-size: 1.05em;
    line-height: 1.6;
    font-weight: 300;
    color: rgba(255, 255, 255, .85);
}
.slide--info__link {
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border-bottom: solid 2px;
}
.swiper-slide--bottom {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* 4.3 Pagination */

.expanded-timeline {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: right;
        -ms-flex-pack: right;
            justify-content: right;
    z-index: 3;
    bottom: 2.8em;
    right: 3em;
    width: 40vh;
}
.swiper-pagination {
    z-index: 4;
    width: 85%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(255, 255, 255, .5);
}
.swiper-pagination-progressbar-fill {
    background: #fff !important;
}
.expanded-timeline__counter span {
    text-align: center;
    margin-left: 1.8em;
    margin-right: 100%;
    padding: .4em 0;
    color: #fff;
    display: block;
}
.scroll-message {
    position: absolute;
    right: 0;
    color: #fff;
    opacity: .5;
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    letter-spacing: .15em;
}
.scroll-svg {
    width: 24px;
    margin: 0 auto 1.2em;
    display: block;
}

/**
 * 5. Albums
 */

.filtr-container {
    transition: height .5s ease-out;
    overflow: hidden;
}
.filtr-btn {
    display: inline-block;
    margin-bottom: 2.4em;
}
.filtr-btn li {
    cursor: pointer;
    display: inline-block;
    opacity: .5;
    margin-bottom: 15px;
    transition: opacity .3s ease;
}
.filtr-btn h6 {
    margin-bottom: 0;
    padding-right: 1.2em;
}
.filtr-btn li.active {
    opacity: 1;
}
.filtr-btn li:hover {
    opacity: 1 !important;
}
.album-item {
    padding-bottom: 1.8em;
}
.album-item a {
    padding-top: 60%;
    display: flex;
    overflow: hidden;
    position: relative;
    z-index: 9;
}
.album-item__img {
    position: absolute;
    width: 100.5%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: 50% 50%;
    background: no-repeat;
    background-position: center;
    background-size: cover;
    transform: scale(1);
    transition: transform .3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.album-item__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100.5%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
}
.album-item__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 1;
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s ease;
}
.album-item__overlay h5 {
    position: relative;
    color: #fff;
    margin: 0;
    max-width: 100%;
    padding: 1em;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    transform: scale(1.5);
    opacity: 0;
    transition: all .3s ease;
}
.album-item:hover .album-item__img {
    transform: scale(1.1);
}
.album-item:hover .album-item__cover,
.album-item:hover .album-item__overlay h5 {
    opacity: 1;
    transform: translateZ(0);
}

/**
 * 6. Gallery
 */

.ug-thumb-overlay:hover::before {
    top: 15px;
    right: 15px;
}
.ug-thumb-overlay:hover::after {
    bottom: 15px;
    left: 15px;
}
.ug-thumb-image {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 0;
    transition: transform .3s ease, opacity 2s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0s !important;
}
.ug-thumb-image {
    transform: scale(1) !important;
}
.ug-thumb-wrapper,
.post-item {
    pointer-events: none;
}
.ug-thumb-wrapper.ug-tile.ug-tile-clickable.ug-thumb-ratio-set:hover .ug-thumb-image {
    transform: scale(1.1) !important;
}

/**
 * 7. Blog
 */

.ms-right-sidebar {
    display: inline-block;
}
.ms-right-sidebar h5 {
    margin-bottom: 15px;
}
.ms-right-sidebar a {
    display: block;
    border-top: solid 1px rgba(103, 103, 103, .3);
    padding: 15px 0;
}
.ms-right-sidebar a:hover .post-item__title,
.ms-right-sidebar a:hover .post-item__title {
    color: #285F63;
}
.ms-right-sidebar .post-item__title {
    margin-bottom: 0;
    transition: color .3s ease;
}
.ms-right-sidebar .post-item__date {
    margin-top: .3em;
}
#ms-blog-post img {
    margin-bottom: 30px;
}
.post-item {
    margin-bottom: 3em;
    padding-right: 3em;
}
.post-item:nth-child(2n) {
    padding-right: 15px;
    padding-left: 3em;
}
.post-item__img {
    position: relative;
    overflow: hidden;
}
.album-item__overlay::before,
.post-item__img::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 1;
    background-color: rgb(240, 240, 240);
    transition: opacity 2s cubic-bezier(0.16, 1.08, 0.38, 0.98) 1.2s;
}
.loaded .album-item__overlay::before,
.loaded .post-item__img::before {
    opacity: 0;
}
.post-item__img img {
    width: 100%;
    height: auto;
    max-height: 35em;
    padding: 0;
    display: block;
}
.post-item__img::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    background: rgba(231, 55, 39, 0);
    background: -moz-radial-gradient(center, ellipse cover, rgba(231, 55, 39, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(231, 55, 39, 0)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(231, 55, 39, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(231, 55, 39, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(231, 55, 39, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(231, 55, 39, 0) 0%, rgba(0, 0, 0, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e73727', endColorstr='#000000', GradientType=1);
    transition: opacity .3s ease;
}
.post-item__info {
    position: relative;
    margin: 2.5em 0 0 2.5em;
}
.post-item__title {
    width: 100%;
    max-width: 400px;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 20px;
}
.post-item__date {
    margin-left: 0;
    margin-right: auto;
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
}
.post-item__link {
    position: absolute;
    width: auto;
    bottom: 0;
    right: 0;
    padding-right: 3em;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .12em;
    -webkit-transition: padding-right .3s ease;
    -moz-transition: padding-right .3s ease;
    transition: padding-right .3s ease;
}
.post-item__link::after {
    content: '';
    width: 2em;
    height: 1px;
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    background: red;
    -webkit-transition: width .3s ease;
    -moz-transition: width .3s ease;
    transition: width .3s ease;
}
.post-item:hover .post-item__img::after {
    opacity: .7;
}
.post-item:hover .post-item__link::after {
    width: 3em;
}
.post-item:hover .post-item__link {
    padding-right: 4em;
}
.ms-pagination {
    padding: 0;
    display: flex;
    justify-content: center;
}
.page-item {
    height: auto;
    position: relative;
    display: inline-block;
    margin: 0 .5em;
    border-right: none !important;
}
.page-item:last-child {
    border-right: solid 1px rgba(0, 0, 0, .1);
}
.page-link {
    padding: 1em;
    display: block;
    line-height: 1em;
}

/**
 * 8. About
 */

.about__info {
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.about__info h4 {
    margin: 1em 0;
}
#about .row {
    margin-bottom: 9em;
}

/**
 * 9. Contact
 */

.form-group {
    position: relative;
    margin: 0;
    transition: border-color .3s ease;
}
.form-control {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 1em;
    height: 34px;
    font-size: calc(16px + 2 * (100vw - 992px) / 1508);
    color: #151515;
    font-weight: 300;
    margin-bottom: 2em;
    background-image: none;
    border: 1px solid #555;
}
#message {
    min-height: 150px;
    max-height: 150px;
    max-width: 100%;
    min-width: 100%;
    padding: 10px 14px;
}
label.error {
    position: absolute;
    bottom: 1.2em;
    font-size: 12px;
    color: #C0392B;
}

/**
 * 10. Footer
 */

footer {
    position: relative;
    right: 0;
    bottom: -50px;
    left: 0;
    width: 100%;
    background: #fff;
}
.ms-footer {
    width: 85%;
    max-width: 88em;
    margin: 0 auto;
    display: flex;
    font-size: 16px;
    align-items: center;
}
.ms-footer .copyright {
    padding: 1.2em 0;
    margin-left: 0;
    margin-right: auto;
}
.ms-footer .socials {
    padding: 0;
    margin-left: auto;
    margin-right: 0;
}
.ms-footer .socials a {
    padding-left: 15px;
}

/**
 * 11. Responsive Rules
 */

@media only screen and (max-width: 805px) {
    h1 {
        font-size: calc(48px + 1vw);
    }
    h6 {
        font-size: 16px;
    }
    blockquote {
        margin: 0 auto 15px;
        font-size: 1em;
    }
    .expanded-timeline {
        width: 50vh;
    }
    .ms-nav {
        padding-top: 1.4em;
    }
    .ms-navbar .ms-btn {
        font-size: 1.4em;
    }
    .ms-navbar {
        position: relative;
        width: 100%;
        min-height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
    }
    .nav-item {
        display: inline-block;
        width: auto;
        margin-left: 0;
    }
    .nav-item__label {
        display: none;
    }
    .ms-nav {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 1.4em;
    }
    .overlay {
        background: -moz-linear-gradient(top, black 0, transparent 35%, transparent 45%, rgba(0, 0, 0, 0.9) 100%);
        background: -webkit-linear-gradient(top, black 0, transparent 35%, transparent 45%, rgba(0, 0, 0, 0.9) 100%);
        background: linear-gradient(to bottom, black 0, transparent 35%, transparent 45%, rgba(0, 0, 0, 0.9) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#c9000000', GradientType=0);
    }
    .swiper-button-prev,
    .swiper-button-next {
        top: 50vh;
    }
    .swiper-button-prev {
        padding-left: 3em;
    }
    .swiper-button-next {
        padding-right: 3em;
    }
    .swiper-button-prev::after,
    .swiper-button-next::after {
        width: 2em;
    }
    .swiper-button-prev:hover {
        padding-left: 3em;
    }
    .swiper-button-prev:hover::after {
        width: 2em;
    }
    .swiper-button-next:hover {
        padding-right: 3em;
    }
    .swiper-button-next:hover::after {
        width: 2em;
    }
    .expanded-timeline {
        display: none;
    }
    .slide-inner--info {
        width: 100%;
        text-align: center;
        min-height: 50px;
        bottom: 10vh;
        padding-left: 0;
        color: #fff;
        z-index: 1;
        opacity: 0;
        transition: opacity 1s ease;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .slide-inner--desc {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0 1em;
    }
    .ms-btn--slider {
        margin: 15px auto;
        display: inline-block;
        letter-spacing: .15em;
        background: #285F63;
        color: #fff;
        padding: .5em 0;
    }
    .ms-btn--slider::before {
        content: '';
        display: none;
        width: 0;
    }
    .ms-container {
        padding-top: 6em;
        padding-bottom: 3em;
    }
    .ms-container.home-slider {
        padding-bottom: 0 !important;
    }
    .ms-section__block {
        width: auto;
        margin: 0 15px 3em;
    }
    .page-desc {
        width: 100%;
        font-size: 1.2em;
        line-height: 1.5;
        color: #151515;
        letter-spacing: .05em;
    }
    .post-item,
    .post-item:nth-child(2n) {
        padding-right: 15px;
        padding-left: 15px;
    }
    #contact>div {
        margin-bottom: 30px;
    }
    .ms-footer .copyright {
        margin-left: auto;
    }
    .ms-footer .socials {
        display: none;
    }
}


/* =========================================================
   MOMNTS — CINEMATIC LOADING INTRO
   Premium / Minimal / Editorial
   ========================================================= */

html.is-loading,
html.is-loading body {
    overflow: hidden;
    background: #0b1113;
}

/* Hide website while intro is active */
html.is-loading .ms-main-container {
    opacity: 0;
    visibility: hidden;
}


/* =========================================================
   LOADER
   ========================================================= */

#cinematic-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483647;

    display: grid;
    place-items: center;

    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            #285f63 0%,
            #2a4f52 38%,
            #2a3f42 72%,
            #17282b 100%
        );

    opacity: 1;
    visibility: visible;

    clip-path: inset(0 0 0 0);
}


/* =========================================================
   SUBTLE AMBIENT LIGHT
   ========================================================= */

#cinematic-loader::before {
    content: "";

    position: absolute;
    width: 75vmax;
    height: 75vmax;

    top: 42%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(122, 199, 204, 0.18) 0%,
            rgba(122, 199, 204, 0.07) 30%,
            transparent 68%
        );

    filter: blur(30px);

    pointer-events: none;
}


/* =========================================================
   VERY SUBTLE TOP LIGHT
   ========================================================= */

#cinematic-loader::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.025) 0%,
            transparent 35%,
            transparent 70%,
            rgba(0,0,0,0.18) 100%
        );

    pointer-events: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.loader-content {
    position: relative;
    z-index: 5;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;
}


/* =========================================================
   BRAND / LOGO
   ========================================================= */

#cinematic-loader .loader-brand {
    position: absolute;
    /*
     * Bewust geen inset: 0 (= perfect gecentreerd): het grote icoon
     * liep zo onderaan uit beeld terwijl er bovenaan te veel lucht
     * overbleef. Door de box zelf wat naar boven te schuiven (in
     * plaats van enkel het icoon te verkleinen) komt het icoon op elk
     * formaat — ook tijdens de grote intro-fase — hoger in beeld.
     */
    top: -9vh;
    right: 0;
    bottom: 9vh;
    left: 0;

    display: grid;
    place-items: center;

    transform-origin: center center;

    will-change:
        opacity,
        filter;
}


/*
 * Logo intentionally clean.
 *
 * Geen zware glow.
 * Het logo moet premium aanvoelen,
 * niet als een game-intro.
 */
#cinematic-loader #loader-logo {
    display: block;

    width: 30vmin;
    max-width: none;
    min-width: 300px;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 18px
            rgba(255, 255, 255, 0.22)
        );

    will-change:
        width,
        opacity,
        filter;
}


/* =========================================================
   QUOTE
   ========================================================= */

.loader-quote {
    position: absolute;
    z-index: 10;

    top: 55%;
    left: 50%;

    width: min(90%, 1000px);

    color: #f6f4ef;

    font-family: inherit;

    font-size: clamp(
        24px,
        4vw,
        58px
    );

    font-weight: 400;

    letter-spacing: 0.025em;

    line-height: 1;

    text-align: center;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, -50%)
        translateY(14px);

    will-change:
        opacity,
        transform;

    pointer-events: none;
}

.loader-quote span {
    display: inline-block;

    text-shadow:
        0 2px 24px
        rgba(0, 0, 0, 0.20);
}


/* =========================================================
   VIGNETTE
   ========================================================= */

.loader-vignette {
    position: absolute;
    inset: 0;

    z-index: 20;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 52%,
            rgba(5, 10, 11, 0.12) 75%,
            rgba(5, 10, 11, 0.42) 100%
        );
}


/* =========================================================
   FILM GRAIN
   ========================================================= */

.loader-noise {
    position: absolute;

    inset: -50%;

    z-index: 21;

    pointer-events: none;

    opacity: 0.025;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

    mix-blend-mode: soft-light;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    #cinematic-loader {
        background:
            radial-gradient(
                circle at 50% 45%,
                rgba(40, 95, 99, 0.96) 0%,
                rgba(42, 63, 66, 0.94) 42%,
                #0b1113 100%
            );
    }

    #cinematic-loader #loader-logo {
        width: 58vmin;
        min-width: 180px;
    }

    .loader-quote {
        width: 86%;

        font-size: clamp(
            24px,
            8vw,
            38px
        );

        letter-spacing: 0.015em;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #cinematic-loader {
        transition: none !important;
    }

    #cinematic-loader .loader-brand,
    #cinematic-loader #loader-logo,
    .loader-quote {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   MOMNTS — INNER PAGES (Capture / Experience / Stories /
   Your Momnt / Contact)
   Wit-op-teal designsysteem voor de niet-homepage pagina's.
   ========================================================= */

:root {
    --momnts-teal: #285F63;
    --momnts-deep-teal: #2A3F42;
    --momnts-ink: #0B1113;
    --momnts-teal-mid: #2A4F52;
    --momnts-soft-teal: #3D8A8F;
    --momnts-light-teal: #7AC7CC;
    --momnts-paper: #F6F4EF;
    --momnts-white: #FFFFFF;
}

/* ---- Page hero (icoon + titel bovenaan elke binnenpagina) ---- */

.ms-page-hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4em !important;
}
.ms-page-hero__icon {
    width: 54px;
    height: 54px;
    margin-bottom: 1.6em;
}
.ms-page-hero__icon img {
    width: 100%;
    height: auto;
}
.ms-page-hero .ms-page-title {
    max-width: 46em;
}
.ms-page-hero .page-desc {
    width: 100%;
    margin: 0 auto;
}
.ms-page-hero .page-header {
    font-family: 'Goodly_semibold', Arial, sans-serif;
    color: var(--momnts-deep-teal);
}

/* ---- Eyebrow / kicker labels ---- */

.ms-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .8em;
    color: var(--momnts-teal);
    font-weight: 600;
    margin-bottom: .8em;
}

/* ---- Content sections op witte pagina's ---- */

.ms-content-section {
    width: 85%;
    max-width: 78em;
    margin: 0 auto 6em;
    padding-top: 150px;
}
.ms-content-section--narrow {
    max-width: 52em;
}
.ms-content-section h2 {
    color: var(--momnts-deep-teal);
    margin-bottom: .5em;
}
.ms-content-section h6 {
    color: var(--momnts-teal);
}
.ms-content-section p {
    color: #3a3a3a;
}
.ms-section-intro {
    max-width: 44em;
    margin: 0 auto 3em;
    text-align: center;
}

/* ---- Juridische tekstpagina's (Privacybeleid, ...) ---- */

.ms-legal-text h2 {
    font-family: 'Goodly_regular', Arial, sans-serif;
    font-size: 1.35em;
    margin-top: 2em;
}
.ms-legal-text h2:first-child {
    margin-top: 0;
}
.ms-legal-text p,
.ms-legal-text li {
    color: #3a3a3a;
    line-height: 1.7;
}
.ms-legal-text ul {
    padding-left: 1.4em;
    margin-bottom: 1.4em;
}
.ms-legal-text li {
    margin-bottom: .4em;
}
.ms-legal-text a {
    color: var(--momnts-teal);
}
.ms-legal-text .ms-legal-updated {
    color: #7c8a8c;
    font-size: .85em;
    margin-bottom: 2.4em;
}
.ms-legal-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0 1.8em;
    font-size: .92em;
}
.ms-legal-text th,
.ms-legal-text td {
    text-align: left;
    padding: .7em .9em;
    border-bottom: 1px solid rgba(42, 63, 66, .12);
    vertical-align: top;
}
.ms-legal-text th {
    color: var(--momnts-deep-teal);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78em;
}

/* ---- Discipline / dienst rijen (Capture) ---- */

.ms-discipline-row {
    display: flex;
    align-items: center;
    gap: 4em;
    padding: 4em 0;
    border-bottom: 1px solid rgba(42, 63, 66, .12);
}
.ms-discipline-row:last-child {
    border-bottom: none;
}
.ms-discipline-row:nth-child(even) {
    flex-direction: row-reverse;
}
.ms-discipline-row__media {
    flex: 0 0 42%;
    max-width: 42%;
    overflow: hidden;
    border-radius: 2px;
}
.ms-discipline-row__media img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .6s ease;
}
.ms-discipline-row__media:hover img {
    transform: scale(1.05);
}
.ms-discipline-row__body {
    flex: 1;
}
.ms-discipline-row__body h6 {
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--momnts-teal);
    margin-bottom: .3em;
}
.ms-discipline-row__body h3 {
    color: var(--momnts-deep-teal);
    margin-bottom: .5em;
}
.ms-discipline-row__list {
    margin-top: 1.4em;
    list-style: none;
    padding: 0;
}
.ms-discipline-row__list li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: .6em;
    color: #3a3a3a;
}
.ms-discipline-row__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--momnts-light-teal);
}

/* ---- Pricing / formule kaarten (Capture, Experience) ---- */

.ms-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2em;
}
.ms-pricing-card {
    position: relative;
    background: var(--momnts-paper);
    border: 1px solid rgba(42, 63, 66, .1);
    border-radius: 4px;
    padding: 2.6em 2.2em;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ms-pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(11, 17, 19, .1);
    border-color: var(--momnts-teal);
}
.ms-pricing-card--featured {
    background: var(--momnts-deep-teal);
    color: var(--momnts-paper);
}
.ms-pricing-card--featured .ms-pricing-card__name,
.ms-pricing-card--featured .ms-pricing-card__desc,
.ms-pricing-card--featured .ms-pricing-card__list li {
    color: var(--momnts-paper);
}
.ms-pricing-card--featured .ms-pricing-card__list li::before {
    background: var(--momnts-light-teal);
}
.ms-pricing-card__badge {
    position: absolute;
    top: -.9em;
    right: 1.6em;
    background: var(--momnts-teal);
    color: #fff;
    font-size: .7em;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .5em 1em;
    border-radius: 20px;
}
.ms-pricing-card__name {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 1.1em;
    color: var(--momnts-deep-teal);
    margin-bottom: .2em;
}
.ms-pricing-card__price {
    font-size: 2em;
    font-weight: 700;
    margin: .3em 0 .1em;
}
.ms-pricing-card__price small {
    font-size: .4em;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: .7;
}
.ms-pricing-card__desc {
    color: #55605f;
    margin-bottom: 1.4em;
    font-size: .95em;
}
.ms-pricing-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2em;
    flex: 1;
}
.ms-pricing-card__list li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: .7em;
    font-size: .95em;
    color: #3a3a3a;
}
.ms-pricing-card__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--momnts-teal);
    font-weight: 700;
}
.ms-pricing-card__cta {
    align-self: flex-start;
}
.ms-pricing-note {
    text-align: center;
    margin-top: 2.5em;
    color: #55605f;
    font-size: .95em;
}

/* ---- Momnts buttons (teal, gevuld) ---- */

.ms-btn-momnts {
    display: inline-block;
    padding: .9em 2em;
    background: var(--momnts-teal);
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8em;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--momnts-teal);
    border-radius: 2px;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.ms-btn-momnts:hover {
    background: var(--momnts-soft-teal);
    border-color: var(--momnts-soft-teal);
    color: #fff !important;
}
.ms-btn-momnts--outline {
    background: transparent;
    color: var(--momnts-teal) !important;
}
.ms-btn-momnts--outline:hover {
    background: var(--momnts-teal);
    color: #fff !important;
}
.ms-pricing-card--featured .ms-btn-momnts--outline {
    color: var(--momnts-paper) !important;
    border-color: rgba(246, 244, 239, .5);
}
.ms-pricing-card--featured .ms-btn-momnts--outline:hover {
    background: var(--momnts-light-teal);
    border-color: var(--momnts-light-teal);
    color: var(--momnts-ink) !important;
}

/* ---- Experience: future teaser ---- */

.ms-future-teaser {
    margin-top: 3em;
    padding: 3em 2.5em;
    text-align: center;
    background: linear-gradient(135deg, var(--momnts-deep-teal) 0%, var(--momnts-ink) 100%);
    border-radius: 4px;
    color: var(--momnts-paper);
}
.ms-future-teaser h4 {
    color: #fff;
    margin-bottom: .4em;
}
.ms-future-teaser p {
    max-width: 34em;
    margin: 0 auto;
    color: rgba(246, 244, 239, .8);
}
.ms-future-teaser__dots {
    display: flex;
    justify-content: center;
    gap: .5em;
    margin-top: 1.6em;
}
.ms-future-teaser__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--momnts-light-teal);
    opacity: .4;
    animation: momnts-pulse 1.8s ease-in-out infinite;
}
.ms-future-teaser__dots span:nth-child(2) { animation-delay: .2s; }
.ms-future-teaser__dots span:nth-child(3) { animation-delay: .4s; }
@keyframes momnts-pulse {
    0%, 100% { opacity: .25; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* ---- Stories: tag filter ---- */

.ms-tag-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8em;
    margin: 0 0 3.5em;
}
.ms-tag-filter button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: transparent;
    border: 1px solid rgba(42, 63, 66, .25);
    color: var(--momnts-deep-teal);
    padding: .5em 1.3em;
    border-radius: 20px;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    transition: all .25s ease;
}
.ms-tag-filter button:hover {
    border-color: var(--momnts-teal);
    color: var(--momnts-teal);
}
.ms-tag-filter button.is-active {
    background: var(--momnts-teal);
    border-color: var(--momnts-teal);
    color: #fff;
}

/* ---- Stories: grid ---- */

.ms-stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6em;
}
.ms-story-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 3px;
    text-decoration: none;
    aspect-ratio: 4 / 5;
    background-color: var(--momnts-deep-teal);
}
.ms-story-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.ms-story-card:hover .ms-story-card__img {
    transform: scale(1.08);
}
.ms-story-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,17,19,0) 40%, rgba(11,17,19,.88) 100%);
}
.ms-story-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6em;
    color: #fff;
}
.ms-story-card__tags {
    font-size: .7em;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--momnts-light-teal);
    margin-bottom: .4em;
}
.ms-story-card__title {
    font-size: 1.15em;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.ms-story-card__meta {
    margin-top: .3em;
    font-size: .8em;
    color: rgba(255,255,255,.7);
}
.ms-story-card[hidden] {
    display: none;
}

/* ---- Stories: detail pagina ---- */

.ms-story-detail__head {
    text-align: center;
    max-width: 44em;
    margin: 0 auto 3em;
}
.ms-story-detail__tags {
    margin-bottom: 1em;
}
.ms-story-detail__tags span {
    display: inline-block;
    font-size: .7em;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--momnts-teal);
    border: 1px solid rgba(40, 95, 99, .3);
    border-radius: 20px;
    padding: .3em 1em;
    margin: 0 .3em .3em 0;
}
.ms-story-detail__meta {
    color: #7a7a7a;
    margin-top: 1em;
    font-size: .95em;
}
.ms-story-detail__body {
    max-width: 44em;
    margin: 0 auto 3.5em;
    color: #3a3a3a;
}
.ms-story-detail__video {
    max-width: 60em;
    margin: 0 auto 3.5em;
}
.ms-story-gallery {
    columns: 2;
    column-gap: 1em;
    max-width: 78em;
    margin: 0 auto;
}
.ms-story-gallery img {
    width: 100%;
    display: block;
    margin-bottom: 1em;
    border-radius: 3px;
    break-inside: avoid;
}
.ms-story-back {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    text-transform: uppercase;
    font-size: .8em;
    letter-spacing: .12em;
    color: var(--momnts-teal);
    text-decoration: none;
    margin-bottom: 2em;
}
.ms-story-back:hover {
    color: var(--momnts-soft-teal);
}

/* ---- Your Momnt: coming soon ---- */

.ms-momnt-app {
    background: var(--momnts-deep-teal);
    border-radius: 6px;
    padding: 5em 3em;
    text-align: center;
    color: var(--momnts-paper);
    position: relative;
    overflow: hidden;
}
.ms-momnt-app::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(122,199,204,.18), transparent 60%);
}
.ms-momnt-app__content {
    position: relative;
    max-width: 38em;
    margin: 0 auto;
}
.ms-momnt-app__status {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    background: rgba(246,244,239,.1);
    border: 1px solid rgba(246,244,239,.25);
    border-radius: 20px;
    padding: .4em 1.1em;
    font-size: .75em;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 1.6em;
}
.ms-momnt-app__status span.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--momnts-light-teal);
    animation: momnts-pulse 1.8s ease-in-out infinite;
}
.ms-momnt-app h2 {
    color: #fff;
}
.ms-momnt-app p {
    color: rgba(246,244,239,.82);
}
.ms-momnt-app-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    margin-top: 3.5em;
}
.ms-momnt-app-feature h6 {
    color: var(--momnts-light-teal);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .4em;
}
.ms-momnt-app-feature p {
    font-size: .9em;
    color: rgba(246,244,239,.75);
}

/* ---- Contact ---- */

.ms-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 5em;
}
.ms-contact-info h6 {
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--momnts-teal);
    margin-bottom: .3em;
    margin-top: 1.8em;
}
.ms-contact-info h6:first-child {
    margin-top: 0;
}
.ms-contact-info a,
.ms-contact-info p {
    color: #3a3a3a;
}
/* Zachte, "pill"-vormige velden zoals op de app.momnts.be wachtpagina
   (i.p.v. de scherpe, rechte default-styling van .form-control) — geen
   zichtbare rand, een subtiele ring i.p.v. een harde lijn, en een ronde
   knop in dezelfde geest. */
.ms-contact-form .form-control {
    height: auto;
    border: none;
    border-radius: 999px;
    background: var(--momnts-paper);
    box-shadow: inset 0 0 0 1px rgba(42, 63, 66, .14);
    padding: 1.05em 1.6em;
    margin-bottom: 0;
    transition: box-shadow .25s ease;
}
.ms-contact-form textarea.form-control {
    border-radius: 26px;
    padding: 1.2em 1.6em;
    height: auto;
    min-height: 160px;
    resize: vertical;
}
.ms-contact-form .form-control::placeholder {
    color: rgba(42, 63, 66, .45);
}
/* Dropdown "Waarover gaat het?" — zelfde pill-look als de andere velden,
   met een eigen teal pijltje i.p.v. de standaard browser-select-arrow. */
.ms-contact-form select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.8em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A3F42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.4em center;
    background-size: 14px;
    cursor: pointer;
}
.ms-contact-form select.form-control:invalid {
    color: rgba(42, 63, 66, .45);
}
.ms-contact-form .form-group {
    margin-bottom: 1.6em;
}
.ms-contact-form .form-control:focus {
    border: none !important;
    box-shadow: inset 0 0 0 1.5px var(--momnts-teal);
}
.ms-contact-form label {
    display: block;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--momnts-deep-teal);
    margin-bottom: .6em;
}
.ms-contact-form .ms-btn-momnts {
    border-radius: 999px;
    padding: 1em 2.6em;
}
.ms-form-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.ms-form-feedback {
    padding: 1em 1.4em;
    border-radius: 3px;
    margin-bottom: 2em;
    font-size: .95em;
}
.ms-form-feedback--success {
    background: rgba(40, 95, 99, .1);
    color: var(--momnts-deep-teal);
    border: 1px solid rgba(40, 95, 99, .25);
}
.ms-form-feedback--error {
    background: rgba(192, 57, 43, .08);
    color: #C0392B;
    border: 1px solid rgba(192, 57, 43, .25);
}

/* ---- Testimonial strip (herbruikbaar) ---- */

.ms-testimonial {
    background: var(--momnts-paper);
    border-radius: 4px;
    padding: 2.4em;
    max-width: 32em;
}
.ms-testimonial p {
    font-style: italic;
    color: #3a3a3a;
}
.ms-testimonial cite {
    display: block;
    margin-top: 1em;
    font-style: normal;
    font-size: .85em;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--momnts-teal);
}

/* ---- Footer (Momnts) ---- */

.ms-footer-momnts {
    position: relative;
    width: 100%;
    background: var(--momnts-ink);
    color: var(--momnts-paper);
    padding-top: 4em;
}
.ms-footer-momnts__inner {
    width: 85%;
    max-width: 88em;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 2em;
    padding-bottom: 3em;
    border-bottom: 1px solid rgba(246, 244, 239, .12);
}
.ms-footer-momnts__logo {
    height: 34px;
    width: auto;
    margin-bottom: .8em;
}
.ms-footer-momnts__tagline {
    color: rgba(246, 244, 239, .6);
    font-size: .9em;
    letter-spacing: .04em;
}
.ms-footer-momnts__nav {
    display: flex;
    flex-direction: column;
    gap: .7em;
}
.ms-footer-momnts__nav a,
.ms-footer-momnts__contact a {
    color: var(--momnts-paper);
    text-decoration: none;
    font-size: .95em;
    transition: color .25s ease;
}
.ms-footer-momnts__nav a:hover,
.ms-footer-momnts__contact a:hover {
    color: var(--momnts-light-teal);
}
.ms-footer-momnts__contact {
    display: flex;
    flex-direction: column;
    gap: .7em;
}
.ms-footer-momnts__contact h6 {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8em;
    color: var(--momnts-light-teal);
    margin-bottom: .2em;
}
.ms-footer-momnts__area {
    color: rgba(246, 244, 239, .55);
    font-size: .9em;
}
.ms-footer-momnts__socials {
    display: flex;
    gap: 1em;
    align-items: flex-start;
    padding: 0;
}
.ms-footer-momnts__socials a {
    color: var(--momnts-paper);
    font-size: 1.1em;
    transition: color .25s ease;
}
.ms-footer-momnts__socials a:hover {
    color: var(--momnts-light-teal);
}
.ms-footer-momnts__bottom {
    width: 85%;
    max-width: 88em;
    margin: 0 auto;
    padding: 1.6em 0;
    font-size: .8em;
    color: rgba(246, 244, 239, .5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6em 2em;
}
.ms-footer-momnts__legal-info {
    display: flex;
    flex-direction: column;
    gap: .25em;
}
.ms-footer-momnts__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4em 1.6em;
}
.ms-footer-momnts__legal-links a {
    color: rgba(246, 244, 239, .5);
    text-decoration: underline;
    text-underline-offset: .2em;
    transition: color .25s ease;
}
.ms-footer-momnts__legal-links a:hover {
    color: var(--momnts-light-teal);
}
@media (max-width: 680px) {
    .ms-footer-momnts__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- Cookie consent (freeprivacypolicy.com widget) ----
   De belangrijkste hendel is de "palette":"light" instelling in
   scripts_bottom.php -- dat is de enige kleurstelling die de widget zelf
   officieel ondersteunt (light/dark), en "light" sluit het dichtst aan
   bij de crème/teal huisstijl.
   Nieuwere versies van dit soort consent-widgets renderen vaak in een
   geïsoleerde container (soms zelfs shadow DOM) net om site-CSS buiten
   te houden -- onderstaande regels zijn dus een best-effort extra laag
   die de teal-accentkleur probeert door te trekken op de meest gangbare
   selectors, maar geven geen garantie. Check de banner live na het
   uploaden; als de kleuren niet perfect overeenkomen, geef dan door hoe
   het er in de browser uitziet (bv. een screenshot) zodat de juiste
   class-namen uit de live pagina gehaald kunnen worden voor een exacte
   fix. */
   .freeprivacypolicy-com---palette-light.freeprivacypolicy-com---nb{
    position: fixed;
   }
#cookieconsent-banner,
.cookie-consent,
.cookieconsent,
[class*="cookieconsent"],
[id*="cookieconsent"] {
    --cc-bg: var(--momnts-paper) !important;
    --cc-text: var(--momnts-ink) !important;
    --cc-btn-primary-bg: var(--momnts-teal) !important;
    --cc-btn-primary-text: var(--momnts-white) !important;
    --cc-btn-primary-hover-bg: var(--momnts-deep-teal) !important;
    --cc-link-color: var(--momnts-teal) !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
[class*="cookieconsent"] a,
[id*="cookieconsent"] a {
    color: var(--momnts-teal) !important;
}
[class*="cookieconsent"] button[class*="agree"],
[class*="cookieconsent"] button[class*="primary"],
[class*="cookieconsent"] button[class*="save"],
[id*="cookieconsent"] button[class*="agree"],
[id*="cookieconsent"] button[class*="primary"],
[id*="cookieconsent"] button[class*="save"] {
    background-color: var(--momnts-teal) !important;
    border-color: var(--momnts-teal) !important;
    color: var(--momnts-white) !important;
}

.freeprivacypolicy-com---palette-light .cc-nb-okagree, .freeprivacypolicy-com---palette-light .cc-nb-reject, .freeprivacypolicy-com---palette-light .cc-cp-foot-save{
    background: linear-gradient(135deg, var(--momnts-deep-teal) 0%, var(--momnts-ink) 100%) !important;
}


/* ---- Discipline row modifier: media rechts i.p.v. links ---- */

.ms-discipline-row--reverse {
    flex-direction: row-reverse;
}
.ms-discipline-row__lead {
    font-family: 'Goodly_regular', Arial, sans-serif;
    color: var(--momnts-teal);
    font-size: 1.15em;
    margin: 0 0 1em;
}

/* ---- Modal (bv. "Ontdek het concept" op Experience) ---- */

.ms-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 5vw;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.ms-modal.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s ease, visibility 0s linear 0s;
}
.ms-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 17, 19, .72);
    backdrop-filter: blur(2px);
}
.ms-modal__dialog {
    position: relative;
    background: var(--momnts-white);
    width: 100%;
    max-width: 46em;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 6px;
    padding: 3.5em 3.5em 3em;
    box-shadow: 0 30px 70px rgba(11, 17, 19, .35);
    transform: translateY(16px) scale(.98);
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ms-modal.is-open .ms-modal__dialog {
    transform: translateY(0) scale(1);
}
.ms-modal__close {
    position: absolute;
    top: 1.4em;
    right: 1.4em;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    background: var(--momnts-paper);
    color: var(--momnts-deep-teal);
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.ms-modal__close:hover {
    background: var(--momnts-teal);
    color: #fff;
}
.ms-modal__body h3 {
    color: var(--momnts-deep-teal);
    margin-bottom: .3em;
}
.ms-modal__body p {
    color: #3a3a3a;
}
.ms-modal__subtitle {
    margin-top: 1.6em;
    padding-top: 1.6em;
    border-top: 1px solid rgba(42, 63, 66, .12);
    color: var(--momnts-deep-teal);
}
.ms-modal__cta {
    margin-top: 2.4em;
    text-align: center;
}

/* ---- Stappenplan (bv. "Van idee naar ervaring") ---- */

.ms-process-steps {
    list-style: none;
    padding: 0;
    margin: 1.6em 0 0;
}
.ms-process-steps__item {
    display: flex;
    gap: 1.4em;
    padding: 1.6em 0;
    border-bottom: 1px solid rgba(42, 63, 66, .12);
}
.ms-process-steps__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.ms-process-steps__number {
    flex: 0 0 auto;
    font-family: 'Goodly_semibold', Arial, sans-serif;
    font-size: 1.3em;
    color: var(--momnts-light-teal);
}
.ms-process-steps__content h5 {
    color: var(--momnts-deep-teal);
    margin-bottom: .15em;
}
.ms-process-steps__tagline {
    color: var(--momnts-teal);
    font-style: italic;
    margin-bottom: .5em !important;
}
.ms-process-steps__content p {
    margin-bottom: .6em;
}
.ms-process-steps__content ul {
    margin: .6em 0 .8em;
    list-style: none;
    padding: 0;
}
.ms-process-steps__content ul li {
    position: relative;
    padding-left: 1.4em;
    margin-bottom: .4em;
    color: #3a3a3a;
}
.ms-process-steps__content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--momnts-light-teal);
}
.ms-process-steps__quote {
    color: var(--momnts-teal);
    font-style: italic;
}

/* ---- Gift Experience (Experience-pagina) ----
   Bewust een donker, premium paneel (i.p.v. de witte discipline-rows
   erboven) zodat dit als een eigen "Momnt" aanvoelt binnen de pagina,
   niet als een klassieke commerciële cadeaubon-sectie. */

.ms-gift-experience {
    width: 100%;
    margin: 2em 0 6em;
    padding: 6.5em 0;
    background: linear-gradient(135deg, var(--momnts-deep-teal) 0%, var(--momnts-ink) 100%);
    overflow: hidden;
}
.ms-gift-experience__inner {
    width: 85%;
    max-width: 78em;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 5em;
    align-items: center;
}
.ms-gift-experience .ms-eyebrow {
    color: var(--momnts-light-teal);
}
.ms-gift-experience__title {
    color: #fff;
    margin-bottom: .4em;
}
.ms-gift-experience__lead {
    font-family: 'Goodly_regular', Arial, sans-serif;
    color: var(--momnts-light-teal);
    font-size: 1.15em;
    margin-bottom: .8em;
}
.ms-gift-experience__text {
    color: rgba(246, 244, 239, .8);
    max-width: 32em;
}
.ms-gift-experience__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2em;
    margin-top: 2.2em;
}
.ms-gift-experience .ms-btn-momnts--outline {
    color: var(--momnts-paper) !important;
    border-color: rgba(246, 244, 239, .5);
}
.ms-gift-experience .ms-btn-momnts--outline:hover {
    background: var(--momnts-light-teal);
    border-color: var(--momnts-light-teal);
    color: var(--momnts-ink) !important;
}

/* ---- Gift Experience: digitale gift card ---- */

.ms-gift-experience__visual {
    display: flex;
    justify-content: center;
}
.ms-gift-card {
    position: relative;
    width: 100%;
    max-width: 22em;
    padding: 2.6em 2.2em;
    border-radius: 14px;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .015) 55%),
        var(--momnts-teal-mid);
    border: 1px solid rgba(246, 244, 239, .18);
    box-shadow: 0 30px 60px rgba(11, 17, 19, .4);
    overflow: hidden;
    animation: momnts-card-float 6s ease-in-out infinite;
    transition: transform .4s ease, box-shadow .4s ease;
}
.ms-gift-card:hover {
    animation-play-state: paused;
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 40px 80px rgba(11, 17, 19, .5);
}
.ms-gift-card__shine {
    position: absolute;
    top: -60%;
    left: -60%;
    width: 40%;
    height: 220%;
    background: linear-gradient(75deg, transparent 0%, rgba(255, 255, 255, .16) 50%, transparent 100%);
    transform: rotate(8deg);
    animation: momnts-card-shine 7s ease-in-out infinite;
    pointer-events: none;
}
.ms-gift-card__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.2em;
}
.ms-gift-card__icon {
    width: 26px;
    height: auto;
    opacity: .9;
}
.ms-gift-card__tag {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .7em;
    color: rgba(246, 244, 239, .7);
}
.ms-gift-card__message {
    position: relative;
    font-family: 'Goodly_regular', Arial, sans-serif;
    font-style: italic;
    font-size: 1.15em;
    line-height: 1.5;
    color: var(--momnts-paper);
    margin-bottom: 2.4em;
}
.ms-gift-card__footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.2em;
    border-top: 1px dashed rgba(246, 244, 239, .25);
}
.ms-gift-card__code-label {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .65em;
    color: rgba(246, 244, 239, .55);
}
.ms-gift-card__code {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--momnts-light-teal);
}
@keyframes momnts-card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes momnts-card-shine {
    0%, 15% { transform: translateX(-20%) rotate(8deg); opacity: 0; }
    30% { opacity: .8; }
    55%, 100% { transform: translateX(220%) rotate(8deg); opacity: 0; }
}

/* ---- Gift Experience: concept-overzicht (in de modal) ---- */

.ms-gift-concepts {
    list-style: none;
    padding: 0;
    margin: 1.4em 0 1.6em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6em 2em;
}
.ms-gift-concepts__item h5 {
    color: var(--momnts-deep-teal);
    margin-bottom: .2em;
}
.ms-gift-concepts__item p {
    color: #3a3a3a;
    font-size: .95em;
    margin: 0;
}
.ms-gift-concepts__note {
    font-style: italic;
    color: var(--momnts-teal) !important;
    font-size: .9em;
}

/* ---- Responsive: inner pages ---- */

@media only screen and (max-width: 805px) {
    .ms-discipline-row,
    .ms-discipline-row:nth-child(even),
    .ms-discipline-row--reverse {
        flex-direction: column;
        gap: 2em;
        padding: 2.5em 0;
    }
    .ms-discipline-row__media {
        max-width: 100%;
        flex-basis: auto;
    }
    .ms-modal {
        padding: 0;
    }
    .ms-modal__dialog {
        max-width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        padding: 3.2em 1.6em 2.4em;
    }
    .ms-process-steps__item {
        gap: 1em;
    }
    .ms-gift-experience {
        padding: 4em 0;
    }
    .ms-gift-experience__inner {
        grid-template-columns: 1fr;
        gap: 3em;
    }
    .ms-gift-experience__text {
        max-width: 100%;
    }
    .ms-gift-concepts {
        grid-template-columns: 1fr;
    }
    .ms-stories-grid {
        grid-template-columns: 1fr;
    }
    .ms-contact-grid {
        grid-template-columns: 1fr;
        gap: 3em;
    }
    .ms-momnt-app-features {
        grid-template-columns: 1fr;
    }
    .ms-footer-momnts__inner {
        grid-template-columns: 1fr 1fr;
    }
    .ms-story-gallery {
        columns: 1;
    }
}

@media only screen and (max-width: 500px) {
    .ms-pricing-grid {
        grid-template-columns: 1fr;
    }
    .ms-footer-momnts__inner {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   MOMNTS AFTER DARK
   Verborgen Experience-conceptpagina (/experiences/momnts-after-dark/).
   Niet gelinkt vanuit menu/overzicht — enkel rechtstreeks via URL.
   Hergebruikt het bestaande Momnts-kleuren-/font-/animatiesysteem
   (--momnts-*, Goodly/Helvetica Neue, momnts-pulse, dezelfde
   film-grain-textuur als de cinematic loader), met een warme
   amber "vuur"-accent bovenop de koele teal/ink-basis.
   ========================================================= */

.ms-mad {
    --mad-ember: #E8934A;
    --mad-ember-soft: #F2B77A;
    --mad-ember-dim: rgba(232, 147, 74, .35);
}

/* ---- Gedeelde donkere paneel-basis (Hero / Setting / Final CTA) ---- */

.ms-mad-panel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, var(--momnts-ink) 0%, var(--momnts-deep-teal) 55%, var(--momnts-teal-mid) 100%);
    color: var(--momnts-paper);
    isolation: isolate;
}
.ms-mad-panel__grain {
    position: absolute;
    inset: -50%;
    z-index: 1;
    pointer-events: none;
    opacity: .025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}
.ms-mad-panel__vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(5, 10, 11, .18) 78%, rgba(5, 10, 11, .48) 100%);
}
.ms-mad-panel__glow {
    position: absolute;
    left: 50%;
    bottom: -18%;
    width: 90vmax;
    height: 60vmax;
    max-width: 1400px;
    max-height: 900px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--mad-ember-dim) 0%, rgba(232, 147, 74, .12) 32%, transparent 68%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 1;
}

/* ---- Twinkelende "lichtslingers" (herbruikt momnts-pulse) ---- */

.ms-mad-lights {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.ms-mad-lights span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mad-ember-soft);
    box-shadow: 0 0 8px 2px var(--mad-ember-dim);
    opacity: .35;
    animation: momnts-pulse 3.6s ease-in-out infinite, ms-mad-star-drift 12s ease-in-out infinite;
}
.ms-mad-lights span:nth-child(1)  { top: 14%; left: 8%;  animation-delay: 0s, 0s; }
.ms-mad-lights span:nth-child(2)  { top: 22%; left: 18%; animation-delay: .6s, 1.4s; }
.ms-mad-lights span:nth-child(3)  { top: 12%; left: 30%; animation-delay: 1.2s, .5s; }
.ms-mad-lights span:nth-child(4)  { top: 26%; left: 42%; animation-delay: .3s, 2.2s; }
.ms-mad-lights span:nth-child(5)  { top: 16%; left: 55%; animation-delay: 1.8s, .8s; }
.ms-mad-lights span:nth-child(6)  { top: 24%; left: 67%; animation-delay: .9s, 3s; }
.ms-mad-lights span:nth-child(7)  { top: 13%; left: 79%; animation-delay: 1.5s, 1.7s; }
.ms-mad-lights span:nth-child(8)  { top: 23%; left: 90%; animation-delay: 2.1s, 0s; }
.ms-mad-lights span:nth-child(9)  { top: 40%; left: 12%; animation-delay: 2.4s, 2.6s; }
.ms-mad-lights span:nth-child(10) { top: 42%; left: 88%; animation-delay: .4s, 1.1s; }
/* Elke stip drift een klein, ander patroontje uit -- afgewisseld per even/oneven
   kind zodat het niet als één uniforme golf aanvoelt, maar organisch/willekeurig. */
.ms-mad-lights span:nth-child(odd)  { animation-duration: 3.6s, 11s; }
.ms-mad-lights span:nth-child(even) { animation-duration: 3.6s, 15s; }
@keyframes ms-mad-star-drift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(3px, -4px); }
    50%  { transform: translate(-2px, 2px); }
    75%  { transform: translate(2px, 3px); }
    100% { transform: translate(0, 0); }
}

/* ---- Vallende sterren (af en toe, op willekeurige plek in de hero) ---- */

.ms-mad-shooting-stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.ms-mad-shooting-star {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transform: translate(var(--mad-star-x, 10%), var(--mad-star-y, 10%)) rotate(215deg);
    animation-name: ms-mad-shoot;
    animation-timing-function: cubic-bezier(.3, 0, .2, 1);
    animation-iteration-count: infinite;
}
.ms-mad-shooting-star::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 110px;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 100%);
}
.ms-mad-shooting-star:nth-child(1) { --mad-star-x: 15%; --mad-star-y: 10%; animation-duration: 17s; animation-delay: 2s; }
.ms-mad-shooting-star:nth-child(2) { --mad-star-x: 62%; --mad-star-y: 6%;  animation-duration: 21s; animation-delay: 9s; }
.ms-mad-shooting-star:nth-child(3) { --mad-star-x: 80%; --mad-star-y: 18%; animation-duration: 25s; animation-delay: 15s; }
@keyframes ms-mad-shoot {
    0%   { opacity: 0; transform: translate(var(--mad-star-x), var(--mad-star-y)) rotate(215deg) translateX(0); }
    2%   { opacity: 1; }
    9%   { opacity: 0; transform: translate(var(--mad-star-x), var(--mad-star-y)) rotate(215deg) translateX(-260px); }
    100% { opacity: 0; }
}

/* ---- 1. HERO ---- */

.ms-mad-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9em 1.6em 6em;
    text-align: center;
}
.ms-mad-hero__inner {
    position: relative;
    z-index: 5;
    max-width: 900px;
}
.ms-mad-hero .ms-eyebrow {
    color: var(--mad-ember-soft);
}
.ms-mad-hero__title {
    font-family: 'Goodly_semibold', Arial, sans-serif;
    text-transform: uppercase;
    color: #fff;
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    line-height: 1.05;
    letter-spacing: .01em;
    margin: .3em 0 .5em;
}
.ms-mad-hero__subtitle {
    font-family: 'Goodly_regular', Arial, sans-serif;
    font-style: italic;
    color: rgba(246, 244, 239, .85);
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    max-width: 32em;
    margin: 0 auto 2.4em;
}
.ms-mad-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: .6em;
}
.ms-mad-hero .ms-btn-momnts--outline {
    color: var(--momnts-paper) !important;
    border-color: rgba(246, 244, 239, .5);
}
.ms-mad-hero .ms-btn-momnts--outline:hover {
    background: var(--mad-ember);
    border-color: var(--mad-ember);
    color: var(--momnts-ink) !important;
}
.ms-mad-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 2.4em;
    transform: translateX(-50%);
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, rgba(246, 244, 239, 0) 0%, rgba(246, 244, 239, .6) 55%, rgba(246, 244, 239, 0) 100%);
    z-index: 5;
}
.ms-mad-hero__scroll::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--mad-ember-soft);
    animation: ms-mad-scroll-dot 2.4s ease-in-out infinite;
}
@keyframes ms-mad-scroll-dot {
    0%   { top: 0; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ---- 2. THE IDEA ---- */

.ms-mad-idea {
    text-align: center;
    padding-top: 6.5em;
}
.ms-mad-idea h2 {
    color: var(--momnts-deep-teal);
}
.ms-mad-idea p {
    font-size: 1.05em;
    line-height: 1.75;
}

/* ---- 3. THE SETTING ---- */

.ms-mad-setting {
    margin: 6em 0;
    padding: 6em 1.6em;
    text-align: center;
}
.ms-mad-setting__inner {
    position: relative;
    z-index: 5;
    max-width: 760px;
    margin: 0 auto;
}
.ms-mad-setting .ms-eyebrow {
    color: var(--mad-ember-soft);
}
.ms-mad-setting__stat {
    font-family: 'Goodly_semibold', Arial, sans-serif;
    font-size: clamp(3rem, 9vw, 6rem);
    line-height: 1;
    color: #fff;
    margin: .2em 0 .15em;
}
.ms-mad-setting__stat span {
    color: var(--mad-ember-soft);
}
.ms-mad-setting__label {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .8em;
    color: rgba(246, 244, 239, .65);
    margin-bottom: 1.6em;
}
.ms-mad-setting p.ms-mad-setting__lead {
    font-family: 'Goodly_regular', Arial, sans-serif;
    font-size: 1.15em;
    color: rgba(246, 244, 239, .88);
    max-width: 32em;
    margin: 0 auto 2em;
}
.ms-mad-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7em;
}
.ms-mad-tag {
    display: inline-block;
    padding: .55em 1.2em;
    border-radius: 999px;
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 1px solid rgba(246, 244, 239, .28);
    color: rgba(246, 244, 239, .9);
    background: rgba(246, 244, 239, .06);
}
.ms-mad-tag--ember {
    border-color: var(--mad-ember-dim);
    color: var(--mad-ember-soft);
}

/* ---- 4. THE EXPERIENCE ---- */

.ms-mad-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8em;
}
.ms-mad-card {
    background: var(--momnts-paper);
    border: 1px solid rgba(42, 63, 66, .1);
    border-radius: 4px;
    padding: 2.4em 2em;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ms-mad-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(11, 17, 19, .1);
    border-color: var(--mad-ember);
}
.ms-mad-card h6 {
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mad-ember);
    margin-bottom: .5em;
    font-size: .85em;
}
.ms-mad-card h4 {
    color: var(--momnts-deep-teal);
    margin-bottom: .4em;
}
.ms-mad-card p {
    color: #3a3a3a;
    margin: 0;
}
.ms-mad-card--wide {
    grid-column: span 2;
}

/* ---- 5. THE EVENING (tijdlijn) ---- */

.ms-mad-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ms-mad-timeline__item {
    display: flex;
    gap: 1.8em;
    padding: 1.4em 0;
    border-bottom: 1px solid rgba(42, 63, 66, .12);
}
.ms-mad-timeline__item:last-child {
    border-bottom: none;
}
.ms-mad-timeline__time {
    flex: 0 0 5.5em;
    font-family: 'Goodly_semibold', Arial, sans-serif;
    color: var(--mad-ember);
    font-size: 1.05em;
}
.ms-mad-timeline__body h5 {
    color: var(--momnts-deep-teal);
    margin: 0 0 .2em;
}
.ms-mad-timeline__body p {
    color: #55605f;
    margin: 0;
    font-size: .95em;
}
.ms-mad-timeline__note {
    margin-top: 2em;
    font-style: italic;
    color: var(--momnts-teal) !important;
    font-size: .9em;
    text-align: center;
}

/* ---- 6. FOR TEAMS & COMPANIES ---- */

.ms-mad-teams {
    position: relative;
    background: var(--momnts-paper);
    border-left: 3px solid var(--mad-ember);
    border-radius: 2px;
    padding: 3em 3em;
}
.ms-mad-teams h2 {
    color: var(--momnts-deep-teal);
    margin-bottom: .3em;
}
.ms-mad-teams p {
    max-width: 38em;
}
.ms-mad-teams__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .6em;
    margin: 1.6em 0 2em;
}
.ms-mad-teams__tags span {
    display: inline-block;
    padding: .45em 1em;
    border-radius: 999px;
    font-size: .75em;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--momnts-teal);
    border: 1px solid rgba(40, 95, 99, .3);
    background: rgba(40, 95, 99, .06);
}
.ms-mad-teams__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

/* ---- 7. PARTNERS ---- */

.ms-mad-partners {
    display: flex;
    flex-wrap: wrap;
    gap: .9em;
}
.ms-mad-partners span {
    display: inline-block;
    padding: .8em 1.4em;
    border: 1px solid rgba(42, 63, 66, .16);
    border-radius: 2px;
    color: var(--momnts-deep-teal);
    font-size: .95em;
}

/* ---- 8. FINAL CTA ---- */

.ms-mad-final {
    padding: 7em 1.6em;
    text-align: center;
}
.ms-mad-final__inner {
    position: relative;
    z-index: 5;
    max-width: 640px;
    margin: 0 auto;
}
.ms-mad-final__status {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    background: rgba(246, 244, 239, .1);
    border: 1px solid rgba(246, 244, 239, .25);
    border-radius: 20px;
    padding: .4em 1.1em;
    font-size: .75em;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 1.8em;
}
.ms-mad-final__status .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mad-ember-soft);
    animation: momnts-pulse 1.8s ease-in-out infinite;
}
.ms-mad-final h2 {
    color: #fff;
    margin-bottom: .5em;
}
.ms-mad-final p {
    color: rgba(246, 244, 239, .82);
    margin: 0 0 .3em;
}
.ms-mad-final__wink {
    margin: 1.4em 0 2em !important;
    color: rgba(246, 244, 239, .95) !important;
    font-family: 'Goodly_regular', Arial, sans-serif;
    font-size: 1.1em;
}
.ms-mad-final .ms-btn-momnts {
    background: var(--mad-ember);
    border-color: var(--mad-ember);
}
.ms-mad-final .ms-btn-momnts:hover {
    background: var(--mad-ember-soft);
    border-color: var(--mad-ember-soft);
}

/* ---- Responsive ---- */

@media only screen and (max-width: 805px) {
    .ms-mad-hero {
        min-height: 90vh;
        padding: 7em 1.2em 5em;
    }
    .ms-mad-setting {
        padding: 4.5em 1.2em;
    }
    .ms-mad-card--wide {
        grid-column: span 1;
    }
    .ms-mad-teams {
        padding: 2.2em 1.6em;
    }
    .ms-mad-timeline__item {
        gap: 1.1em;
    }
    .ms-mad-timeline__time {
        flex-basis: 4.2em;
        font-size: .95em;
    }
}

/* Bewust GEEN @media (prefers-reduced-motion: reduce) meer voor de After
   Dark-sterren/vallende sterren/status-dot: op uitdrukkelijk verzoek van
   Gilles blijven deze decoratieve animaties ook zichtbaar wanneer "Beeld-
   schermbewegingen verminderen" aanstaat (bv. in macOS Toegankelijkheid) --
   dat was namelijk de reden waarom hij ze zelf niet zag bewegen. Het is
   subtiele, kleine beweging (geen grote schermvullende effecten), dus dit
   is een bewuste, beperkte afwijking van de gebruikelijke toegankelijk-
   heidsregel elders op de site (zie de cinematic loader hierboven, die
   deze voorkeur wél blijft respecteren). */

/* ==========================================================================
   Events (experience/ -- lijst + detail + inschrijfformulier)
   Hergebruikt de bestaande --momnts-* kleuren en .ms-content-section /
   .ms-eyebrow / .ms-btn-momnts basisstijlen; onderstaande klassen zijn enkel
   het events-specifieke grid/card-werk, naar het voorbeeld van
   .ms-stories-grid / .ms-story-card hierboven.
   ========================================================================== */

.ms-events-list {
    display: flex;
    flex-direction: column;
    gap: 1.3em;
    margin-top: 1em;
}

.ms-event-banner {
    position: relative;
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 220px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--momnts-white);
    text-decoration: none;
    color: var(--momnts-ink);
    box-shadow: 0 1px 0 rgba(11, 17, 19, .04);
    border: 1px solid rgba(11, 17, 19, .07);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.ms-event-banner:hover {
    box-shadow: 0 20px 40px rgba(11, 17, 19, .12);
    transform: translateY(-3px);
    border-color: transparent;
}

.ms-event-banner__media {
    position: relative;
    overflow: hidden;
    background: var(--momnts-deep-teal);
}
.ms-event-banner__media img:not(.ms-event-banner__mark) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.ms-event-banner:hover .ms-event-banner__media img:not(.ms-event-banner__mark) {
    transform: scale(1.06);
}
.ms-event-banner__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 55%, rgba(11, 17, 19, .06) 100%);
}
.ms-event-banner--placeholder .ms-event-banner__media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--momnts-deep-teal) 0%, var(--momnts-ink) 55%, var(--momnts-teal-mid) 100%);
}
.ms-event-banner__mark {
    width: 40px;
    height: 40px;
    opacity: .5;
}
.ms-event-banner__badge {
    position: absolute;
    top: 1em;
    left: 1em;
    background: var(--momnts-ink);
    color: var(--momnts-paper);
    font-size: .72em;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .35em .8em;
    border-radius: 999px;
    z-index: 2;
}

.ms-event-banner__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.8em 2.2em;
    gap: 1.2em;
}
.ms-event-banner__type {
    display: inline-block;
    font-size: .74em;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--momnts-teal);
    background: rgba(40, 95, 99, .08);
    padding: .3em .8em;
    border-radius: 999px;
    margin-bottom: .7em;
}
.ms-event-banner__title {
    margin: 0 0 .5em;
    font-size: 1.4em;
    color: var(--momnts-deep-teal);
}
.ms-event-banner__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 1.4em;
}
.ms-event-banner__meta-item {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .9em;
    color: #5b6a6c;
}
.ms-event-banner__meta-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--momnts-teal); }
.ms-event-banner__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em;
    padding-top: 1em;
    border-top: 1px solid rgba(11, 17, 19, .08);
}
.ms-event-banner__prijs {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--momnts-deep-teal);
}
.ms-event-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .92em;
    font-weight: 600;
    color: var(--momnts-white);
    background: var(--momnts-teal);
    padding: .65em 1.3em;
    border-radius: 999px;
    transition: background .2s ease, transform .2s ease;
}
.ms-event-banner__cta svg { width: 16px; height: 16px; }
.ms-event-banner:hover .ms-event-banner__cta {
    background: var(--momnts-deep-teal);
    transform: translateX(3px);
}

/* Detail-pagina — infobalk (datum/uur, locatie, prijs) */
.ms-event-infobar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 1.4em;
    background: var(--momnts-paper);
    border-radius: 14px;
    overflow: hidden;
}
.ms-event-infobar__item {
    display: flex;
    align-items: center;
    gap: .7em;
    padding: 1em 1.4em;
    flex: 1 1 auto;
    border-right: 1px solid rgba(11, 17, 19, .08);
}
.ms-event-infobar__item:last-child { border-right: none; }
.ms-event-infobar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--momnts-teal);
    color: var(--momnts-white);
}
.ms-event-infobar__icon svg { width: 18px; height: 18px; }
.ms-event-infobar__item--prijs .ms-event-infobar__icon {
    background: var(--momnts-deep-teal);
}
.ms-event-infobar__text {
    display: flex;
    flex-direction: column;
    font-size: .96em;
    color: var(--momnts-ink);
    line-height: 1.3;
}
.ms-event-infobar__text small {
    font-size: .82em;
    color: #5b6a6c;
}
.ms-event-infobar__item--prijs .ms-event-infobar__text {
    font-weight: 600;
    color: var(--momnts-deep-teal);
}

/* Inschrijfformulier */
.ms-event-signup {
    background: var(--momnts-paper);
    border-radius: 16px;
    padding: 2em;
}
.ms-event-signup h2 {
    color: var(--momnts-deep-teal);
    margin-top: 0;
}
.ms-event-signup__form .admin-field { margin-bottom: 1.2em; }
.ms-event-signup__form .admin-field label {
    display: block;
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--momnts-deep-teal);
    margin-bottom: .5em;
}
.ms-event-signup__form .admin-field input[type="text"],
.ms-event-signup__form .admin-field input[type="email"],
.ms-event-signup__form .admin-field input[type="tel"],
.ms-event-signup__form .admin-field input[type="number"],
.ms-event-signup__form .admin-field select {
    width: 100%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1em;
    padding: .75em 1em;
    border: 1px solid rgba(11, 17, 19, .15);
    border-radius: 10px;
    background: var(--momnts-white);
    color: var(--momnts-ink);
}
.ms-event-signup__form .admin-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2em;
}
.ms-event-signup__form .admin-hint {
    display: block;
    font-size: .82em;
    color: #5b6a6c;
    margin-top: .35em;
}
.ms-event-signup__form .admin-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .6em;
}
.ms-event-signup__form .admin-tag-option {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    background: var(--momnts-white);
    border: 1px solid rgba(11, 17, 19, .15);
    border-radius: 999px;
    padding: .5em 1em .5em .8em;
    font-size: .92em;
    cursor: pointer;
}
.ms-event-signup__form .admin-checkbox {
    display: flex;
    align-items: center;
    gap: .6em;
    font-size: .95em;
}
.ms-event-signup__flash {
    padding: .9em 1.3em;
    border-radius: 10px;
    margin-bottom: 1.4em;
    font-size: .95em;
}
.ms-event-signup__flash--success { background: #E4F3EC; color: #2E7D5B; }
.ms-event-signup__flash--error   { background: #FBEAE7; color: #C0392B; }

/* ---- Statuspaneel na inschrijving/betaling (vervangt het formulier) ---- */
.ms-event-status {
    text-align: center;
    padding: 1em 0 .5em;
}
.ms-event-status__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 1.2em;
}
.ms-event-status__icon svg {
    width: 32px;
    height: 32px;
}
.ms-event-status--success .ms-event-status__icon { background: #E4F3EC; color: #2E7D5B; }
.ms-event-status--error   .ms-event-status__icon { background: #FBEAE7; color: #C0392B; }
.ms-event-status h2 {
    color: var(--momnts-deep-teal);
    margin-top: 0;
    margin-bottom: .5em;
}
.ms-event-status__message {
    max-width: 34em;
    margin: 0 auto 1.8em;
    color: var(--momnts-ink);
    opacity: .85;
    line-height: 1.6;
}
.ms-event-signup__vol {
    background: #FBEAE7;
    color: #C0392B;
    padding: 1em 1.3em;
    border-radius: 10px;
}

@media only screen and (max-width: 780px) {
    .ms-event-banner {
        grid-template-columns: 1fr;
    }
    .ms-event-banner__media {
        min-height: 180px;
    }
    .ms-event-banner__body {
        padding: 1.5em 1.6em;
    }
}

@media only screen and (max-width: 680px) {
    .ms-event-signup {
        padding: 1.4em;
    }
    .ms-event-infobar {
        flex-direction: column;
    }
    .ms-event-infobar__item {
        border-right: none;
        border-bottom: 1px solid rgba(11, 17, 19, .08);
    }
    .ms-event-infobar__item:last-child { border-bottom: none; }
}
/* ==========================================================================
   Experience -- statuspagina (experience/status.php)
   Aparte, opvallende pagina na inschrijving/betaling i.p.v. een paneeltje
   onderaan de eventpagina. Hergebruikt --momnts-* kleuren, .ms-eyebrow,
   .ms-content-section--narrow en .ms-btn-momnts; onderstaande is enkel het
   hero- en "ticket"-specifieke werk.
   ========================================================================== */

.ms-status-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 62vh;
    padding: 190px 6% 5em;
    background: linear-gradient(150deg, var(--momnts-deep-teal) 0%, var(--momnts-ink) 60%, var(--momnts-teal-mid) 100%);
    background-size: cover;
    background-position: center;
    color: var(--momnts-paper);
    overflow: hidden;
}
.ms-status-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 50% at 50% 0%, rgba(122, 199, 204, .18) 0%, rgba(122, 199, 204, 0) 70%);
    pointer-events: none;
}
.ms-status-hero--error {
    background: linear-gradient(150deg, #3A2422 0%, var(--momnts-ink) 60%, #4A2B27 100%);
}
.ms-status-hero__inner {
    position: relative;
    max-width: 34em;
}
.ms-status-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    margin-bottom: 1.4em;
    background: rgba(246, 244, 239, .12);
    border: 1px solid rgba(246, 244, 239, .28);
    color: var(--momnts-light-teal);
    backdrop-filter: blur(6px);
}
.ms-status-hero--error .ms-status-hero__icon {
    color: #E8A79E;
}
.ms-status-hero__icon svg {
    width: 34px;
    height: 34px;
}
.ms-status-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .78em;
    font-weight: 600;
    color: var(--momnts-light-teal);
    margin-bottom: 1em;
}
.ms-status-hero--error .ms-status-hero__eyebrow {
    color: #E8A79E;
}
.ms-status-hero__heading {
    font-family: 'Goodly_semibold', Arial, sans-serif;
    font-size: 2.6em;
    line-height: 1.15;
    margin: 0 0 .5em;
    color: var(--momnts-white);
}
.ms-status-hero__message {
    font-size: 1.08em;
    line-height: 1.7;
    color: rgba(246, 244, 239, .82);
    max-width: 30em;
    margin: 0 auto;
}

/* ---- "Ticket" met bevestigingsdetails, in de stijl van een premium pasje ---- */

.ms-ticket {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 200px;
    background: var(--momnts-white);
    border-radius: 20px;
    border: 1px solid rgba(11, 17, 19, .08);
    box-shadow: 0 30px 60px -20px rgba(11, 17, 19, .18);
    margin-top: -4.5em;
    overflow: hidden;
}
.ms-ticket__main {
    padding: 2.4em 2.6em;
}
.ms-ticket__title {
    font-family: 'Goodly_semibold', Arial, sans-serif;
    color: var(--momnts-deep-teal);
    font-size: 1.5em;
    margin: .3em 0 1.1em;
}
.ms-ticket__details {
    margin: 0;
    display: grid;
    gap: .85em;
}
.ms-ticket__details > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5em;
    padding-bottom: .85em;
    border-bottom: 1px dashed rgba(11, 17, 19, .12);
}
.ms-ticket__details > div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.ms-ticket__details dt {
    color: var(--momnts-teal);
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
}
.ms-ticket__details dd {
    margin: 0;
    font-weight: 600;
    color: var(--momnts-ink);
    text-align: right;
}
.ms-ticket__stub {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4em;
    padding: 1.6em 1em;
    background: var(--momnts-paper);
    border-left: 1px dashed rgba(11, 17, 19, .16);
}
.ms-ticket__stub::before,
.ms-ticket__stub::after {
    content: "";
    position: absolute;
    left: -11px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--momnts-white);
    box-shadow: 0 30px 60px -20px rgba(11, 17, 19, .06);
}
.ms-ticket__stub::before { top: -11px; }
.ms-ticket__stub::after { bottom: -11px; }
.ms-ticket__stub-label {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72em;
    color: var(--momnts-teal);
    text-align: center;
}
.ms-ticket__stub-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--momnts-deep-teal);
}

.ms-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    margin-top: 2.2em;
}

@media only screen and (max-width: 680px) {
    .ms-status-hero {
        min-height: unset;
        padding: 150px 7% 6em;
    }
    .ms-status-hero__heading {
        font-size: 1.9em;
    }
    .ms-ticket {
        grid-template-columns: 1fr;
        margin-top: -3em;
    }
    .ms-ticket__stub {
        border-left: none;
        border-top: 1px dashed rgba(11, 17, 19, .16);
        flex-direction: row;
        justify-content: space-between;
        padding: 1.2em 1.6em;
    }
    .ms-ticket__stub::before,
    .ms-ticket__stub::after {
        display: none;
    }
}