/*
Theme Name: Matthieu De Schepper
Author: Matthieu De Schepper
Author URI: https://matthieudeschepper.be
Version: 1.0.0
*/

/* -------------------------------------------------- */
/* Fonts                                               */
/* -------------------------------------------------- */

@font-face{
  font-family:"Roboto";
  src:url("/wp-content/themes/matthieudeschepper_theme/assets/fonts/Roboto-Light.woff2") format("woff2"),
      url("/wp-content/themes/matthieudeschepper_theme/assets/fonts/Roboto-Light.woff") format("woff");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Roboto";
  src:url("/wp-content/themes/matthieudeschepper_theme/assets/fonts/Roboto-Regular.woff2") format("woff2"),
      url("/wp-content/themes/matthieudeschepper_theme/assets/fonts/Roboto-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Roboto";
  src:url("/wp-content/themes/matthieudeschepper_theme/assets/fonts/Roboto-SemiBold.woff2") format("woff2"),
      url("/wp-content/themes/matthieudeschepper_theme/assets/fonts/Roboto-SemiBold.woff") format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* -------------------------------------------------- */
/* Base                                                */
/* -------------------------------------------------- */

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  font-family:"Roboto",sans-serif;
  overflow-x:hidden;
  overscroll-behavior-y:auto;
  background:#fff;
}

html{ margin-top:0; }
html #wpadminbar{ position:fixed; }

h1,h2,h3,h4,h5,h6{ margin:0; font-weight:inherit; line-height:inherit; }
p{ margin:0 0 20px; }

html.lenis-stopped,
html.lenis-stopped body{ overflow:hidden !important; }

/* No-JS fallbacks */
html.no-js .cs-anim{ opacity:1 !important; transform:none !important; }
html.no-js .cs-reveal__inner{ transform:none !important; animation:none !important; opacity:1 !important; }
html.no-js #cs-preloader{ display:none !important; }
html.no-js.is-booting .cs-bg{ opacity:1 !important; transform:none !important; }

:root{
  --cs-space: 40px;
  --cs-space-half: 20px;
  --cs-meta-inset: 260px;
  --cs-track-top-extra: 20px;
  --cs-top-offset: 0px;
  --cs-gap: var(--cs-space);
}

@media (max-width:1024px){
  :root{
    --cs-space: 20px;
    --cs-space-half: 10px;
    --cs-meta-inset: 20px;
    --cs-track-top-extra: 0px;
  }
}

/* -------------------------------------------------- */
/* Preloader                                           */
/* -------------------------------------------------- */

#cs-preloader{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:999999;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
#cs-preloader.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* -------------------------------------------------- */
/* Page wipe (optional)                                */
/* -------------------------------------------------- */

#cs-page-wipe{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:999998;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s cubic-bezier(.4,0,.2,1);
}
html.is-wiping #cs-page-wipe{
  opacity:1;
  pointer-events:auto;
}

/* -------------------------------------------------- */
/* Page + background                                   */
/* -------------------------------------------------- */

.cs-page{
  position:relative;
  min-height:100dvh;
  min-height:100svh;
  isolation:isolate;
}

