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

    :root {
      --sw: 220px;
      --topbar-h: 56px;
      --font-display: 'Syne', sans-serif;
      --font-ui: 'Inter', sans-serif;
      --bg:      #b0c4d8;
      --bg-alt:  #a0b6cc;
      --bg-card: #90a8be;
      --ink:     #0f1c2e;
      --body:    #1e3448;
      --muted:   #446278;
      --subtle:  #80a0b8;
      --accent:  #01618c;
      --warm:    #f97316;
      --warm2:   #ea6c0a;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--ink);
      font-size: 15px;
      line-height: 1.6;
      overflow-x: hidden;
      padding-left: var(--sw);
    }

    /* START language switch*/ 

/* Positionering van de nav container */
.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Zorgt dat alles rechts staat */
    gap: 30px; /* Ruimte tussen de lijst en de taalswitch */
}

/* Verwijder standaard list-styling die roet in het eten gooit */
.main-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

/* De separate taalswitch selector */
@media (max-width: 768px) {
  .language-selector {
    padding: 20px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtiel lijntje */
    display: flex;
    justify-content: flex-start;
  }

  .mob-nav {
    /* Zorg dat de lijst de rest van de ruimte pakt en scrollbaar blijft */
    max-height: calc(100vh - 250px); 
    overflow-y: auto;
  }
}
.lang-btn {
    text-decoration: none;
    color: #717171 !important; /* Altijd grijs als basis */
    padding: 0 5px;
    transition: all 0.3s ease;
}

.lang-btn.active {
    color: #333 !important; /* Donkerder voor de actieve taal */
    font-weight: 700 !important;
}

.lang-btn:hover {
    color: #ff6600 !important; /* Oranje accent */
}

.sep {
    color: #0f1c2e;
    margin: 0 2px;
}


