:root{
    --bg:#0b0b10;
    --text:#111;
    --paper:#f9fafb;
    --muted:#6b7280;
    --brand:#e45f2a;       /* oranje bandkleur */
    --brand-200:#f29b73;
    --pill:#ffffff12;
    --white:#fff;
    --ink:#0f172a;
    --shadow:0 10px 30px rgba(0,0,0,.15);
    --radius:20px;
    --max:1100px;
  }

  #progress-bar {
    position: fixed;
    top: 75px;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, #ff6a95, #ffc773);
    width: 0%;
    z-index: 999999;
    transition: width 0.1s ease;
  }
  
  /* Base */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0; scroll-behavior: smooth;}
  body{
    font-family: Manuale, serif;
    font-weight:400;
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
  }

  img{max-width:100%; height:auto; display:block}
  .container{
    margin-inline:auto;    
  }
    
  /* Header */
  .site-header{
    position:sticky; 
    top:0; z-index:50; 
    background:var(--brand); 
    color:#fff; 
    box-shadow:0 1px 0 #00000010;
  }

  /* HERO */
  .hero{
    background-image: url('../images/zuiderbad-mockup1.jpeg');
    color:#fff;
    position:relative;
    padding: 200px 0;
    height: 70vh;
    background-position: 30px 0px;
    background-size: cover;
    border-radius: 0 0 30px 30px;
    /* margin: 0em 2.5em 0em 2.5em; */
  }

  .hero2{
    background-image: url('../images/mockuuups-macbook-air-mockup-on-a-modern-dark-surface.webp');
    color:#fff;
    position:relative;
    padding: 200px 0;
    height: 70vh;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 0 0 30px 30px;
    margin: 0em 2.5em 0em 2.5em;
  }

  .meta-item a {
    text-decoration: none;
    color: black;
    font-family: 'Manuale';
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
    line-height: 30px;
    color: #000000;
    margin:0; 
  
  }


  .meta-item a:hover {
    text-decoration: underline;
  }

  .meta-item a:active,
  .meta-item a:focus {
    text-decoration: underline !important;
  }

  section.images {
    height: 80vh;
    position: relative;
    margin: 0em 4em 6em 4em;
  }

  section.images img {
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0 auto;
    background: #f4f4f4;
    box-shadow: none;
    padding: 0;
    border-radius: 30px;
  }

  .hero3{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), url(../images/foodkiosk.webp);
    background-image: cover;
    background-repeat: no-repeat;
    color:#fff;
    position:relative;
    padding: 200px 0;
    margin: 0em 2.5em 0em 2.5em;
    height: 60vh;
    background-position: bottom center;
    background-size: cover;
  }

  .hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0em 2em; 
    padding: 0;
    position: absolute;
    width: calc(100% - 4em);
    left: 0;
    bottom: 1em;
  }

  .h-title{
    font-family: 'Marcellus';
    font-style: normal;
    font-weight: 400;
    font-size: 4em;
    line-height: 100%;
    color: #FFFFFF;
  }

  .h-lead{
    opacity:.95; 
    font-size: 20px;
    max-width:30vw; ; 
    font-family: 'Manuale';
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    color: #FFFFFF;
    margin: 0;
    padding-bottom: 1em;
    }

  .h-meta{
    display:grid; 
    grid-template-columns: repeat(3, minmax(0,auto)); 
    gap:5%;
    margin:20px 100px ; 
    justify-content: center;
    }

  .meta-item h3{
    font-family: 'Marcellus';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 38px;
    color: #000000;
  }
  .meta-item p{
    font-family: 'Manuale';
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
    line-height: 30px;
    color: #000000;
    margin:0; 
  }

  .meta-item span{opacity:.85;}
  
  .toc{
    position:fixed;   
    right: 3.5em; 
    top: 45%; 
    transform:translateY(-50%);
    display:flex; 
    align-items: flex-end;
    flex-direction:column; 
    gap: 1em;

    font-family: 'Marcellus';
    font-size: 1.2em;
    text-align: right;
  }

  .toc a{
    /* color: #000;  */
    color:#fff;             
    text-decoration: none;
    border-radius:999px; 
    font-weight:600; 
    white-space:nowrap;
  }

    .toc.black a {
    /* color: black; */
    color: #e45f2a;
  }

  .toc a:hover{
    text-decoration: underline;
  }

  .toc a:active {
    text-decoration: underline;
  }

  main {
    padding-right: 25%;
    padding-left: 4em;
    padding-top: 1em;
    text-align: left;
  }

  main p {
    font-family: 'Manuale';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 200%;
    color: #3B3B3B;
    /* text-align: center; */
    /* margin: 0em 4em; */
  }

  main h2 {
    font-family: "Marcellus SC", serif;
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    /* margin: 0em 2.5em; */
    /* text-align: center; */
  }

  /* Sections */
  .section{padding-bottom:20px;}
 
  #reflectie p {
    margin-bottom: 4em;
  }
  
  /* Mijn rol grid */
  .grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
  .media-grid figure img{border-radius:14px; box-shadow:var(--shadow)}
  .bullets{padding-left:1.2rem}
  .bullets li{margin:.35rem 0}
    
  @media (max-width: 1024px){
    .h-title{
      font-size: 2.5em !important;
      line-height: 1em !important;
    }  
    .h-lead {
      font-size: 1em !important;
      max-width: 50% !important;
      padding-bottom: 0;
    }
    .hero-inner{margin: 1em 2em; width: calc(100% - 4em);}
    .hero{background-position: 0px 100px;} 
  }

  @media (max-width: 920px){
    .hero-inner{grid-template-columns: 1fr; align-items: start}
    .hero-mock{max-width: 720px; margin: 10px auto 0}
    .hero-mock .over{right:-6%; top:-10%}
    .h-meta{grid-template-columns: 1fr 1fr 1fr}
    .hero{
      padding: 100px 0;
    }  
    .hero {
      background-position: -80px 60px;
      height: 60vh;
    } 

    .hero2, .hero3 {
      background-position: 0px 0px;
      height: 60vh;
    }
  }

  @media (max-width: 860px){
    .cols-2{grid-template-columns: 1fr}
    .grid-2{grid-template-columns: 1fr}
    .t-content{grid-template-columns: 1fr;
    }
    .hero-mock {background-position: 10px;}

    .hero {
      background-position: 150px 60px;
      height: 60vh;
      /* margin: 6em 2em 1em 2em; */
      margin: 0;
    } 
    .toc{display:none}
    main {
      padding-right: 4em;
    }

  }

  @media (max-width: 720px){
    .h-meta {
      grid-template-columns: 1fr; 
      gap:2em;
      margin:30px 50px ; 
      justify-content: center;
    }
    main {
      padding: 0 3em;
    }

    .h-meta h3 {
      font-size: 24px;
      margin: 0px 0;
    }
    .h-meta p {
      font-size: 18px;
      margin: 0;
    }
    .h-meta a {
      font-size: 18px;
      margin: 0;
    }

    .h-title {
      max-width: 60%;
    }
    .h-lead {
      max-width: 80% !important;
    }
  }

  @media (max-width: 620px){
    .h-meta{grid-template-columns: 1fr; gap:12px}
    .t-step{padding-left:56px}
    .t-rail{left:18px}
    .h-title {
      font-size: 26px !important;
    }
    .h-meta {
      gap:2em;
    }
    .hero {
      background-position: 0px 70px;
    }
  }

  @media (max-width: 500px){
    .images {
      margin: 0 1em !important;
      height: 70vh !important;
    }
    }  

 @media (max-width: 485px){
  .hero, .hero2 {
    background-position: -80px 60px;
    height:60vh;
  }
    .h-title {
      font-size: 21px !important;
      max-width: 60%;
    }
    .h-lead {
      font-size: 14px !important;
      max-width: 100% !important;
      margin-bottom: 0px;
    }
    #context h2, p {
      text-align: left !important;
    }

    .h-meta {
      margin-left: 2.5em;
    }

    .h-meta h3 {
      font-size: x-large;
      padding-left: 0em !important;
    }
    .h-meta p {
      font-size: 16px;
    }
    .h-meta a {
      font-size: 16px;
    }

    .section-title {
      text-align: left !important;
      font-size: x-large;
    }

    .band-title {
      padding-left: 0.5em !important;
      text-align: left !important;
      margin: 0.4em 0em;
      font-size: x-large !important;
    }
    .container p {
      font-size: 1em !important;
    }

    #context, #uitdaging, #rol, #proces, #reflectie {
      padding: 0em 0.8em !important;
    }

    #oplossing {
      padding: 1em 0.8em !important;
    }
    #oplossing p {
      padding-bottom: 1em;
      /* padding: 0; */
    }
    main {
      padding: 0 1.5em;
    }
  }

  @media (max-width: 390px){
    .h-lead {
      font-size: 12px !important;
      max-width: 100% !important;
      margin-bottom: 0px;
    }
    .h-title {
      font-size: 18px !important;
      max-width: 100%;
        }
    .hero {
      background-position: -150px 60px;
    }
    .hero2 {
      background-position: -90px 0px;
    }
  }