.cs-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(to bottom,#007da3 0%,#e8f0f3 100%);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}

html.is-booting .cs-bg{
  opacity:0;
  transform:scale(.01);
}

html.has-bg .cs-bg{ opacity:1; }
html.css-ready.is-animating .cs-bg{ opacity:1; }

/* -------------------------------------------------- */
/* Global fade-up (cs-anim)                            */
/* -------------------------------------------------- */

.cs-anim{
  opacity:0;
  transform:translateY(14px);
  will-change:opacity,transform;
}

html.has-loaded .cs-anim{
  opacity:1;
  transform:none;
  transition:opacity .65s ease, transform .65s ease;
}

/* -------------------------------------------------- */
/* Reveal text animation                                */
/* -------------------------------------------------- */

.cs-reveal{
  position:relative;
  overflow:hidden;
  display:inline-block;
  vertical-align:top;
  padding-bottom:.18em;
  margin-bottom:-.18em;
  contain:paint;
  transform:translateZ(0);
}

.cs-reveal__inner{
  display:inline-block;
  will-change:transform;
  backface-visibility:hidden;
}

html.is-booting .cs-reveal__inner{ transform:translate3d(0,130%,0); }

html:not(.has-gsap):not(.is-booting) .cs-reveal__inner{
  transform:translate3d(0,130%,0);
}

html.has-gsap .cs-reveal--slide-title .cs-reveal__inner,
html.has-gsap .cs-reveal--slide-cat .cs-reveal__inner{
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce){
  html.has-gsap .cs-reveal--slide-title .cs-reveal__inner,
  html.has-gsap .cs-reveal--slide-cat .cs-reveal__inner{
    opacity: 1 !important;
  }
}

@keyframes csRevealUp{
  0%{ transform:translate3d(0,120%,0); }
  75%{ transform:translate3d(0,-3%,0); }
  100%{ transform:translate3d(0,0,0); }
}

html:not(.has-gsap).has-loaded .cs-reveal__inner{
  animation:csRevealUp .55s cubic-bezier(.16,1,.3,1) both;
}

html:not(.has-gsap).has-loaded .cs-reveal--brand .cs-reveal__inner{ animation-delay:0s; }
html:not(.has-gsap).has-loaded .cs-reveal--h1   .cs-reveal__inner{ animation-delay:.04s; }
html:not(.has-gsap).has-loaded .cs-reveal--h2   .cs-reveal__inner{ animation-delay:.08s; }

.cs-reveal--h2-line{
  display:block;
  overflow:hidden;
  padding-bottom:0;
  margin-bottom:0;
}
.cs-reveal--h2-line .cs-reveal__inner{ display:block; }

.cs-hero-h2{ line-height:1.25; }

@media (prefers-reduced-motion: reduce){
  .cs-reveal__inner,
  html.has-loaded .cs-reveal__inner{
    transform:none !important;
    animation:none !important;
  }
}

/* -------------------------------------------------- */
/* Top bar                                              */
/* -------------------------------------------------- */

:root{
  --cs-top-pad-y: 40px;
  --cs-top-pad-x: 40px;
}

html.is-scrolled{
  --cs-top-pad-y: 20px;
}

.cs-top{
  position:fixed;
  inset:0 0 auto 0;
  padding: var(--cs-top-pad-y) var(--cs-top-pad-x);
  z-index:10;
  pointer-events:auto;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:padding .35s cubic-bezier(.2,.8,.2,1);
  will-change:padding;
}

.cs-top-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  transition:gap .25s ease;
}

.cs-brand-left,
.cs-brand-right{
  font-weight:300;
  font-size:32px;
  white-space:nowrap;
  transition:font-size .25s ease, letter-spacing .25s ease, opacity .25s ease;
}

html.is-scrolled .cs-brand-left,
html.is-scrolled .cs-brand-right{ font-size:18px; }

@media (max-width:1024px){
  html.is-scrolled .cs-brand-left,
  html.is-scrolled .cs-brand-right{ font-size:16px; }
}

/* -------------------------------------------------- */
/* Nav + link reset                                     */
/* -------------------------------------------------- */

.cs-brand-home,
.cs-brand-home:visited{
  color:#000;
  text-decoration:none;
}

.cs-brand-split{
  display:inline-flex;
  align-items:baseline;
  gap:0;
}

.cs-brand-link,
.cs-brand-link:visited{
  color:#000;
  text-decoration:none;
  font-weight:300;
}

.cs-brand-sep{
  display:inline-block;
  margin:0;
  padding:0;
}

.cs-nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.cs-nav-list a,
.cs-nav-list a:visited,
.cs-nav-list a:hover,
.cs-nav-list a:active{
  color:#000;
  text-decoration:none;
  font-weight:300;
}

.cs-brand-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.cs-nav-list .cs-reveal{ display:block; }

/* Active (italic) states – controlled via JS classes on <html> */
.cs-brand-link,
.cs-nav-link{ font-style:normal; }

