:root{
    --orange:#FF5800;
    --orange-dark:#D64800;
    --navy:#0B2A43;
    --navy-soft:#123A5C;
    --blue:#0077B6;
    --sand:#F6F1E6;
    --white:#FFFFFF;
    --ink:#0B2A43;
    --ink-soft:#4C5E70;
    --radius:14px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{
    scroll-behavior:smooth;
    scrollbar-width:none;
  }
  html::-webkit-scrollbar{display:none;}

  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--white);
    overflow-x:hidden;
    scrollbar-width:none;
  }
  body::-webkit-scrollbar{display:none;}

  h1,h2,h3,.display{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.5px;
    line-height:1;
  }

  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  section{position:relative;}

  /* ---------- Buoy scroll progress ---------- */
  .buoy-progress{
    position:fixed;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    z-index:200;
    width:54px;
    height:54px;
    display:none;
    filter:drop-shadow(0 3px 10px rgba(11,42,67,0.25));
    transition:transform .2s ease;
  }
  @media(min-width:900px){
    .buoy-progress{display:block;}
  }
.buoy-band-white{fill:none;stroke:#ffffff;stroke-width:7;}
.buoy-band-orange{fill:none;stroke:var(--orange);stroke-width:7;}
.buoy-bg{opacity:0.25;}
.buoy-hole{fill:var(--white);stroke:rgba(11,42,67,0.15);stroke-width:1;transition:fill .3s ease;}
  .buoy-center{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;color:var(--navy);
    transition:color .3s ease;
  }
.buoy-progress.buoy-dark .buoy-hole{fill:var(--navy);}
.buoy-progress.buoy-dark .buoy-bg{opacity:0.18;}
.buoy-progress.buoy-dark .buoy-center{color:var(--white);}
  /* ---------- Header ---------- */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    background:rgba(11,42,67,0.92);
    backdrop-filter:blur(8px);
    padding:16px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:padding .3s ease;
  }
  .logo{
    color:var(--white);
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    font-size:22px;
    letter-spacing:1px;
    text-transform:uppercase;
  }
  .logo span{color:var(--orange);}

  nav ul{
    display:flex;
    gap:6px;
  }
  nav a{
    color:rgba(255,255,255,0.75);
    font-size:14px;
    font-weight:600;
    padding:8px 16px;
    border-radius:999px;
    transition:all .25s ease;
    display:inline-block;
  }
  nav a:hover{color:var(--white);}
  nav a.active{
    color:var(--white);
    background:var(--orange);
  }

  .header-right{
    display:flex;
    align-items:center;
    gap:28px;
  }

  .header-icons{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .header-icons a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    color:rgba(255,255,255,0.75);
    border:1px solid rgba(255,255,255,0.18);
    transition:all .25s ease;
  }
  .header-icons a:hover{
    color:var(--white);
    background:var(--orange);
    border-color:var(--orange);
  }
  .header-icons .icon{width:16px;height:16px;vertical-align:0;}

  .nav-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    background:none;
    border:none;
  }
  .nav-toggle span{
    width:26px;height:3px;background:var(--white);border-radius:2px;
  }

  @media(max-width:820px){
    nav{
      position:fixed;
      top:0; right:0;
      height:100vh;
      width:min(78vw,320px);
      background:var(--navy);
      flex-direction:column;
      padding:100px 32px;
      transform:translateX(100%);
      transition:transform .35s ease;
    }
    nav.open{transform:translateX(0);}
    nav ul{flex-direction:column;gap:10px;}
    nav a{display:block;padding:12px 18px;font-size:16px;}
    .nav-toggle{display:flex;}
    .header-right{gap:14px;}
  }

  /* ---------- Hero ---------- */
  .hero{
    min-height:100svh;
    background:linear-gradient(180deg,var(--navy) 0%,var(--navy-soft) 70%);
    color:var(--white);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:120px 8vw 140px;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 85% 15%, rgba(255,88,0,0.18), transparent 45%),
      radial-gradient(circle at 10% 90%, rgba(0,119,182,0.25), transparent 50%);
    pointer-events:none;
  }
  .hero-graphic{
    position:absolute;
    top:50%;
    right:-60px;
    transform:translateY(-50%);
    width:clamp(280px,34vw,480px);
    aspect-ratio:1;
    z-index:0;
    opacity:0.14;
    animation:spin-slow 90s linear infinite;
  }
  .hero-graphic svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:var(--orange);
    stroke-width:3;
  }
  @keyframes spin-slow{
    to{transform:translateY(-50%) rotate(360deg);}
  }
  @media(max-width:900px){
    .hero-graphic{opacity:0.1; width:clamp(220px,60vw,340px); right:-80px;}
  }

  .hero-roles{
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:26px;
    position:relative;
    z-index:1;
  }
  .hero-role-line{
    font-size:17px;
    font-weight:500;
    color:rgba(255,255,255,0.72);
    opacity:0;
    transform:translateY(14px);
    transition:opacity .5s ease, transform .5s ease;
    padding-left:20px;
    position:relative;
  }
  .hero-role-line::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:10px;
    height:2px;
    background:var(--orange);
  }
  .hero-role-line.show{
    opacity:1;
    transform:translateY(0);
  }
  .hero-role-highlight{
    color:var(--orange);
    font-weight:700;
  }

  .eyebrow{
    color:var(--orange);
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    font-size:13px;
    margin-bottom:18px;
    position:relative;
    z-index:1;
  }
  .hero h1{
    font-size:clamp(48px,10vw,120px);
    position:relative;
    z-index:1;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--orange);
  }
  .hero-tagline{
    max-width:560px;
    margin-top:22px;
    font-size:18px;
    color:rgba(255,255,255,0.78);
    position:relative;
    z-index:1;
  }
  .hero-meta{
    margin-top:40px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    position:relative;
    z-index:1;
  }
  .pill{
    border:1px solid rgba(255,255,255,0.25);
    padding:8px 18px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    color:rgba(255,255,255,0.85);
  }
  .scroll-cue{
    position:absolute;
    bottom:70px;
    left:8vw;
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,0.55);
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    z-index:1;
  }
  .scroll-cue .line{
    width:36px;height:1px;background:rgba(255,255,255,0.4);
    position:relative;overflow:hidden;
  }
  .scroll-cue .line::after{
    content:"";position:absolute;left:-100%;top:0;bottom:0;width:100%;
    background:var(--orange);
    animation:slide 1.6s infinite;
  }
  @keyframes slide{
    to{left:100%;}
  }

  /* wave divider */
  .wave{
    display:block;
    width:100%;
    line-height:0;
    position:relative;
    z-index:2;
  }
  .wave svg{width:100%;height:80px;display:block;}

  /* ---------- Generic section ---------- */
  .section{
    padding:110px 8vw;
  }
  .section.alt{background:var(--sand);}
  .section-head{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:56px;
    flex-wrap:wrap;
  }
  .section-num{
    margin-top:6px;
  }
  .section-num{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    font-size:16px;
    color:var(--orange);
    letter-spacing:2px;
  }
  .section-head h2{
    font-size:clamp(32px,5vw,56px);
    color:var(--navy);
  }
  .section-sub{
    color:var(--ink-soft);
    font-size:16px;
    max-width:520px;
    margin-top:6px;
  }

  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.in{opacity:1;transform:translateY(0);}

  /* ---------- Over mij ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:48px;
    align-items:start;
  }
  @media(max-width:800px){.about-grid{grid-template-columns:1fr;} .about-photo{margin:0 auto;}}
  .about-grid p{
    font-size:17px;
    line-height:1.75;
    color:var(--ink-soft);
    margin-bottom:16px;
  }
  .about-photo{
    aspect-ratio:4/3;
    max-width:360px;
    margin-left:auto;
    border-radius:var(--radius);
    background:
      linear-gradient(160deg,var(--blue),var(--navy));
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,0.6);
    font-family:'Barlow Condensed',sans-serif;
    font-size:18px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .about-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    border-radius:inherit;
  }
  .facts-group{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:22px;
  }
  .fact{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:600;
    color:var(--ink-soft);
  }
  .fact .icon{width:16px;height:16px;color:var(--orange);}

  .tag-group{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
  }
  .tag{
    font-size:13px;
    font-weight:600;
    color:var(--navy);
    background:rgba(11,42,67,0.07);
    border:1px solid rgba(11,42,67,0.12);
    padding:7px 14px;
    border-radius:999px;
  }
  .about-photo:empty::after{
    content:"";
    position:absolute;
    width:200%;height:200%;
    background:repeating-linear-gradient(45deg,rgba(255,255,255,0.04) 0 12px,transparent 12px 24px);
  }

  /* ---------- Timeline (school & werkervaring) ---------- */
  .timeline{
    position:relative;
    padding-left:32px;
    border-left:2px solid rgba(11,42,67,0.12);
  }
  .timeline-item{
    position:relative;
    padding-bottom:48px;
  }
  .timeline-item:last-child{padding-bottom:0;}
  .timeline-item::before{
    content:"";
    position:absolute;
    left:-39px;
    top:4px;
    width:14px;height:14px;
    border-radius:50%;
    background:var(--orange);
    border:3px solid var(--white);
    box-shadow:0 0 0 2px var(--orange);
  }
  .timeline-item .period{
    font-size:13px;
    font-weight:700;
    color:var(--orange);
    letter-spacing:1px;
    text-transform:uppercase;
  }
  .timeline-item h3{
    font-size:26px;
    margin:6px 0 6px;
    color:var(--navy);
    text-transform:none;
  }
  .timeline-item .org{
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:8px;
    display:block;
  }
  .timeline-item p{
    color:var(--ink-soft);
    line-height:1.7;
    max-width:640px;
  }

  /* ---------- Reddingsbrigade section (dark highlight) ---------- */
  .rb-section{
    background:var(--navy);
    color:var(--white);
  }
  .rb-section .section-head h2{color:var(--white);}
  .rb-section .section-sub{color:rgba(255,255,255,0.65);}
  .rb-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:24px;
  }
  .rb-card{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:var(--radius);
    padding:28px;
    transition:transform .3s ease, background .3s ease;
  }
  .rb-card:hover{
    background:rgba(255,88,0,0.12);
    border-color:var(--orange);
  }
  .rb-card .role{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:22px;
    color:var(--orange);
    margin-bottom:8px;
    text-transform:uppercase;
  }
  .rb-card .period{
    font-size:12px;
    color:rgba(255,255,255,0.5);
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:14px;
    display:block;
  }
  .rb-card p{
    font-size:15px;
    line-height:1.65;
    color:rgba(255,255,255,0.78);
  }

  /* ---------- Diploma's ---------- */
  .diploma-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
  }
  .diploma-card{
    background:var(--white);
    border:1px solid rgba(11,42,67,0.1);
    border-radius:var(--radius);
    padding:26px;
    display:flex;
    gap:16px;
    align-items:flex-start;
    box-shadow:0 6px 18px rgba(11,42,67,0.05);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .diploma-icon{
    width:44px;height:44px;flex-shrink:0;
    border-radius:50%;
    background:var(--orange);
    display:flex;align-items:center;justify-content:center;
    color:var(--white);
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    font-size:18px;
  }
  .diploma-card h3{
    font-size:19px;
    text-transform:none;
    color:var(--navy);
    margin-bottom:4px;
  }
  .diploma-card span{
    font-size:13px;
    color:var(--ink-soft);
    font-weight:500;
  }

  /* ---------- Footer / contact ---------- */
  footer{
    background:var(--navy);
    color:rgba(255,255,255,0.6);
    padding:70px 8vw 40px;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:30px;
    padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .footer-top h2{
    color:var(--white);
    font-size:clamp(30px,5vw,48px);
  }
  .footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:15px;
  }
  .footer-links a{color:rgba(255,255,255,0.75);transition:color .2s;}
  .footer-links a:hover{color:var(--orange);}
  .footer-bottom{
    padding-top:24px;
    font-size:13px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }

  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .reveal{transition:none;opacity:1;transform:none;}
    .scroll-cue .line::after{animation:none;}
  }

  :focus-visible{
    outline:3px solid var(--orange);
    outline-offset:3px;
  }

  /* ---------- Icons ---------- */
  .icon{
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
    vertical-align:-4px;
  }

  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .pill .icon{width:15px;height:15px;color:var(--orange);}

  .tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .tag .icon{width:16px;height:16px;color:var(--orange);}

  .lang-group{
    margin-top:22px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .lang-item{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .lang-name{
    font-weight:600;
    font-size:14px;
    color:var(--navy);
    width:90px;
    flex-shrink:0;
  }
  .lang-dots{
    display:flex;
    gap:5px;
  }
  .lang-dots i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    margin-right: 3px;
    position: relative;
    overflow: hidden;
}

.lang-dots i.on {
    background: var(--orange);
}

.lang-dots i.half {
    background: #ccc;
}

.lang-dots i.half::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: var(--orange);
}

  .rb-icon{
    width:30px;
    height:30px;
    color:var(--orange);
    margin-bottom:14px;
  }

  .diploma-icon{
    width:22px;
    height:22px;
    color:var(--white);
    flex-shrink:0;
    background:var(--orange);
    border-radius:50%;
    padding:11px;
    box-sizing:content-box;
  }

  .footer-links a{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .footer-links a .icon{color:var(--orange);}

  /* ---------- Motivatie ---------- */
  .motivatie-section{
    background:var(--sand);
  }
  .motivatie-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:24px;
  }
  .motivatie-card{
    background:var(--white);
    border:1px solid rgba(11,42,67,0.08);
    border-radius:var(--radius);
    padding:30px 26px;
    box-shadow:0 6px 18px rgba(11,42,67,0.05);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .motivatie-card:hover{
    box-shadow:0 14px 28px rgba(11,42,67,0.1);
  }
  .motivatie-card .icon{
    width:30px;
    height:30px;
    color:var(--orange);
    margin-bottom:16px;
  }
  .motivatie-card h3{
    font-size:21px;
    text-transform:none;
    color:var(--navy);
    margin-bottom:8px;
  }
  .motivatie-card p{
    font-size:15px;
    line-height:1.65;
    color:var(--ink-soft);
  }

  /* ---------- Kaart-hover ---------- */
  .rb-card, .diploma-card, .motivatie-card{
    transition:transform .3s ease, background .3s ease, box-shadow .3s ease;
  }
  .rb-card:hover, .motivatie-card:hover{
    transform:translateY(-6px);
  }

  /* ---------- Foto-onthulling ---------- */
  .about-photo{
    clip-path:inset(0 100% 0 0);
    transition:clip-path 0.9s cubic-bezier(.65,0,.35,1);
  }
  .about-photo.photo-in{
    clip-path:inset(0 0 0 0);
  }

  /* ---------- Boei-feestje bij 100% scroll ---------- */
  .buoy-progress.buoy-complete{
    animation:buoy-pop .6s ease;
  }
  .buoy-progress.buoy-complete .buoy-fill{
    stroke:var(--orange);
  }
  @keyframes buoy-pop{
    0%{transform:translateY(-50%) scale(1);}
    35%{transform:translateY(-50%) scale(1.25);}
    60%{transform:translateY(-50%) scale(0.95);}
    100%{transform:translateY(-50%) scale(1);}
  }

  @media(prefers-reduced-motion:reduce){
    .about-photo{clip-path:inset(0 0 0 0); transition:none;}
    .buoy-progress.buoy-complete{animation:none;}
    .rb-card, .diploma-card, .motivatie-card{transition:background .3s ease, box-shadow .3s ease;}
  }