/* === Fancy timeline === */
.timeline{
  --progress: 0px;                /* wordt gezet via JS */
  position: relative;
  padding-left: 0;                 /* jouw layout blijft gelden */
  isolation: isolate;
}

.t-rail{
  position:absolute; left:24px; top:0; bottom:0;
  width:3px; background:#e5e7eb; border-radius:3px;
  overflow: visible;
}

/* getekende voortgang */
.timeline::after{
  content:"";
  position:absolute; left:24px; top:0; width:3px;
  height: var(--progress);
  background: #e45f2a;
  border-radius:3px;
  box-shadow: 0 0 12px rgba(228,95,42,.45);
  transition: height 80ms linear;
  z-index: 0; /* Lower z-index to ensure the line is behind the dots */
}

/* Cards */
.t-step{
  position: relative;
  padding: 3em 2em;
  opacity: 0;
  transform: translateY(26px) scale(.98);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, background .3s ease;
  will-change: transform, opacity;
  border-radius: 14px;
}

.t-step.seen{
  opacity: 1;
  transform: translateY(0) scale(1);
} 

.t-step.is-active{
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transform: translateY(0) scale(1.015);
}

/* Dot bij elke step */
.t-step::before{
  content:"";
  position:absolute; left:17px; top: 25px;
  width:12px; height:12px; border-radius:50%;
  background:#fff; border:3px solid #e5e7eb;
  box-shadow: 0 0 0 2px #fff;
  transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
  transform: scale(.9);
  z-index: 9999;
}