html.is-in-graphicdesign .cs-brand-link--graphic{ font-style:italic; }
html.is-in-webdesign     .cs-brand-link--web{ font-style:italic; }
html.is-in-about         .cs-nav-link--about{ font-style:italic; }
html.is-in-contact       .cs-nav-link--contact{ font-style:italic; }

/* -------------------------------------------------- */
/* Language switch                                      */
/* -------------------------------------------------- */

.cs-lang-switch{
  font-weight:300;
  white-space:nowrap;
  font-size:inherit;
  line-height:1;
}

.cs-lang-switch a,
.cs-lang-switch a:visited,
.cs-lang-switch a:hover,
.cs-lang-switch a:active{
  color:#000;
  text-decoration:none;
  font-weight:300;
}

.cs-lang-switch span{ margin:0; padding:0; }

.cs-lang-switch-wrap--corner{
  position:fixed;
  right:40px;
  bottom:40px;
  z-index:3;
  font-size:18px;
  letter-spacing:4.3px;
  text-transform:uppercase;
  margin-right:-12.9px;
}

.cs-lang-switch-wrap--menu{
  display:block;
  text-align:right;
}

.cs-lang-sep{
  display:inline-block;
  margin:0 .12em;
  padding:0;
}

html:not(.is-scrolled) .cs-lang-switch-wrap--menu{ display:none; }
html.is-scrolled .cs-lang-switch-wrap--corner{ display:block; }

.cs-lang-switch-wrap--corner.cs-reveal{
  display:inline-block;
  overflow:hidden;
  padding-bottom:.18em;
  margin-bottom:-.18em;
  vertical-align:top;
}

/* -------------------------------------------------- */
/* Hero                                                 */
/* -------------------------------------------------- */

.cs-hero{
  position:fixed;
  inset:0;
  z-index:1;
  height:100dvh;
  height:100svh;
  overflow:hidden;
}

.cs-hero-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none;
}

.cs-hero-content{ pointer-events:auto; }

.cs-hero-inner{
  text-align:center;
  max-width:980px;
}

.cs-hero-h1{
  font-size:18px;
  font-weight:300;
  letter-spacing:4.3px;
  text-transform:uppercase;
  margin-bottom:20px;
}

.cs-hero-h2{
  font-size:clamp(35px,3.2vw,48px);
  font-weight:300;
  line-height:1.25;
}

/* -------------------------------------------------- */
/* WP Admin Bar offset                                 */
/* -------------------------------------------------- */

body.admin-bar{ --cs-adminbar: var(--wp-admin--admin-bar--height, 32px); }

body.admin-bar .cs-hero{
  top:var(--cs-adminbar);
  height:calc(100svh - var(--cs-adminbar));
  height:calc(100dvh - var(--cs-adminbar));
}

body.admin-bar .cs-top{ top:var(--cs-adminbar); }

body.admin-bar .cs-bg{
  top:var(--cs-adminbar);
  height:calc(100svh - var(--cs-adminbar));
  height:calc(100dvh - var(--cs-adminbar));
}

body.admin-bar .cs-hscroll__sticky{
  top: var(--cs-adminbar);
  height: calc(100svh - var(--cs-adminbar));
  height: calc(100dvh - var(--cs-adminbar));
}

/* -------------------------------------------------- */
/* Content layer over the fixed hero                   */
/* -------------------------------------------------- */

.cs-content{
  position:relative;
  z-index:5;
  margin-top:100dvh;
  margin-top:100svh;
}

