:root{
    /* ---- Character Code op de The Synths-tokens: --paper/--ink/--acc/--acc2 ---- */
    --cream:#FFFFFF;
    --cream-2:#F5F5F5;
    --ink:#222222;
    --ink-soft:rgba(34,34,34,.65);
    --burgundy:#DA5597;
    --burgundy-soft:rgba(218,85,151,.12);
    --ochre:#A8447A;
    --ochre-soft:rgba(168,68,122,.12);
    --teal:#64D0EB;
    --teal-soft:rgba(100,208,235,.15);
    --indigo:#1C7F9C;
    --indigo-soft:rgba(28,127,156,.12);
    --line: rgba(34,34,34,.12);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:var(--s-sans);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  ::selection{background:var(--teal);color:var(--cream);}
  a{color:inherit;}

  .mono{font-family:'IBM Plex Mono',monospace; letter-spacing:.04em;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  h1,h2,h3{font-family:var(--s-sans); margin:0; font-weight:700; letter-spacing:-.02em;}

  .topbar{
    display:flex;justify-content:space-between;align-items:center;
    padding:22px clamp(20px,5vw,56px);
    position:relative; isolation:isolate; overflow:hidden; z-index:5;
    background:#131312;
  }
  .topbar::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:repeating-linear-gradient(0deg, rgba(251,251,250,.05) 0 2px, transparent 2px 5px);
  }
  .topbar::after{
    content:"";position:absolute;inset:-40px;z-index:-1;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px;opacity:.1;animation:ccNoise .4s steps(1) infinite;
  }
  @keyframes ccNoise{
    0%{transform:translate(0,0);}
    25%{transform:translate(-14px,9px);}
    50%{transform:translate(11px,-13px);}
    75%{transform:translate(-7px,-5px);}
    100%{transform:translate(0,0);}
  }
  .topbar .brand{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.12em;color:#FBFBFA;}
  .topbar .brand b{color:var(--teal);}
  .topbar .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:rgba(251,251,250,.5);}

  .progress-rail{
    position:sticky; top:0; z-index:10;
    width:100%;background:#fff;border-bottom:1px solid var(--line);padding:13px clamp(20px,5vw,56px) 11px;box-shadow:0 8px 24px rgba(19,19,18,.07);
  }
  .progress-copy{max-width:980px;margin:0 auto 8px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.055em;color:var(--ink-soft)}
  .progress-copy strong{color:var(--ink);font-weight:600}.progress-copy span{text-align:center;color:var(--burgundy);font-weight:600}.progress-copy b{text-align:right;color:var(--burgundy);font-size:13px}
  .progress-track{height:12px;max-width:980px;margin:0 auto;background:#ecebea;overflow:hidden;border:1px solid #dedbd8}
  .progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#DA5597 0%,#A8447A 30%,#64D0EB 58%,#737BBD 80%,#DA5597 100%);transition:width .4s ease;position:relative}
  .progress-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:3px;background:#131312}
  .progress-milestones{max-width:980px;margin:9px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .progress-milestone{display:flex;align-items:center;gap:6px;min-width:0;font-family:'IBM Plex Mono',monospace;font-size:8px;text-transform:uppercase;letter-spacing:.035em;color:#98938e;white-space:nowrap}
  .progress-milestone i{width:9px;height:9px;border-radius:50%;background:#d8d5d2;flex:0 0 auto;border:2px solid #fff;box-shadow:0 0 0 1px #d8d5d2}
  .progress-milestone.active{color:var(--ink);font-weight:600}.progress-milestone.active i{background:var(--milestone-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--milestone-color) 42%,transparent)}
  .progress-milestone.done{color:#2d7950}.progress-milestone.done i{background:#46C982;box-shadow:none}.progress-milestone.done i::after{content:'✓';display:block;color:#fff;font-style:normal;font-size:7px;line-height:9px;text-align:center}

  .stage{
    max-width:760px; margin:0 auto; padding: 4vh clamp(20px,5vw,56px) 10vh;
    min-height:70vh; display:flex; flex-direction:column; justify-content:center;
  }

  /* ---------- INTRO: donkere hero, los van de lichte .stage ---------- */
  body.on-intro .topbar, body.on-intro .progress-rail{display:none;}
  @media(max-width:680px){.progress-rail{padding:11px 14px 9px}.progress-copy{grid-template-columns:1fr auto}.progress-copy span{grid-row:2;grid-column:1/-1;text-align:left}.progress-copy b{grid-column:2;grid-row:1}.progress-track{height:14px}.progress-milestones{gap:3px}.progress-milestone{font-size:0;justify-content:center}.progress-milestone i{width:11px;height:11px}.progress-milestone.done i::after{line-height:11px}}
  .intro-hero{
    min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:8vh clamp(20px,5vw,56px);
    background:#131312;color:#FBFBFA;position:relative;isolation:isolate;overflow:hidden;
  }
  .intro-hero::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:repeating-linear-gradient(0deg, rgba(251,251,250,.05) 0 2px, transparent 2px 5px);
  }
  .intro-hero::after{
    content:"";position:absolute;inset:-40px;z-index:-1;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px;opacity:.1;animation:ccNoise .4s steps(1) infinite;
  }
  .intro-hero .inner{max-width:640px;position:relative;}
  .start-brand{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;color:rgba(251,251,250,.55);text-transform:uppercase;margin-bottom:20px;display:inline-flex;align-items:center;gap:10px;}
  .start-brand .cc-mark{width:26px;height:26px;flex-shrink:0;}
  .start-brand b{color:#FBFBFA;}
  #intro .kicker{color:#F0B3D2;}
  #intro h1{font-size:56px; line-height:1.1; margin:0 0 22px; font-weight:700; letter-spacing:-.02em; color:#FBFBFA;}
  #intro h1 em{font-style:normal; color:#F0B3D2;}
  #intro p.lede{font-size:16px; line-height:1.65; color:rgba(251,251,250,.6); max-width:480px; margin:0 auto 44px;}
  @media (max-width:640px){ #intro h1{font-size:38px;} }

  .model-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:14px; margin-bottom:40px;
  }
  .model-chip{
    border:1px solid rgba(251,251,250,.15); border-radius:0; padding:18px 18px 16px;
    background:rgba(251,251,250,.05);
    transition:transform .32s cubic-bezier(.34,1.3,.4,1), background-color .3s ease;
  }
  .model-chip:hover{background:rgba(251,251,250,.09); transform:scale(1.02);}
  .model-chip .n{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; display:block;}
  .model-chip .t{font-family:var(--s-sans); font-size:17px; font-weight:700; letter-spacing:-.01em; display:block;}
  #intro .model-chip .n{color:rgba(251,251,250,.45);}
  #intro .model-chip .t{color:#FBFBFA;}
  .model-chip.hexaco{border-left:3px solid var(--burgundy);}
  .model-chip.schwartz{border-left:3px solid var(--ochre);}
  .model-chip.circumplex{border-left:3px solid var(--teal);}
  .model-chip.sdt{border-left:3px solid var(--indigo);}

  button.cta{
    font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
    background:var(--ink); color:var(--cream); border:none; padding:16px 30px;
    cursor:pointer; border-radius:0; transition:transform .32s cubic-bezier(.34,1.3,.4,1), background-color .3s ease;
  }
  button.cta:hover{background:var(--burgundy); transform:scale(1.02);}
  button.cta:active{transform:scale(.97); transition-duration:.1s;}
  #intro button.cta{background:var(--burgundy); color:#FBFBFA; padding:17px 38px;}
  #intro button.cta:hover{background:var(--burgundy); opacity:.92;}
  .fineprint{margin-top:16px; font-size:12.5px; color:var(--ink-soft); max-width:48ch;}
  #intro .fineprint{margin-top:56px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; color:rgba(251,251,250,.35); margin-left:auto; margin-right:auto;}

  /* ---------- LAYER INTRO ---------- */
  .layer-intro .roman{font-family:var(--s-sans); font-size:15vw; line-height:.8; opacity:.08; position:absolute; right:0; top:0; pointer-events:none;}
  .layer-intro-inner{position:relative;}
  .layer-intro .eyebrow{margin-bottom:14px;}
  .layer-intro h2{font-size:clamp(28px,4.4vw,46px); line-height:1.08; margin-bottom:16px;}
  .layer-intro p{font-size:16px; line-height:1.6; color:var(--ink-soft); max-width:46ch; margin-bottom:30px;}

  /* ---------- QUESTION ---------- */
  .qcard{animation:fadein .35s ease;}
  @keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
  .qmeta{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px;}
  .qsource{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-top:-24px;margin-bottom:30px;line-height:1.5;}
  .qtext{font-family:var(--s-sans); font-size:clamp(24px,3.4vw,32px); line-height:1.28; font-weight:700; letter-spacing:-.01em; margin-bottom:40px; max-width:26ch;}

  .likert{display:flex; gap:10px; margin-bottom:10px;}
  .likert button{
    flex:1; aspect-ratio:1/1; max-width:76px;
    border:1px solid var(--line); background:transparent; border-radius:50%;
    font-family:'IBM Plex Mono',monospace; font-size:15px; color:var(--ink);
    cursor:pointer; transition:all .15s ease;
  }
  .likert button:hover{border-color:var(--ink); background:rgba(36,30,26,.04);}
  .likert button.picked{background:var(--ink); color:var(--cream); border-color:var(--ink);}
  .likert-labels{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); max-width:100%;}

  .backlink{margin-top:34px;}
  .backlink button{
    background:none; border:none; font-family:'IBM Plex Mono',monospace; font-size:12px;
    color:var(--ink-soft); cursor:pointer; letter-spacing:.06em; text-transform:uppercase;
  }
  .backlink button:hover{color:var(--ink);}

  /* ---------- RESULTS ---------- */
  #results{max-width:960px;}
  .res-head{text-align:center; margin-bottom:8px;}
  .res-head .eyebrow{justify-content:center; display:flex;}
  .res-head h2{font-size:clamp(30px,4.6vw,48px); margin:14px 0 10px;}
  .res-head p{color:var(--ink-soft); font-size:16px; max-width:56ch; margin:0 auto;}

  .print-wrap{display:flex; justify-content:center; margin:30px 0 8px;}
  #signatureSvg{width:100%; max-width:520px; height:auto;}

  .legend{display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-bottom:40px;}
  .legend span{display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft);}
  .legend i{width:9px; height:9px; border-radius:50%; display:inline-block;}

  .synthesis{
    background:rgba(255,255,255,.5); border:1px solid var(--line); border-radius:0;
    padding:28px clamp(20px,4vw,40px); margin-bottom:44px;
  }
  .synthesis .eyebrow{margin-bottom:12px;}
  .synthesis p{font-family:var(--s-sans); font-size:19px; line-height:1.55; font-style:italic; margin:0;}
  .synthesis b{font-style:normal; font-weight:600;}

  details.layer-detail{border-top:1px solid var(--line); padding:22px 0;}
  details.layer-detail:last-of-type{border-bottom:1px solid var(--line);}
  details.layer-detail summary{
    list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  }
  details.layer-detail summary::-webkit-details-marker{display:none;}
  .sum-left{display:flex; align-items:baseline; gap:14px;}
  .sum-left .roman{font-family:var(--s-sans); font-size:20px;}
  .sum-left h3{font-size:20px;}
  .sum-left p{font-size:13px; color:var(--ink-soft); margin:2px 0 0;}
  .sum-right{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:12px;}
  .chevron{transition:transform .25s ease; font-size:16px;}
  details[open] .chevron{transform:rotate(90deg);}

  .dim-row{padding:18px 0 4px; display:grid; grid-template-columns: 1fr; gap:8px;}
  .dim-row + .dim-row{border-top:1px dashed var(--line);}
  .dim-top{display:flex; justify-content:space-between; align-items:baseline;}
  .dim-top .label{font-weight:600; font-size:14.5px;}
  .dim-top .score{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft);}
  .meter{height:6px; background:var(--line); border-radius:0; overflow:hidden;}
  .meter i{display:block; height:100%; border-radius:0; width:0%; transition:width .8s ease;}
  .dim-narr{font-size:14px; color:var(--ink-soft); line-height:1.55; margin:2px 0 10px;}

  .restart-row{text-align:center; margin-top:48px;}
  .footnote{
    max-width:60ch; margin:60px auto 0; text-align:center; font-size:12px; color:var(--ink-soft); line-height:1.6;
  }

  [hidden]{display:none !important;}

  @media (max-width:560px){
    .likert button{max-width:none;}
    .model-grid{grid-template-columns:1fr 1fr;}
  }

  /* ---------- FULL CHARACTER CODE METHOD ---------- */
  .method-wrap{margin-top:54px;padding-top:38px;border-top:1px solid var(--line);}
  .method-head{margin-bottom:22px;}
  .method-head h2{font-size:clamp(27px,4vw,40px);margin:10px 0 10px;}
  .method-head p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);max-width:58ch;}
  .method-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;}
  .method-card{border:1px solid var(--line);background:rgba(255,255,255,.32);padding:18px 18px 16px;min-height:155px;}
  .method-card.primary{border-left:3px solid var(--burgundy);background:rgba(122,32,54,.055);}
  .method-card .mnum{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--ink-soft);text-transform:uppercase;}
  .method-card h3{font-size:18px;margin:8px 0 6px;}
  .method-card p{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin:0;}
  .method-card .mout{display:block;margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.5;color:var(--teal);text-transform:uppercase;letter-spacing:.04em;}
  .method-flow-note{margin:18px 0 0;padding:16px 18px;border-left:2px solid var(--ink);font-family:var(--s-sans);font-size:15px;line-height:1.55;}
  .method-details{margin-top:20px;border-top:1px solid var(--line);}
  .method-details details{border-bottom:1px solid var(--line);padding:15px 0;}
  .method-details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:13px;font-weight:600;}
  .method-details summary::-webkit-details-marker{display:none;}
  .method-details summary span:last-child{font-family:'IBM Plex Mono',monospace;color:var(--teal);font-size:11px;}
  .method-details .detail-copy{padding:12px 0 3px;font-size:12.5px;line-height:1.65;color:var(--ink-soft);}
  @media (max-width:680px){.method-grid{grid-template-columns:1fr;}}

  /* ---------- RICH RESULT REPORT ---------- */
  .result-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0 38px;}
  .result-actions button{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:13px 18px;border-radius:0;cursor:pointer;}
  .result-actions .primary-action{background:var(--ink);color:var(--cream);border:1px solid var(--ink);}
  .result-actions .secondary-action{background:transparent;color:var(--ink);border:1px solid var(--line);}

  .case-link-panel{max-width:520px;margin:0 auto 40px;padding:22px 24px;border:1px solid var(--line);background:var(--cream-2);}
  .case-link-intro{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:8px 0 16px;}
  .case-link-form{display:flex;flex-direction:column;gap:10px;}
  .case-link-form input{font-family:var(--s-sans);font-size:13px;padding:11px 13px;border:1px solid var(--line);background:var(--cream);color:var(--ink);border-radius:0;}
  .case-link-form .primary-action{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:13px 18px;border-radius:0;cursor:pointer;background:var(--ink);color:var(--cream);border:1px solid var(--ink);align-self:flex-start;transition:transform .32s cubic-bezier(.34,1.3,.4,1), background-color .3s ease;}
  .case-link-form .primary-action:hover{background:var(--burgundy);transform:scale(1.02);}
  .case-link-form .primary-action:disabled{opacity:.5;cursor:not-allowed;transform:none;}
  .case-link-status{margin-top:12px;font-size:12.5px;line-height:1.5;}
  .case-link-status.ok{color:var(--burgundy);}
  .case-link-status.err{color:#B3372C;}
  .result-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0 34px;}
  .result-summary-card{border:1px solid var(--line);background:rgba(255,255,255,.34);padding:17px 14px;}
  .result-summary-card .rs-k{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
  .result-summary-card .rs-v{font-family:var(--s-sans);font-size:26px;font-weight:700;letter-spacing:-.01em;margin:7px 0 3px;}
  .result-summary-card .rs-l{font-size:11px;color:var(--ink-soft);}
  .interpretation{margin:0 0 36px;border:1px solid var(--line);padding:24px clamp(18px,4vw,32px);background:rgba(255,255,255,.25);}
  .interpretation h3{font-size:24px;margin:8px 0 12px;}
  .interpretation p{font-size:14px;line-height:1.72;color:var(--ink-soft);margin:0;}
  .facet-wrap{padding:8px 0 15px;}
  .facet-title{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:10px 0 8px;}
  .facet-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;}
  .facet-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 0;border-top:1px dotted var(--line);font-size:12px;}
  .facet-item .fv{font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);}
  .facet-meter{grid-column:1/-1;height:3px;background:var(--line);overflow:hidden;}
  .facet-meter i{display:block;height:100%;}
  .report-note{font-size:12px;color:var(--ink-soft);line-height:1.6;margin:0 0 30px;padding:14px 16px;border-left:2px solid var(--teal);}
  @media(max-width:680px){.result-summary-grid{grid-template-columns:1fr 1fr}.facet-grid{grid-template-columns:1fr}}

  .deep-report{margin:34px 0 44px;display:grid;gap:14px;}
  .deep-block{border:1px solid var(--line);background:rgba(255,255,255,.30);padding:24px clamp(18px,4vw,32px);}
  .deep-block h3{font-size:23px;margin:7px 0 12px;}
  .deep-block p{font-size:14px;line-height:1.72;color:var(--ink-soft);margin:0 0 10px;}
  .deep-block p:last-child{margin-bottom:0;}
  .insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
  .insight-card{border-top:1px solid var(--line);padding:14px 0 4px;}
  .insight-card .ik{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:6px;}
  .insight-card .it{font-family:var(--s-sans);font-size:17px;margin-bottom:5px;}
  .insight-card .ic{font-size:12.5px;line-height:1.6;color:var(--ink-soft);}
  .profile-bullets{margin:12px 0 0;padding-left:19px;color:var(--ink-soft);font-size:13px;line-height:1.7;}
  .profile-bullets li{margin:6px 0;}
  .layer-conclusion{padding:14px 0 4px;font-size:13.5px;line-height:1.7;color:var(--ink-soft);}
  @media(max-width:680px){.insight-grid{grid-template-columns:1fr;}}

  @media print{
    .topbar,.progress-rail,.result-actions,.restart-row,.case-link-panel{display:none!important;}
    body{background:#fff!important;}
    #results{display:block!important;max-width:none!important;}
    .stage{max-width:none!important;padding:0!important;}
    details.layer-detail{display:block!important;break-inside:avoid;}
    details.layer-detail > *{display:block!important;}
  }


  .ai-compact{margin-top:28px;}
  .ai-intro{font-size:13.5px!important;line-height:1.6!important;color:var(--ink-soft);margin-bottom:18px!important;}
  .ai-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
  .ai-profile-card{border:1px solid var(--line);background:rgba(255,255,255,.36);padding:16px 17px;}
  .ai-profile-card.wide{grid-column:1/-1;}
  .ai-profile-card .ak{font-family:'IBM Plex Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--teal);margin-bottom:7px;}
  .ai-profile-card .av{font-size:13px;line-height:1.55;color:var(--ink);}
  .ai-profile-card ul{margin:7px 0 0;padding-left:18px;}
  .ai-profile-card li{margin:4px 0;}
  .ai-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  .ai-tag{border:1px solid var(--line);padding:5px 8px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;background:rgba(255,255,255,.45);}
  @media(max-width:680px){.ai-profile-grid{grid-template-columns:1fr;}.ai-profile-card.wide{grid-column:auto;}}


/* Clear hierarchy for secondary AI/technical exports */
.technical-exports{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%;padding-top:10px;border-top:1px solid var(--line);}
.technical-exports .export-label{width:100%;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}

/* Round 2: calmer client flow */
.consent-row{display:flex;align-items:flex-start;gap:14px;max-width:680px;margin:12px auto 10px;text-align:left;font-size:15px;line-height:1.45;color:var(--paper);cursor:pointer}
.consent-row input{width:24px;height:24px;min-width:24px;margin-top:1px;accent-color:var(--burgundy);cursor:pointer}
.consent-row strong{display:block;font-weight:700;color:var(--paper);letter-spacing:-.01em}
.consent-row small{display:block;margin-top:5px;font-size:11px;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(251,251,250,.68)}
.cta:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.profile-status{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:900px;margin:26px auto 34px}
.status-step{border:1px solid var(--line);padding:14px 14px 12px;background:rgba(255,255,255,.45);display:grid;grid-template-columns:26px 1fr;column-gap:8px;align-items:center}
.status-step b{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:10px}
.status-step span{font-weight:700;font-size:13px}.status-step small{grid-column:2;color:var(--ink-soft);font-size:10px;margin-top:2px}
.status-step.active{border-color:var(--burgundy)}.status-step.active b{background:var(--burgundy);color:#fff;border-color:var(--burgundy)}
@media(max-width:700px){.profile-status{grid-template-columns:1fr 1fr}}

/* V3 privacy/toestemming */
.consent-box{max-width:760px;margin:30px auto 18px;padding:20px 22px;border:2px solid rgba(251,251,250,.28);border-radius:16px;background:rgba(255,255,255,.075);box-shadow:0 12px 30px rgba(0,0,0,.12)}
.consent-title{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre);margin-bottom:10px}
.consent-detail{margin:12px 0 0 38px;padding-top:12px;border-top:1px solid rgba(251,251,250,.12);font-size:11.5px;line-height:1.6;opacity:.68;text-align:left}


/* Customer share mode: completion screen without exposing scores/results */
.customer-complete{max-width:760px;margin:0 auto;padding:clamp(54px,9vw,110px) 22px;}
.customer-complete__card{background:rgba(255,255,255,.5);border:1px solid var(--line);padding:clamp(28px,5vw,54px);text-align:center;}
.customer-complete__card h2{font-family:var(--s-sans);font-size:clamp(34px,6vw,58px);letter-spacing:-.04em;margin:10px 0 14px;}
.customer-complete__card>p{max-width:560px;margin:0 auto 24px;line-height:1.65;color:var(--ink-soft);}
.customer-complete__note{font-family:'IBM Plex Mono',monospace;font-size:10px!important;letter-spacing:.05em;text-transform:uppercase;margin-top:22px!important;color:var(--ink-soft)!important;}


/* =====================================================================
   V12.63 — THE SYNTHS SKIN (klantflow)
   Zwart, ruim, lowercase labels, Inter Tight + Instrument Serif italic,
   het pink→cyan-verloop van het The Synths-logo als enige accent.
   Geldt voor: intro, onderdeel-intro's, vragen en bedankscherm.
   De resultaatweergave (intern) blijft licht en printvriendelijk.
   ===================================================================== */
@font-face{font-family:'Synths Sans';src:url('/fonts/inter-tight.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Synths Mono';src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Synths Mono';src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}

:root{
  --s-black:#000000;
  --s-white:#FFFFFF;
  --s-fg-2:rgba(255,255,255,.62);
  --s-fg-3:rgba(255,255,255,.38);
  --s-hair:rgba(255,255,255,.14);
  --s-pink:#DA5597;
  --s-cyan:#64D0EB;
  --s-grad:linear-gradient(90deg,#DA5597 0%,#A8447A 38%,#737BBD 68%,#64D0EB 100%);
  --s-sans:'Synths Sans','Inter Tight',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --s-serif:'Synths Serif','Instrument Serif',Georgia,'Times New Roman',serif;
  --paper:#FFFFFF;
  --font-mono:var(--s-sans);
}

body{font-family:var(--s-sans);background:var(--s-black);color:var(--s-white);}
h1,h2,h3{font-family:var(--s-sans);}
::selection{background:var(--s-pink);color:var(--s-white);}
:focus-visible{outline:2px solid var(--s-cyan);outline-offset:3px;}

/* ---------- topbar ---------- */
.topbar{background:var(--s-black);padding:20px clamp(20px,5vw,56px);}
.topbar::before,.topbar::after,.intro-hero::before,.intro-hero::after{display:none;}
.topbar .brand,.topbar .tag{font-family:var(--s-sans);text-transform:lowercase;letter-spacing:0;font-size:14px;}
.topbar .brand{color:var(--s-white);font-weight:500;}
.topbar .brand b{color:var(--s-white);font-weight:700;}
.topbar .tag{color:var(--s-fg-3);}

/* ---------- voortgang: één dunne verlooplijn ---------- */
.progress-rail{background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--s-hair);box-shadow:none;padding:14px clamp(20px,5vw,56px) 12px;}
.progress-copy{font-family:var(--s-sans);font-size:13px;text-transform:lowercase;letter-spacing:0;color:var(--s-fg-3);max-width:880px;}
.progress-copy strong{color:var(--s-white);font-weight:500;}
.progress-copy span{color:var(--s-fg-2);font-weight:400;}
.progress-copy b{color:var(--s-white);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;}
.progress-track{height:2px;max-width:880px;background:var(--s-hair);border:0;}
.progress-fill{background:var(--s-grad);background-size:880px 100%;}
.progress-fill::after{display:none;}
.progress-milestones{max-width:880px;margin-top:10px;}
.progress-milestone{font-family:var(--s-sans);font-size:11px;text-transform:lowercase;letter-spacing:0;color:var(--s-fg-3);}
.progress-milestone i{width:6px;height:6px;background:var(--s-hair);border:0;box-shadow:none;}
.progress-milestone.active{color:var(--s-white);font-weight:500;}
.progress-milestone.active i{background:var(--s-white);box-shadow:none;}
.progress-milestone.done{color:var(--s-fg-2);}
.progress-milestone.done i{background:var(--s-fg-2);}
.progress-milestone.done i::after{display:none;}
@media(max-width:680px){.progress-milestone{font-size:0;}.progress-milestone i{width:8px;height:8px;}}

/* ---------- intro ---------- */
.intro-hero{background:var(--s-black);color:var(--s-white);text-align:left;align-items:stretch;justify-content:flex-end;padding:clamp(28px,5vw,56px) clamp(20px,5vw,56px) clamp(36px,7vh,72px);}
.intro-hero .inner{max-width:1080px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);align-items:end;min-height:calc(100vh - 140px);}
.start-brand{position:absolute;top:0;left:0;margin:0;font-family:var(--s-sans);text-transform:lowercase;letter-spacing:0;font-size:14px;color:var(--s-fg-3);}
.start-brand b{color:var(--s-white);font-weight:700;}
#intro h1{grid-column:1;grid-row:1 / span 2;align-self:end;font-size:clamp(46px,8.4vw,112px);line-height:.94;letter-spacing:-.045em;font-weight:600;margin:96px 0 0;color:var(--s-white);}
#intro h1 em{display:block;width:fit-content;font-family:var(--s-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;background:var(--s-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em;}
#intro p.lede{grid-column:2;grid-row:1;align-self:end;margin:0 0 28px;max-width:42ch;font-size:16px;line-height:1.6;color:var(--s-fg-2);}
.consent-box{grid-column:2;grid-row:2;margin:0;padding:18px 0 0;max-width:none;border:0;border-top:1px solid var(--s-hair);border-radius:0;background:none;box-shadow:none;}
.consent-title{display:none;}
.consent-row{margin:0;max-width:none;font-size:15px;color:var(--s-white);gap:12px;}
.consent-row strong{color:var(--s-white);font-weight:500;}
.consent-row small{font-family:var(--s-sans);text-transform:none;letter-spacing:0;font-size:13px;color:var(--s-fg-3);}
.consent-row input{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;margin-top:1px;border:1px solid var(--s-fg-3);border-radius:4px;background:transparent;display:grid;place-content:center;}
.consent-row input::after{content:'';width:10px;height:6px;border-left:2px solid var(--s-black);border-bottom:2px solid var(--s-black);transform:rotate(-45deg) translate(1px,-1px);opacity:0;}
.consent-row input:checked{background:var(--s-white);border-color:var(--s-white);}
.consent-row input:checked::after{opacity:1;}
.consent-detail{margin:14px 0 0 32px;padding:0;border:0;font-size:12.5px;line-height:1.6;color:var(--s-fg-3);opacity:1;}
#startBtn{grid-column:2;grid-row:3;justify-self:start;margin-top:28px;}
#intro .fineprint{grid-column:1 / -1;grid-row:4;margin:clamp(40px,7vh,72px) 0 0;padding-top:16px;border-top:1px solid var(--s-hair);max-width:none;font-family:var(--s-sans);font-size:13px;letter-spacing:0;color:var(--s-fg-3);}
@media(max-width:860px){
  .intro-hero .inner{grid-template-columns:1fr;min-height:0;}
  .start-brand{position:static;margin-bottom:12vh;}
  #intro h1,#intro p.lede,.consent-box,#startBtn,#intro .fineprint{grid-column:1;grid-row:auto;}
  #intro h1{margin:0 0 28px;}
}

/* ---------- knoppen ---------- */
button.cta,#intro button.cta{font-family:var(--s-sans);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;background:var(--s-white);color:var(--s-black);border:1px solid var(--s-white);border-radius:999px;padding:15px 30px;transition:background-color .2s ease,color .2s ease;}
button.cta:hover,#intro button.cta:hover{background:transparent;color:var(--s-white);opacity:1;transform:none;}
button.cta:active{transform:scale(.98);}
.cta:disabled,#intro button.cta:disabled{background:transparent;color:var(--s-fg-3);border-color:var(--s-hair);opacity:1;}

/* ---------- onderdeel-intro ---------- */
.stage{max-width:880px;}
.layer-intro{position:relative;padding:6vh 0;}
.layer-intro .roman{padding:0 .12em 0 .04em;font-family:var(--s-serif);font-style:italic;font-weight:400;font-size:clamp(160px,26vw,320px);line-height:.8;opacity:1;top:-2vh;right:-1vw;background:var(--s-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.layer-intro .eyebrow{display:none;}
.layer-intro h2{font-size:clamp(40px,6.4vw,76px);line-height:.98;letter-spacing:-.04em;font-weight:600;color:var(--s-white);}
.layer-intro p{color:var(--s-fg-2);font-size:17px;max-width:44ch;}

/* ---------- vraag ---------- */
.qmeta .eyebrow{font-family:var(--s-sans);text-transform:lowercase;letter-spacing:0;font-size:14px;color:var(--s-fg-3);}
#qCounter{font-variant-numeric:tabular-nums;}
.qsource{font-family:var(--s-sans);text-transform:lowercase;letter-spacing:0;font-size:12.5px;color:var(--s-fg-3);margin-top:-22px;}
.qtext{font-size:clamp(28px,4.4vw,48px);line-height:1.1;letter-spacing:-.03em;font-weight:500;max-width:22ch;color:var(--s-white);margin-bottom:48px;}
.likert{gap:clamp(8px,2vw,16px);}
.likert button{max-width:84px;border:1px solid var(--s-hair);color:var(--s-white);font-family:var(--s-sans);font-size:18px;font-weight:500;background:transparent;transition:border-color .15s ease,background-color .15s ease,color .15s ease;}
.likert button:hover{border-color:var(--s-white);background:transparent;}
.likert button.picked{background:var(--s-white);color:var(--s-black);border-color:var(--s-white);}
.likert-labels{font-size:13px;color:var(--s-fg-3);max-width:calc(84px * 5 + 16px * 4);}
.backlink button{font-family:var(--s-sans);text-transform:lowercase;letter-spacing:0;font-size:14px;color:var(--s-fg-3);padding:6px 0;}
.backlink button:hover{color:var(--s-white);}

/* ---------- bedankscherm ---------- */
.customer-complete{max-width:880px;padding:clamp(48px,10vh,120px) 0;}
.customer-complete__card{background:none;border:0;padding:0;text-align:left;}
.customer-complete__card .eyebrow{font-family:var(--s-sans);text-transform:lowercase;letter-spacing:0;font-size:14px;color:var(--s-fg-3);}
.customer-complete__card h2{font-size:clamp(56px,11vw,140px);line-height:.92;letter-spacing:-.05em;font-weight:600;margin:18px 0 32px;color:var(--s-white);}
.customer-complete__card h2::after{content:'';display:block;width:min(320px,40%);height:3px;margin-top:28px;background:var(--s-grad);}
.customer-complete__card>p{margin:0 0 28px;max-width:44ch;font-size:18px;color:var(--s-fg-2);}
.customer-complete .case-link-status{font-size:14px;color:var(--s-fg-2);padding-top:16px;border-top:1px solid var(--s-hair);max-width:44ch;}
.customer-complete .case-link-status.ok{color:var(--s-cyan);}
.customer-complete .case-link-status.err,.customer-complete .case-link-status.error{color:#FF8A7A;}
.customer-complete__note{font-family:var(--s-sans);text-transform:none;letter-spacing:0;font-size:13px!important;color:var(--s-fg-3)!important;}

body:has(#customerComplete:not([hidden])) .progress-rail{display:none;}

/* Synths-rij onder het bedankscherm: vrijstaande portretten op een lichtgloed */
html{overflow-x:clip;}
.synths-wall{position:relative;isolation:isolate;width:100vw;margin:clamp(40px,8vh,88px) 0 0 calc(50% - 50vw);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.synths-wall::before{content:'';position:absolute;z-index:-1;left:0;right:0;bottom:0;height:85%;pointer-events:none;
  background:radial-gradient(42% 75% at 28% 100%,rgba(218,85,151,.42),transparent 72%),
             radial-gradient(42% 75% at 72% 100%,rgba(100,208,235,.34),transparent 72%),
             radial-gradient(30% 60% at 50% 100%,rgba(115,123,189,.30),transparent 75%);
  filter:blur(8px);}
.synths-wall::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--s-grad);opacity:.7;}
.synths-track{--w:clamp(150px,17vw,250px);display:flex;width:max-content;animation:synthsDrift 90s linear infinite;}
.synths-track img{display:block;flex:none;width:var(--w);height:auto;aspect-ratio:456/528;margin-right:calc(var(--w) * -.3);
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 99%);mask-image:linear-gradient(180deg,#000 58%,transparent 99%);
  filter:drop-shadow(0 0 1px rgba(255,255,255,.18));}
@keyframes synthsDrift{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.customer-complete{max-width:none;}
.customer-complete__card{max-width:880px;}

/* tussenscherm halverwege */
.halfway{padding-top:clamp(32px,7vh,88px);}
.halfway .customer-complete__card h2{margin-bottom:24px;}
.halfway .customer-complete__card h2::after{display:none;}
.halfway .customer-complete__card h2 em{font-family:var(--s-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;background:var(--s-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em;}
.halfway #hwContinue{margin-top:4px;}
.halfway .synths-wall{margin-top:clamp(36px,7vh,72px);}

/* ---------- beweging ---------- */
.qcard{animation:synthsIn .28s ease;}
@keyframes synthsIn{from{opacity:0;}to{opacity:1;}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}.synths-wall{overflow-x:auto;}}

/* ---------- resultaatweergave (intern): licht houden ---------- */
body:has(#results:not([hidden])){background:#FFFFFF;color:#222222;}
#results .eyebrow{font-family:var(--s-sans);}


/* =====================================================================
   V12.69 — leesbaarder, meer kleur, vaste layout zonder verspringen
   ===================================================================== */
:root{--s-fg-2:#FFFFFF;--s-fg-3:rgba(255,255,255,.78);--layer:#DA5597;}

/* één lettertype: geen schreefletter meer */
#intro h1 em,.halfway .customer-complete__card h2 em{
  font-family:var(--s-sans);font-style:normal;font-weight:600;letter-spacing:-.045em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--s-pink);-webkit-text-fill-color:var(--s-pink);padding:0;}
#intro h1 em{display:block;}

/* logo's */
.ts-logo{font-family:var(--s-sans);font-weight:700;letter-spacing:-.03em;font-size:17px;color:var(--s-white);text-transform:none;white-space:nowrap;}
.ts-logo sup{font-size:.48em;font-weight:600;margin-left:1px;vertical-align:super;}
.cc-word{font-family:var(--s-sans);font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--s-white);white-space:nowrap;}
.topbar .brand{text-transform:none;font-size:15px;}
.topbar .tag{text-transform:none;}
.start-brand{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--s-white);text-transform:none;}
.start-brand .cc-mark{width:26px;height:26px;}
.start-brand .by{color:var(--s-fg-3);font-size:13px;}

/* teksten wit en leesbaar */
.progress-copy,.progress-milestone,.qmeta .eyebrow,.backlink button,.likert-labels,.consent-row small,.consent-detail,#intro .fineprint,.topbar .tag,.customer-complete__card .eyebrow,.customer-complete__note{color:var(--s-fg-3)!important;}
.progress-copy strong,.progress-copy b,.progress-milestone.active,#intro p.lede,.layer-intro p,.customer-complete__card>p{color:var(--s-white)!important;}
.consent-detail{font-size:13.5px;}
.consent-title{display:block;font-family:var(--s-sans);font-size:14px;font-weight:600;color:var(--s-white);margin-bottom:10px;text-transform:none;letter-spacing:0;}

/* voortgangsbalk: vaste kolommen, niets schuift */
.progress-copy{display:grid;grid-template-columns:1fr auto 1fr;}
.progress-copy strong{min-width:11ch;font-variant-numeric:tabular-nums;}
.progress-copy span{text-align:center;white-space:nowrap;}
.progress-copy b{text-align:right;}
.progress-milestone.active i{background:var(--layer);}
@media(max-width:680px){.progress-copy{grid-template-columns:1fr auto;}.progress-copy span{grid-row:2;grid-column:1/-1;text-align:left;}}

/* onderdeel-intro in de kleur van het onderdeel */
.layer-intro .roman{font-family:var(--s-sans);font-style:normal;font-weight:700;letter-spacing:-.06em;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--layer);-webkit-text-fill-color:var(--layer);opacity:.9;}
.layer-intro .eyebrow{display:block;font-family:var(--s-sans);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--layer)!important;}

/* scherm vastzetten: vragen passen altijd zonder scrollen */
@media(min-height:560px){
  body:has(#question:not([hidden])),body:has(#layerIntro:not([hidden])){display:flex;flex-direction:column;height:100dvh;overflow:hidden;}
  body:has(#question:not([hidden])) .stage,body:has(#layerIntro:not([hidden])) .stage{flex:1 1 auto;min-height:0;width:100%;padding-top:0;padding-bottom:0;justify-content:center;}
}

/* vaste vraagopbouw: tekstvak heeft altijd dezelfde hoogte */
.qcard{display:flex;flex-direction:column;}
.qmeta{display:flex;justify-content:space-between;align-items:center;min-height:32px;margin-bottom:22px;}
.qmeta #qEyebrow{color:var(--layer)!important;font-weight:600;text-transform:none;}
.qmeta #qCounter{color:var(--s-white)!important;font-weight:600;font-variant-numeric:tabular-nums;min-width:9ch;text-align:center;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--layer) 26%,transparent);}
.qsource{display:none!important;}
.qtext{--lines:4;font-size:clamp(26px,3.3vw,40px);line-height:1.12;height:calc(var(--lines) * 1.12em);max-width:30ch;overflow:hidden;margin:0 0 36px;}
@media(max-width:680px){.qtext{--lines:6;font-size:24px;margin-bottom:28px;}}
@media(max-height:700px) and (min-width:681px){.qtext{font-size:32px;}}

/* meer kleur bij het antwoorden */
.likert button{border:1.5px solid rgba(255,255,255,.32);}
.likert button:hover{border-color:var(--layer);color:var(--s-white);background:color-mix(in srgb,var(--layer) 16%,transparent);}
.likert button.picked{background:var(--layer);border-color:var(--layer);color:var(--s-white);}
.likert-labels{margin-top:12px;}
body:has(#question:not([hidden]))::before,body:has(#layerIntro:not([hidden]))::before{
  content:'';position:fixed;inset:auto 0 0 0;height:55vh;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 80% at 50% 100%,color-mix(in srgb,var(--layer) 26%,transparent),transparent 70%);}

.layer-intro{position:relative;}
.layer-intro .roman{z-index:0;opacity:.28;right:0;top:50%;transform:translateY(-50%);font-size:clamp(180px,28vw,360px);line-height:.8;}
.layer-intro-inner{position:relative;z-index:1;}

/* V12.70 — privacytekst bij toestemming bewust grijs */
.consent-detail{color:#8C8C8C!important;}



/* =====================================================================
   V12.71 — huisstijl volgens thesynths.studio/brand (v1.9)
   Zwart, wit, cyaan #64D0EB (eerste stem: labels, knoppen) en
   magenta #DA5597 (tweede, spaarzaam). Inter Tight voor alles wat je
   leest (koppen 700, tekst 400–500); IBM Plex Mono alleen voor kleine
   labels, in kapitalen en ruim gespatieerd.
   ===================================================================== */
:root{--s-cyan:#64D0EB;--s-magenta:#DA5597;--s-pink:#DA5597;--layer:#64D0EB;
  --s-mono:'Synths Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;}

/* koppen 700 */
#intro h1,.layer-intro h2,.customer-complete__card h2{font-weight:700;}
#intro h1 em,.halfway .customer-complete__card h2 em{font-weight:700;color:var(--s-cyan);-webkit-text-fill-color:var(--s-cyan);}
.qtext{font-weight:500;}

/* kleine labels: IBM Plex Mono, kapitalen, ruim gespatieerd */
.progress-copy,.progress-milestone,.qmeta .eyebrow,.layer-intro .eyebrow,.customer-complete__card .eyebrow,
.consent-title,#intro .fineprint,.likert-labels,.backlink button,.start-brand .by{
  font-family:var(--s-mono)!important;text-transform:uppercase!important;letter-spacing:.12em!important;font-size:11px!important;font-weight:500;}
.progress-copy strong,.progress-copy b{font-size:11px!important;}
#intro .fineprint{line-height:1.8;}
.backlink button{font-size:11px!important;}

/* logo The Synths: Inter Tight 600, verloop van licht naar cyaan */
.ts-logo{font-family:var(--s-sans);font-weight:600;letter-spacing:-.035em;font-size:20px;text-transform:none;
  background:linear-gradient(90deg,#FFFFFF 0%,#E6F7FC 30%,#64D0EB 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.05em;}
.ts-logo sup{font-size:.42em;font-weight:600;vertical-align:.9em;margin-left:1px;-webkit-text-fill-color:#64D0EB;}
.topbar .tag .ts-logo{font-size:19px;}

/* Character Code-logo groot op de voorkant */
.start-brand{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:16px;row-gap:4px;align-items:center;justify-content:start;}
.start-brand .cc-mark{grid-row:1 / span 2;width:clamp(52px,6vw,72px);height:clamp(52px,6vw,72px);}
.start-brand .cc-word{font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1;align-self:end;}
.start-brand .by{display:flex;align-items:center;gap:8px;align-self:start;color:var(--s-fg-3)!important;}
.start-brand .by .ts-logo{font-size:16px;letter-spacing:-.035em;text-transform:none;font-family:var(--s-sans)!important;}
@media(max-width:860px){.start-brand{margin-bottom:9vh;}}

/* knoppen: cyaan met zwarte tekst */
button.cta,#intro button.cta{background:var(--s-cyan);border-color:var(--s-cyan);color:#000;font-weight:600;}
button.cta:hover,#intro button.cta:hover{background:transparent;color:var(--s-cyan);border-color:var(--s-cyan);}
.cta:disabled,#intro button.cta:disabled{background:transparent;color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.25);}
.consent-row input:checked{background:var(--s-cyan);border-color:var(--s-cyan);}

/* voortgang: cyaan, geen verloopvlak */
.progress-fill{background:var(--s-cyan);}
.progress-milestone.active i{background:var(--s-cyan);}

/* vragen: cyaan als eerste kleur, magenta spaarzaam */
.likert button.picked{background:var(--s-cyan);border-color:var(--s-cyan);color:#000;}
.likert button:hover{border-color:var(--s-cyan);background:rgba(100,208,235,.14);}
.qmeta #qCounter{background:rgba(100,208,235,.16);color:var(--s-cyan)!important;}
.layer-intro .roman{color:var(--s-magenta);-webkit-text-fill-color:var(--s-magenta);opacity:.32;}
.layer-intro .eyebrow{color:var(--s-cyan)!important;}
.customer-complete__card h2::after{background:var(--s-cyan);}
@media(max-width:680px){.progress-milestone{font-size:0!important;letter-spacing:0!important;}}

/* V12.72 — officieel The Synths-logo (brand v1.9, verloop op donker) */
.ts-logo-img{display:block;height:20px;width:auto;}
.topbar .tag .ts-logo-img{height:19px;}
.start-brand .by .ts-logo-img{height:15px;}
@media(max-width:680px){.topbar .tag .ts-logo-img{height:17px;}}

/* V12.74 — antwoordcirkels beter zichtbaar */
.likert button{border:2px solid rgba(255,255,255,.78);color:#FFFFFF;font-weight:600;}
.likert button:hover{border-color:var(--s-cyan);background:rgba(100,208,235,.16);}
.likert button.picked{border-color:var(--s-cyan);}

/* V12.74 — digital humans staan stil en blijven volledig in beeld */
.synths-wall{-webkit-mask-image:none;mask-image:none;}
.synths-track{--n:13;--w:calc(100vw / (var(--n) * .7 + .3));animation:none!important;transform:none!important;width:100vw;justify-content:flex-start;}
.synths-track img:nth-child(n+14){display:none;}
@media(max-width:760px){
  .synths-track{--n:7;}
  .synths-track img:nth-child(-n+3),.synths-track img:nth-child(n+11){display:none;}
}

/* V12.76 — verder waar je was */
.backlink{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:calc(84px * 5 + 16px * 4);}
#fwdBtn{background:none;border:0;cursor:pointer;padding:6px 0;font-family:var(--s-mono)!important;text-transform:uppercase;letter-spacing:.12em;font-size:11px!important;font-weight:500;color:var(--s-cyan)!important;}
#fwdBtn:hover{color:#fff!important;}
.resume-note{grid-column:2;grid-row:3;align-self:start;margin:22px 0 0;padding:12px 14px;border-radius:12px;background:rgba(100,208,235,.12);color:#fff;font-size:14px;line-height:1.5;max-width:44ch;}
#startBtn{grid-row:4;}
#intro .fineprint{grid-row:5;}
@media(max-width:860px){.resume-note{grid-column:1;grid-row:auto;margin:0 0 16px;}#startBtn,#intro .fineprint{grid-row:auto;}}

/* V12.77 — toegangscode */
.access-gate{min-height:calc(100dvh - 80px);display:flex;align-items:center;padding:0 clamp(20px,5vw,56px);}
.access-gate__inner{width:100%;max-width:560px;margin:0 auto;}
.access-gate .eyebrow{font-family:var(--s-mono);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--s-cyan);margin-bottom:14px;}
.access-gate h1{font-family:var(--s-sans);font-weight:700;font-size:clamp(36px,6vw,64px);line-height:1;letter-spacing:-.045em;margin:0 0 18px;color:#fff;}
.access-gate p{color:#fff;font-size:16px;line-height:1.6;margin:0 0 28px;max-width:46ch;}
#agForm{display:flex;gap:12px;flex-wrap:wrap;}
#agInput{flex:1 1 220px;min-width:0;height:60px;border-radius:999px;border:2px solid rgba(255,255,255,.78);background:transparent;color:#fff;
  font-family:var(--s-mono);font-size:24px;letter-spacing:.3em;text-align:center;text-transform:uppercase;padding:0 18px;}
#agInput::placeholder{color:rgba(255,255,255,.35);}
#agInput:focus{outline:none;border-color:var(--s-cyan);}
#agBtn{height:60px;padding:0 32px;}
.access-gate__error{min-height:1.6em;margin-top:14px!important;color:#FF8A7A!important;font-size:14px!important;}
body.needs-code .progress-rail{display:none;}
.access-gate__brand{position:static!important;margin:0 0 clamp(40px,9vh,88px)!important;}

/* V12.79 — onderdelen als rustige lijst aan de zijkant (desktop); alleen de 5 onderdelen */
@media (min-width:1180px){
  .progress-rail{-webkit-backdrop-filter:none;backdrop-filter:none;background:#000;border-bottom:0;padding-top:6px;padding-bottom:6px;}
  .progress-copy{display:none!important;}
  .progress-milestones{position:fixed;left:clamp(28px,3.4vw,56px);top:50%;transform:translateY(-50%);z-index:5;
    display:flex;flex-direction:column;align-items:flex-start;gap:26px;margin:0;max-width:none;width:auto;}
  .progress-milestones::before{content:'';position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.18);}
  .progress-milestone{position:relative;display:flex;align-items:center;gap:14px;font-size:11px!important;letter-spacing:.14em!important;color:rgba(255,255,255,.5)!important;white-space:nowrap;}
  .progress-milestone i{position:relative;z-index:1;width:9px;height:9px;border-radius:50%;background:#000;border:1.5px solid rgba(255,255,255,.4);box-shadow:none;flex:none;}
  .progress-milestone.done{color:rgba(255,255,255,.78)!important;}
  .progress-milestone.done i{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.78);}
  .progress-milestone.active{color:#fff!important;font-weight:500;}
  .progress-milestone.active i{background:var(--s-cyan);border-color:var(--s-cyan);box-shadow:0 0 0 5px rgba(100,208,235,.18);}
}
@media (max-width:1179px){
  .progress-copy{display:none!important;}
  .progress-milestones{margin-top:8px;}
}
@media (max-width:680px){
  .progress-milestones{justify-content:flex-start;gap:14px;}
  .progress-milestone{flex:none!important;}
  .progress-milestone.active{font-size:11px!important;letter-spacing:.14em!important;color:#fff!important;}
  .progress-milestone.active i{background:var(--s-cyan);}
}


/* =====================================================================
   V12.81 — studiolichten, kleur per onderdeel, digital human per hoofdstuk,
   vaste schermen (geen verspringen), geen decoratieve strepen
   ===================================================================== */
:root{--layer:#64D0EB;--layer-ink:#000;}

/* één consistente logobalk op elke pagina (ook pagina 1 en codescherm) */
body.on-intro .topbar{display:flex!important;}
.topbar{position:relative;z-index:3;padding-top:22px;padding-bottom:18px;}
.topbar .brand svg{width:30px!important;height:30px!important;}
.topbar .brand .cc-word{font-size:17px;}
.topbar .tag .ts-logo-img{height:21px;}
@media(max-width:680px){.topbar .brand svg{width:24px!important;height:24px!important}.topbar .brand .cc-word{font-size:15px}.topbar .tag .ts-logo-img{height:17px}}
.intro-hero{padding-top:clamp(12px,3vh,32px);}
.intro-hero .inner{min-height:calc(100vh - 170px);}
#intro h1{margin-top:clamp(24px,6vh,72px);}
.access-gate{min-height:calc(100dvh - 170px);}

/* geen strepen */
.customer-complete__card h2::after,.synths-wall::after{display:none!important;}
.consent-box,#intro .fineprint,.customer-complete .case-link-status{border-top:0!important;}
.consent-box{padding-top:0;}

/* ---------- studiolichten ---------- */
.studio-lights{position:fixed;inset:0 0 auto 0;height:100vh;pointer-events:none;z-index:-1;overflow:hidden;}
.lamp{position:absolute;top:-4px;width:58px;height:30px;transform:translateX(-50%);}
.lamp.l1{left:12%;--tilt:-22deg}.lamp.l2{left:34%;--tilt:-7deg}.lamp.l3{left:66%;--tilt:7deg}.lamp.l4{left:88%;--tilt:22deg}
.lamp::before{ /* armatuur */
  content:'';position:absolute;inset:0;border-radius:6px 6px 16px 16px;transform:rotate(var(--tilt));
  background:linear-gradient(180deg,#2b2b2b 0%,#141414 60%,#0a0a0a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 8px rgba(0,0,0,.6);}
.lamp span{ /* lens */
  position:absolute;left:50%;bottom:-3px;width:34px;height:8px;border-radius:50%;transform:translateX(-50%) rotate(var(--tilt));
  background:radial-gradient(ellipse at center,#fff 0%,color-mix(in srgb,var(--layer) 70%,#fff) 45%,transparent 75%);
  box-shadow:0 0 18px 6px color-mix(in srgb,var(--layer) 45%,transparent);transition:background .8s ease,box-shadow .8s ease;}
.lamp::after{ /* lichtbundel */
  content:'';position:absolute;left:50%;top:22px;width:min(46vw,620px);height:92vh;transform:translateX(-50%) rotate(var(--tilt));transform-origin:50% 0;
  clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--layer) 30%,rgba(255,255,255,.10)) 0%,color-mix(in srgb,var(--layer) 12%,transparent) 38%,transparent 82%);
  filter:blur(10px);opacity:.55;transition:background .8s ease;}
.lamp.l1::after,.lamp.l4::after{opacity:.35;}
@media(max-width:760px){.lamp.l1,.lamp.l4{display:none}.lamp.l2{left:22%;--tilt:-12deg}.lamp.l3{left:78%;--tilt:12deg}.lamp::after{width:90vw}}
body:has(#results:not([hidden])) .studio-lights{display:none;}

/* ---------- kleur per onderdeel ---------- */
.progress-fill{background:var(--layer)!important;transition:background .6s ease,width .3s ease;}
.likert button:hover{border-color:var(--layer)!important;background:color-mix(in srgb,var(--layer) 16%,transparent)!important;}
.likert button.picked{background:var(--layer)!important;border-color:var(--layer)!important;color:var(--layer-ink)!important;}
.qmeta #qEyebrow,.layer-intro .eyebrow{color:var(--layer)!important;}
.qmeta #qCounter{background:color-mix(in srgb,var(--layer) 18%,transparent)!important;color:var(--layer)!important;}
.layer-intro button.cta{background:var(--layer);border-color:var(--layer);color:var(--layer-ink);}
.layer-intro button.cta:hover{background:transparent;color:var(--layer);}
#fwdBtn{color:var(--layer)!important;}
@media(min-width:1180px){.progress-milestone.active i{background:var(--layer)!important;border-color:var(--layer)!important;box-shadow:0 0 0 5px color-mix(in srgb,var(--layer) 22%,transparent)!important;}}
@media(max-width:680px){.progress-milestone.active i{background:var(--layer)!important;}}
.backlink{max-width:calc(84px * 5 + 16px * 4);}

/* ---------- digital human bij elk nieuw hoofdstuk ---------- */
.layer-intro .roman{display:none!important;}
.layer-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:clamp(16px,4vw,56px);padding:0;}
.layer-intro-inner{grid-column:1;grid-row:1;}
.li-human{grid-column:2;grid-row:1;justify-self:center;align-self:end;width:auto;height:min(62vh,520px);aspect-ratio:456/528;object-fit:contain;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 98%);mask-image:linear-gradient(180deg,#000 62%,transparent 98%);
  filter:drop-shadow(0 0 40px color-mix(in srgb,var(--layer) 35%,transparent));animation:humanIn .7s cubic-bezier(.2,.7,.2,1) both;}
@keyframes humanIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .layer-intro{grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px;}
  .li-human{grid-column:1;grid-row:1;height:min(32vh,260px);}
  .layer-intro-inner{grid-row:2;}
  .layer-intro h2{font-size:clamp(34px,10vw,48px);}
}

/* ---------- tussenscherm en eindscherm: vast op schermhoogte, niets verspringt ---------- */
body:has(#halfway:not([hidden])),body:has(#customerComplete:not([hidden])){display:flex;flex-direction:column;height:100dvh;overflow:hidden;}
body:has(#halfway:not([hidden])) .stage,body:has(#customerComplete:not([hidden])) .stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;padding-top:0;padding-bottom:0;width:100%;}
#halfway:not([hidden]),#customerComplete:not([hidden]){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:clamp(16px,6vh,72px) 0 0;}
.synths-wall{margin-top:auto!important;flex:none;}
.synths-track img{height:calc(var(--w) * 528 / 456)!important;}
.customer-complete__card h2{margin-bottom:20px;}
@media(max-height:720px){.customer-complete__card h2{font-size:clamp(44px,9vw,96px)}}
.intro-hero,#intro{background:transparent!important;}
.halfway button.cta{background:var(--layer);border-color:var(--layer);color:var(--layer-ink);}
.halfway button.cta:hover{background:transparent;color:var(--layer);}
@media(max-width:680px){
  .progress-milestones{display:flex!important;justify-content:flex-start!important;gap:16px!important;padding:0!important;}
  .progress-milestone{flex:0 0 auto!important;width:auto!important;justify-content:flex-start!important;text-align:left!important;}
}

/* V12.83 — digital humans: vast onderaan het scherm, zonder procent-marges (Safari-proof) */
:root{--wall-n:13;--wall-w:calc(100vw / 9.4);}
@media(max-width:760px){:root{--wall-n:7;--wall-w:calc(100vw / 5.2);}}
#halfway .synths-wall,#customerComplete .synths-wall{
  position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
  width:100%!important;max-width:none!important;margin:0!important;transform:none!important;z-index:1;}
#halfway .synths-track,#customerComplete .synths-track{--w:var(--wall-w)!important;width:100%!important;margin:0!important;padding:0!important;
  display:flex!important;justify-content:flex-start!important;transform:none!important;animation:none!important;}
#halfway .synths-track img,#customerComplete .synths-track img{flex:0 0 var(--wall-w)!important;width:var(--wall-w)!important;height:calc(var(--wall-w) * 528 / 456)!important;
  margin:0 calc(var(--wall-w) * -.3) 0 0!important;max-width:none!important;}
#halfway:not([hidden]),#customerComplete:not([hidden]){padding-bottom:calc(var(--wall-w) * 528 / 456 + 12px)!important;}


/* =====================================================================
   V12.84 — digital humans als groepsfoto op een podium
   Drie rijen met diepte (achter klein en donkerder, voor groot en licht),
   een lichtgolf die langzaam langs alle gezichten trekt en een vloerlicht.
   Alleen licht beweegt, de opstelling zelf staat stil: niets verspringt.
   ===================================================================== */
:root{--stage-h:min(46vh,430px);}
@media(max-width:760px){:root{--stage-h:min(36vh,300px);}}
#halfway .synths-wall.stage,#customerComplete .synths-wall.stage{height:var(--stage-h)!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;}
#halfway .synths-wall.stage .synths-track,#customerComplete .synths-wall.stage .synths-track{display:block!important;position:relative!important;height:100%!important;width:100%!important;}
#halfway .synths-wall.stage .synths-track img,#customerComplete .synths-wall.stage .synths-track img{
  position:absolute!important;display:none;width:auto!important;flex:none!important;margin:0!important;aspect-ratio:456/528;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 97%)!important;mask-image:linear-gradient(180deg,#000 60%,transparent 97%)!important;
  filter:brightness(var(--b,1)) saturate(calc(.75 + var(--b,1) * .25));
  animation:stageWave 9s ease-in-out infinite;animation-delay:var(--d,0s);}
#halfway .synths-wall.stage .synths-track img:nth-child(-n+13),#customerComplete .synths-wall.stage .synths-track img:nth-child(-n+13){display:block;}
#halfway .synths-wall.stage .synths-track img:nth-child(n+14),#customerComplete .synths-wall.stage .synths-track img:nth-child(n+14){display:none!important;}
@keyframes stageWave{
  0%,100%{filter:brightness(var(--b,1)) saturate(calc(.75 + var(--b,1) * .25));}
  45%{filter:brightness(calc(var(--b,1) * 1.28 + .08)) saturate(1.05) drop-shadow(0 0 22px color-mix(in srgb,var(--layer) 45%,transparent));}
}
/* vloerlicht en een zachte spot die over het podium schuift */
#halfway .synths-wall.stage::before,#customerComplete .synths-wall.stage::before{
  content:'';position:absolute;left:50%;bottom:-6%;width:min(1100px,96vw);height:42%;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 70%,color-mix(in srgb,var(--layer) 34%,transparent),transparent 72%);filter:blur(6px);}
#halfway .synths-wall.stage::after,#customerComplete .synths-wall.stage::after{
  content:''!important;display:block!important;position:absolute;inset:-20% 0 0 0;z-index:4;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(18% 70% at 50% 40%,rgba(255,255,255,.55),transparent 70%);background-size:200% 100%;
  animation:stageSweep 9s ease-in-out infinite alternate;}
@keyframes stageSweep{from{background-position:100% 0}to{background-position:0 0}}
#halfway:not([hidden]),#customerComplete:not([hidden]){padding-bottom:calc(var(--stage-h) * .88)!important;}
@media(prefers-reduced-motion:reduce){
  #halfway .synths-wall.stage .synths-track img,#customerComplete .synths-wall.stage .synths-track img,
  #halfway .synths-wall.stage::after,#customerComplete .synths-wall.stage::after{animation:none!important;}
}
#halfway .synths-wall.stage .synths-track img:nth-child(2),#customerComplete .synths-wall.stage .synths-track img:nth-child(2){left:24%;height:56%!important;bottom:34%;z-index:1;--b:.55;--d:0.74s;}
#halfway .synths-wall.stage .synths-track img:nth-child(5),#customerComplete .synths-wall.stage .synths-track img:nth-child(5){left:41%;height:56%!important;bottom:34%;z-index:1;--b:.55;--d:1.85s;}
#halfway .synths-wall.stage .synths-track img:nth-child(8),#customerComplete .synths-wall.stage .synths-track img:nth-child(8){left:59%;height:56%!important;bottom:34%;z-index:1;--b:.55;--d:2.96s;}
#halfway .synths-wall.stage .synths-track img:nth-child(12),#customerComplete .synths-wall.stage .synths-track img:nth-child(12){left:76%;height:56%!important;bottom:34%;z-index:1;--b:.55;--d:4.44s;}
#halfway .synths-wall.stage .synths-track img:nth-child(1),#customerComplete .synths-wall.stage .synths-track img:nth-child(1){left:17%;height:72%!important;bottom:16%;z-index:2;--b:.78;--d:0.37s;}
#halfway .synths-wall.stage .synths-track img:nth-child(4),#customerComplete .synths-wall.stage .synths-track img:nth-child(4){left:33%;height:72%!important;bottom:16%;z-index:2;--b:.78;--d:1.48s;}
#halfway .synths-wall.stage .synths-track img:nth-child(9),#customerComplete .synths-wall.stage .synths-track img:nth-child(9){left:50%;height:72%!important;bottom:16%;z-index:2;--b:.78;--d:3.33s;}
#halfway .synths-wall.stage .synths-track img:nth-child(10),#customerComplete .synths-wall.stage .synths-track img:nth-child(10){left:67%;height:72%!important;bottom:16%;z-index:2;--b:.78;--d:3.70s;}
#halfway .synths-wall.stage .synths-track img:nth-child(13),#customerComplete .synths-wall.stage .synths-track img:nth-child(13){left:83%;height:72%!important;bottom:16%;z-index:2;--b:.78;--d:0.21s;}
#halfway .synths-wall.stage .synths-track img:nth-child(2),#customerComplete .synths-wall.stage .synths-track img:nth-child(2){left:22%;height:48%!important;bottom:50%;z-index:1;--b:.55;--d:0.74s;}
#halfway .synths-wall.stage .synths-track img:nth-child(5),#customerComplete .synths-wall.stage .synths-track img:nth-child(5){left:40%;height:48%!important;bottom:50%;z-index:1;--b:.55;--d:1.85s;}
#halfway .synths-wall.stage .synths-track img:nth-child(8),#customerComplete .synths-wall.stage .synths-track img:nth-child(8){left:60%;height:48%!important;bottom:50%;z-index:1;--b:.55;--d:2.96s;}
#halfway .synths-wall.stage .synths-track img:nth-child(12),#customerComplete .synths-wall.stage .synths-track img:nth-child(12){left:78%;height:48%!important;bottom:50%;z-index:1;--b:.55;--d:4.44s;}
#halfway .synths-wall.stage .synths-track img:nth-child(1),#customerComplete .synths-wall.stage .synths-track img:nth-child(1){left:12%;height:62%!important;bottom:26%;z-index:2;--b:.78;--d:0.37s;}
#halfway .synths-wall.stage .synths-track img:nth-child(4),#customerComplete .synths-wall.stage .synths-track img:nth-child(4){left:31%;height:62%!important;bottom:26%;z-index:2;--b:.78;--d:1.48s;}
#halfway .synths-wall.stage .synths-track img:nth-child(9),#customerComplete .synths-wall.stage .synths-track img:nth-child(9){left:50%;height:62%!important;bottom:26%;z-index:2;--b:.78;--d:3.33s;}
#halfway .synths-wall.stage .synths-track img:nth-child(10),#customerComplete .synths-wall.stage .synths-track img:nth-child(10){left:69%;height:62%!important;bottom:26%;z-index:2;--b:.78;--d:3.70s;}
#halfway .synths-wall.stage .synths-track img:nth-child(13),#customerComplete .synths-wall.stage .synths-track img:nth-child(13){left:88%;height:62%!important;bottom:26%;z-index:2;--b:.78;--d:0.21s;}
#halfway .synths-wall.stage .synths-track img:nth-child(7),#customerComplete .synths-wall.stage .synths-track img:nth-child(7){left:22%;height:80%!important;bottom:0%;z-index:3;--b:1;--d:2.59s;}
#halfway .synths-wall.stage .synths-track img:nth-child(3),#customerComplete .synths-wall.stage .synths-track img:nth-child(3){left:40%;height:80%!important;bottom:0%;z-index:3;--b:1;--d:1.11s;}
#halfway .synths-wall.stage .synths-track img:nth-child(6),#customerComplete .synths-wall.stage .synths-track img:nth-child(6){left:60%;height:80%!important;bottom:0%;z-index:3;--b:1;--d:2.22s;}
#halfway .synths-wall.stage .synths-track img:nth-child(11),#customerComplete .synths-wall.stage .synths-track img:nth-child(11){left:78%;height:80%!important;bottom:0%;z-index:3;--b:1;--d:4.07s;}
@media(max-width:760px){
#halfway .synths-wall.stage .synths-track img,#customerComplete .synths-wall.stage .synths-track img{display:none!important;}
#halfway .synths-wall.stage .synths-track img:nth-child(4),#customerComplete .synths-wall.stage .synths-track img:nth-child(4){display:block!important;left:28%;height:58%!important;bottom:38%;z-index:1;--b:.62;}
#halfway .synths-wall.stage .synths-track img:nth-child(9),#customerComplete .synths-wall.stage .synths-track img:nth-child(9){display:block!important;left:50%;height:58%!important;bottom:38%;z-index:1;--b:.62;}
#halfway .synths-wall.stage .synths-track img:nth-child(10),#customerComplete .synths-wall.stage .synths-track img:nth-child(10){display:block!important;left:72%;height:58%!important;bottom:38%;z-index:1;--b:.62;}
#halfway .synths-wall.stage .synths-track img:nth-child(7),#customerComplete .synths-wall.stage .synths-track img:nth-child(7){display:block!important;left:18%;height:80%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(3),#customerComplete .synths-wall.stage .synths-track img:nth-child(3){display:block!important;left:39%;height:80%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(6),#customerComplete .synths-wall.stage .synths-track img:nth-child(6){display:block!important;left:61%;height:80%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(11),#customerComplete .synths-wall.stage .synths-track img:nth-child(11){display:block!important;left:82%;height:80%!important;bottom:0%;z-index:3;--b:1;}
}

:root{--stage-h:min(52vh,480px);}
@media(max-width:760px){:root{--stage-h:min(38vh,320px);}}
#halfway:not([hidden]),#customerComplete:not([hidden]){padding-bottom:calc(var(--stage-h) * .96)!important;}
:root{--stage-h:min(46vh,440px);}
@media(max-width:760px){:root{--stage-h:min(36vh,300px);}}
.customer-complete__card{position:relative;z-index:6;}
#halfway .customer-complete__card h2{font-size:clamp(44px,min(8vw,10vh),120px)!important;}
#customerComplete .customer-complete__card h2{font-size:clamp(48px,min(11vw,12vh),140px)!important;}
#halfway .synths-wall.stage::after,#customerComplete .synths-wall.stage::after{inset:0!important;-webkit-mask-image:linear-gradient(180deg,transparent,#000 35%);mask-image:linear-gradient(180deg,transparent,#000 35%);}
/* lichtgolf zit al in de gezichten; aparte sweep-laag weg (gaf een randje) */
#halfway .synths-wall.stage::after,#customerComplete .synths-wall.stage::after{display:none!important;content:none!important;animation:none!important;}

@media(max-width:760px){
#halfway .synths-wall.stage .synths-track img,#customerComplete .synths-wall.stage .synths-track img{display:none!important;}
#halfway .synths-wall.stage .synths-track img:nth-child(4),#customerComplete .synths-wall.stage .synths-track img:nth-child(4){display:block!important;left:13%;height:50%!important;bottom:42%;z-index:1;--b:.66;}
#halfway .synths-wall.stage .synths-track img:nth-child(6),#customerComplete .synths-wall.stage .synths-track img:nth-child(6){display:block!important;left:38%;height:50%!important;bottom:42%;z-index:1;--b:.66;}
#halfway .synths-wall.stage .synths-track img:nth-child(9),#customerComplete .synths-wall.stage .synths-track img:nth-child(9){display:block!important;left:62%;height:50%!important;bottom:42%;z-index:1;--b:.66;}
#halfway .synths-wall.stage .synths-track img:nth-child(10),#customerComplete .synths-wall.stage .synths-track img:nth-child(10){display:block!important;left:87%;height:50%!important;bottom:42%;z-index:1;--b:.66;}
#halfway .synths-wall.stage .synths-track img:nth-child(7),#customerComplete .synths-wall.stage .synths-track img:nth-child(7){display:block!important;left:19%;height:72%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(3),#customerComplete .synths-wall.stage .synths-track img:nth-child(3){display:block!important;left:50%;height:72%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(11),#customerComplete .synths-wall.stage .synths-track img:nth-child(11){display:block!important;left:81%;height:72%!important;bottom:0%;z-index:3;--b:1;}
}

/* V12.85 — Ruud (synth-01) vooraan in het midden */
#halfway .synths-wall.stage .synths-track img:nth-child(2),#customerComplete .synths-wall.stage .synths-track img:nth-child(2){left:16%;height:48%!important;bottom:50%;z-index:1;--b:.55;}
#halfway .synths-wall.stage .synths-track img:nth-child(5),#customerComplete .synths-wall.stage .synths-track img:nth-child(5){left:33%;height:48%!important;bottom:50%;z-index:1;--b:.55;}
#halfway .synths-wall.stage .synths-track img:nth-child(8),#customerComplete .synths-wall.stage .synths-track img:nth-child(8){left:67%;height:48%!important;bottom:50%;z-index:1;--b:.55;}
#halfway .synths-wall.stage .synths-track img:nth-child(12),#customerComplete .synths-wall.stage .synths-track img:nth-child(12){left:84%;height:48%!important;bottom:50%;z-index:1;--b:.55;}
#halfway .synths-wall.stage .synths-track img:nth-child(4),#customerComplete .synths-wall.stage .synths-track img:nth-child(4){left:24.5%;height:62%!important;bottom:26%;z-index:2;--b:.78;}
#halfway .synths-wall.stage .synths-track img:nth-child(9),#customerComplete .synths-wall.stage .synths-track img:nth-child(9){left:41.5%;height:62%!important;bottom:26%;z-index:2;--b:.78;}
#halfway .synths-wall.stage .synths-track img:nth-child(10),#customerComplete .synths-wall.stage .synths-track img:nth-child(10){left:58.5%;height:62%!important;bottom:26%;z-index:2;--b:.78;}
#halfway .synths-wall.stage .synths-track img:nth-child(13),#customerComplete .synths-wall.stage .synths-track img:nth-child(13){left:75.5%;height:62%!important;bottom:26%;z-index:2;--b:.78;}
#halfway .synths-wall.stage .synths-track img:nth-child(7),#customerComplete .synths-wall.stage .synths-track img:nth-child(7){left:16%;height:80%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(3),#customerComplete .synths-wall.stage .synths-track img:nth-child(3){left:33%;height:80%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(1),#customerComplete .synths-wall.stage .synths-track img:nth-child(1){left:50%;height:80%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(6),#customerComplete .synths-wall.stage .synths-track img:nth-child(6){left:67%;height:80%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(11),#customerComplete .synths-wall.stage .synths-track img:nth-child(11){left:84%;height:80%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(1),#customerComplete .synths-wall.stage .synths-track img:nth-child(1){height:84%!important;z-index:4;}
@media(max-width:760px){
#halfway .synths-wall.stage .synths-track img,#customerComplete .synths-wall.stage .synths-track img{display:none!important;}
#halfway .synths-wall.stage .synths-track img:nth-child(4),#customerComplete .synths-wall.stage .synths-track img:nth-child(4){display:block!important;left:13%;height:50%!important;bottom:42%;z-index:1;--b:.66;}
#halfway .synths-wall.stage .synths-track img:nth-child(3),#customerComplete .synths-wall.stage .synths-track img:nth-child(3){display:block!important;left:38%;height:50%!important;bottom:42%;z-index:1;--b:.66;}
#halfway .synths-wall.stage .synths-track img:nth-child(9),#customerComplete .synths-wall.stage .synths-track img:nth-child(9){display:block!important;left:62%;height:50%!important;bottom:42%;z-index:1;--b:.66;}
#halfway .synths-wall.stage .synths-track img:nth-child(10),#customerComplete .synths-wall.stage .synths-track img:nth-child(10){display:block!important;left:87%;height:50%!important;bottom:42%;z-index:1;--b:.66;}
#halfway .synths-wall.stage .synths-track img:nth-child(7),#customerComplete .synths-wall.stage .synths-track img:nth-child(7){display:block!important;left:19%;height:72%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(1),#customerComplete .synths-wall.stage .synths-track img:nth-child(1){display:block!important;left:50%;height:72%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(11),#customerComplete .synths-wall.stage .synths-track img:nth-child(11){display:block!important;left:81%;height:72%!important;bottom:0%;z-index:3;--b:1;}
#halfway .synths-wall.stage .synths-track img:nth-child(1),#customerComplete .synths-wall.stage .synths-track img:nth-child(1){height:76%!important;z-index:4;}
}

/* V12.86 — studiolichten zonder blokken: bundels als zachte kegel (conic-gradient), geen clip-path + blur
   (Safari tekende daardoor de hele rechthoek), en geen zwarte balken bovenin die het licht afsnijden. */
.lamp::after{
  clip-path:none!important;filter:none!important;
  width:170vh!important;height:96vh!important;top:18px!important;opacity:1!important;
  background:conic-gradient(at 50% 0%,
    transparent 0deg 158deg,
    color-mix(in srgb,var(--layer) 9%,transparent) 166deg,
    color-mix(in srgb,var(--layer) 20%,rgba(255,255,255,.05)) 174deg 186deg,
    color-mix(in srgb,var(--layer) 9%,transparent) 194deg,
    transparent 202deg 360deg)!important;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.75) 35%,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.75) 35%,transparent 88%);
}
.lamp.l1::after,.lamp.l4::after{opacity:.7!important;}
@media(max-width:760px){.lamp::after{width:150vh!important;}}
/* bovenbalk en voortgangsbalk doorzichtig, zodat het licht vanaf de lampen doorloopt */
.topbar{background:transparent!important;}
.progress-rail{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:0!important;box-shadow:none!important;}
.lamp.l1{left:19%;}.lamp.l2{left:39%;}.lamp.l3{left:61%;}.lamp.l4{left:81%;}
@media(max-width:760px){.lamp.l2{left:30%}.lamp.l3{left:70%}}

/* =====================================================================
   V12.87 — "Even een break.": dampende koffie, de groep doet de wave
   en de digital humans moedigen je aan met tekstballonnetjes
   ===================================================================== */
.hw-head{display:flex;align-items:flex-end;gap:clamp(10px,2vw,22px);}
.hw-head h2{margin-bottom:20px!important;}
.coffee{flex:none;width:clamp(44px,6vw,76px);height:clamp(44px,6vw,76px);margin-bottom:clamp(22px,3.2vh,34px);}
.coffee svg{width:100%;height:100%;overflow:visible;}
.coffee .cup{stroke:#fff;stroke-width:3.2;}
.coffee .steam{stroke:var(--layer);stroke-width:2.6;opacity:0;animation:steam 2.6s ease-in-out infinite;}
.coffee .s2{animation-delay:.6s}.coffee .s3{animation-delay:1.2s}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}30%{opacity:.95}100%{opacity:0;transform:translateY(-10px)}}

/* de wave: om de beurt even omhoog, van links naar rechts */
#halfway .synths-wall.stage .synths-track img{animation:stageWave 9s ease-in-out infinite,hop 5s cubic-bezier(.3,.7,.3,1) infinite!important;animation-delay:var(--d,0s),var(--hop,0s)!important;}
@keyframes hop{0%,22%,100%{translate:0 0}9%{translate:0 -7%}14%{translate:0 1%}}
#halfway .synths-track img:nth-child(7),#halfway .synths-track img:nth-child(2){--hop:.20s}
#halfway .synths-track img:nth-child(4){--hop:.33s}
#halfway .synths-track img:nth-child(3),#halfway .synths-track img:nth-child(5){--hop:.45s}
#halfway .synths-track img:nth-child(9){--hop:.57s}
#halfway .synths-track img:nth-child(1){--hop:.70s}
#halfway .synths-track img:nth-child(10){--hop:.82s}
#halfway .synths-track img:nth-child(6),#halfway .synths-track img:nth-child(8){--hop:.95s}
#halfway .synths-track img:nth-child(13){--hop:1.07s}
#halfway .synths-track img:nth-child(11),#halfway .synths-track img:nth-child(12){--hop:1.2s}

/* tekstballonnetjes */
.hw-bubbles{position:absolute;inset:0;z-index:8;pointer-events:none;}
.hw-bubble{position:absolute;transform:translateX(-50%);white-space:nowrap;padding:9px 14px;border-radius:16px;
  background:#fff;color:#000;font-family:var(--s-sans);font-weight:600;font-size:clamp(13px,1.2vw,16px);letter-spacing:-.01em;
  box-shadow:0 8px 24px rgba(0,0,0,.35);animation:bubble 2.6s cubic-bezier(.2,.8,.2,1) both;}
.hw-bubble::after{content:'';position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:2px;}
@keyframes bubble{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.6)}12%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.06)}20%{transform:translateX(-50%) scale(1)}82%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.coffee .steam{animation:none;opacity:.8}#halfway .synths-wall.stage .synths-track img{animation:none!important}}

/* =====================================================================
   V12.88 — "Even een break.": laadring in huisstijl (licht → cyaan verloop,
   Inter Tight cijfers, IBM Plex Mono label). Koffie en ballonnetjes weg.
   ===================================================================== */
.coffee,.hw-bubbles,.hw-bubble{display:none!important;}
.hw-head{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,4vw,56px);}
.hw-loader{position:relative;flex:none;width:clamp(96px,11vw,150px);aspect-ratio:1;display:grid;place-items:center;}
.hw-loader svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;}
.hw-loader .trk{fill:none;stroke:rgba(255,255,255,.12);stroke-width:3;}
.hw-loader .arc{fill:none;stroke:url(#hwGrad);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;}
.hw-loader .orbit{transform-origin:60px 60px;}
.hw-loader .dot{fill:#64D0EB;filter:drop-shadow(0 0 6px rgba(100,208,235,.9));}
#halfway.is-charging .hw-loader .arc{animation:charge 1.6s cubic-bezier(.2,.7,.2,1) forwards;}
#halfway.is-charging .hw-loader .orbit{animation:orbit 2.4s linear infinite;}
@keyframes charge{to{stroke-dashoffset:50}}
@keyframes orbit{to{transform:rotate(360deg)}}
.hw-loader__num{position:relative;display:flex;align-items:baseline;font-family:var(--s-sans);color:#fff;line-height:1;margin-top:-10%;}
.hw-loader__num b{font-weight:700;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.hw-loader__num i{font-style:normal;font-weight:600;font-size:clamp(14px,1.4vw,18px);margin-left:2px;color:#64D0EB;}
.hw-loader__lbl{position:absolute;left:0;right:0;bottom:24%;text-align:center;font-family:var(--s-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);}
#halfway.is-charging .hw-loader{animation:breathe 3.2s ease-in-out 1.6s infinite;}
@keyframes breathe{50%{filter:drop-shadow(0 0 18px rgba(100,208,235,.35))}}
@media(max-width:760px){.hw-loader{width:84px}.hw-loader__lbl{font-size:8px;bottom:21%}}
@media(prefers-reduced-motion:reduce){.hw-loader .arc{stroke-dashoffset:50}.hw-loader .orbit,#halfway.is-charging .hw-loader{animation:none!important}}
.hw-loader__num b{display:inline-block;min-width:2ch;text-align:right;}

/* =====================================================================
   V12.89 — laadring groter, met het Character Code-icoon dat "laadt":
   raster verschijnt, scanner draait, karaktervorm groeit en punten lichten op
   ===================================================================== */
.hw-load{flex:none;display:flex;flex-direction:column;align-items:center;gap:14px;}
.hw-loader{width:clamp(150px,16vw,230px)!important;}
.hw-loader__num,.hw-loader__lbl{display:none!important;}
.hw-loader .trk{stroke-width:2.2;}
.hw-loader .arc{stroke-width:4;}
.hw-loader .mark .g{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;opacity:0;}
.hw-loader .mark .shape{fill:url(#hwGrad);fill-opacity:.18;stroke:url(#hwGrad);stroke-width:2.4;stroke-linejoin:round;transform-origin:50px 50px;transform:scale(.08);opacity:0;}
.hw-loader .mark .v{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;}
.hw-loader .mark .core{fill:#64D0EB;}
.hw-loader .mark .sweep{transform-origin:50px 50px;opacity:0;}
#halfway.is-charging .hw-loader .mark .g{animation:fadeIn .5s ease forwards;}
#halfway.is-charging .hw-loader .mark .sweep{animation:fadeIn .4s ease .2s forwards,orbit 2.2s linear infinite;}
#halfway.is-charging .hw-loader .mark .shape{animation:grow 1.6s cubic-bezier(.2,.8,.2,1) .25s forwards;}
#halfway.is-charging .hw-loader .mark .v{animation:pop .45s cubic-bezier(.2,1.4,.4,1) forwards,blink 3.2s ease-in-out 2.4s infinite;}
#halfway.is-charging .hw-loader .mark .v0{animation-delay:.55s,2.4s}#halfway.is-charging .hw-loader .mark .v1{animation-delay:.75s,2.9s}
#halfway.is-charging .hw-loader .mark .v2{animation-delay:.95s,3.4s}#halfway.is-charging .hw-loader .mark .v3{animation-delay:1.15s,3.9s}
#halfway.is-charging .hw-loader .mark .v4{animation-delay:1.35s,4.4s}#halfway.is-charging .hw-loader .mark .v5{animation-delay:1.55s,4.9s}
@keyframes fadeIn{to{opacity:1}}
@keyframes grow{0%{opacity:0;transform:scale(.08)}30%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes pop{0%{opacity:0;transform:scale(0)}100%{opacity:.95;transform:scale(1)}}
@keyframes blink{0%,100%{fill:#fff}50%{fill:#64D0EB}}
.hw-loader__meta{display:flex;align-items:baseline;gap:6px;font-family:var(--s-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);white-space:nowrap;}
.hw-loader__meta b{font-family:var(--s-sans);font-weight:700;font-size:22px;letter-spacing:-.03em;color:#fff;display:inline-block;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums;}
.hw-loader__meta i{font-style:normal;color:#64D0EB;font-family:var(--s-sans);font-weight:600;font-size:14px;margin-right:4px;}
@media(max-width:760px){.hw-loader{width:104px!important}.hw-load{gap:8px}.hw-loader__meta{font-size:9px}.hw-loader__meta b{font-size:16px}}
@media(prefers-reduced-motion:reduce){.hw-loader .mark .g,.hw-loader .mark .v{opacity:1}.hw-loader .mark .shape{opacity:1;transform:none}.hw-loader .mark .sweep{display:none}}

/* V12.90 — eindanimatie: zwart scherm, groot ladend icoon tot 100% */
.finish-loader{position:fixed;inset:0;z-index:10000;background:#000;display:grid;place-items:center;opacity:1;transition:opacity .6s ease;}
.finish-loader[hidden]{display:none!important;}
.finish-loader.is-leaving{opacity:0;}
.finish-loader__inner{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,3vh,28px);}
.finish-ring{width:min(46vh,62vw,420px)!important;}
.finish-meta{font-size:13px!important;}
.finish-meta b{font-size:clamp(28px,4vh,40px)!important;}
.finish-meta i{font-size:18px!important;}
.finish-loader .mark .g{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;opacity:0;}
.finish-loader .mark .shape{fill:url(#fGrad);fill-opacity:.18;stroke:url(#fGrad);stroke-width:2.4;stroke-linejoin:round;transform-origin:50px 50px;transform:scale(.08);opacity:0;}
.finish-loader .mark .v{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;}
.finish-loader .mark .core{fill:#64D0EB;}
.finish-loader .mark .sweep{transform-origin:50px 50px;opacity:0;}
.finish-loader .trk{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2.2;}
.finish-loader .arc{fill:none;stroke:url(#fGrad);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;}
.finish-loader .orbit{transform-origin:60px 60px;}
.finish-loader .dot{fill:#64D0EB;filter:drop-shadow(0 0 6px rgba(100,208,235,.9));}
.finish-loader.is-charging .arc{animation:chargeFull 2.4s cubic-bezier(.2,.7,.2,1) forwards;}
.finish-loader.is-charging .orbit{animation:orbit 1.6s linear infinite;}
.finish-loader.is-charging .mark .g{animation:fadeIn .5s ease forwards;}
.finish-loader.is-charging .mark .sweep{animation:fadeIn .4s ease .2s forwards,orbit 1.8s linear infinite;}
.finish-loader.is-charging .mark .shape{animation:grow 2.2s cubic-bezier(.2,.8,.2,1) .2s forwards;}
.finish-loader.is-charging .mark .v{animation:pop .45s cubic-bezier(.2,1.4,.4,1) forwards;}
.finish-loader.is-charging .mark .v0{animation-delay:.5s}.finish-loader.is-charging .mark .v1{animation-delay:.85s}
.finish-loader.is-charging .mark .v2{animation-delay:1.2s}.finish-loader.is-charging .mark .v3{animation-delay:1.55s}
.finish-loader.is-charging .mark .v4{animation-delay:1.9s}.finish-loader.is-charging .mark .v5{animation-delay:2.2s}
@keyframes chargeFull{to{stroke-dashoffset:0}}
.finish-loader.is-charging .finish-ring{animation:ringGlow 1s ease 2.4s forwards;}
@keyframes ringGlow{50%{filter:drop-shadow(0 0 28px rgba(100,208,235,.65))}100%{filter:drop-shadow(0 0 12px rgba(100,208,235,.35))}}
body.finishing{overflow:hidden;}

/* V12.91 — onthulling: titel springt op, digital humans komen om de beurt omhoog, samen met de confetti */
#customerComplete.is-revealed .customer-complete__card>*{animation:revealUp .7s cubic-bezier(.2,.8,.2,1) both;}
#customerComplete.is-revealed .customer-complete__card .eyebrow{animation-delay:.05s}
#customerComplete.is-revealed .customer-complete__card h2{animation:revealPop .8s cubic-bezier(.2,1.3,.3,1) .1s both;}
#customerComplete.is-revealed .customer-complete__card>p{animation-delay:.3s}
#customerComplete.is-revealed .customer-complete__card .case-link-status{animation-delay:.4s}
#customerComplete.is-revealed .customer-complete__card .customer-complete__note{animation-delay:.5s}
@keyframes revealUp{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes revealPop{0%{opacity:0;scale:.86}60%{opacity:1;scale:1.03}100%{opacity:1;scale:1}}
#customerComplete.is-revealed .synths-wall.stage .synths-track img{
  animation:riseIn .9s cubic-bezier(.2,1.1,.3,1) both,stageWave 9s ease-in-out infinite!important;
  animation-delay:var(--rise,0s),calc(var(--d,0s) + 1.4s)!important;}
@keyframes riseIn{0%{opacity:0;translate:0 26%}70%{opacity:1;translate:0 -3%}100%{opacity:1;translate:0 0}}
#customerComplete .synths-track img:nth-child(1){--rise:.15s}
#customerComplete .synths-track img:nth-child(3),#customerComplete .synths-track img:nth-child(6){--rise:.28s}
#customerComplete .synths-track img:nth-child(7),#customerComplete .synths-track img:nth-child(11){--rise:.4s}
#customerComplete .synths-track img:nth-child(9),#customerComplete .synths-track img:nth-child(10){--rise:.52s}
#customerComplete .synths-track img:nth-child(4),#customerComplete .synths-track img:nth-child(13){--rise:.64s}
#customerComplete .synths-track img:nth-child(5),#customerComplete .synths-track img:nth-child(8){--rise:.76s}
#customerComplete .synths-track img:nth-child(2),#customerComplete .synths-track img:nth-child(12){--rise:.88s}
@media(prefers-reduced-motion:reduce){#customerComplete.is-revealed *{animation:none!important}}


/* =====================================================================
   V12.94 — aantekeningen-ronde
   ===================================================================== */
/* 1. studiolampen zwart */
.lamp::before{background:#000!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.04)!important;}
.lamp span{width:26px!important;height:5px!important;box-shadow:0 0 12px 3px color-mix(in srgb,var(--layer) 30%,transparent)!important;}

/* 4 + 6 + 9. digital humans rustig: geen opspringen, geen wave, geen gloedrand; alleen zacht infaden */
#halfway .synths-wall.stage .synths-track img,#customerComplete .synths-wall.stage .synths-track img,
#customerComplete.is-revealed .synths-wall.stage .synths-track img{
  animation:none!important;translate:none!important;filter:brightness(var(--b,1))!important;opacity:1;}
#customerComplete.is-revealed .synths-wall.stage .synths-track img{animation:humansFade 1.2s ease both!important;animation-delay:.2s!important;}
@keyframes humansFade{from{opacity:0}to{opacity:1}}
.synths-track img{filter:none;}
#halfway .synths-wall.stage::before,#customerComplete .synths-wall.stage::before{opacity:.7;}
.li-human{animation:none!important;transform:none!important;opacity:0;transition:opacity .6s ease;filter:none!important;}
.li-human.is-in{opacity:1;}
#customerComplete.is-revealed .customer-complete__card h2{animation:revealUp .8s ease .1s both!important;}

/* 5. laadicoon zonder ring en lijnen: alleen het logo dat zich opbouwt */
.hw-loader .trk,.hw-loader .arc,.hw-loader .orbit,.finish-loader .trk,.finish-loader .arc,.finish-loader .orbit{display:none!important;}
.hw-loader svg,.finish-loader svg{transform:none!important;}
.hw-loader .mark .sweep,.finish-loader .mark .sweep{display:none!important;}
.finish-loader.is-charging .mark .shape{animation-duration:3.8s!important;}
.finish-loader.is-charging .mark .v1{animation-delay:1.2s}.finish-loader.is-charging .mark .v2{animation-delay:1.9s}
.finish-loader.is-charging .mark .v3{animation-delay:2.6s}.finish-loader.is-charging .mark .v4{animation-delay:3.3s}.finish-loader.is-charging .mark .v5{animation-delay:3.9s}
.finish-loader.is-charging .finish-ring{animation:ringGlow 1.2s ease 4.2s forwards!important;}
.finish-loader.is-leaving{transition-duration:.9s!important;}

/* 10. licht komt rustig op na het laadscherm, geen flits */
.studio-lights{transition:opacity 1.4s ease;}
body.lights-off .studio-lights{opacity:0;}
.lamp span,.lamp::after{transition:none!important;}

/* 7. contact */
.contact-line{margin-top:18px!important;font-size:13px!important;color:rgba(255,255,255,.7)!important;}
.contact-line a,#intro .fineprint a{color:var(--s-cyan);text-decoration:none;border-bottom:1px solid rgba(100,208,235,.4);}
#intro .fineprint a{text-transform:none;letter-spacing:.04em;}

/* 2. startpagina zonder scrollen: privacytekst inklapbaar */
.consent-more{margin:10px 0 0 32px;}
.consent-more summary{cursor:pointer;list-style:none;font-family:var(--s-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--s-cyan);}
.consent-more summary::-webkit-details-marker{display:none;}
.consent-more summary::after{content:' +';}
.consent-more[open] summary::after{content:' −';}
.consent-more .consent-detail{margin:10px 0 0!important;}

/* 3. alles schaalt mee met de schermhoogte én -breedte */
.topbar{padding-top:clamp(12px,2.4vh,24px)!important;padding-bottom:clamp(8px,1.8vh,18px)!important;}
#intro h1{font-size:clamp(38px,min(8vw,11.5vh),112px)!important;margin-top:clamp(8px,3vh,48px)!important;}
.intro-hero .inner{min-height:0!important;row-gap:0;}
#intro p.lede{font-size:clamp(14px,min(1.25vw,2vh),17px)!important;}
.consent-row{font-size:clamp(13px,min(1.1vw,1.9vh),15px)!important;}
#startBtn{margin-top:clamp(12px,2.6vh,28px)!important;}
#intro .fineprint{margin-top:clamp(18px,4vh,56px)!important;}
.qtext{font-size:clamp(22px,min(3.3vw,4.8vh),40px)!important;}
.likert button{height:clamp(48px,min(84px,9vh),84px)!important;max-width:clamp(48px,min(84px,9vh),84px)!important;}
.layer-intro h2{font-size:clamp(34px,min(6.4vw,9vh),76px)!important;}
.li-human{height:min(56vh,520px)!important;}
.hw-loader{width:clamp(110px,min(16vw,24vh),230px)!important;}
.finish-ring{width:min(42vh,58vw,400px)!important;}
@media(max-width:860px){.intro-hero .inner{gap:0}}
body.on-intro .stage,body.needs-code .stage{display:none!important;}
body.on-intro{min-height:100dvh;display:flex;flex-direction:column;}
body.on-intro .intro-hero{min-height:0!important;flex:1 1 auto;padding-bottom:clamp(16px,3vh,40px)!important;}
.consent-more:not([open]) > :not(summary){display:none!important;}
@media(max-width:760px){.layer-intro{grid-template-columns:minmax(0,1fr)!important}.layer-intro-inner{min-width:0}.layer-intro p{max-width:100%}}

/* V12.95 — privacytekst weer altijd zichtbaar, netjes uitgelijnd onder de toestemmingstekst */
.consent-more{display:contents;}
.consent-detail{display:block!important;margin:12px 0 0 32px!important;}
/* voortgangsanimatie per deel: logo groeit mee met het percentage (JS), punten lichten op per 1/6 */
.finish-loader.is-charging .mark .shape,.finish-loader.is-charging .mark .v,.finish-loader.is-charging .finish-ring{animation:none!important;}
.finish-loader .mark .shape{opacity:1!important;transition:none;}
.finish-loader .mark .v{opacity:0;transform:scale(0);transition:opacity .3s ease,transform .45s cubic-bezier(.2,1.4,.4,1);}
.finish-loader .mark .v.lit{opacity:.95;transform:scale(1);}
.finish-cap{font-family:var(--s-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--s-cyan);text-align:center;min-height:1.4em;}
.consent-detail{font-size:clamp(11.5px,1.65vh,13.5px)!important;line-height:1.5!important;}

/* =====================================================================
   V12.96 — mobiel
   ===================================================================== */
/* nooit meer vastzitten: past iets niet, dan kun je altijd scrollen */
body:has(#question:not([hidden])),body:has(#layerIntro:not([hidden])),
body:has(#halfway:not([hidden])),body:has(#customerComplete:not([hidden])){overflow-x:hidden!important;overflow-y:auto!important;}
@media(max-width:760px){
  /* antwoordcirkels passen altijd naast elkaar */
  .likert{display:flex!important;gap:clamp(6px,2.2vw,10px)!important;width:100%;max-width:100%!important;}
  .likert button{flex:1 1 0!important;width:auto!important;max-width:none!important;height:auto!important;aspect-ratio:1/1;min-width:0;font-size:clamp(15px,4.6vw,18px)!important;}
  .likert-labels,.backlink{max-width:100%!important;}
  /* hoofdstukscherm: kleinere digital human zodat "Verder" altijd in beeld is */
  .li-human{height:min(30vh,250px)!important;max-width:100%;}
  .layer-intro{gap:4px!important;}
  .layer-intro h2{font-size:clamp(30px,9vw,44px)!important;margin:6px 0 8px!important;}
  .layer-intro p{font-size:15px!important;margin-bottom:16px!important;}
  .stage{padding-left:20px!important;padding-right:20px!important;}
}
@media(max-width:760px) and (max-height:700px){
  .li-human{height:min(26vh,200px)!important;}
  .qtext{--lines:5!important;font-size:21px!important;margin-bottom:20px!important;}
  .qmeta{margin-bottom:14px!important;}
  .progress-rail{padding-top:4px!important;padding-bottom:4px!important;}
}
/* telefoon dwars: geen vaste hoogte, gewoon scrollen */
@media(max-height:500px){
  body:has(#question:not([hidden])),body:has(#layerIntro:not([hidden])),
  body:has(#halfway:not([hidden])),body:has(#customerComplete:not([hidden])){height:auto!important;min-height:100dvh;}
  .li-human{height:min(70vh,260px)!important;}
}
/* hover-effecten alleen op apparaten met een muis (geen 'blijvende' markering na tikken) */
@media(hover:none){
  .likert button:hover{background:transparent!important;border-color:rgba(255,255,255,.78)!important;}
  .likert button.picked{background:var(--layer)!important;border-color:var(--layer)!important;}
  button.cta:hover,#intro button.cta:hover{background:var(--s-cyan);color:#000;}
}
.qmeta{gap:10px}.qmeta #qEyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.qmeta #qCounter{white-space:nowrap;flex:none}
@media(max-width:420px){.qe-name{display:none}}
/* V12.97 — mobiel tijdelijk uit */
.mobile-block .eyebrow{color:var(--s-cyan);}
.mobile-block__actions{display:flex;flex-direction:column;gap:12px;align-items:stretch;max-width:340px;}
.mobile-block__actions .cta{text-align:center;text-decoration:none;display:block;}
.cta--ghost{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.6)!important;border-radius:999px;padding:15px 30px;font-family:var(--s-sans);font-weight:600;font-size:15px;}
.mobile-block h1{font-size:clamp(32px,9vw,48px)!important;}