.t-step.seen::before{
  border-color:#e45f2a;
}
.t-step.is-active::before{
  background: #e45f2a;
  z-index: 9999;
  box-shadow: 0 0 0 4px #fff, 0 0 16px 2px rgba(228,95,42,.35);
  transform: translateX(3px) scale(1.3);
}

/* Badge pop */
.t-badge{
  position:absolute; 
  left: 55px;
  top: 19px;
  background:#fff; 
  border:2px solid #e45f2a; 
  color:#e45f2a;
  font-weight:200; 
  font-size: 1em; 
  padding:.18rem .8rem; 
  border-radius: 50px;
  transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
  transform: scale(.9);

  /* transform: translateY(2px) scale(.96);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease; */
}

.t-step.is-active .t-badge{
  transform: translateY(0) scale(1);
  font-weight:700; 

}

/* Stagger op titel + bullets */
.t-step .t-title, .t-step .t-content li{
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
.t-step.seen .t-title{ opacity:1; transform:none; transition-delay:.08s; }
.t-step.seen .t-content li{ opacity:1; transform:none; }

/* mooie bullet spacing */
.t-content ul{ padding-left: 1.1rem; margin: .25rem 0 0; }
.t-content li{ margin:.25rem 0; }

.t-content, .t-title {
  padding-left: 1em;
}

.t-content p {
  line-height: 150%;
  font-size: 1em;
  color: black;
}

/* Minder motion? Respecteer dat. */
@media (prefers-reduced-motion: reduce){
  .timeline::after, .t-step, .t-badge, .t-step .t-title, .t-step .t-content li{ transition: none !important; }
}