.cs-content > section,
.cs-content > footer{ background:#fff; }

/* -------------------------------------------------- */
/* Cookies & Privacy (page template)                   */
/* -------------------------------------------------- */

html.is-booting body.cs-privacy .cs-privacy-content{
  opacity: 0 !important;
  transform: translate3d(0,14px,0) !important;
}

html.has-loaded body.cs-privacy .cs-privacy-content{
  opacity: 1;
  transform: none;
  transition: opacity .65s ease, transform .65s ease;
}

body.cs-privacy .cs-content{
  margin-top: 0;
}

body.cs-privacy .cs-intro-section{
  background: transparent;
}

body.cs-privacy .cs-privacy-content{
  position: relative;
  z-index: 5;
  padding: calc(var(--cs-top-offset) + 80px) 40px 80px;
}

body.cs-privacy .cs-privacy-content .cs-intro-wrap{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}

body.cs-privacy .cs-privacy-content .cs-intro-title{
  font-size: clamp(35px, 3.2vw, 48px);
  font-weight: 300;
  line-height: 1.25;
  margin: 0 0 20px;
}

body.cs-privacy .cs-privacy-body h2 {
  font-size: 32px;
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 20px;
}

body.cs-privacy .cs-privacy-body{
  font-weight: 300;
  font-size: 24px;
  line-height: 1.65;
}

body.cs-privacy .cs-privacy-body p{
  margin: 0 0 20px;
}

body.cs-privacy .cs-privacy-body p:last-child{
  margin-bottom: 0;
}

body.cs-privacy .cs-privacy-body ul {
  list-style: disc;
}

body.cs-privacy .cs-privacy-body ol {
  list-style: decimal;
}

body.cs-privacy .cs-privacy-body ul,
body.cs-privacy .cs-privacy-body ol{
  margin: 0 0 24px;
  padding-left: 1.2em;
}

body.cs-privacy .cs-privacy-body li{
  margin: 0 0 10px;
  font-size: inherit;
  line-height: inherit;
}

body.cs-privacy .cs-privacy-body li:last-child{
  margin-bottom: 0;
}

@media (max-width:1024px){

  body.cs-privacy .cs-privacy-content{
    padding: calc(var(--cs-top-offset) + 40px) 20px 60px;
  }

  body.cs-privacy .cs-privacy-content .cs-intro-title{
    margin: 0 0 18px;
  }

  body.cs-privacy .cs-privacy-body h2 {
    font-size: 26px;
  }

  body.cs-privacy .cs-privacy-body{
    font-size: 16px;
    line-height: 1.75;
  }

  body.cs-privacy .cs-privacy-body ul,
  body.cs-privacy .cs-privacy-body ol{
    margin: 0 0 20px;
    padding-left: 1.25em;
  }

}

body.cs-privacy .cs-privacy-body ul,
body.cs-privacy .cs-privacy-body ol{
  list-style-position: outside !important;
  margin-left: 0 !important;
  padding-left: 1.6em !important;
}

body.cs-privacy .cs-privacy-body ul{ list-style-type: disc !important; }
body.cs-privacy .cs-privacy-body ol{ list-style-type: decimal !important; }

body.cs-privacy .cs-privacy-body li{
  display: list-item !important;
  list-style: inherit !important;
}

body.cs-privacy .cs-privacy-content,
body.cs-privacy .cs-privacy-content .cs-intro-wrap{
  overflow: visible !important;
}

/* CTA button */
.cs-cta{
  display:inline-flex;
  align-items:center;
  padding:10px 26px;
  background:rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:40px;
  font-size:13px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#000;
  text-decoration:none;
  white-space:nowrap;
  transition:opacity .25s ease;
  margin-top:8px;
}
.cs-cta:hover{ opacity:.6; }

/* -------------------------------------------------- */
/* Footer                                              */
/* -------------------------------------------------- */

#cs-footer{
  width:100%;
  padding:40px;
  background:#e8f0f3;
}

.cs-footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:300;
}

.cs-footer-links{
  white-space:nowrap;
}

.cs-footer-links a{
  color:#000;
  text-decoration:none;
}

.cs-footer-links a:hover{
  opacity:.65;
}

.cs-footer-sep{
  display:inline-block;
  margin:0 .12em;
}

@media (max-width:1024px){

  .cs-footer-inner{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    text-align:left;
    font-size:16px;
    gap:20px;
  }

  .cs-footer-right .cs-reveal__inner{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
  }

  .cs-footer-sep{
    display:none;
  }

}

/* -------------------------------------------------- */
/* About + Contact (2 columns)                         */
/* -------------------------------------------------- */

.cs-about-contact{
  background:#fff;
}

