@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Poppins:wght@700;800;900&family=Sora:wght@700;800&display=swap');

/* Onderdelen uit de originele site (laadscherm, hero met ink-bleed, showreel-carousel,
   mappen en logo's), letterlijk overgenomen. De kleurvariabelen kregen het voorvoegsel
   --o- zodat ze niet botsen met die van de nieuwe versie (css/stijl.css). */

/* originele typografie binnen deze onderdelen */
.page-fade,.hero,.showreel-section,.folders-section{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;color:var(--o-ink);
  font-variation-settings:normal;
}
.hero h1,.hero h2,.hero h3,.showreel-section h2,.showreel-section h3,.folders-section h2,.folders-section h3{
  font-family:"Sora",system-ui,sans-serif;letter-spacing:-0.03em;
}
.hero .wrap,.folders-section .wrap{max-width:1180px;padding:0 24px;}
@media (min-width:1024px){.hero .wrap,.folders-section .wrap{padding:0 48px;}}
.hero a:focus-visible,.hero button:focus-visible,.showreel-section button:focus-visible,.folders-section a:focus-visible{outline:3px solid var(--o-coral);outline-offset:3px;border-radius:4px;}

  :root{
    --o-paper:#F4F2FB;
    --o-paper-raised:#FFFFFF;
    --o-paper-sunken:color-mix(in srgb, #F4F2FB 88%, black 12%);
    --o-ink:#1B1330;
    --o-ink-soft:#5B5078;
    --o-ink-faint:#8B80A8;
    --o-line:rgba(27,19,48,0.12);
    --o-coral:#E83940;
    --o-coral-soft:#FFD0E4;
    --o-lime:color-mix(in srgb, #FFD0E4 65%, #E83940 35%);
    --o-lime-soft:color-mix(in srgb, #FFD0E4 45%, white);
    --o-pink:#840121;
    --o-pink-soft:color-mix(in srgb, #840121 18%, white);
    --o-blue:color-mix(in srgb, #840121 35%, white);
    --o-blue-soft:color-mix(in srgb, #840121 15%, white);
    --o-chocolate:#40231F;
    --o-chocolate-soft:color-mix(in srgb, #40231F 14%, white);
    --o-shadow-color:27,19,48;
    --o-spotlight-accent:#E83940;
  }

  /* ---------- Scroll reveal: fade + rise into view ---------- */
  .reveal{
    opacity:0;
    transform:translateY(32px);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--reveal-delay, 0s);
    will-change:opacity, transform;
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
  }

  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
  @media (min-width:1024px){.wrap{padding:0 48px;}}

  /* ---------- Marker highlight ---------- */
  .mark{
    position:relative;
    white-space:nowrap;
    padding:0 .12em;
  }
  .mark::before{
    content:"";
    position:absolute;
    left:-2%;right:-2%;bottom:0.06em;top:0.32em;
    background:var(--hl,var(--o-lime));
    border-radius:0.35em 0.6em 0.4em 0.55em / 0.6em 0.4em 0.6em 0.4em;
    transform:rotate(-1deg);
    z-index:-1;
  }
  .mark.coral{--hl:var(--o-coral-soft);}
  .mark.pink{--hl:var(--o-pink-soft);}
  .mark.blue{--hl:var(--o-blue-soft);}


  /* ---------- Hero ---------- */
  /* the pink diensten section right after is also position:relative with
     no z-index of its own, so this hero (z-index:2) keeps painting above
     it wherever the diagonal carousel's bottom-right tail runs past the
     hero's own edge into that section — same trick as the centered card
     bleeding down into the pink section that was already in place. */
  main{position:relative;}
  .hero{
    position:relative;
    z-index:2;
    min-height:100vh;
    min-height:100svh;
    display:flex;align-items:center;justify-content:center;
    overflow-x:clip;
    overflow-y:visible;
    background:#FAF8EB;
    transition:background-color .4s ease;
  }
  /* the red button's payload: everything in the hero dims down to a
     spotlight except the carousel cards and the flap, which are left
     completely untouched so they stay bright against the dark — no
     z-index trickery, just dimming everything else instead */
  body.is-spinning .hero{background-color:#181009;}
  /* showreel: the carousel's own section, right after "Allround?!" */
  .showreel-section{position:relative;background:#FDCFE1;transition:background-color .4s ease;}
  .showreel-section .hero-feed-row{margin-top:0;}
  body.is-spinning .showreel-section{background-color:#181009;}
  body.is-spinning .hero-top-cluster,
  body.is-spinning .hero-scroll-hint,
  body.is-spinning .hero-notify,
  body.is-spinning .hero-danger-btn,
  body.is-spinning .hero-feed-nav-btn,
  body.is-spinning .dock{
    filter:brightness(.32);
    transition:filter .35s ease;
  }
  .hero-inner{
    position:relative;z-index:60;width:100%;
    align-self:center;
    display:flex;flex-direction:column;align-items:center;
    gap:clamp(16px,3.2vh,32px);
    padding:max(20px, env(safe-area-inset-top, 0px)) 0 20px;
    pointer-events:none;
  }
  .hero-inner a,.hero-inner button{pointer-events:auto;}
  .hero-inner .hero-feed-row{pointer-events:auto;}
  /* the wordmark + role stamp + CTA hold their big, centered opening pose
     for a beat, then rise into the compact header — the feed rises with
     them in the same breath, like the whole scene scrolling up together */
  .hero-top-cluster{
    width:100%;
    display:flex;flex-direction:column;align-items:center;
    gap:inherit;
    transform-origin:50% 50%;
    animation:heroClusterIntro 1s cubic-bezier(.22,.85,.28,1) .2s both;
  }
  /* the carousel has (temporarily) moved to its own section, so the
     cluster simply settles in, centered in the hero */
  @keyframes heroClusterIntro{
    0%{opacity:0;transform:translateY(3vh) scale(.96);}
    100%{opacity:1;transform:translateY(0) scale(1);}
  }
  /* ---------- Curved showreel ----------
     Not a straight diagonal any more — each card's vertical position is
     computed in JS from an eased curve (steep drop right after the
     top-left corner, then a long, flat-ish tail): the wordmark sits in
     the "elbow" of that curve, in the clear, and the tail is still free
     to keep dropping past the hero's own edge into the pink diensten
     section below (same bleed trick as elsewhere). Cards themselves stay
     upright — no per-card or per-band rotation at all any more. */
  /* a plain, contained row — cards sit flat side by side, capped so at
     most 5 (fewer on phones) are ever on screen at once, and the row
     clips its own edges so nothing runs off past the hero. */
  .hero-feed-row{
    position:relative;
    width:100%;
    display:flex;align-items:center;gap:10px;
    margin-top:26px;
    opacity:0;
    animation:heroFeedIn 1s ease .9s both;
  }
  /* the flap: a proper wheel-of-fortune pointer — a bold little pennant
     on a pin, dropping in with a bounce while the wheel spins, and
     parking right over whichever card it lands on */
  .hero-wheel-flap{
    position:absolute;left:50%;top:-46px;
    transform:translateX(-50%) translateY(-18px) scale(.7);
    width:30px;height:38px;
    background:var(--o-coral);
    clip-path:polygon(50% 100%, 4% 34%, 4% 0%, 96% 0%, 96% 34%);
    filter:drop-shadow(0 8px 12px rgba(64,35,31,.5));
    opacity:0;
    transition:opacity .2s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
    z-index:6;
    pointer-events:none;
  }
  .hero-wheel-flap::after{
    content:"";position:absolute;left:50%;top:-6px;
    transform:translateX(-50%);
    width:10px;height:10px;border-radius:50%;
    background:var(--o-chocolate);
    box-shadow:0 0 0 3px var(--o-paper-raised);
  }
  .hero-wheel-flap.is-visible{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
  .hero-feed-card.is-winner{
    box-shadow:0 0 0 3px var(--o-coral), 0 18px 30px -14px rgba(64,35,31,.5);
  }
  /* confetti burst */
  .confetti-stage{
    position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;
  }
  .confetti-piece{
    position:absolute;top:-20px;
    border-radius:2px;
    animation:confettiFall linear forwards;
    opacity:.95;
  }
  @keyframes confettiFall{
    0%{transform:translate(0,0) rotate(0deg);opacity:1;}
    100%{transform:translate(var(--drift),108vh) rotate(var(--spin));opacity:.85;}
  }
  @media (prefers-reduced-motion: reduce){
    .hero-wheel-flap,.confetti-stage{display:none;}
  }
  @keyframes heroFeedIn{
    0%{opacity:0;transform:translateY(3vh);}
    100%{opacity:1;transform:translateY(0);}
  }
  .hero-feed{
    flex:1;min-width:0;
    overflow:hidden;
  }
  .hero-feed-track{
    display:flex;align-items:stretch;
    gap:var(--hero-card-gap, 14px);
    will-change:transform;
  }
  .hero-feed-card{
    position:relative;flex-shrink:0;
    width:var(--hero-card-w, 140px);
    aspect-ratio:9/16;
    border-radius:12px;overflow:hidden;
    background:var(--o-paper-sunken);
    box-shadow:0 10px 20px -12px rgba(var(--o-shadow-color),.4);
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .hero-feed-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 28px -14px rgba(64,35,31,.5);
  }
  .hero-feed-media{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
    transition:transform .3s ease;
  }
  .hero-feed-card:hover .hero-feed-media{transform:scale(1.05);}
  .hero-feed-nav-btn{
    position:relative;flex-shrink:0;
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb, var(--o-paper-raised) 80%, transparent);
    border:1px solid rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(14px) saturate(180%);
    backdrop-filter:blur(14px) saturate(180%);
    box-shadow:0 8px 16px -10px rgba(64,35,31,.4);
    color:var(--o-chocolate);
    cursor:pointer;
    transition:opacity .2s ease, transform .15s ease;
  }
  .hero-feed-nav-btn:hover{transform:scale(1.06);}
  .hero-feed-nav-btn:active{transform:scale(.94);}
  .hero-feed-nav-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
  @media (prefers-reduced-motion: reduce){
    .hero-top-cluster{animation:none;}
    .hero-feed-row{animation:none;opacity:1;}
  }
  .hero-cta{
    position:relative;z-index:4;
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 16px;border-radius:999px;
    background:var(--o-chocolate);color:#FFF8EE;
    font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:0.78rem;
    text-decoration:none;text-align:center;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 8px 16px -10px rgba(64,35,31,.4);
    transition:transform .2s cubic-bezier(.22,.61,.36,1), background .2s ease, box-shadow .2s ease;
    cursor:pointer;
  }
  .hero-cta:hover{transform:translateY(-2px);box-shadow:0 12px 22px -12px rgba(64,35,31,.5);}
  .hero-cta.is-clicked{background:var(--o-coral);}
  .hero-cta svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  @media (max-width:480px){.hero-cta{font-size:0.72rem;padding:7px 14px;}}
  /* a small hint centered above the dock (the dock itself sits fixed at
     the bottom-center, so this parks just above it rather than behind
     it), nudging people to scroll on down — fades in after the intro,
     then just gently bobs */
  .hero-scroll-hint{
    position:absolute;left:50%;bottom:118px;
    transform:translateX(-50%);
    z-index:5;
    display:flex;flex-direction:column;align-items:center;gap:4px;
    font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:0.66rem;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--o-chocolate);text-decoration:none;
    opacity:0;
    animation:heroScrollHintIn .8s ease 1.6s forwards;
  }
  .hero-scroll-hint:hover{opacity:1 !important;}
  .hero-scroll-hint svg{
    width:18px;height:18px;
    stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    animation:heroScrollBounce 1.6s ease-in-out infinite;
  }
  @keyframes heroScrollHintIn{
    0%{opacity:0;transform:translateX(-50%) translateY(8px);}
    100%{opacity:.7;transform:translateX(-50%) translateY(0);}
  }
  @keyframes heroScrollBounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(6px);}
  }
  @media (max-width:480px){.hero-scroll-hint{bottom:104px;}}
  @media (prefers-reduced-motion: reduce){
    .hero-scroll-hint{animation:none;opacity:.7;}
    .hero-scroll-hint svg{animation:none;}
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:0.78rem;font-weight:600;letter-spacing:.08em;
    padding:7px 14px;border-radius:999px;border:1px solid var(--o-line);
    background:color-mix(in srgb, var(--o-paper-raised) 55%, transparent);
    -webkit-backdrop-filter:blur(10px) saturate(180%);
    backdrop-filter:blur(10px) saturate(180%);
    margin-bottom:22px;
  }
  .eyebrow .status{width:7px;height:7px;border-radius:50%;background:#39C97A;box-shadow:0 0 0 3px rgba(57,201,122,.25);}

  /* ---------- Hero logo: ink-bleed wordmark ---------- */
  .hero-logo{width:100%;display:flex;justify-content:center;padding:0 24px;}

  /* ---------- Role stamp: "Senior Content Producer" in a bold rounded
     display face, letters gooey enough to bleed into each other, with a
     mottled ink-on-rubber texture worked into the fill — like it was
     pressed on with a stamp, not printed. ---------- */
  /* Masking-tape strip, second pass — plainer and less "patterned" than
     the first attempt: one soft diagonal crease instead of two crossing
     ones, gentler torn ends (fewer, softer jumps), and real paper-fibre
     texture via achtergrond-textuur.png (multiplied on, ::after below)
     instead of hand-drawn dot grain — closer to an actual photographed
     strip of tape than a printed pattern. */
  .hero-role-stamp{
    position:relative;z-index:2;
    display:inline-block;
    margin:-8px 0 0;
    padding:9px 26px 12px;
    max-width:92%;
  }
  /* a quick freehand swipe of pink highlighter behind the words: two
     uneven passes that overlap (darker where they cross), slightly
     crooked and overshooting the text like it was done in one go */
  .hero-role-stamp::before{
    content:"";position:absolute;
    left:-2%;right:-4%;top:6%;bottom:0;
    background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'><g fill='none' stroke='%23FFD0E4' stroke-linecap='round' stroke-linejoin='round'><path d='M10 31 C 80 25, 170 33, 250 27 S 360 30, 392 25' stroke-width='34' stroke-opacity='.62'/><path d='M22 36 C 120 41, 230 31, 300 37 S 370 34, 384 39' stroke-width='20' stroke-opacity='.38'/><path d='M388 16 L 394 42' stroke-width='9' stroke-opacity='.4'/></g></svg>") center/100% 100% no-repeat;
    mix-blend-mode:multiply;
    transform:rotate(-2deg);
    pointer-events:none;
    z-index:-1;
  }
  .hrs-text{
    position:relative;
    display:block;
    font-family:"Sora",sans-serif;
    font-weight:800;
    font-size:clamp(1rem,3.1vw,1.6rem);
    color:var(--o-chocolate);
    letter-spacing:-0.045em;
    line-height:1;
    white-space:nowrap;
    filter:url(#roleInkGoo);
  }
  .hrs-tex{
    position:absolute;inset:0;
    color:transparent;
    background-image:url('../img/achtergrond-textuur.png');
    background-size:16px 16px;
    -webkit-background-clip:text;background-clip:text;
    mix-blend-mode:multiply;
    opacity:1;
    pointer-events:none;
  }
  @media (max-width:480px){
    .hrs-text{font-size:1.4rem;white-space:normal;text-align:center;}
    .hero-role-stamp{padding:7px 14px 10px;margin-top:-6px;}
  }
  .hero-logo-wrap{
    position:relative;
    width:min(46vw, 480px);
    filter:url(#heroInkGoo);
    will-change:filter, transform;
  }
  .hero-logo-svg{width:100%;height:auto;display:block;overflow:visible;}
  .hero-logo-svg .ink-letter{
    fill:var(--ink-color, var(--o-chocolate));
    stroke:var(--ink-color, var(--o-chocolate));
    stroke-width:var(--ink-stroke,0);
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    paint-order:stroke fill;
  }
  .hero-logo-grain{
    position:absolute;
    inset:-60% -20%;
    filter:url(#heroGrainNoise);
    mix-blend-mode:overlay;
    opacity:0;
    pointer-events:none;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-logo-wrap{filter:none !important;transform:none !important;}
    .hero-logo-grain{display:none !important;}
  }
  @media (max-width:640px){
    /* at small render sizes the goo filter's edge threshold merges whole
       letters into a blob instead of a subtle ink-bleed — the wordmark
       stays crisp without it, so skip it on phones. Sized up too, since
       46vw reads small once the hero's centered content is this narrow */
    .hero-logo-wrap{filter:none !important;width:min(74vw, 420px);}
    .hero-logo-grain{display:none !important;}
  }

  /* shared "notification" popup — one instance, reused by every card,
     styled like a phone/app alert banner rather than a plain label */
  .hero-notify{
    position:fixed;
    top:0;left:0;
    z-index:90;
    display:flex;align-items:flex-start;gap:11px;
    width:min(272px, calc(100vw - 32px));
    padding:12px 14px;
    border-radius:16px;
    background:color-mix(in srgb, var(--o-paper-raised) 78%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(190%);
    backdrop-filter:blur(20px) saturate(190%);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:0 20px 40px -18px rgba(64,35,31,.55), 0 2px 8px rgba(64,35,31,.12);
    opacity:0;
    transform:translate(var(--nx,50vw), var(--ny,24px)) scale(.9);
    transform-origin:0% 0%;
    transition:opacity .2s ease, transform .28s cubic-bezier(.22,.9,.3,1.2);
    pointer-events:none;
  }
  .hero-notify.is-visible{opacity:1;transform:translate(var(--nx,50vw), var(--ny,24px)) scale(1);}
  .hero-notify-icon{
    position:relative;
    flex-shrink:0;width:34px;height:34px;border-radius:50%;
    background:var(--o-coral);color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 14px -6px rgba(64,35,31,.5);
    overflow:hidden;
  }
  .hero-notify-icon img{width:100%;height:100%;object-fit:cover;display:block;}
  .hero-notify-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  /* the brand mark (loading spinner / dock icon) reused as a small avatar —
     a solid-filled shape, not a stroked line icon, so it overrides the
     generic icon rule above */
  svg.brand-mark{width:19px;height:19px;fill:var(--o-coral-soft);stroke:none;}
  .brand-mark-c{
    position:absolute;right:1px;bottom:1px;
    width:7px;height:7px;border-radius:50%;
    background:var(--o-coral-soft);color:var(--o-coral);
    display:flex;align-items:center;justify-content:center;
    font-size:5px;line-height:1;font-weight:700;
    pointer-events:none;
  }
  .hero-notify-icon::after{
    content:'';position:absolute;right:-2px;bottom:-2px;
    width:13px;height:13px;border-radius:50%;
    background:var(--o-chocolate);
    border:2px solid color-mix(in srgb, var(--o-paper-raised) 92%, transparent);
  }
  .hero-notify-body{min-width:0;flex:1;}
  .hero-notify-top{display:flex;align-items:center;gap:6px;margin-bottom:3px;}
  .hero-notify-app{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:0.7rem;letter-spacing:.02em;color:var(--o-chocolate);}
  .hero-notify-time{font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:0.66rem;color:var(--o-ink-faint);}
  .hero-notify-text{font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:0.79rem;line-height:1.32;color:var(--o-ink);}
  .hero-notify-text b{color:var(--o-chocolate);}
  @media (max-width:480px){.hero-notify{padding:11px 13px;gap:9px;width:min(250px, calc(100vw - 28px));}}

  /* the "do not press" button — bottom-right of the hero, styled like a
     real arcade/easy-button: a polished chrome ring with a glossy red
     dome on top. A plain glass tooltip (no avatar) talks you out of it
     on hover. z-index sits above .hero-inner (60) so it — and its
     tooltip — never end up behind a carousel card. */
  .hero-danger-btn{
    position:absolute;right:20px;bottom:20px;
    width:64px;height:56px;
    background:none;border:none;padding:0;cursor:pointer;
    z-index:70;
    transition:transform .1s ease;
  }
  .hero-danger-btn-base{
    position:absolute;inset:0;
    border-radius:50%;
    background:linear-gradient(175deg,
      #fbfbfc 0%, #d6d6da 10%, #929298 26%, #5f5f64 38%,
      #c9c9cd 52%, #86868c 66%, #e6e6e9 80%, #97979d 100%);
    box-shadow:
      0 14px 22px -8px rgba(64,35,31,.5),
      inset 0 -4px 5px rgba(0,0,0,.45),
      inset 0 2px 3px rgba(255,255,255,.6);
  }
  .hero-danger-btn-dome{
    position:absolute;left:50%;top:4%;
    transform:translateX(-50%);
    width:70%;height:66%;
    border-radius:50%;
    background:radial-gradient(circle at 34% 24%, #ff7268 0%, #e8393f 42%, #9c1919 100%);
    box-shadow:
      0 5px 9px -3px rgba(0,0,0,.5),
      inset 0 -7px 11px rgba(0,0,0,.3),
      0 0 0 3px rgba(0,0,0,.18);
    overflow:hidden;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .hero-danger-btn-dome::after{
    content:"";position:absolute;
    width:160%;height:42%;left:-30%;top:6%;
    background:rgba(255,255,255,.55);
    filter:blur(2.5px);
    transform:rotate(-20deg);
    border-radius:50%;
  }
  .hero-danger-btn:hover .hero-danger-btn-dome{filter:brightness(1.06);}
  .hero-danger-btn:active .hero-danger-btn-dome{
    transform:translateX(-50%) translateY(2px);
    box-shadow:0 2px 5px -2px rgba(0,0,0,.5), inset 0 -3px 7px rgba(0,0,0,.4);
  }
  .hero-danger-tooltip{
    position:absolute;right:0;bottom:calc(100% + 12px);
    width:max-content;max-width:220px;
    padding:10px 14px;border-radius:14px;
    background:color-mix(in srgb, var(--o-paper-raised) 78%, transparent);
    border:1px solid rgba(255,255,255,.6);
    -webkit-backdrop-filter:blur(18px) saturate(190%);
    backdrop-filter:blur(18px) saturate(190%);
    box-shadow:0 14px 26px -12px rgba(64,35,31,.4);
    font-family:"Plus Jakarta Sans",sans-serif;font-size:0.8rem;font-weight:600;
    color:var(--o-chocolate);text-align:left;line-height:1.4;
    opacity:0;transform:translateY(6px);
    transition:opacity .2s ease, transform .2s ease;
    pointer-events:none;
  }
  .hero-danger-btn:hover .hero-danger-tooltip{opacity:1;transform:translateY(0);}
  @media (max-width:480px){
    .hero-danger-btn{right:14px;bottom:14px;width:50px;height:46px;}
    .hero-danger-tooltip{max-width:180px;font-size:0.76rem;}
  }



  /* small glass pill above a section title — same look as the dock's
     menu items, so it reads as "you are here" */
  .section-pill{
    display:inline-flex;align-items:center;gap:6px;
    margin-bottom:12px;padding:6px 13px;
    border-radius:999px;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:0.66rem;font-weight:700;letter-spacing:.01em;
    color:var(--o-chocolate);
    background:linear-gradient(135deg,
      color-mix(in srgb, var(--o-paper-raised) 70%, transparent) 0%,
      color-mix(in srgb, var(--o-paper-raised) 32%, transparent) 100%);
    border:1px solid rgba(255,255,255,0.55);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
    box-shadow:0 8px 20px -10px rgba(var(--o-shadow-color),0.35), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .section-pill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
  .about-copy .section-pill{display:flex;width:max-content;}

  /* ---------- Section shell ---------- */
  .hero,.showreel-section,.folders-section{padding:88px 0;}
  .section-head{max-width:640px;margin-bottom:52px;}
  .section-head .eyebrow{margin-bottom:18px;}
  .section-head h2{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;}
  .section-head .sub{margin-top:16px;color:var(--o-ink-soft);font-size:0.92rem;max-width:52ch;}
  .folders-section .section-head .sub{max-width:62ch;text-align:left;}
  .folders-section .section-head .sub + .sub{margin-top:14px;}
  .folders-section .section-head{display:flex;flex-direction:column;align-items:flex-start;}
  .folders-section .sub a{color:#840121;text-decoration:none;font-weight:600;}
  .folders-section .sub a:hover{color:var(--o-chocolate);}

  /* ---------- Folders: 3 glass folders, cards to be filled in later ---------- */
  /* extra headroom up top: the diagonal carousel's tail now runs further
     down into this section, so "Allround?!" and the rest of the copy
     need to sit lower to stay clear of it */
  .folders-section{background:#FDCFE1;position:relative;overflow:hidden;padding-top:clamp(64px, 9vw, 112px);}
  .folders-section .section-head{position:relative;z-index:1;max-width:640px;margin-left:auto;margin-right:auto;text-align:center;}
  .folders-section .section-head .eyebrow{background:rgba(64,35,31,.08);border-color:rgba(64,35,31,.16);}
  .folders-section .wrap{position:relative;z-index:1;}
  .folders-title-stamp{
    display:inline-block;
    font-size:clamp(1.5rem,4.6vw,2.4rem);
    margin-bottom:10px;
  }
  /* client logos, drifting faintly in the same brown as the wordmark —
     a quiet nod to who this work has been for */
  .folders-logo-row{
    position:relative;z-index:1;
    display:flex;flex-direction:column;align-items:center;
    margin-top:52px;
    padding-top:34px;
    border-top:1px solid rgba(64,35,31,.16);
  }
  .folders-logo-caption{
    text-align:center;
    font-size:0.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:rgba(64,35,31,.55);
    margin-bottom:24px;
  }
  /* a loose scattered cloud instead of tidy rows — logos wrap freely and
     each one drifts on its own gentle float, so the whole cluster feels
     a bit random and alive rather than lined up */
  .folders-logo-grid{
    display:flex;flex-direction:column;align-items:center;
    width:100%;
    gap:16px;
    max-width:1180px;margin:0 auto;
    opacity:0;transition:opacity .35s ease;
  }
  .folders-logo-grid.is-balanced{opacity:1;}
  /* one balanced row, built up in JS so every line ends up roughly the
     same length instead of flex-wrap's default ragged last line */
  .folders-logo-line{
    display:flex;flex-wrap:nowrap;
    align-items:center;justify-content:center;
    column-gap:18px;
  }
  .folders-logo-item{
    display:flex;align-items:center;justify-content:center;
    height:26px;flex-shrink:0;
    /* a proper duotone-style filter — keeps each logo's own shading and
       contrast instead of flattening it to one solid brown silhouette,
       so the marks stay legible while still reading as "ours" */
    filter:grayscale(1) sepia(1) hue-rotate(-18deg) saturate(160%) brightness(62%) contrast(105%);
    opacity:.7;
    overflow:hidden;
    --rot:0deg;--drift:8px;--dur:7s;--delay:0s;
    transform:rotate(var(--rot));
    animation:folderLogoFloat var(--dur) ease-in-out infinite;
    animation-delay:var(--delay);
  }
  @keyframes folderLogoFloat{
    0%,100%{transform:translateY(0) rotate(var(--rot));}
    50%{transform:translateY(calc(-1 * var(--drift))) rotate(var(--rot));}
  }
  @media (prefers-reduced-motion: reduce){
    .folders-logo-item{animation:none;transform:none;}
  }
  /* every mark sits in the same tall box as DPG Media, object-fit
     doing the work of matching their visual weight */
  .folders-logo-item img{height:100%;width:auto;max-width:112px;object-fit:contain;display:block;}
  /* square/avatar-style assets keep the same box, no rounding */
  .folders-logo-item.is-square{height:34px;width:34px;}
  .folders-logo-item.is-square img{width:34px;height:34px;object-fit:cover;}
  /* a few marks that read too big next to the rest, sized down on request */
  .folders-logo-item.is-small{height:18px;}
  .folders-logo-item.is-small img{max-width:60px;}
  /* a few marks that read too small next to the rest, sized up on request */
  .folders-logo-item.is-big{height:40px;}
  .folders-logo-item.is-big img{max-width:124px;}
  /* de Mol, Ongezien — sized up again on request, bigger than the rest of the "big" tier */
  .folders-logo-item.is-xl{height:56px;}
  .folders-logo-item.is-xl img{max-width:172px;}


  .folders-grid{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1fr;gap:56px 32px;
    max-width:920px;margin:0 auto;
  }
  @media (min-width:720px){.folders-grid{grid-template-columns:repeat(3,1fr);gap:28px;}}
  .folder-card{display:flex;flex-direction:column;align-items:center;text-align:center;}
  .folder-stack{position:relative;width:100%;max-width:210px;aspect-ratio:3/4;}
  /* the folder's back panel — sits behind the whole photo stack, a touch
     wider than it, so a sliver of "paper" shows past every photo's edge.
     That's the depth cue: front tab in front, photos in the middle,
     this peeking out behind everything, like they're genuinely tucked
     inside a folder rather than just stacked on top of one. */
  .folder-back{
    position:absolute;top:5%;left:7%;right:7%;bottom:4%;border-radius:16px;
    background:linear-gradient(155deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.14) 100%);
    border:1px solid rgba(255,255,255,.4);
    box-shadow:0 20px 38px -22px rgba(64,35,31,.4);
    transform:rotate(-2.5deg);
  }
  /* smaller than the stack itself (not edge-to-edge) so each photo keeps
     its own visible frame in the fan instead of the three mostly hiding
     behind one another */
  /* narrower than the stack, starting almost at its very top, so each
     photo reads as its own card and at least half of it clears the glass
     tab below — the loose fan itself is the "come out of the folder" look */
  .folder-ghost{
    position:absolute;top:2%;left:16%;right:16%;height:80%;
    cursor:pointer;
  }
  /* the visible photo card lives inside the ghost: the ghost itself never
     moves on hover, so it stays put as a steady hit area under the mouse —
     otherwise a lifted photo slides out from under the pointer, loses its
     hover, drops back in, gets hovered again… and flickers in and out */
  .folder-ghost-card{
    position:absolute;inset:0;border-radius:14px;
    background:rgba(255,255,255,.32);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 14px 30px -18px rgba(64,35,31,.3);
    overflow:hidden;
    transition:transform .5s cubic-bezier(.22,.85,.28,1), box-shadow .5s ease;
    pointer-events:none;
  }
  .folder-ghost-card img{width:100%;height:100%;object-fit:cover;display:block;}
  .folder-ghost-card::before{
    content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
    background:linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 60%);
    mix-blend-mode:overlay;
  }
  .folder-ghost.g1{transform:rotate(-19deg) translate(-36px,-6px);}
  .folder-ghost.g2{transform:rotate(18deg) translate(36px,-4px);}
  .folder-ghost.g3{transform:rotate(-6deg) translate(-8px,-8px);}
  /* only used by folders with a 4th photo — slots in front of g3, between
     it and g2 */
  .folder-ghost.g4{transform:rotate(10deg) translate(18px,-10px);}
  /* hover or click lifts that one photo a little out of the folder and
     enlarges it right where it sits in the fan — same order, same tilt —
     then eases back down the moment the mouse leaves or another photo
     takes its place. Only one ghost per folder carries .is-pinned at a
     time (enforced in script.js). */
  .folder-ghost:hover,
  .folder-ghost.is-pinned{z-index:5;}
  .folder-ghost:hover .folder-ghost-card,
  .folder-ghost.is-pinned .folder-ghost-card{
    transform:translate(0,-14%) scale(1.15);
    box-shadow:0 30px 50px -20px rgba(64,35,31,.55);
  }
  /* the photo cards never catch the pointer (they're moving targets —
     a card sliding under the mouse mid-animation is what made them
     flicker). Hover is decided only by the ghosts, which never move: their
     resting spot, plus — once lifted — a zone that appears instantly at
     the lifted photo's final spot, so you can keep looking at it */
  .folder-ghost::after{
    content:"";position:absolute;inset:0;border-radius:14px;display:none;
    transform:translate(0,-14%) scale(1.15);
  }
  .folder-ghost:hover::after,
  .folder-ghost.is-pinned::after{display:block;}
  @media (prefers-reduced-motion: reduce){.folder-ghost-card{transition:none;}}
  /* the glass folder tab itself: real backdrop-filter blur, so whatever
     of the photo stack sits behind it reads soft/frosted through the
     glass — only the parts of the photos rising clear above this panel's
     own top edge stay sharp, exactly like light through frosted glass.
     A light, near-white tint (closer to a real frosted-glass folder) —
     dark ink text on top keeps it legible regardless of what colour the
     blurred photo underneath happens to be. */
  .folder-front{
    position:absolute;left:0;right:0;bottom:0;
    z-index:6; /* stays in front of a photo lifted out on hover/tap */
    min-height:50%;
    border-radius:0 16px 18px 18px;
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(11px) saturate(160%);
    backdrop-filter:blur(11px) saturate(160%);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:0 18px 36px -18px rgba(64,35,31,.45), inset 0 1px 0 rgba(255,255,255,.5);
    padding:14px 15px 14px;
    display:flex;flex-direction:column;gap:9px;
  }
  /* the folder's tab: same glass, flush with the panel's left edge and
     squared top-left corner so it reads as one continuous silhouette
     rather than two stacked shapes */
  .folder-front::before{
    content:"";position:absolute;top:-20px;left:0;width:58%;height:28px;
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(11px) saturate(160%);
    backdrop-filter:blur(11px) saturate(160%);
    border:1px solid rgba(255,255,255,.65);border-bottom:none;
    border-radius:14px 10px 0 0;
    /* the shoulder: a soft diagonal instead of a hard right angle where the
       tab meets the panel, so the notch reads as one cut shape, not two
       rectangles glued together */
    clip-path:polygon(0 0, 84% 0, 100% 100%, 0 100%);
    box-shadow:0 10px 18px -16px rgba(64,35,31,.4);
  }
  .folder-front::after{
    content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
    background:linear-gradient(120deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,.24) 100%);
    mix-blend-mode:overlay;
    pointer-events:none;
  }
  .folder-icon{
    position:relative;z-index:1;
    width:28px;height:28px;border-radius:50%;flex-shrink:0;align-self:flex-end;
    background:var(--o-coral);color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 14px -6px rgba(0,0,0,.5);
  }
  .folder-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .folder-desc{
    position:relative;z-index:1;margin:auto 0;
    font-size:0.7rem;line-height:1.42;text-align:center;
    color:var(--o-chocolate);
  }
  /* title, stamped in the same ink-bleed display face as "Senior Content
     Producer" — reuses that hero filter (#roleInkGoo lives in the hero's
     own inline SVG defs) and the same grain-texture overlay trick */
  .folder-label{
    position:relative;display:inline-block;
    margin-top:22px;
    font-family:"Sora",sans-serif;font-weight:800;font-size:1.38rem;
    letter-spacing:-0.02em;color:var(--o-chocolate);text-transform:lowercase;
    filter:url(#roleInkGoo);
  }
  .folder-label-tex{
    position:absolute;inset:0;
    color:transparent;
    background-image:url('../img/achtergrond-textuur.png');
    background-size:16px 16px;
    -webkit-background-clip:text;background-clip:text;
    mix-blend-mode:multiply;
    opacity:1;
    pointer-events:none;
  }

  /* ---------- Services ---------- */
  .services-grid{
    display:grid;grid-template-columns:1fr;gap:18px;
  }
  @media (min-width:640px){.services-grid{grid-template-columns:1fr 1fr;}}
  @media (min-width:1024px){.services-grid{grid-template-columns:repeat(3,1fr);}}
  .service-card{
    background:var(--o-paper-raised);
    border:1px solid var(--o-line);
    border-radius:22px;
    padding:26px 24px 24px;
    display:flex;flex-direction:column;gap:14px;
    position:relative;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .service-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -14px rgba(var(--o-shadow-color),.28);}
  .service-card .icon{
    width:46px;height:46px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background:var(--sc,var(--o-coral-soft));
  }
  .service-card .icon svg{width:22px;height:22px;stroke:var(--o-ink);}
  .service-card h3{font-size:1.08rem;font-weight:700;}
  .service-card p{color:var(--o-ink-soft);font-size:0.92rem;}
  .service-card .fmt{
    margin-top:auto;padding-top:10px;
    font-size:0.68rem;letter-spacing:.05em;color:var(--o-ink-faint);
    border-top:1px dashed var(--o-line);
  }
  .service-card:nth-child(1) .icon{--sc:var(--o-coral-soft);}
  .service-card:nth-child(2) .icon{--sc:var(--o-lime-soft);}
  .service-card:nth-child(3) .icon{--sc:var(--o-pink-soft);}
  .service-card:nth-child(4) .icon{--sc:var(--o-blue-soft);}
  .service-card:nth-child(5) .icon{--sc:var(--o-chocolate-soft);}


  /* ---------- Page load fade ---------- */
  .page-fade{
    position:fixed;inset:0;z-index:9999;
    background:#E83940;
    pointer-events:none;
    opacity:1;
    display:flex;align-items:center;justify-content:center;
    transition:opacity .45s ease;
  }
  .page-fade.is-hidden{opacity:0;}
  .page-fade-logo{width:132px;height:132px;}
  .page-fade-logo svg{width:100%;height:100%;display:block;}
  .page-fade-logo .loadmark-path{fill:#FFCFE1;}
  .page-fade-logo-spin{
    animation:pageFadeSpin 850ms cubic-bezier(.22,.61,.36,1) 1 both;
  }
  @keyframes pageFadeSpin{
    0%{transform:rotate(0deg) scale(0.7);opacity:0;}
    14%{opacity:1;}
    100%{transform:rotate(360deg) scale(1);opacity:1;}
  }
  @media (prefers-reduced-motion: reduce){
    .page-fade-logo-spin{animation:none;}
  }



  /* ---------- Dock (frosted glass) ---------- */
  .dock{
    position:fixed;left:50%;bottom:24px;
    transform:translateX(-50%);
    z-index:50;
    display:flex;align-items:stretch;gap:2px;
    padding:12px 10px;
    border-radius:30px;
    background:linear-gradient(135deg,
      color-mix(in srgb, var(--o-paper-raised) 70%, transparent) 0%,
      color-mix(in srgb, var(--o-paper-raised) 32%, transparent) 100%);
    border:1px solid rgba(255,255,255,0.55);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
    box-shadow:0 18px 44px rgba(var(--o-shadow-color),0.22), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .dock-item{
    position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;
    padding:9px 17px;
    border-radius:18px;
    color:var(--o-chocolate);
    text-decoration:none;
    transition:color .18s ease, background .18s ease, transform .18s ease;
  }
  .dock-item svg{width:21px;height:21px;stroke-width:1.7;}
  .dock-item-logo{padding:8px 16px;}
  .dock-item-logo svg{width:27px;height:27px;}
  .dock-item-logo .dock-logo-path{fill:currentColor;}
  .dock-label{
    position:static;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:0.66rem;font-weight:700;letter-spacing:.01em;
    white-space:nowrap;
    background:none;color:inherit;
    padding:0;opacity:1;pointer-events:auto;
    transform:none;transition:none;
  }
  .dock-item:hover,.dock-item:focus-visible{
    color:var(--o-chocolate);
    background:color-mix(in srgb, var(--o-paper-raised) 50%, transparent);
    transform:translateY(-3px);
  }
  .dock-item.is-active{
    color:var(--o-coral);
    background:color-mix(in srgb, var(--o-coral-soft) 55%, transparent);
  }
  @media (prefers-reduced-motion: reduce){
    .dock-item{transition:none;}
    .dock-item:hover,.dock-item:focus-visible{transform:none;}
  }
  @media (max-width:480px){
    .dock{gap:0;padding:10px 6px;border-radius:26px;}
    .dock-item{padding:7px 12px;gap:4px;}
    .dock-item svg{width:19px;height:19px;}
    .dock-item-logo svg{width:24px;height:24px;}
    .dock-label{font-size:0.6rem;}
  }



  /* ---------- Contact: just the paper, cropped by the fold ---------- */
  #contact{padding-bottom:0;background:var(--o-chocolate);}
  .contact-section{
    background:transparent;color:var(--o-ink);
    padding:72px 24px 0;
    position:relative;
    display:flex;justify-content:center;
  }
  @media (min-width:1024px){.contact-section{padding:96px 48px 0;}}
  @media (min-width:900px){
    /* tall enough that the crew list, koffiekoek and send button all sit
       clear of the blur — only the fictional rows below trail off */
    .contact-section{height:1080px;overflow:hidden;}
  }

  /* the site trails off into an unreadable blur rather than a hard stop */
  .contact-section::after{
    content:"";
    position:absolute;inset:auto 0 0 0;
    height:280px;
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
    -webkit-mask-image:linear-gradient(to bottom, transparent, black 75%);
    mask-image:linear-gradient(to bottom, transparent, black 75%);
    pointer-events:none;
    z-index:5;
  }

  /* the callsheet paper itself: unframed, taped down, running off far past the fold */
  .callsheet{
    position:relative;z-index:1;width:100%;max-width:860px;flex-shrink:0;
    background:#F7F5EC;
    border-radius:2px;
    box-shadow:0 34px 60px -22px rgba(64,35,31,.35);
    transform:rotate(-0.6deg);
    padding:36px clamp(22px,5vw,48px) 320px clamp(22px,5vw,48px);
    font-family:"Plus Jakarta Sans",sans-serif;
  }
  .callsheet::before, .callsheet::after{
    content:"";position:absolute;top:10px;width:11px;height:11px;
    background:
      linear-gradient(rgba(64,35,31,.4), rgba(64,35,31,.4)) center / 100% 1.5px no-repeat,
      linear-gradient(90deg, rgba(64,35,31,.4), rgba(64,35,31,.4)) center / 1.5px 100% no-repeat;
    opacity:.7;
  }
  .callsheet::before{left:10px;}
  .callsheet::after{right:10px;}
  .callsheet-masthead{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    font-family:"JetBrains Mono",monospace;
    font-size:0.68rem;font-weight:600;letter-spacing:.08em;color:var(--o-ink-faint);
    text-transform:uppercase;padding-bottom:14px;
  }
  /* the plain logo PNG, cleanly placed — no stamp/ink treatment */
  .callsheet-table{position:relative;}
  .cs-stamp{
    position:absolute;top:-40px;right:14px;
    width:150px;aspect-ratio:982/973;
    opacity:1;
    pointer-events:none;
    z-index:3;
  }
  /* the PNG is a tall 1080x1920 canvas with the logo at x 58–1039,
     y 396–1368 — size and shift it so exactly that box fills .cs-stamp */
  .cs-stamp-img{
    position:absolute;
    width:109.98%;max-width:none;height:auto;
    left:-5.91%;top:-40.33%;
    display:block;
  }
  @media (max-width:560px){
    .cs-stamp{width:108px;top:-30px;right:6px;}
  }
  .callsheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:2.5px solid var(--o-ink);margin-bottom:4px;}
  /* just a passthrough wrapper on desktop — on small phones the stamp
     (normally floating over the contact info further down) gets moved
     in here by JS, so it ends up sitting right beside "Contact" */
  .callsheet-title-row{display:flex;align-items:center;gap:10px;min-width:0;}
  .callsheet-title{
    font-family:"Sora",sans-serif;font-weight:800;
    font-size:clamp(1.5rem,4.6vw,2.4rem);letter-spacing:-0.01em;
  }
  .callsheet-logo{width:78px;flex-shrink:0;margin-top:4px;}
  .callsheet-logo-svg{width:100%;height:auto;display:block;}
  .callsheet-logo-svg .static-letter{fill:var(--o-chocolate);}

  /* the real point of the page: contact info, centered right under the title —
     each of the 3 items gets its own separate swipe of pink highlighter,
     rather than one single bar drawn under all three at once */
  .callsheet-contact-main{
    position:relative;
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:8px 28px;
    padding:26px 12px 30px;
    text-align:center;
    border-bottom:2.5px solid var(--o-ink);
    margin-bottom:22px;
  }
  .callsheet-contact-main .cs-contact{
    position:relative;z-index:1;
    border-bottom:none;padding:4px 6px;font-size:1.05rem;
    font-weight:700;
  }
  .callsheet-contact-main .cs-contact::before{
    content:"";
    position:absolute;
    inset:8% -6%;
    background:var(--o-coral-soft);
    opacity:.7;
    mix-blend-mode:multiply;
    border-radius:4px 10px 6px 12px / 12px 6px 14px 8px;
    z-index:-1;
  }
  .callsheet-contact-main .cs-contact:nth-child(1)::before{transform:rotate(-1.4deg);}
  .callsheet-contact-main .cs-contact:nth-child(2)::before{transform:rotate(1.1deg);}
  .callsheet-contact-main .cs-contact:nth-child(3)::before{transform:rotate(-0.7deg);}

  /* rows sit inside one bordered table, like a real production grid */
  .callsheet-table{border:1.5px solid var(--o-ink);border-top:none;}
  .callsheet-row{position:relative;display:grid;grid-template-columns:1fr;}
  .callsheet-row.two-col,
  .callsheet-row.cs-row-compact{grid-template-columns:1fr 1fr;}
  .callsheet-row + .callsheet-row{border-top:1px solid rgba(64,35,31,.3);}
  .callsheet-field{padding:14px 18px;}
  .callsheet-row.two-col .callsheet-field:first-child,
  .callsheet-row.cs-row-compact .callsheet-field:first-child{border-right:1px solid rgba(64,35,31,.3);}
  .cf-label{display:block;font-size:0.7rem;font-weight:700;letter-spacing:.06em;color:var(--o-ink-soft);margin-bottom:6px;}
  .cf-value{display:block;font-size:0.98rem;color:var(--o-ink-faint);line-height:1.5;}
  .cf-value.is-live::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#39C97A;margin-left:8px;box-shadow:0 0 0 3px rgba(57,201,122,.25);vertical-align:middle;}
  /* two text runs per value — the short one only shows on small phones,
     so the date/weather fields stay compact enough to keep sharing a row
     with time/location instead of forcing everything to stack */
  .cs-val-short{display:none;}

  /* classic contact points: instagram / phone / email, assembled by JS at runtime */
  .cs-contacts{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
  .cs-contact{
    display:inline-flex;align-items:center;gap:12px;
    font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:0.94rem;color:var(--o-ink);
    text-decoration:none;padding:10px 2px;
    border-bottom:1px solid rgba(64,35,31,.2);
    transition:color .15s ease,border-color .15s ease;
  }
  .cs-contact:last-child{border-bottom:none;}
  .cs-contact:hover{color:var(--o-coral);border-color:var(--o-coral);}
  .cs-contact-ico{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .cs-contact-text{word-break:break-word;}

  /* call list: a small fictional cast & crew grid */
  .cs-calllist{margin-top:10px;border-top:1px solid rgba(64,35,31,.3);}
  .cs-cl-row{
    display:grid;grid-template-columns:1.3fr 1fr 0.7fr;gap:10px;
    padding:8px 0;border-bottom:1px solid rgba(64,35,31,.2);
    font-size:0.86rem;color:var(--o-ink-faint);align-items:baseline;
  }
  .cs-cl-row.cs-cl-head{
    font-size:0.66rem;font-weight:700;letter-spacing:.06em;color:var(--o-ink-faint);
    text-transform:uppercase;border-bottom:1px solid rgba(64,35,31,.3);
  }
  .cs-cl-name{font-weight:600;}
  .cs-cl-time{text-align:right;color:var(--o-ink-faint);}

  /* dagindeling: a simple time + activity schedule */
  .cs-schedule{margin-top:10px;border-top:1px solid rgba(64,35,31,.3);}
  .cs-sc-row{
    display:grid;grid-template-columns:0.5fr 2fr;gap:12px;
    padding:8px 0;border-bottom:1px solid rgba(64,35,31,.2);
    font-size:0.86rem;color:var(--o-ink-faint);
  }
  .cs-sc-time{font-weight:600;color:var(--o-ink-faint);}

  /* crew list: the real fill-in fields, typed onto the sheet like a form —
     left blank, swiped with a highlighter so they stand out from the
     purely informational (greyed-out) rows around them */
  .cs-crew-head{padding-bottom:4px;background:rgba(64,35,31,.05);}
  .cs-crew-head .cf-label{margin-bottom:0;color:var(--o-ink);}
  .cs-input{
    display:block;width:100%;
    font-family:"Plus Jakarta Sans",sans-serif;font-size:0.92rem;color:var(--o-ink);
    /* swiped with the same pink highlighter as the contact info up top,
       so the fields you're meant to fill in jump off the sheet */
    background:rgba(255,208,228,.55);
    border:none;border-bottom:1.5px solid transparent;
    border-radius:4px 10px 6px 12px / 12px 6px 14px 8px;
    padding:8px 12px;outline:none;
    transition:background-color .15s ease, border-color .15s ease;
  }
  .cs-input::placeholder{color:rgba(64,35,31,.5);font-style:italic;}
  .cs-input:hover{background:rgba(255,208,228,.7);}
  .cs-input:focus{background:rgba(255,208,228,.85);border-bottom-color:var(--o-coral);}
  .cs-input.is-invalid{border-bottom:1.5px solid var(--o-coral);}
  .cs-textarea{resize:vertical;min-height:4.5em;line-height:1.5;}
  /* send: a plain inked button at the foot of the fillable part */
  .cs-send-field{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;}
  .cs-send{
    display:inline-flex;align-items:center;gap:10px;
    font-family:"Plus Jakarta Sans",sans-serif;font-size:0.86rem;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;
    color:#F7F5EC;background:var(--o-chocolate);
    border:none;border-radius:999px;padding:11px 20px;cursor:pointer;
    transition:transform .15s ease, background-color .15s ease;
  }
  .cs-send:hover{transform:translateY(-2px);background:var(--o-coral);}
  .cs-send:disabled{opacity:.6;cursor:default;transform:none;background:var(--o-chocolate);}
  .cs-send svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .cs-send-note{font-size:0.8rem;color:var(--o-ink-soft);}

  /* catering: tick-box list */
  .cs-checks{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:10px;}
  .cs-check{display:inline-flex;align-items:center;gap:8px;font-size:0.86rem;color:var(--o-ink);cursor:pointer;user-select:none;}
  .cs-check input{position:absolute;opacity:0;width:0;height:0;}
  .cs-check .box{
    width:16px;height:16px;flex-shrink:0;border:1.5px solid var(--o-ink);
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;
  }
  .cs-check .box::after{
    content:"";width:9px;height:9px;background:var(--o-coral);
    transform:scale(0);transition:transform .12s ease;
  }
  .cs-check input:checked + .box::after{transform:scale(1);}
  .cs-check input:focus-visible + .box{outline:2px solid var(--o-coral);outline-offset:2px;}

  @media (max-width:520px){
    .callsheet-row.two-col{grid-template-columns:1fr;}
    .callsheet-row.two-col .callsheet-field:first-child{border-right:none;border-bottom:1px solid rgba(64,35,31,.3);}
    .callsheet-head{flex-direction:column;}
    .callsheet-logo{width:64px;}
    .cs-cl-row{grid-template-columns:1fr 1fr;}
    .cs-cl-time{grid-column:1 / -1;text-align:left;}
    /* the fictional rows past "send" (call list, dagindeling, crew call,
       dresscode, catering, ...) are gone on phones, so the sheet just
       ends cleanly right after the form instead of trailing on */
    .cs-mobile-hide{display:none;}
    .cs-val-full{display:none;}
    .cs-val-short{display:inline;}
    .callsheet{padding-bottom:40px;}
    .contact-section::after{display:none;}
    /* the stamp, relocated here by JS, sits inline next to "Contact"
       instead of floating way up over the contact-info block below */
    .callsheet-title-row .cs-stamp{
      position:relative;top:auto;right:auto;
      width:44px;aspect-ratio:982/973;
      flex-shrink:0;
      transform:none;
      filter:none;
    }
  }


/* ---------- aanpassingen op het origineel ---------- */

/* callsheet: stopt na de verzendknop, gewoon als een vel papier */
#contact{padding:88px 0 56px;}
.contact-section{height:auto !important;overflow:visible !important;padding-bottom:0;}
.contact-section::after{display:none;}
.callsheet{padding-bottom:40px;}

/* mappen: de foto's komen verder uit de map, zonder de tekst erboven te raken */
.folders-grid{margin-top:150px;}
@media (max-width:719px){.folders-grid{gap:150px;}}
.folder-ghost{top:-16%;height:84%;}
.folder-ghost.g1{transform:rotate(-19deg) translate(-46px,-10px);}
.folder-ghost.g2{transform:rotate(18deg) translate(46px,-8px);}
.folder-ghost.g3{transform:rotate(-6deg) translate(-8px,-14px);}
.folder-ghost.g4{transform:rotate(10deg) translate(22px,-16px);}


/* Instagram-post bij "Kind van het internet" (origineel) */
  /* ---------- About photo: styled like an actual Instagram feed post
     (header, photo, action icons, likes, caption) rather than a story
     chip — a different, more recognizable "app UI" flavour ---------- */
  .ig-post{
    width:100%;max-width:270px;margin:0 auto;
    background:#fff;border-radius:18px;overflow:hidden;
    box-shadow:0 28px 54px -22px rgba(var(--o-shadow-color),.45);
    transform:rotate(1.5deg);
  }
  .ig-post-head{
    display:flex;align-items:center;gap:10px;
    padding:12px 14px;
  }
  .ig-post-avatar{
    position:relative;
    width:32px;height:32px;border-radius:50%;flex-shrink:0;
    background:var(--o-coral);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-family:"Unbounded",sans-serif;font-weight:700;font-size:0.7rem;
  }
  .ig-post-username{font-size:0.78rem;font-weight:700;color:var(--o-ink);}
  .ig-post-dots{margin-left:auto;width:18px;height:18px;color:var(--o-ink);}
  .ig-post-dots svg{width:100%;height:100%;fill:currentColor;}
  .ig-post-photo{width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--o-paper-sunken);}
  .about-card-photo{width:100%;height:100%;object-fit:cover;display:block;}
  .ig-post-actions{
    display:flex;align-items:center;gap:14px;
    padding:12px 14px 4px;
  }
  .ig-post-actions svg{width:23px;height:23px;fill:none;stroke:var(--o-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .ig-post-bookmark{margin-left:auto;}
  .ig-post-likes{padding:8px 14px 0;font-size:0.74rem;color:var(--o-ink);}
  .ig-post-tag{color:inherit;text-decoration:none;}
  .ig-post-caption{padding:4px 14px 0;font-size:0.74rem;color:var(--o-ink);line-height:1.4;}
  .ig-post-time{
    padding:6px 14px 14px;font-size:0.68rem;letter-spacing:.03em;
    text-transform:uppercase;color:var(--o-ink-faint);
  }
.ig-post{font-family:"Plus Jakarta Sans",system-ui,sans-serif;}

/* callsheet: invulvelden zoals de vorige, cleanere versie */
.callsheet .cs-input{
  background:transparent;border:0;border-bottom:1.5px solid var(--o-ink);border-radius:0;
  padding:8px 2px;font-size:.95rem;
}
.callsheet .cs-input:hover{background:transparent;border-bottom-color:var(--o-chocolate);}
.callsheet .cs-input:focus{background:rgba(255,208,228,.35);border-bottom-color:#840121;}
.callsheet .cs-input.is-invalid{border-bottom-color:var(--o-coral);background:rgba(232,57,64,.06);}
.callsheet .cs-textarea{border:1.5px solid var(--o-ink);border-radius:4px;padding:10px 12px;min-height:6em;}
.callsheet .cs-textarea:focus{border-color:#840121;}
.cs-crew-head{background:transparent;}
.cs-check .box{width:20px;height:20px;border-radius:2px;background:#fff;position:relative;overflow:visible;}
.cs-check .box::after,.cs-check .box::before{content:none;}
/* balpen-kruisje dat zichzelf schrijft, en buiten het vakje loopt */
.pen-mark{position:absolute;left:-10px;top:-10px;width:40px;height:40px;max-width:none;overflow:visible;pointer-events:none;}
.pen-stroke{
  fill:none;stroke:#1F3C9E;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.92;
  stroke-dasharray:var(--len,60);stroke-dashoffset:var(--len,60);
  transition:stroke-dashoffset .12s ease-in;
}
.cs-check input:checked + .box .pen-stroke-1{stroke-dashoffset:0;transition:stroke-dashoffset .2s cubic-bezier(.5,0,.3,1);}
.cs-check input:checked + .box .pen-stroke-2{stroke-dashoffset:0;transition:stroke-dashoffset .22s cubic-bezier(.5,0,.3,1) .2s;}
@media (prefers-reduced-motion: reduce){.pen-stroke{transition:none !important;}}


/* ---------- fluostift over "Online Content Producer": wordt getrokken na het laadscherm ---------- */
.hl-wait .hero-role-stamp::before{clip-path:inset(0 100% 0 0);}
.hl-go .hero-role-stamp::before{animation:hlSwipe .75s cubic-bezier(.65,0,.35,1) .45s forwards;}
@keyframes hlSwipe{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}

/* ---------- contact: de callsheet rolt uit de printer, daarna stempel en fluostift ---------- */
.print-feed{position:relative;z-index:1;width:100%;max-width:860px;flex-shrink:0;}
.print-clip{clip-path:inset(0 -200px -200px -200px);}
.print-feed .callsheet{max-width:none;}
.printer{
  position:absolute;z-index:4;top:-24px;left:-22px;right:-22px;height:32px;border-radius:12px;
  background:linear-gradient(180deg,#4a2c27 0%,#2a1714 70%,#1d0f0c 100%);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
}
.printer::after{ /* de papiersleuf */
  content:"";position:absolute;left:18px;right:18px;bottom:7px;height:4px;border-radius:3px;
  background:#0c0504;box-shadow:inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08);
}
.printer-led{position:absolute;right:16px;top:8px;width:6px;height:6px;border-radius:50%;background:#3b2622;}
.print-feed.is-printing .printer-led{background:#39C97A;box-shadow:0 0 6px #39C97A;animation:ledBlink .5s steps(2) infinite;}
.print-feed.is-printed .printer-led{background:#39C97A;box-shadow:0 0 5px rgba(57,201,122,.7);}
@keyframes ledBlink{50%{opacity:.25;}}

.callsheet.cs-anim{transform:translateY(-101%) rotate(-0.6deg);}
.print-feed.is-printing .callsheet.cs-anim{animation:csPrint 2.1s linear forwards;}
.callsheet.cs-anim.is-visible{transform:rotate(-0.6deg);animation:none;}
/* schoksgewijs, regel per regel, met een klein zijdelings trillen */
@keyframes csPrint{
  0%{transform:translate(0,-101%) rotate(-0.6deg);animation-timing-function:ease-out;}
  9%{transform:translate(1px,-90%) rotate(-0.6deg);}
  13%{transform:translate(0,-90%) rotate(-0.6deg);animation-timing-function:ease-out;}
  23%{transform:translate(-1px,-76%) rotate(-0.6deg);}
  27%{transform:translate(0,-76%) rotate(-0.6deg);animation-timing-function:ease-out;}
  37%{transform:translate(1px,-61%) rotate(-0.6deg);}
  41%{transform:translate(0,-61%) rotate(-0.6deg);animation-timing-function:ease-out;}
  51%{transform:translate(-1px,-46%) rotate(-0.6deg);}
  55%{transform:translate(0,-46%) rotate(-0.6deg);animation-timing-function:ease-out;}
  65%{transform:translate(1px,-31%) rotate(-0.6deg);}
  69%{transform:translate(0,-31%) rotate(-0.6deg);animation-timing-function:ease-out;}
  79%{transform:translate(-1px,-16%) rotate(-0.6deg);}
  83%{transform:translate(0,-16%) rotate(-0.6deg);animation-timing-function:cubic-bezier(.2,.8,.3,1);}
  100%{transform:translate(0,0) rotate(-0.6deg);}
}
.callsheet.cs-anim .cs-stamp{opacity:0;}
.callsheet.cs-anim.is-visible .cs-stamp{animation:csStampIn .5s cubic-bezier(.3,1.5,.5,1) .15s both;}
@keyframes csStampIn{
  0%{opacity:0;transform:scale(1.9) rotate(-14deg);}
  60%{opacity:1;transform:scale(.94) rotate(2deg);}
  100%{opacity:1;transform:scale(1) rotate(0);}
}
.callsheet.cs-anim .callsheet-contact-main .cs-contact::before{clip-path:inset(0 100% 0 0);}
.callsheet.cs-anim.is-visible .callsheet-contact-main .cs-contact::before{animation:hlSwipe .5s cubic-bezier(.65,0,.35,1) both;}
.callsheet.cs-anim.is-visible .callsheet-contact-main .cs-contact:nth-child(1)::before{animation-delay:.6s;}
.callsheet.cs-anim.is-visible .callsheet-contact-main .cs-contact:nth-child(2)::before{animation-delay:.8s;}
.callsheet.cs-anim.is-visible .callsheet-contact-main .cs-contact:nth-child(3)::before{animation-delay:1s;}
@media (prefers-reduced-motion: reduce){
  .callsheet.cs-anim,.callsheet.cs-anim.is-visible,.print-feed.is-printing .callsheet.cs-anim{transform:rotate(-0.6deg);animation:none;}
  .callsheet.cs-anim .cs-stamp{opacity:1;animation:none !important;}
  .callsheet.cs-anim .callsheet-contact-main .cs-contact::before,.hl-wait .hero-role-stamp::before{clip-path:none;animation:none !important;}
}


/* ---------- carousel: spotlight + kanteling (vervangt de schaduw) ---------- */
.hero-feed{padding:28px 0;margin:-28px 0;}
.hero-feed-track{perspective:900px;}
.hero-feed-card{
  box-shadow:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease, filter .35s ease;
}
.hero-feed-card:hover{box-shadow:none;transform:none;}
.hero-feed-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.95), 0 0 0 3px rgba(255,208,228,.9);
  opacity:0;transition:opacity .25s ease;
}
.has-spot .hero-feed-card{opacity:.55;filter:saturate(.75) blur(1px);}
.has-spot .hero-feed-card.is-spot{
  opacity:1;filter:none;z-index:3;
  transform:scale(1.05);
  transition:transform .12s ease-out, opacity .3s ease, filter .3s ease;
}
.hero-feed-card.is-spot::after{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .has-spot .hero-feed-card.is-spot{transform:scale(1.04);}
}

/* meldingen breder, zoals een echte telefoonmelding, zodat teksten minder regels nodig hebben */
.hero-notify{width:min(340px, calc(100vw - 28px));}
@media (max-width:480px){.hero-notify{width:min(360px, calc(100vw - 24px));}}