/* Mobiele aanpassing */
@media (max-width: 768px) {
    .main-nav {
        flex-direction: column; /* Stapel menu en switch onder elkaar in de hamburger */
        align-items: flex-start;
    }
    
    .language-selector {
        border-left: none;
        padding-left: 0;
        margin-top: 0px;
        padding-top: 0px;
        border-top: 0px solid #0f1c2e; /* Lijn boven de switch op mobiel */
        width: 100%;
    }
}

    /* END LANG SWITCH*/
    
    /* ── Cursor ── */
    .cur, .cur-ring { position:fixed; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); }
    .cur      { width:8px; height:8px; background:var(--accent); z-index:9999; transition:width .2s,height .2s,background .2s; }
    .cur-ring { width:36px; height:36px; border:1px solid rgba(56,189,248,.4); z-index:9998; transition:width .3s,height .3s; }
    body.hov .cur      { width:14px; height:14px; background:var(--warm); }
    body.hov .cur-ring { width:56px; height:56px; border-color:rgba(251,146,60,.3); }
    @media (hover:none) { .cur,.cur-ring { display:none; } }

    /* ── SIDEBAR ── */
    .sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--sw); background:var(--bg-alt); border-right:1px solid var(--subtle); display:flex; flex-direction:column; padding:36px 28px; z-index:200; }
    .sb-logo { text-decoration:none; display:flex; flex-direction:column; gap:8px; padding-bottom:4px; }
    .sb-logo-img { display:block; width:48px; height:48px; flex-shrink:0; }
    .sb-logo-png { display:block; width:48px; height:48px; object-fit:contain; pointer-events:none; }
    .sb-name { font-size:22px; font-weight:600; color:var(--ink); letter-spacing:-.02em; line-height:1; }
    .sb-name span { color:var(--warm); }
    .sb-role { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
    .sb-line { width:32px; height:2px; background:linear-gradient(90deg,var(--accent),var(--warm)); margin:24px 0; flex-shrink:0; }
    .menu-wrap { flex:1; overflow-y:auto; scrollbar-width:none; }
    .menu-wrap::-webkit-scrollbar { display:none; }
    .menu { list-style:none; }
    .menu a { display:block; padding:8px 0 8px 12px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none; border-left:2px solid transparent; transition:color .2s,border-color .2s,padding-left .2s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .menu a:hover { color:var(--ink); padding-left:16px; border-left-color:var(--accent); }
    .menu a.active { color:var(--accent); border-left-color:var(--accent); font-weight:500; }
    .menu a.sub-nav { font-size:10px; letter-spacing:.03em; text-transform:none; padding-left:20px; opacity:.65; }
    .menu a.sub-nav:hover { color:var(--warm); border-left-color:var(--warm); padding-left:24px; opacity:1; }
    .menu li.has-sub { border-left:1px solid var(--subtle); margin-left:10px; }
    .menu li.has-sub a.sub-nav { padding-left:12px; }
    .menu li.has-sub a.sub-nav:hover { padding-left:18px; }
    .sb-foot { margin-top:auto; padding-top:20px; border-top:1px solid var(--subtle); }
    .sb-foot-lbl { font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
    .sb-foot-email a { font-size:10px; color:var(--muted); text-decoration:none; display:block; word-break:break-all; transition:color .2s; margin-bottom:14px; }    
    .sb-email { font-size:10px; color:var(--muted); text-decoration:none; display:block; word-break:break-all; transition:color .2s; margin-bottom:14px; }
    .sb-email:hover { color:var(--accent); }
    .sb-email::before { content: "connect"; }
    .sb-email::after  { content: "@vishumahabir.com"; }
    .sb-soc { display:flex; gap:14px; margin-bottom:14px; }
    .sb-soc a { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; }
    .sb-soc a:hover { color:var(--warm); }
    .sb-avail { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted); }
    .sb-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; flex-shrink:0; animation:pulse 2.5s ease infinite; }
    @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 60%{box-shadow:0 0 0 5px rgba(34,197,94,0)} }

    /* ── MOBILE BAR ── */
    .mob-bar { display:none; position:fixed; top:0; left:0; right:0; z-index:600; height:var(--topbar-h); background:rgba(176,196,216,.96); backdrop-filter:blur(16px); border-bottom:1px solid var(--subtle); align-items:center; justify-content:space-between; padding:0 22px; }
    .mob-logo { display:flex; align-items:center; gap:10px; text-decoration:none; height:36px; }
    .mob-logo-png { display:block; height:32px; width:32px; object-fit:contain; pointer-events:none; }
    .mob-logo-name { font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.02em; line-height:1; }
    .mob-logo-name span { color:var(--warm); }
    .mob-btn { background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:4px 0; }
    .mob-btn-lbl { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); transition:color .25s; }
    .mob-btn-icon { display:flex; flex-direction:column; gap:4px; }
    .mob-btn-icon span { display:block; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .3s,opacity .25s,width .3s,background .25s; }
    .mob-btn-icon span:nth-child(1){width:20px} .mob-btn-icon span:nth-child(2){width:13px} .mob-btn-icon span:nth-child(3){width:17px}
    .mob-btn.open .mob-btn-icon span:nth-child(1){width:20px;transform:translateY(5.5px) rotate(45deg);background:var(--accent)}
    .mob-btn.open .mob-btn-icon span:nth-child(2){width:0;opacity:0}
    .mob-btn.open .mob-btn-icon span:nth-child(3){width:20px;transform:translateY(-5.5px) rotate(-45deg);background:var(--accent)}
    .mob-btn.open .mob-btn-lbl{color:var(--accent)}

    /* ── MOBILE MENU ── */
    .mob-menu { display:none; position:fixed; inset:0; z-index:590; background:var(--bg); flex-direction:column; justify-content:space-between; padding:calc(var(--topbar-h) + 24px) 32px 44px; visibility:hidden; }
    .mob-menu::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(56,189,248,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.025) 1px,transparent 1px); background-size:52px 52px; }
    .mob-glow { position:absolute; bottom:-60px; right:-60px; pointer-events:none; width:380px; height:380px; background:radial-gradient(circle,rgba(251,146,60,.07) 0%,transparent 70%); }
    .mob-nav { list-style:none; position:relative; z-index:1; }
    .mob-nav > li { overflow:hidden; border-bottom:1px solid var(--subtle); }
    .mob-nav > li:first-child { border-top:1px solid var(--subtle); }
    .mob-nav a { display:flex; align-items:baseline; gap:14px; padding:15px 0; font-size:clamp(24px,5.5vw,40px); font-weight:400; letter-spacing:-.01em; line-height:1; color:var(--muted); text-decoration:none; transition:color .2s; font-family:var(--font-display); }
    .mob-nav a:hover { color:var(--ink); }
    .mob-num { font-size:11px; font-weight:400; letter-spacing:.1em; color:var(--warm); align-self:center; flex-shrink:0; }
    .mob-nav li.msub { border-bottom:none !important; overflow:hidden; }
    .mob-nav li.msub:last-of-type { border-bottom:1px solid var(--subtle) !important; }
    .mob-nav a.msub-a { font-size:clamp(12px,2.8vw,16px); font-weight:300; letter-spacing:0; color:var(--muted); opacity:.6; padding:8px 0 8px 26px; }
    .mob-nav a.msub-a:hover { color:var(--warm); opacity:1; }
    .mob-foot { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; }
    .mob-foot a { font-size:11px; color:var(--muted); text-decoration:none; transition:color .2s; }
    .mob-foot a:hover { color:var(--accent); }
    .mob-foot-soc { display:flex; gap:18px; }
    .mob-foot-soc a { font-size:10px; letter-spacing:.12em; text-transform:uppercase; }

    /* ── HERO ── */
    #hero { position:relative; overflow:hidden; padding:100px 60px 100px; min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end; }
    .hero-grid { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(56,189,248,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.03) 1px,transparent 1px); background-size:64px 64px; }
    .hero-g1 { position:absolute; top:-150px; left:-80px; width:650px; height:650px; pointer-events:none; background:radial-gradient(circle,rgba(56,189,248,.08) 0%,transparent 70%); }
    .hero-g2 { position:absolute; bottom:-100px; right:-100px; width:500px; height:500px; pointer-events:none; background:radial-gradient(circle,rgba(251,146,60,.07) 0%,transparent 70%); }
    .hero-bg { position:absolute; bottom:-30px; right:-20px; pointer-events:none; user-select:none; font-size:clamp(120px,18vw,260px); font-family:var(--font-display); font-weight:400; letter-spacing:-.03em; line-height:1; color:transparent; -webkit-text-stroke:1px var(--subtle); will-change:transform; }
    .hero-eyebrow { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:28px; display:flex; align-items:center; gap:14px; }
    .hero-eyebrow::before { content:''; width:28px; height:1px; background:var(--accent); }
    /* word-split headline */
    .hero-hl { font-size:clamp(48px,7.5vw,128px); font-weight:400; line-height:.94; letter-spacing:-.02em; font-family:var(--font-display); }
    .hero-hl em { font-style:normal; color:var(--accent); }
    .hero-hl .w  { color:var(--warm); }
    .word-wrap  { display:inline-block; overflow:hidden; vertical-align:bottom; }
    .word-inner { display:inline-block; }
    .hero-sub { display:flex; align-items:flex-end; justify-content:space-between; margin-top:52px; }
    .hero-desc { max-width:360px; font-size:15px; font-weight:300; color:var(--body); line-height:1.85; }
    .hero-scroll { display:flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
    .hero-sdot { width:6px; height:6px; border-radius:50%; background:var(--warm); animation:blink 2s ease infinite; }
    @keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)} }

    /* ── MARQUEE ── */
    .marq-outer { overflow:hidden; border-top:1px solid var(--subtle); border-bottom:1px solid var(--subtle); background:var(--bg-alt); }
    .marq-strip { padding:13px 0; }
    .marq-track { display:flex; width:max-content; animation:marqScroll 28s linear infinite; }
    .marq-strip.rev .marq-track { animation-direction:reverse; animation-duration:22s; }
    .marq-item { display:flex; align-items:center; gap:24px; padding:0 24px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
    .marq-dot { width:3px; height:3px; border-radius:50%; }
    .marq-item:nth-child(odd) .marq-dot { background:var(--accent); }
    .marq-item:nth-child(even) .marq-dot { background:var(--warm); }
    @keyframes marqScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* ── SECTIONS ── */
    section { padding:120px 60px; }
    .s-lbl { display:flex; align-items:center; gap:14px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; overflow:hidden; }
    .s-lbl::before { content:''; width:28px; height:1px; background:var(--accent); flex-shrink:0; }
    .s-lbl-inner { display:inline-block; transform:translateY(120%); }
    .s-ttl { font-size:clamp(34px,4.5vw,68px); font-weight:400; line-height:1.05; letter-spacing:-.01em; margin-bottom:20px; overflow:hidden; font-family:var(--font-display); }
    .s-ttl em { font-style:normal; color:var(--accent); }

    /* ── PORTFOLIO ── */
    #portfolio { background:var(--bg); overflow:visible; padding-bottom:80px; }
    .port-hdr { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; }
    .port-intro { max-width:280px; font-size:14px; color:var(--body); font-weight:300; line-height:1.8; opacity:0; transform:translateY(20px); }

    /* Card row — staggered tops, GSAP parallax on translateY only */
    .baz-stage {
      display:flex; gap:16px; align-items:flex-start;
      overflow:visible; width:100%;
    }
    .baz-card {
      position:relative; cursor:pointer; overflow:hidden;
      flex-shrink:0; border-radius:2px; min-width:0;
      will-change:transform;
      transition:box-shadow .5s ease;
    }
    /* margin-top creates the stagger; GSAP parallax only uses translateY on top of this */
    .baz-card:nth-child(1){ flex:0 0 22%; aspect-ratio:3/4;  margin-top:0; }
    .baz-card:nth-child(2){ flex:0 0 18%; aspect-ratio:2/3;  margin-top:70px; }
    .baz-card:nth-child(3){ flex:0 0 22%; aspect-ratio:3/4;  margin-top:35px; }
    .baz-card:nth-child(4){ flex:0 0 18%; aspect-ratio:2/3;  margin-top:55px; }
    .baz-card:nth-child(5){ flex:0 0 18%; aspect-ratio:9/13; margin-top:10px; }
    .baz-card:hover { box-shadow:0 40px 80px rgba(15,28,46,.16); z-index:10; }

    /* inner image / placeholder — scale up on hover */
    .baz-inner {
      width:100%; height:100%;
      transition:transform .7s cubic-bezier(.25,.46,.45,.94);
    }
    .baz-card:hover .baz-inner { transform:scale(1.05); }

    /* dark overlay — slides up on hover */
    .baz-ov {
      position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(to top,rgba(8,12,20,.92) 0%,rgba(8,12,20,.3) 50%,transparent 100%);
      opacity:0; transition:opacity .45s;
      display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
    }
    .baz-card:hover .baz-ov { opacity:1; }
    .baz-cat   { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--warm); margin-bottom:5px; }
    .baz-title { font-size:17px; font-weight:400; color:var(--ink); line-height:1.2; }
    .baz-cta   { display:inline-flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-top:10px; }
    .baz-cta::after { content:'→'; }

    /* "View" pill follows cursor */
    .baz-cursor-label {
      position:fixed; pointer-events:none; z-index:10000;
      background:var(--warm); color:var(--bg);
      font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
      padding:9px 18px; border-radius:2px;
      opacity:0; transform:translate(-50%,-60%) scale(.75);
      transition:opacity .18s, transform .18s;
      white-space:nowrap;
    }
    .baz-cursor-label.show { opacity:1; transform:translate(-50%,-60%) scale(1); }

    /* ── MODAL ── */
    .modal-wrap {
      position:fixed; top:0; right:0; bottom:0; left:var(--sw); z-index:2000;
      background:rgba(176,196,216,.97); backdrop-filter:blur(12px);
      display:flex; flex-direction:column;
      opacity:0; pointer-events:none; visibility:hidden;
      transition:opacity .35s, visibility .35s;
    }
    .modal-wrap.open { opacity:1; pointer-events:all; visibility:visible; }

    .modal-header {
      display:flex; justify-content:space-between; align-items:center;
      padding:24px 40px; flex-shrink:0;
      border-bottom:1px solid var(--subtle);
    }
    .modal-info { display:flex; flex-direction:column; gap:4px; }
    .modal-cat  { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--warm); }
    .modal-title { font-size:16px; font-weight:400; color:var(--ink); }
    .modal-counter { font-size:12px; color:var(--muted); }
    .modal-close {
      width:44px; height:44px; border:1px solid var(--subtle); background:none; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      color:var(--muted); font-size:20px; transition:border-color .2s, color .2s;
    }
    .modal-close:hover { border-color:var(--warm); color:var(--warm); }

    .modal-body {
      flex:1; overflow:hidden; position:relative;
    }
    .carousel-track {
      display:flex; height:100%; transition:transform .55s cubic-bezier(.77,0,.175,1);
    }
    .carousel-slide {
      flex-shrink:0; width:var(--slide-w,100%); height:100%;
      display:flex; align-items:center; justify-content:center;
      padding:32px 80px; box-sizing:border-box; z-index: 9999;
    }
    .carousel-slide img {
      max-width:100%; max-height:100%; object-fit:contain;
      border-radius:2px; box-shadow:0 24px 80px rgba(15,28,46,.12);
    }
    /* gradient placeholder slides */
    .slide-ph {
      width:100%; max-width:900px; border-radius:4px;
      display:flex; align-items:center; justify-content:center;
      font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
    }

    .modal-footer {
      display:flex; justify-content:space-between; align-items:center;
      padding:20px 40px; flex-shrink:0; border-top:1px solid var(--subtle);
    }
    .modal-dots { display:flex; gap:8px; }
    .modal-dot {
      width:6px; height:6px; border-radius:50%; background:var(--subtle);
      cursor:pointer; transition:background .25s, transform .25s;
    }
    .modal-dot.active { background:var(--warm); transform:scale(1.4); }
    .modal-nav { display:flex; gap:12px; }
    .modal-btn {
      width:44px; height:44px; border:1px solid var(--subtle); background:none; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      color:var(--muted); font-size:18px; transition:border-color .2s, color .2s;
    }
    .modal-btn:hover { border-color:var(--accent); color:var(--accent); }

    /* ── PROJECT PAGE OVERLAY ── */
    .proj-overlay {
      position:fixed; inset:0; z-index:3000; pointer-events:none;
      display:flex; flex-direction:column;
    }
    /* the curtain that wipes across */
    .proj-curtain {
      position:absolute; inset:0;
      background:var(--bg);
      transform-origin:left center;
      transform:scaleX(0);
    }
    /* the actual project page, hidden inside overlay */
    .proj-page {
      position:absolute; inset:0; overflow-y:auto;
      opacity:0; padding:0;
      background:var(--bg);
      display:flex; flex-direction:column;
    }
    .proj-topbar {
      position:sticky; top:0; z-index:10;
      display:flex; justify-content:space-between; align-items:center;
      padding:20px 52px;
      background:rgba(176,196,216,.88); backdrop-filter:blur(16px);
      border-bottom:1px solid var(--subtle);
      flex-shrink:0;
    }
    .proj-back {
      display:flex; align-items:center; gap:12px;
      font-size:11px; letter-spacing:.18em; text-transform:uppercase;
      color:var(--muted); background:none; border:none; cursor:pointer;
      transition:color .2s; padding:0;
    }
    .proj-back:hover { color:var(--ink); }
    .proj-back-arrow {
      width:32px; height:32px; border:1px solid var(--subtle);
      display:flex; align-items:center; justify-content:center;
      font-size:16px; color:var(--muted); transition:border-color .2s, color .2s;
    }
    .proj-back:hover .proj-back-arrow { border-color:var(--accent); color:var(--accent); }
    .proj-tag {
      font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--warm);
    }
    /* hero area */
    .proj-hero {
      display:flex; flex-direction:column; justify-content:flex-end;
      padding:80px 52px 52px;
      border-bottom:1px solid var(--subtle);
      min-height:46vh;
      position:relative; overflow:hidden;
      flex-shrink:0;
    }
    .proj-hero-bg {
      position:absolute; inset:0;
      background:linear-gradient(160deg,#0d2238 0%,#061426 100%);
    }
    .proj-hero-bg::after {
      content:''; position:absolute; inset:0;
      background-image:linear-gradient(rgba(56,189,248,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(56,189,248,.04) 1px,transparent 1px);
      background-size:56px 56px;
    }
    .proj-hero-glow {
      position:absolute; top:-100px; right:-80px;
      width:500px; height:500px; pointer-events:none;
      background:radial-gradient(circle,rgba(56,189,248,.07) 0%,transparent 70%);
    }
    .proj-hero-content { position:relative; z-index:1; }
    .proj-hero-lbl {
      font-size:10px; letter-spacing:.28em; text-transform:uppercase;
      color:var(--accent); margin-bottom:16px;
      display:flex; align-items:center; gap:12px;
      opacity:0; transform:translateY(16px);
    }
    .proj-hero-lbl::before { content:''; width:24px; height:1px; background:var(--accent); }
    .proj-title {
      font-size:clamp(38px,6vw,88px); font-weight:400;
      line-height:.95; letter-spacing:-.02em; color:var(--ink);
      margin-bottom:28px; font-family:var(--font-display);
      opacity:0; transform:translateY(30px);
    }
    .proj-title em { font-style:normal; color:var(--accent); }
    .proj-meta {
      display:flex; gap:40px; flex-wrap:wrap;
      opacity:0; transform:translateY(20px);
    }
    .proj-meta-item { display:flex; flex-direction:column; gap:4px; }
    .proj-meta-label { font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
    .proj-meta-value { font-size:13px; font-weight:400; color:var(--ink); }
    /* body sections */
    .proj-body { padding:60px 52px 100px; display:flex; flex-direction:column; gap:60px; flex:1; }
    .proj-section { opacity:0; transform:translateY(30px); }
    .proj-section-lbl {
      font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent);
      margin-bottom:18px; display:flex; align-items:center; gap:12px;
    }
    .proj-section-lbl::before { content:''; width:20px; height:1px; background:var(--accent); }
    .proj-section-title {
      font-size:clamp(22px,3vw,34px); font-weight:400; color:var(--ink);
      letter-spacing:-.01em; margin-bottom:14px; line-height:1.1; font-family:var(--font-display);
    }
    .proj-section-text { font-size:14px; font-weight:300; color:var(--body); line-height:1.9; max-width:680px; }
    /* image placeholder panels */
    .proj-panels { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
    .proj-panel {
      aspect-ratio:16/9; border-radius:2px; overflow:hidden; position:relative;
      display:flex; align-items:flex-end; padding:20px;
    }
    .proj-panel-lbl { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); position:relative; z-index:1; }
    /* outcomes row */
    .proj-outcomes { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--subtle); border:1px solid var(--subtle); }
    .proj-outcome { background:var(--bg); padding:32px 28px; }
    .proj-outcome-n { font-size:40px; font-weight:400; color:var(--warm); line-height:1; margin-bottom:8px; font-family:var(--font-display); }
    .proj-outcome-l { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
    /* next project */
    .proj-next {
      display:flex; align-items:center; justify-content:space-between;
      padding:36px 52px; border-top:1px solid var(--subtle);
      flex-shrink:0; cursor:pointer;
      transition:background .3s;
    }
    .proj-next:hover { background:var(--bg-alt); }
    .proj-next-lbl { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
    .proj-next-title { font-size:20px; font-weight:300; color:var(--ink); }
    .proj-next-arrow { font-size:24px; color:var(--warm); transition:transform .3s; }
    .proj-next:hover .proj-next-arrow { transform:translateX(8px); }

    @media (max-width:768px) {
      .proj-topbar{padding:14px 22px}
      .proj-hero{padding:60px 22px 36px; min-height:40vh;}
      .proj-body{padding:40px 22px 80px; gap:44px;}
      .proj-panels{grid-template-columns:1fr; gap:12px;}
      .proj-outcomes{grid-template-columns:1fr 1fr;}
      .proj-next{padding:28px 22px;}
    }
    @media (max-width:480px) {
      .proj-outcomes{grid-template-columns:1fr;}
      .proj-title{letter-spacing:-.02em;}
    }

        /* iMG RESPONSIVENESS OVERRULE */
    .proj-panel[style*="background"] {background-size: cover !important;background-position: center center !important;background-repeat: no-repeat !important;
    }

    /* Fix mobile*/
    @media (max-width: 768px) {
        .proj-panel {aspect-ratio: 16 / 9 !important;width: 100% !important;padding: 15px !important;}
    }

    /* ── SERVICES ── */
    #services { background:var(--bg-alt); }
    .svc-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--subtle); margin-top:64px; }
    .si { padding:44px 40px 44px 32px; border-right:1px solid var(--subtle); border-bottom:1px solid var(--subtle); transition:background .35s; }
    .si:last-child { border-right:none; }
    .si:hover { background:rgba(249,115,22,.06); }
    .si-num  { font-size:10px; letter-spacing:.18em; color:var(--warm); margin-bottom:24px; }
    .si-name { font-size:24px; font-weight:400; color:var(--ink); margin-bottom:14px; line-height:1.25; font-family:var(--font-display); }
    .si-desc { font-size:14px; font-weight:300; color:var(--body); line-height:1.8; }
    .si-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
    .si-tag  { font-size:10px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--subtle); padding:5px 12px; color:var(--muted); transition:border-color .25s,color .25s; }
    .si:hover .si-tag { border-color:rgba(249,115,22,.35); color:var(--warm); }

    /* ── ABOUT (sticky image, scrolling text) ── */
    #about { background:var(--bg-card); display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; padding-bottom:0; }
    .abt-img-wrap { position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; }
    .abt-img { position:relative; width:100%; aspect-ratio:3/4; background:var(--bg-alt); overflow:hidden; }
    .abt-img-in { width:100%; height:110%; position:relative; overflow:hidden; }
    .abt-photo { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
    .abt-img-in::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(56,189,248,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.045) 1px,transparent 1px); background-size:48px 48px; }
    .abt-img::before { content:''; position:absolute; bottom:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--accent),var(--warm)); z-index:1; }
    .abt-badge { position:absolute; bottom:28px; left:-20px; background:var(--bg); border:1px solid var(--subtle); padding:18px 24px; box-shadow:0 16px 48px rgba(15,28,46,.1); }
    .abt-badge-n { font-size:42px; font-weight:400; color:var(--warm); line-height:1; font-family:var(--font-display); }
    .abt-badge-l { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
    .abt-body { padding:120px 0 160px; }
    .abt-p { font-size:15px; font-weight:300; color:var(--body); line-height:1.9; margin-bottom:18px; opacity:0; transform:translateY(30px); }
    .abt-stats { display:flex; gap:48px; margin-top:40px; padding-top:40px; border-top:1px solid var(--subtle); }
    .sv { font-size:48px; font-weight:400; color:var(--ink); line-height:1; font-family:var(--font-display); }
    .stat:nth-child(2) .sv { color:var(--accent); }
    .stat:nth-child(3) .sv { color:var(--warm); }
    .sl { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

    /* ── CONTACT ── */
    #contact { background:var(--bg); border-top:1px solid var(--subtle); }
    .con-lay { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
    .con-hl  { font-size:clamp(32px,4vw,60px); font-weight:400; line-height:1.05; margin-bottom:24px; overflow:hidden; font-family:var(--font-display); }
    .con-hl em { font-style:normal; color:var(--warm); }
    .con-note { font-size:14px; font-weight:300; color:var(--muted); line-height:1.8; margin-bottom:44px; opacity:0; transform:translateY(20px); }
    .con-links { display:flex; flex-direction:column; }
    .con-lnk { display:flex; justify-content:space-between; align-items:center; padding:18px 0; border-bottom:1px solid var(--subtle); text-decoration:none; color:var(--muted); font-size:14px; transition:color .25s,padding-left .25s; }
    .con-lnk:hover { color:var(--accent); padding-left:8px; }
    .con-lnk > span:last-child { font-size:18px; display:inline-block; transition:transform .25s; }
    .con-lnk:hover span { transform:translateX(4px); }
    .con-form { display:flex; flex-direction:column; opacity:0; transform:translateY(30px); }
    .con-email-addr { font-size: inherit;}
    .con-email-addr::before { content: "connect"; }
    .con-email-addr::after  { content: "@vishumahabir.com"; }        
    .fr { position:relative; margin-bottom:36px; }
    .fr label { position:absolute; top:0; left:0; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
    .fr input,.fr textarea,.fr select { width:100%; background:none; border:none; border-bottom:1px solid var(--subtle); padding:24px 0 10px; font-family:'Inter',sans-serif; font-size:15px; font-weight:300; color:var(--ink); outline:none; transition:border-color .3s; -webkit-appearance:none; }
    .fr input:focus,.fr textarea:focus,.fr select:focus { border-bottom-color:var(--warm); }
    .fr textarea { resize:none; height:100px; }
    .fr select option { background:var(--bg-card); color:var(--ink); }
    .btn-send { display:inline-flex; align-items:center; gap:12px; background:var(--warm); color:#fff; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; border:none; padding:16px 36px; cursor:pointer; transition:background .25s,transform .2s; align-self:flex-start; }
    .btn-send:hover { background:var(--warm2); transform:translateY(-2px); }
    .btn-arr { font-size:16px; display:inline-block; transition:transform .25s; }
    .btn-send:hover .btn-arr { transform:translateX(4px); }

    /* ── FOOTER ── */
    footer { padding:32px 60px; border-top:1px solid var(--subtle); display:flex; justify-content:space-between; align-items:center; background:var(--bg-alt); }
    .fl { display:flex; align-items:center; }
    .footer-logo-obj, .footer-logo-png { display:block; height:28px; width:auto; pointer-events:none; }
    .fc { font-size:12px; color:var(--muted); }
    .fsoc { display:flex; gap:24px; }
    .fsoc a { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; }
    .fsoc a:hover { color:var(--accent); }

    /* ── RESPONSIVE ── */
    @media (max-width:1280px) { :root{--sw:200px} section{padding:100px 48px} #hero{padding:90px 48px 80px} footer{padding:28px 48px} }
    @media (max-width:1024px) {
      :root{--sw:180px} section{padding:80px 36px} #hero{padding:80px 36px 70px} footer{padding:24px 36px}
      #about{grid-template-columns:1fr;gap:36px;padding-bottom:80px} .abt-img-wrap{position:relative;height:auto} .abt-body{padding:40px 0 60px}
      .abt-stats{gap:28px} .sv{font-size:36px} .con-lay{gap:48px}
    }
    @media (max-width:768px) {
      body{padding-left:0;padding-top:var(--topbar-h)}
      .sidebar{display:none} .mob-bar{display:flex} .mob-menu{display:flex}
      #hero{padding:80px 22px 52px; min-height:calc(100svh - var(--topbar-h)); justify-content:flex-end;}
      .hero-sub{flex-direction:column;align-items:flex-start;gap:22px} .hero-scroll{display:none}
      section{padding:64px 22px} #about{padding-bottom:64px}
      .port-hdr{flex-direction:column;align-items:flex-start;gap:14px} .port-intro{max-width:100%}
      .baz-stage{ flex-wrap:wrap; gap:16px; overflow:hidden; }
      .baz-card{ flex-shrink:0; }
      .baz-card:nth-child(1),
      .baz-card:nth-child(2),
      .baz-card:nth-child(3),
      .baz-card:nth-child(4),
      .baz-card:nth-child(5){ flex:0 0 calc(50% - 8px); width:calc(50% - 8px); aspect-ratio:3/4; margin-top:0 !important; }
      .modal-wrap{left:0}
      .carousel-slide{padding:16px}
      .modal-header{padding:16px 20px} .modal-footer{padding:12px 20px}
      .svc-grid{grid-template-columns:1fr} .si{border-right:none;padding:32px 0}
      .abt-stats{gap:20px;flex-wrap:wrap} .sv{font-size:34px}
      .con-lay{grid-template-columns:1fr;gap:48px}
      footer{flex-direction:column;gap:14px;text-align:center;padding:24px} .fsoc{justify-content:center}
    }
    @media (max-width:480px) {
      #hero{padding:70px 18px 44px} section{padding:52px 18px}
      .baz-stage{ gap:12px; }
      .baz-card:nth-child(1),.baz-card:nth-child(2),.baz-card:nth-child(3),.baz-card:nth-child(4),.baz-card:nth-child(5){ flex:0 0 100%; width:100%; aspect-ratio:3/4; margin-top:0 !important; }
      .baz-ov{opacity:1} .baz-cta{display:none}
      .si-name{font-size:20px} .abt-stats{gap:16px} .sv{font-size:30px} footer{padding:20px 18px}
    }

    /* ── MODAL ACTIONS ── */
    .modal-actions { display:flex; align-items:center; gap:24px; }

    /* ── CARD INNER — shared layout ── */
    .baz-inner {
      width:100%; height:100%;
      display:flex; flex-direction:column;
      align-items:flex-start; justify-content:flex-end;
      padding:32px; gap:10px;
    }
    /* per-card gradients */
    .baz-inner--politie  { background:linear-gradient(160deg,#0d1f35 0%,#050e1c 100%); }
    .baz-inner--kpn      { background:linear-gradient(160deg,#003d7a 0%,#001e3d 100%); }
    .baz-inner--kpndsh   { background:linear-gradient(160deg,#1a3a5c 0%,#0a1e30 100%); }
    .baz-inner--kpnndw   { background:linear-gradient(160deg,#0d2d4a 0%,#051520 100%); }
    .baz-inner--kpnng    { background:linear-gradient(160deg,#1a0a3d 0%,#0a0520 100%); }
    .baz-inner--achmea   { background:linear-gradient(160deg,#2d0808 0%,#1a0a0a 100%); }
    .baz-inner--ymere    { background:linear-gradient(160deg,#0a1f0a 0%,#051205 100%); }
    .baz-inner--screwfix { background:linear-gradient(160deg,#0d2238 0%,#061426 100%); }
    .baz-inner--bt       { background:linear-gradient(160deg,#1e0f36 0%,#0d0620 100%); }
    .baz-inner--ee       { background:linear-gradient(160deg,#081f14 0%,#030d09 100%); }
    .baz-inner--btbiz    { background:linear-gradient(160deg,#0e2030 0%,#060f1a 100%); }

    /* card inner child elements */
    .bi-client {
      font-size:10px; letter-spacing:.28em; text-transform:uppercase; opacity:.7;
    }
    .bi-client--blue  { color:#38bdf8; }
    .bi-client--warm  { color:#fb923c; }
    .bi-client--green { color:#34d399; }

    .bi-title {
      font-size:clamp(22px,2.5vw,36px); font-weight:400;
      color:#f1f5f9; line-height:1.1; font-family:var(--font-display);
    }
    .bi-rule {
      width:32px; height:1.5px; margin-top:4px;
    }
    .bi-rule--blue-warm  { background:linear-gradient(90deg,#38bdf8,#fb923c); }
    .bi-rule--warm-blue  { background:linear-gradient(90deg,#fb923c,#38bdf8); }
    .bi-rule--green-blue { background:linear-gradient(90deg,#34d399,#38bdf8); }

    .bi-meta {
      font-size:10px; letter-spacing:.14em;
      text-transform:uppercase; color:var(--muted); margin-top:2px;
    }

    /* ── SLIDE PLACEHOLDER ── */
    .slide-ph {
      width:100%; max-width:900px; border-radius:4px;
      display:flex; flex-direction:column;
      align-items:flex-start; justify-content:center;
      aspect-ratio:16/9; gap:20px; padding:60px;
    }
    .slide-ph__client {
      font-size:11px; letter-spacing:.28em; text-transform:uppercase;
      color:var(--slide-accent,#0ea5e9); opacity:.8;
    }
    .slide-ph__title {
      font-size:clamp(22px,3vw,40px); font-weight:300;
      color:#f1f5f9; line-height:1.15;
    }
    .slide-ph__rule {
      width:48px; height:2px;
      background:linear-gradient(90deg,var(--slide-accent,#38bdf8),#fb923c);
    }

    .slide-ph__sub {
      position: relative;
      z-index: 2;
      text-transform: none !important;
      font-size: 1.1rem;
      font-weight: 300;
      line-height: 1.4;
      color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
      
      /* Spacing */
      margin-top: 8px;
      max-width: 600px; /* Prevents text from stretching too wide */
      
      /* Animation (matches your other slide elements) */
      animation: fadeIn 0.8s ease forwards;
    }

    /* ── PROJ OUTCOMES spacing ── */
    .proj-outcomes { margin-top:24px; }

    /* ── SCROLL TO TOP ── */
    .scroll-top {
      position:fixed; bottom:36px; right:36px; z-index:1000!important;
      display:flex; flex-direction:column; align-items:center; gap:5px;
      background:transparent;
      border:1px solid var(--subtle);
      color:var(--muted);
      padding:12px 14px;
      cursor:pointer;
      opacity:0; pointer-events:none;
      transition:opacity .35s, border-color .25s, color .25s, transform .25s;
      font-family:var(--font-ui);
    }
    .scroll-top.visible { opacity:1; visibility:visible; pointer-events:all; }
    .scroll-top:hover {
      border-color:var(--warm);
      color:var(--warm);
      transform:translateY(-3px);
    }
    .scroll-top__arrow { font-size:16px; line-height:1; transition:transform .25s; }
    .scroll-top:hover .scroll-top__arrow { transform:translateY(-2px); }
    .scroll-top__lbl { font-size:8px; letter-spacing:.18em; text-transform:uppercase; line-height:1; }
    @media (max-width:768px) {
      .scroll-top { bottom:24px; right:20px; padding:10px 12px; }
    }

    /* ── PROJECT HERO — keep text light on dark gradient bg ── */
    .proj-hero .proj-hero-lbl,
    .proj-hero .proj-title,
    .proj-hero .proj-meta-label,
    .proj-hero .proj-meta-value { color:#f1f5f9; }
    .proj-hero .proj-meta-label { color:rgba(241,245,249,.55); }
    .proj-hero .proj-tag { color:rgba(241,245,249,.7); border-color:rgba(241,245,249,.2); }

    /* ── HERO PORTRAIT ── */
    .hero-portrait {
      position:absolute;
      right:0; bottom:0;
      width:clamp(320px, 44vw, 680px);
      height:100%;
      pointer-events:none;
      display:flex; align-items:flex-end; justify-content:flex-end;
      z-index:1;
    }
    .hero-portrait__img {
      width:100%;
      height:auto;
      display:block;
      object-fit:contain;
      object-position:bottom right;
      mix-blend-mode:screen;
      opacity:.92;
      will-change:transform;
      mask-image:linear-gradient(to top, transparent 0%, black 20%),
                 linear-gradient(to left, transparent 0%, black 15%);
      mask-composite:intersect;
      -webkit-mask-image:linear-gradient(to top, transparent 0%, black 20%),
                          linear-gradient(to left, transparent 0%, black 15%);
      -webkit-mask-composite:source-in;
    }
    /* make hero text sit above portrait */
    .hero-eyebrow, .hero-hl, .hero-sub, .hero-bg { position:relative; z-index:2; }
    @media (max-width:768px) {
      .hero-portrait { width:clamp(200px,60vw,340px); opacity:.5; }
    }
    @media (max-width:480px) {
      .hero-portrait { width:55vw; opacity:.35; }
    }

    /* ── NAV YEAR LABELS ── */
    .nav-year-label {
      font-size:8px; letter-spacing:.2em; text-transform:uppercase;
      color:var(--warm); padding:14px 12px 4px; opacity:.8;
    }
    .mob-year-label {
      font-size:9px; letter-spacing:.18em; text-transform:uppercase;
      color:var(--warm); padding:12px 0 2px; opacity:.8; list-style:none;
    }

    /* ── PORTFOLIO ERA LABEL ── */
    .port-era-label {
      display:flex; align-items:center; gap:16px;
      margin:60px 0 32px;
    }
    .port-era-label::before,
    .port-era-label::after {
      content:''; flex:1; height:1px; background:var(--subtle);
    }
    .port-era-label span {
      font-size:10px; letter-spacing:.22em; text-transform:uppercase;
      color:var(--warm); white-space:nowrap;
    }

    @media (max-width:768px) {
      .baz-stage--kpn { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
      .baz-stage--kpn .baz-card:nth-child(n){ flex:none; width:100%; margin-top:0; aspect-ratio:3/4; }
    }

/* ── TABLET & MOBILE REPAIRS (COMPACT VIEW) ── */
@media (max-width: 1024px) {
  /* Stop overlap: Geef de wrapper ruimte voor de navigatie */
  .hero-wrap {
    height: auto !important;
    min-height: 60vh !important; /* Forceert JS terug naar een kortere hoogte */
    padding-top: 100% !important; /* Ruimte voor de navigatie + ademruimte */
    display: flex !important;
    align-items: flex-start !important; /* Zet content bovenin */
  }

  /* Zorg dat de tekst niet tegen de randen plakt */
  .hero-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Verplaats de portretfoto zodat deze niet over de tekst valt */
  .hero-portrait {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    margin-top: 30px;
    width: 100% !important;
    max-width: 300px;
  }
}