.cs-about-contact-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cs-space);
  padding: var(--cs-top-offset) 40px 40px;
}

.cs-about-contact .cs-intro-wrap{
  padding:0;
  width:100%;
}

@media (max-width:1024px){
  .cs-about-contact-wrap{
    grid-template-columns: 1fr;
    padding: 40px 20px;
    gap: 40px;
  }
}

/* -------------------------------------------------- */
/* CTA button                                         */
/* -------------------------------------------------- */

.cs-cta-btn,
.cs-cta-btn:visited{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 30px;
  border-radius:999px;
  background:#fff;
  color:#000;
  border:1px solid #000;
  text-decoration:none;
  font-weight:300;
  font-size:18px;
  letter-spacing:0;
  text-transform:none;
  overflow:hidden;
  transform:translateZ(0);
}

/* het "luik" dat omhoog schuift */
.cs-cta-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:#e8f0f3; 
  transform:translate3d(0,100%,0);
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  will-change:transform;
  z-index:0;
}

.cs-cta-btn > span{
  position:relative;
  z-index:1;
  transition:color .35s ease;
}

.cs-cta-btn:hover::before,
.cs-cta-btn:focus-visible::before{
  transform:translate3d(0,0,0);
}

.cs-cta-btn:hover > span,
.cs-cta-btn:focus-visible > span{
  color:#000;
}

/* -------------------------------------------------- */
/* GD/WD Intro (2 columns) + Horizontal projects      */
/* -------------------------------------------------- */

.cs-intro-section{ background:#fff; }

.cs-intro-wrap{
  padding:80px 40px 20px;
  width:66.67%;
}

.cs-intro-title{
  font-weight:300;
  font-size:32px;
  line-height:1.2;
  margin:0 0 30px;
}

.cs-intro-col p{
  font-weight:300;
  font-size:24px;
  line-height:1.65;
  margin:0 0 30px;
}

.cs-intro-col p.cs-reveal{ display:block; }

.cs-intro-col p:last-child{ margin-bottom:0; }

.cs-hscroll{
  position:relative;
  background:#d6d6d6;
}

.cs-hscroll__sticky{
  position:sticky;
  top:0;
  height:100dvh;
  height:100svh;
  overflow:hidden;
}

html.has-gsap .cs-hscroll__sticky{
  position: relative;
  top: auto;
}

html.no-js .cs-hscroll__sticky{
  position: sticky;
  top: 0;
}

.cs-hscroll__track{
  height:100%;
  display:flex;
  will-change:transform;
  transform:translate3d(0,0,0);
  padding: var(--cs-top-offset) var(--cs-meta-inset) var(--cs-space) var(--cs-space);
  gap: var(--cs-space);
}

.cs-slide{
  flex: 0 0 calc(100vw - var(--cs-space) - var(--cs-meta-inset));
  height:100%;
  position:relative;
  display:grid;
  place-items:center;
  padding: 0;
  box-sizing:border-box;
}

.cs-slide__media{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.cs-slide__meta{
  position:absolute;
  top: var(--cs-space);
  left: var(--cs-space);
  right: var(--cs-space);
  bottom: calc(var(--cs-space) + 8px);
  pointer-events:none;
  z-index:2;
  color:#000;
}

.cs-slide__title{
  position:absolute;
  top:0;
  left:0;
  font-weight:300;
  font-size:32px;
  line-height:1.1;
  white-space:nowrap;
  pointer-events:auto;
}

.cs-slide__title a{
  cursor:pointer;
}

.cs-slide__title a,
.cs-slide__title a:visited{
  color:inherit;
  text-decoration:none;
}

.cs-slide__cat{
  position:absolute;
  right:0;
  bottom:0;
  font-weight:300;
  font-size:18px;
  line-height:1.1;
  white-space:nowrap;
  pointer-events:auto;
}

.cs-hscroll__end{
  flex: 0 0 var(--cs-space);
  margin-left: calc(-1 * var(--cs-gap));
  height: 100%;
}

/* -------------------------------------------------- */
/* Project media – automatic crossfade slider          */
/* -------------------------------------------------- */

.cs-media-slider{
  position:relative;
  overflow:hidden;
  border-radius:inherit;
}

.cs-media-slider__frame{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .9s ease;
  will-change:opacity;
}

.cs-media-slider__frame.is-active{
  opacity:1;
}

/* -------------------------------------------------- */
/* Mobile (20px spacing)                               */
/* -------------------------------------------------- */

@media (max-width:1024px){

  .cs-top{ 
    padding:20px; 
     background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
  }

  html.past-hero .cs-top{
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  
  html.is-scrolled .cs-top{ padding:20px; }

  .cs-brand-left,
  .cs-brand-right{
    font-size:16px;
    max-width:46vw;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .cs-hero{ padding:110px 22px 80px; }
  .cs-hero-center{ padding:110px 22px 80px; }

  .cs-hero-h1{
    font-size:16px;
    letter-spacing:.1em;
    margin-bottom:15px;
  }

  .cs-hero-h2, .cs-intro-title{
    font-size:26px;
    line-height:1.3;
  }

  .cs-intro-title{
    margin:0 0 20px;
  }

  .cs-intro-col p{
    font-size:16px;
    margin:0 0 20px;
  }

  #cs-about .cs-about-inner{
    grid-template-columns:1fr;
    display:block;
  }

  #cs-about .cs-about-intro{
    position:static;
    top:auto;
    height:auto;
    padding:20px 20px 0;
  }

  #cs-about .cs-about-grid{
    padding:60px 20px 20px;
  }

  #cs-footer{ padding:24px 20px; }

  .cs-lang-switch-wrap--corner{
    right:20px;
    bottom:20px;
    font-size:16px;
    letter-spacing:.1em;
    margin-right:-.5em;
  }

  .cs-intro-wrap{
    width:100%;
    padding:40px 20px;
  }

}

/* -------------------------------------------------- */
/* Mobile: disable horizontal scroll, stack images     */
/* -------------------------------------------------- */

@media (max-width:1024px){

  .cs-hscroll{
    background: transparent;
  }

  html.has-gsap .cs-hscroll__sticky{
    position: static;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .cs-hscroll__track{
    flex-direction: column;
    transform: none !important;
    padding: 0;
    gap: 20px;
  }

  .cs-slide{
    flex:none;
    width:100%;
    height:auto;
    padding: 0 20px 20px;
    display: block;
    place-items: unset;
  }

  .cs-slide + .cs-slide{
    margin:0;
  }

  .cs-slide__media,
  .cs-media-slider{
    display:block;
    width:100%;
    aspect-ratio: 3 / 2;
    height:auto;
    min-height: 1px;
  }

  .cs-slide__title .cs-reveal,
  .cs-slide__cat .cs-reveal{
    display:block;
  }

  .cs-slide__meta{
    position: static;
    inset: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: auto;
    width: 100%;
  }

  .cs-slide__title{
    position: static;
    font-size: 16px;
    line-height: 1.2;
    white-space: normal;
  }

  .cs-slide__cat{
    position: static;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
  }

  .cs-hscroll__end{
    display:none;
  }

}

/* -------------------------------------------------- */
/* Privacy: bullets/numbering move WITH cs-reveal text */
/* -------------------------------------------------- */

body.cs-privacy .cs-privacy-body ul,
body.cs-privacy .cs-privacy-body ol{
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* counter setup for OL */
body.cs-privacy .cs-privacy-body ol{ counter-reset: cs-privacy-ol; }
body.cs-privacy .cs-privacy-body ol > li{ counter-increment: cs-privacy-ol; }

/* IMPORTANT: space for marker is on the moving inner */
body.cs-privacy .cs-privacy-body li .cs-reveal__inner{
  position: relative;
  padding-left: 1em;
  display: inline-block;
}

/* UL marker */
body.cs-privacy .cs-privacy-body ul > li .cs-reveal__inner::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
}

/* OL marker */
body.cs-privacy .cs-privacy-body ol > li .cs-reveal__inner::before{
  content: counter(cs-privacy-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
}