<!-- Voorstraat 41 · kapsalon en barbier, Utrecht · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="vs-site"><div class="vs-shell">
<div class="vs-side" role="banner">
  <a class="vs-logo" href="#"><b>Voorstraat</b><b class="vs-logo__n">41</b><small>kapsalon · barbier · Utrecht</small></a>
  <button class="vs-menu" type="button" aria-expanded="false">Menu</button>
  <div class="vs-nav" role="navigation">
    <a href="#vs-prijs"><i>01</i>Behandelingen</a><a href="#vs-team"><i>02</i>Team</a><a href="#vs-looks"><i>03</i>Looks</a><a href="#vs-boek"><i>04</i>Online boeken</a><a href="#vs-prod"><i>05</i>Producten</a><a href="#vs-journal"><i>06</i>Journal</a><a href="#vs-faq"><i>07</i>Vragen</a>
  </div>
  <div class="vs-side__foot">
    <p class="vs-open"><span></span>Vandaag open tot 20:00</p>
    <p>Voorstraat 41, Utrecht<br>030 231 7741</p>
    <a class="vs-btn vs-btn--lime" href="#vs-boek">Boek een stoel</a>
  </div>
</div>

<div class="vs-main">
<div class="vs-hero">
  <p class="vs-hero__meta"><span>Google 4,8 · 612 reviews</span><span>Walk-in barbier: di en do vanaf 17:00</span></p>
  <h1 class="vs-h1">Knippen, fades<br>en kleur aan de <em>Voorstraat.</em></h1>
  <div class="vs-hero__grid">
    <div class="vs-hero__img"><img src="https://neddev.com/lab-media/site-kapsalon-7.webp" alt="Barbier zet een skin fade bij een klant in de kelder van de salon"><span class="vs-tag">Skin fade · 45 min · € 38</span></div>
    <div class="vs-hero__txt">
      <p>Zes stoelen in een werfkelder uit 1650. Barbiers en kappers onder één gewelf, dus u komt binnen voor een fade en gaat weg met een afspraak voor kleur.</p>
      <dl><div><dt>Stoelen</dt><dd>6</dd></div><div><dt>Open tot</dt><dd>20:00</dd></div><div><dt>Kids t/m 11</dt><dd>€ 22</dd></div></dl>
      <a class="vs-btn vs-btn--lime" href="#vs-boek">Boek online</a>
    </div>
  </div>
</div>

<div class="vs-prijs" id="vs-prijs">
  <div class="vs-sh"><span class="vs-sh__n">01</span><h2 class="vs-h2">Behandelingen</h2><p>Prijzen inclusief btw. De tijd is de tijd in de stoel, inclusief wassen en stylen.</p></div>
  <div class="vs-menu-board">
    <div class="vs-col">
      <h3 class="vs-h3"><svg class="vs-cut" viewBox="0 0 24 24" aria-hidden="true"><circle cx="6" cy="6" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="6" cy="18" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8.5 7.5 21 18M8.5 16.5 21 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> Barbier</h3>
      <ul class="vs-list">
        <li><b>Heren knippen</b><i></i><span class="vs-t">30 min</span><span class="vs-p">€ 36</span><small>schaar en tondeuse, wassen, stylen</small></li>
        <li><b>Skin fade</b><i></i><span class="vs-t">45 min</span><span class="vs-p">€ 38</span><small>tot op de huid, met scheermes afgewerkt</small></li>
        <li><b>Knippen en baard</b><i></i><span class="vs-t">60 min</span><span class="vs-p">€ 54</span><small>de populairste combinatie</small></li>
        <li><b>Baard trimmen</b><i></i><span class="vs-t">20 min</span><span class="vs-p">€ 22</span><small>contouren met mes, baardolie</small></li>
        <li><b>Hot towel shave</b><i></i><span class="vs-t">40 min</span><span class="vs-p">€ 34</span><small>twee warme doeken, open mes</small></li>
        <li><b>Kinderen t/m 11 jaar</b><i></i><span class="vs-t">25 min</span><span class="vs-p">€ 22</span><small>ook fades, op zaterdag voor 12:00</small></li>
      </ul>
    </div>
    <div class="vs-col">
      <h3 class="vs-h3"><svg class="vs-cut" viewBox="0 0 24 24" aria-hidden="true"><circle cx="6" cy="6" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="6" cy="18" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8.5 7.5 21 18M8.5 16.5 21 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> Salon en kleur</h3>
      <ul class="vs-list">
        <li><b>Knippen kort haar</b><i></i><span class="vs-t">45 min</span><span class="vs-p">€ 49</span><small>pixie, bob, korte lagen</small></li>
        <li><b>Knippen lang haar</b><i></i><span class="vs-t">60 min</span><span class="vs-p">€ 62</span><small>inclusief föhnen</small></li>
        <li><b>Krullen knippen</b><i></i><span class="vs-t">75 min</span><span class="vs-p">€ 75</span><small>droog geknipt, per krul</small></li>
        <li><b>Uitgroei kleuren</b><i></i><span class="vs-t">90 min</span><span class="vs-p">€ 68</span><small>tot 3 cm, inclusief föhnen</small></li>
        <li><b>Balayage</b><i></i><span class="vs-t">3 uur</span><span class="vs-p">v.a. € 165</span><small>vrij geschilderd, met toner</small></li>
        <li><b>Kleuradvies</b><i></i><span class="vs-t">15 min</span><span class="vs-p">gratis</span><small>met strengtest, 48 uur vooraf</small></li>
      </ul>
    </div>
  </div>
</div>

<div class="vs-team" id="vs-team">
  <div class="vs-sh vs-sh--inv"><span class="vs-sh__n">02</span><h2 class="vs-h2">Zes stoelen, zes handschriften</h2><p>Iedereen hier knipt alles. Maar iedereen heeft ook iets waar mensen speciaal voor uit Amersfoort komen.</p></div>
  <ul class="vs-chairs">
    <li><span class="vs-chair">01</span><div><b>Noor Hendriks</b><span>eigenaar · kleur</span></div><p>Koper, roodtinten en balayage die na drie maanden nog goed uitgroeit.</p><span class="vs-days">di wo vr za</span><a href="#vs-boek">Boek bij Noor</a></li>
    <li><span class="vs-chair">02</span><div><b>Daan Smit</b><span>barbier</span></div><p>Skin fades en klassiek kort met de schaar. Scheert ook nog met open mes.</p><span class="vs-days">di do vr za</span><a href="#vs-boek">Boek bij Daan</a></li>
    <li><span class="vs-chair">03</span><div><b>Amira Ouali</b><span>krullen</span></div><p>Droog knippen per krul, type 2 tot 4. Geeft je een routine mee voor thuis.</p><span class="vs-days">wo do za</span><a href="#vs-boek">Boek bij Amira</a></li>
    <li><span class="vs-chair">04</span><div><b>Bas Verhoef</b><span>barbier · baard</span></div><p>Baarden vormen en strakke contouren. De vaste man voor de walk-in avond.</p><span class="vs-days">di wo do</span><a href="#vs-boek">Boek bij Bas</a></li>
    <li><span class="vs-chair">05</span><div><b>Jolien de Graaf</b><span>kort haar</span></div><p>Pixies en bobs met een strakke lijn. Werkte vier jaar in Antwerpen.</p><span class="vs-days">wo vr za</span><a href="#vs-boek">Boek bij Jolien</a></li>
    <li><span class="vs-chair">06</span><div><b>Sem Kok</b><span>leerling, 2e jaar</span></div><p>Knipt onder begeleiding voor € 18. Heren en kinderen, op afspraak.</p><span class="vs-days">di do</span><a href="#vs-boek">Boek bij Sem</a></li>
  </ul>
</div>

<div class="vs-looks" id="vs-looks">
  <div class="vs-looks__head"><div class="vs-sh"><span class="vs-sh__n">03</span><h2 class="vs-h2">Looks van deze maand</h2></div>
  <div class="vs-filter" role="group" aria-label="Filter looks"><button type="button" class="is-on" data-f="all">Alles</button><button type="button" data-f="kort">Kort</button><button type="button" data-f="krul">Krul</button><button type="button" data-f="kleur">Kleur</button></div></div>
  <div class="vs-grid">
    <figure class="vs-look vs-look--a" data-c="kleur kort"><img src="https://neddev.com/lab-media/site-kapsalon-3.webp" alt="Koperrode bob op kinlengte, van achteren"><figcaption><b>Koperen bob</b><span>Noor · 2 uur 15 · kleur en knippen</span></figcaption></figure>
    <figure class="vs-look vs-look--b" data-c="kort"><img src="https://neddev.com/lab-media/site-kapsalon-4.webp" alt="Textured crop met lage taper fade"><figcaption><b>Textured crop, low taper</b><span>Daan · 45 min</span></figcaption></figure>
    <figure class="vs-look vs-look--c" data-c="krul"><img src="https://neddev.com/lab-media/site-kapsalon-5.webp" alt="Lang haar met gedefinieerde natuurlijke krullen"><figcaption><b>Krullen, droog geknipt</b><span>Amira · 75 min · type 3b</span></figcaption></figure>
    <div class="vs-look vs-look--txt" data-c="kort"><p class="vs-spec">Fade-schaal</p><ul><li><b>0</b>tot op de huid</li><li><b>0,5</b>schaduw</li><li><b>1 tot 2</b>zacht verloop</li><li><b>3+</b>klassiek kort</li></ul><p>Zeg gewoon welke foto u mooi vindt, wij vertalen het.</p></div>
    <figure class="vs-look vs-look--d" data-c="all"><img src="https://neddev.com/lab-media/site-kapsalon-2.webp" alt="De salon met groene wanden, ronde spiegels en terrazzovloer"><figcaption><b>De salon</b><span>werfkelder, sinds 2019</span></figcaption></figure>
  </div>
</div>

<div class="vs-boek" id="vs-boek">
  <div class="vs-sh"><span class="vs-sh__n">04</span><h2 class="vs-h2">Online boeken in drie stappen</h2></div>
  <div class="vs-boek__grid">
    <ol class="vs-steps">
      <li><b>Kies wat u wilt</b><span>Knippen, fade, kleur of een combinatie. Twijfelt u bij kleur, boek eerst gratis kleuradvies.</span></li>
      <li><b>Kies een stoel</b><span>Een vaste kapper, of "eerste vrije" als het u niet uitmaakt.</span></li>
      <li><b>Kies een tijd</b><span>U krijgt een bevestiging per sms en een herinnering de dag ervoor.</span></li>
    </ol>
    <div class="vs-book">
      <p class="vs-book__lbl">Behandeling</p>
      <div class="vs-chips" data-g="beh"><button type="button" class="is-on" data-v="Skin fade · 45 min · € 38">Skin fade</button><button type="button" data-v="Knippen en baard · 60 min · € 54">Knippen en baard</button><button type="button" data-v="Krullen knippen · 75 min · € 75">Krullen</button><button type="button" data-v="Uitgroei kleuren · 90 min · € 68">Uitgroei</button></div>
      <p class="vs-book__lbl">Stoel</p>
      <div class="vs-chips" data-g="who"><button type="button" class="is-on" data-v="eerste vrije">Eerste vrije</button><button type="button" data-v="Daan">01 Daan</button><button type="button" data-v="Amira">03 Amira</button><button type="button" data-v="Bas">04 Bas</button></div>
      <p class="vs-book__lbl">Donderdag 15 oktober</p>
      <div class="vs-chips vs-chips--t" data-g="tijd"><button type="button" data-v="10:15">10:15</button><button type="button" class="is-on" data-v="13:30">13:30</button><button type="button" data-v="17:00">17:00</button><button type="button" data-v="18:45">18:45</button><button type="button" disabled>19:15</button></div>
      <div class="vs-book__sum"><p><b class="vs-sum-beh">Skin fade · 45 min · € 38</b><span class="vs-sum-rest">do 15 okt, 13:30 · eerste vrije</span></p><a class="vs-btn vs-btn--ink" href="#">Bevestig</a></div>
    </div>
  </div>
  <p class="vs-policy"><svg class="vs-cut" viewBox="0 0 24 24" aria-hidden="true"><circle cx="6" cy="6" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="6" cy="18" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8.5 7.5 21 18M8.5 16.5 21 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg><span>Annuleren kan tot 12 uur van tevoren, gratis. Daarna rekenen we de helft van de behandeling. Bent u 15 minuten te laat, dan schuiven we u door naar het volgende vrije moment.</span></p>
</div>

<div class="vs-prod" id="vs-prod">
  <img src="https://neddev.com/lab-media/site-kapsalon-8.webp" alt="Plank met amberkleurige flessen, potten, kam en borstel">
  <div>
    <div class="vs-sh"><span class="vs-sh__n">05</span><h2 class="vs-h2">Wat we zelf gebruiken</h2></div>
    <table class="vs-prod__t"><tbody>
      <tr><th>Matte klei</th><td>75 ml · korte coupes, geen glans</td><td class="vs-p">€ 22,50</td></tr>
      <tr><th>Krulcrème</th><td>200 ml · siliconenvrij, type 2 tot 4</td><td class="vs-p">€ 19,95</td></tr>
      <tr><th>Baardolie cederhout</th><td>30 ml · na het douchen, 3 druppels</td><td class="vs-p">€ 17,50</td></tr>
      <tr><th>Zilvershampoo</th><td>250 ml · tegen geel na blonderen</td><td class="vs-p">€ 16,95</td></tr>
      <tr><th>Houten kam</th><td>perenhout · voor krullen en baard</td><td class="vs-p">€ 12,00</td></tr>
    </tbody></table>
    <p class="vs-note">Alleen in de salon te koop. Reserveer via de balie, dan staat het klaar bij uw volgende afspraak.</p>
  </div>
</div>

<div class="vs-rev">
  <div class="vs-rev__score"><b>4,8</b><span>Google, 612 reviews</span></div>
  <blockquote class="vs-q vs-q--big"><p>"Eindelijk een kapper die mijn krullen niet nat knipt. Amira nam er rustig de tijd voor en legde uit waarom."</p><cite>Lisa van Dam, Lombok</cite></blockquote>
  <blockquote class="vs-q"><p>"Elke drie weken bij Daan. Fade zit altijd hetzelfde, en hij weet nog wat we de vorige keer bespraken."</p><cite>Mehmet Yilmaz, Wittevrouwen</cite></blockquote>
  <blockquote class="vs-q"><p>"Met mijn zoon van zes op zaterdagochtend. Hij wil nergens anders meer heen."</p><cite>Erik Bakker, Zuilen</cite></blockquote>
</div>

<div class="vs-journal" id="vs-journal">
  <div class="vs-sh"><span class="vs-sh__n">06</span><h2 class="vs-h2">Journal</h2></div>
  <div class="vs-posts">
    <a href="#"><time>29 sep 2026</time><b>Koper is dit najaar de meest gevraagde kleur. Zo houdt u hem warm.</b><span>Kleur · 4 min</span></a>
    <a href="#"><time>12 sep 2026</time><b>Walk-in avond op donderdag nu tot 21:00</b><span>Salon · 1 min</span></a>
    <a href="#"><time>21 aug 2026</time><b>Krullen na de zomer: wat chloor en zout doen en wat u eraan doet</b><span>Krul · 5 min</span></a>
  </div>
</div>

<div class="vs-faq" id="vs-faq">
  <div class="vs-sh"><span class="vs-sh__n">07</span><h2 class="vs-h2">Vragen</h2></div>
  <div class="vs-faq__list">
    <details open><summary>Kan ik zonder afspraak langskomen?</summary><p>Voor de barbier wel, op dinsdag en donderdag vanaf 17:00. Wie eerst komt, zit eerst. Voor de salon en kleur werken we alleen op afspraak.</p></details>
    <details><summary>Moet ik vooraf een strengtest doen voor kleur?</summary><p>Bij een eerste kleuring of als u eerder reageerde op haarverf: ja, minimaal 48 uur vooraf. Dat kan tijdens het gratis kleuradvies.</p></details>
    <details><summary>Kan ik pinnen?</summary><p>Pinnen en contactloos betalen. Contant geld nemen we niet meer aan. Cadeaukaarten zijn er vanaf € 25.</p></details>
    <details><summary>Is de salon toegankelijk?</summary><p>De salon ligt in een werfkelder, met elf treden vanaf de kade. Bel ons gerust, Noor knipt dan aan huis in de binnenstad.</p></details>
  </div>
</div>

<div class="vs-foot" role="contentinfo">
  <p class="vs-foot__mark">Voorstraat 41</p>
  <div class="vs-foot__cols">
    <div><b>Adres</b><span>Voorstraat 41, werfkelder</span><span>3512 AJ Utrecht</span><span>030 231 7741</span><span>stoel@voorbeeld.nl</span></div>
    <div><b>Open</b><span class="vs-hrs"><i>ma</i>gesloten</span><span class="vs-hrs"><i>di t/m vr</i>09:00 tot 20:00</span><span class="vs-hrs"><i>za</i>08:30 tot 17:00</span><span class="vs-hrs"><i>zo</i>gesloten</span></div>
    <div><b>Salon</b><a href="#vs-prijs">Behandelingen</a><a href="#vs-team">Team</a><a href="#">Cadeaukaart</a><a href="#">Werken bij</a></div>
    <div><b>Volg</b><a href="#">Instagram</a><a href="#">TikTok</a><a href="#">Google reviews</a></div>
  </div>
  <div class="vs-foot__legal"><span>KvK 74219038</span><span>BTW NL859921745B01</span><span>Lid ANKO</span><span>Erkend leerbedrijf SBB</span><span>Algemene voorwaarden</span><span>Privacy</span></div>
</div>
</div>
</div></div>
</div>

/* Voorstraat 41 · kapsalon en barbier, Utrecht · NedDev · eigen werk. */
/* fonts (Fontshare): cabinet-grotesk@500,700,800 + switzer@400,500,600 */
.vs-site{--vs-ink:#0f0f0d;--vs-ink2:#1a1a17;--vs-bone:#ece6d9;--vs-paper:#f6f2e9;--vs-mute:#77736a;--vs-lime:#c9f03f;--vs-green:#1e3a2f;--vs-line:rgba(15,15,13,.16);container:vs/inline-size;background:var(--vs-paper);color:var(--vs-ink);font-family:'Switzer',sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.vs-site *{box-sizing:border-box}
.vs-site a{color:inherit;text-decoration:none}
.vs-site img{display:block;max-width:100%}
.vs-site p{margin:0}
.vs-shell{display:grid;grid-template-columns:232px 1fr;align-items:start;background:linear-gradient(90deg,var(--vs-ink) 232px,transparent 232px)}
.vs-cut{width:18px;height:18px;flex:none}
.vs-side{position:sticky;top:0;height:100vh;max-height:820px;background:var(--vs-ink);color:var(--vs-bone);display:flex;flex-direction:column;padding:28px 24px;z-index:4}
.vs-logo{display:block;line-height:.86;margin-bottom:34px}
.vs-logo b{display:block;font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.03em;text-transform:uppercase;color:var(--vs-bone)}
.vs-logo__n{color:var(--vs-lime) !important;font-size:64px !important}
.vs-logo small{display:block;line-height:1.5;margin-top:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a29d90}
.vs-menu{display:none;font:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--vs-bone);background:none;border:1px solid rgba(236,230,217,.3);border-radius:2px;padding:9px 14px;cursor:pointer}
.vs-nav{display:flex;flex-direction:column;border-top:1px dashed rgba(236,230,217,.25)}
.vs-nav a{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px dashed rgba(236,230,217,.25);font-size:15px;font-weight:500;transition:color .2s,padding .2s}
.vs-nav a i{font-style:normal;font-size:11px;color:#8d887c;font-variant-numeric:tabular-nums}
.vs-nav a:hover{color:var(--vs-lime);padding-left:6px}
.vs-side__foot{margin-top:auto;font-size:13px;color:#a29d90;display:flex;flex-direction:column;gap:12px}
.vs-open{display:flex;align-items:center;gap:8px;color:var(--vs-bone);font-weight:500}
.vs-open span{width:8px;height:8px;border-radius:50%;background:var(--vs-lime);box-shadow:0 0 0 4px rgba(201,240,63,.18)}
.vs-btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;padding:13px 20px;border-radius:2px;transition:background .2s,color .2s,transform .2s;white-space:nowrap}
.vs-btn--lime{background:var(--vs-lime);color:var(--vs-ink) !important}
.vs-btn--lime:hover{background:#fff}
.vs-btn--ink{background:var(--vs-ink);color:var(--vs-bone) !important}
.vs-btn--ink:hover{background:var(--vs-green)}
.vs-main{min-width:0}
.vs-main>div{padding-left:56px;padding-right:56px}
.vs-h1{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:92px;line-height:.9;letter-spacing:-.045em;margin:0 0 36px;color:var(--vs-bone);text-transform:uppercase}
.vs-h1 em{font-style:normal;color:var(--vs-lime)}
.vs-h2{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:50px;line-height:.95;letter-spacing:-.035em;margin:0;text-transform:uppercase;color:inherit}
.vs-h3{display:flex;align-items:center;gap:10px;font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.01em;margin:0 0 6px;text-transform:uppercase;color:inherit}
.vs-hero{background:var(--vs-ink);color:var(--vs-bone);padding-top:36px;padding-bottom:60px}
.vs-hero__meta{display:flex;gap:28px;font-size:13px;color:#a29d90;margin-bottom:32px !important;padding-bottom:14px;border-bottom:1px dashed rgba(236,230,217,.25)}
.vs-hero__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:end}
.vs-hero__img{position:relative}
.vs-hero__img img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.vs-tag{position:absolute;left:0;bottom:0;background:var(--vs-lime);color:var(--vs-ink);font-weight:600;font-size:14px;padding:9px 14px;font-variant-numeric:tabular-nums}
.vs-hero__txt p{font-size:17px;color:#d4cec1;margin-bottom:24px !important}
.vs-hero__txt dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 26px;border-top:1px dashed rgba(236,230,217,.25)}
.vs-hero__txt dl div{padding:12px 0}
.vs-hero__txt dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8d887c}
.vs-hero__txt dd{margin:0;font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:34px;line-height:1.05;color:var(--vs-bone);font-variant-numeric:tabular-nums}
.vs-sh{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:start;margin-bottom:32px}
.vs-sh__n{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:15px;color:var(--vs-mute);padding-top:8px;font-variant-numeric:tabular-nums}
.vs-sh p{grid-column:2;max-width:56ch;color:var(--vs-mute);margin-top:10px !important}
.vs-sh--inv .vs-sh__n,.vs-sh--inv p{color:#a29d90}
.vs-prijs{padding-top:72px;padding-bottom:72px}
.vs-menu-board{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.vs-list{list-style:none;margin:14px 0 0;padding:0;border-top:2px solid var(--vs-ink)}
.vs-list li{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:0 12px;padding:13px 0 12px;border-bottom:1px dashed var(--vs-line);transition:background .15s}
.vs-list li:hover{background:var(--vs-bone)}
.vs-list b{font-weight:600;font-size:17px}
.vs-list i{border-bottom:1.5px dotted rgba(15,15,13,.35);transform:translateY(-4px)}
.vs-t{font-size:13px;color:var(--vs-mute);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.vs-p{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:19px;font-variant-numeric:tabular-nums;text-align:right;min-width:64px}
.vs-list small{grid-column:1/-1;font-size:13px;color:var(--vs-mute)}
.vs-team{background:var(--vs-green);color:var(--vs-bone);padding-top:72px;padding-bottom:72px}
.vs-chairs{list-style:none;margin:0;padding:0;border-top:1px dashed rgba(236,230,217,.3)}
.vs-chairs li{display:grid;grid-template-columns:96px 1fr 1.6fr 110px auto;gap:20px;align-items:center;padding:14px 12px;border-bottom:1px dashed rgba(236,230,217,.3);transition:background .2s,color .2s}
.vs-chair{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:54px;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(236,230,217,.6);font-variant-numeric:tabular-nums;transition:color .2s}
.vs-chairs b{display:block;font-weight:600;font-size:17px}
.vs-chairs div span{font-size:13px;color:#a7b8ae}
.vs-chairs p{font-size:14px;color:#cdd8d1}
.vs-days{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#a7b8ae}
.vs-chairs a{font-size:14px;font-weight:600;border-bottom:1.5px solid var(--vs-lime);padding-bottom:2px;white-space:nowrap}
.vs-chairs li:hover{background:var(--vs-lime);color:var(--vs-ink)}
.vs-chairs li:hover .vs-chair{color:var(--vs-ink);-webkit-text-stroke-color:var(--vs-ink)}
.vs-chairs li:hover p,.vs-chairs li:hover div span,.vs-chairs li:hover .vs-days{color:#2c3a17}
.vs-chairs li:hover a{border-color:var(--vs-ink)}
.vs-looks{padding-top:72px;padding-bottom:72px;background:var(--vs-paper)}
.vs-looks__head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.vs-looks__head .vs-sh{margin:0}
.vs-filter{display:flex;gap:0;border:1.5px solid var(--vs-ink)}
.vs-filter button{font:inherit;font-size:14px;font-weight:600;background:none;border:0;border-right:1.5px solid var(--vs-ink);padding:9px 16px;cursor:pointer;color:var(--vs-ink)}
.vs-filter button:last-child{border-right:0}
.vs-filter button.is-on{background:var(--vs-ink);color:var(--vs-lime)}
.vs-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;grid-template-rows:270px 250px;gap:12px}
.vs-look{margin:0;position:relative;overflow:hidden;background:var(--vs-ink);transition:opacity .3s}
.vs-look.is-off{opacity:.12}
.vs-look img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.vs-look:hover img{transform:scale(1.04)}
.vs-look figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(transparent,rgba(10,10,9,.85));color:var(--vs-bone)}
.vs-look figcaption b{display:block;font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:-.01em}
.vs-look figcaption span{font-size:13px;color:#cfc9bc}
.vs-look--a{grid-row:1/3}
.vs-look--d{grid-column:2/5}
.vs-look--d img{object-position:50% 60%}
.vs-look--b img{object-position:50% 30%}
.vs-look--txt{background:var(--vs-lime);color:var(--vs-ink);padding:20px 22px;display:flex;flex-direction:column}
.vs-look--txt ul{list-style:none;margin:10px 0 auto;padding:0}
.vs-look--txt li{display:grid;grid-template-columns:64px 1fr;padding:5px 0;border-bottom:1px dashed rgba(15,15,13,.3);font-size:14px}
.vs-look--txt li b{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:16px}
.vs-look--txt>p:last-child{font-size:13px;margin-top:10px !important}
.vs-spec{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:-.01em}
.vs-boek{background:var(--vs-bone);padding-top:72px;padding-bottom:64px}
.vs-boek__grid{display:grid;grid-template-columns:.9fr 1.2fr;gap:48px;align-items:start}
.vs-steps{list-style:none;margin:0;padding:0;counter-reset:vss}
.vs-steps li{counter-increment:vss;position:relative;padding:0 0 26px 62px}
.vs-steps li::before{content:counter(vss,decimal-leading-zero);position:absolute;left:0;top:-4px;font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:32px;line-height:1}
.vs-steps li::after{content:'';position:absolute;left:18px;top:36px;bottom:4px;border-left:1.5px dashed var(--vs-ink);opacity:.4}
.vs-steps li:last-child::after{display:none}
.vs-steps b{display:block;font-weight:600;font-size:17px;margin-bottom:2px}
.vs-steps span{font-size:15px;color:#4f4c45}
.vs-book{background:var(--vs-paper);border:1.5px solid var(--vs-ink);padding:24px 24px 20px;box-shadow:8px 8px 0 var(--vs-ink)}
.vs-book__lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vs-mute);margin:0 0 8px !important}
.vs-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.vs-chips button{font:inherit;font-size:14px;font-weight:500;background:transparent;border:1.5px solid var(--vs-line);padding:8px 13px;cursor:pointer;border-radius:2px;color:var(--vs-ink);transition:border-color .15s,background .15s}
.vs-chips button:hover:not(:disabled){border-color:var(--vs-ink)}
.vs-chips button.is-on{background:var(--vs-ink);border-color:var(--vs-ink);color:var(--vs-lime)}
.vs-chips button:disabled{color:#b8b3a8;text-decoration:line-through;cursor:not-allowed}
.vs-chips--t button{font-variant-numeric:tabular-nums;min-width:66px}
.vs-book__sum{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;border-top:1px dashed var(--vs-line)}
.vs-book__sum b{display:block;font-weight:600}
.vs-book__sum span{font-size:14px;color:var(--vs-mute)}
.vs-policy{display:flex;gap:12px;align-items:flex-start;margin-top:30px !important;padding-top:18px;border-top:1.5px dashed rgba(15,15,13,.35);font-size:14px;color:#4f4c45;max-width:90ch}
.vs-prod{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.vs-prod>img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% 50%}
.vs-prod__t{width:100%;border-collapse:collapse;border-top:2px solid var(--vs-ink)}
.vs-prod__t th,.vs-prod__t td{text-align:left;padding:13px 10px 13px 0;border-bottom:1px dashed var(--vs-line);vertical-align:baseline}
.vs-prod__t th{font-weight:600;font-size:16px;white-space:nowrap}
.vs-prod__t td{font-size:14px;color:var(--vs-mute)}
.vs-prod__t td.vs-p{color:var(--vs-ink);padding-right:0}
.vs-note{font-size:14px;color:var(--vs-mute);margin-top:16px !important}
.vs-rev{background:var(--vs-ink);color:var(--vs-bone);display:grid;grid-template-columns:.6fr 1.5fr 1fr 1fr;gap:32px;padding-top:60px;padding-bottom:60px;align-items:start}
.vs-rev__score b{display:block;font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:84px;line-height:.9;color:var(--vs-lime);letter-spacing:-.04em}
.vs-rev__score span{font-size:13px;color:#a29d90}
.vs-q{margin:0;padding-top:14px;border-top:1px dashed rgba(236,230,217,.3)}
.vs-q p{font-size:15px;color:#d4cec1;margin-bottom:12px !important}
.vs-q--big p{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:25px;line-height:1.15;color:var(--vs-bone);letter-spacing:-.01em}
.vs-q cite{font-style:normal;font-size:13px;font-weight:600;color:#8d887c}
.vs-journal{padding-top:72px;padding-bottom:40px}
.vs-posts{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0;border-top:2px solid var(--vs-ink)}
.vs-posts a{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px 0;border-right:1px dashed var(--vs-line);transition:background .2s}
.vs-posts a+a{padding-left:22px}
.vs-posts a:last-child{border-right:0}
.vs-posts a:hover{background:var(--vs-bone)}
.vs-posts time{font-size:13px;color:var(--vs-mute);font-variant-numeric:tabular-nums}
.vs-posts b{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:21px;line-height:1.15;letter-spacing:-.01em}
.vs-posts a:first-child b{font-size:26px}
.vs-posts span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:auto}
.vs-faq{padding-top:40px;padding-bottom:72px;display:grid;grid-template-columns:.7fr 1.5fr;gap:40px}
.vs-faq .vs-sh{align-self:start}
.vs-faq__list details{border-top:1px dashed var(--vs-line)}
.vs-faq__list details:first-child{border-top:2px solid var(--vs-ink)}
.vs-faq__list details:last-child{border-bottom:1px dashed var(--vs-line)}
.vs-faq__list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:15px 0;font-weight:600;font-size:17px}
.vs-faq__list summary::-webkit-details-marker{display:none}
.vs-faq__list summary::after{content:'+';font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:24px;line-height:1;transition:transform .2s}
.vs-faq__list details[open] summary::after{transform:rotate(45deg)}
.vs-faq__list details p{padding:0 30px 16px 0;color:#4f4c45;font-size:15px}
.vs-foot{background:var(--vs-ink);color:#a29d90;padding-top:40px;padding-bottom:26px;font-size:14px;overflow:hidden}
.vs-foot__mark{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:118px;line-height:.85;letter-spacing:-.05em;text-transform:uppercase;color:var(--vs-bone);white-space:nowrap;padding-bottom:28px;border-bottom:1px dashed rgba(236,230,217,.25)}
.vs-foot__cols{display:grid;grid-template-columns:1.2fr 1.2fr 1fr 1fr;gap:28px;padding:30px 0}
.vs-foot__cols div{display:flex;flex-direction:column;gap:7px}
.vs-foot__cols b{color:var(--vs-bone);font-weight:600;margin-bottom:4px}
.vs-foot__cols a:hover{color:var(--vs-lime)}
.vs-hrs{display:flex;gap:10px;font-variant-numeric:tabular-nums}
.vs-hrs i{font-style:normal;min-width:66px;color:#77736a}
.vs-foot__legal{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:16px;border-top:1px dashed rgba(236,230,217,.25);font-size:12px;color:#77736a}
@container vs (max-width:1120px){
.vs-shell{grid-template-columns:200px 1fr;background:linear-gradient(90deg,var(--vs-ink) 200px,transparent 200px)}
.vs-side{padding:24px 18px}
.vs-main>div{padding-left:36px;padding-right:36px}
.vs-h1{font-size:72px}
.vs-menu-board{gap:32px}
.vs-chairs li{grid-template-columns:76px 1fr 1.4fr auto}
.vs-days{display:none}
.vs-chair{font-size:44px}
.vs-rev{grid-template-columns:1fr 1fr}
.vs-rev__score{grid-column:1/-1}
.vs-q--big{grid-column:1/-1}
.vs-foot__mark{font-size:90px}
}
@container vs (max-width:860px){
.vs-shell{grid-template-columns:1fr;background:none}
.vs-side{height:auto;max-height:none;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:12px 16px}
.vs-logo{margin:0;display:flex;align-items:baseline;gap:6px}
.vs-logo b{font-size:24px}
.vs-logo__n{font-size:24px !important}
.vs-logo small{display:none}
.vs-menu{display:inline-flex}
.vs-nav{display:none;width:100%;margin-top:12px}
.vs-nav.is-open{display:flex}
.vs-side__foot{display:none}
.vs-main>div{padding-left:28px;padding-right:28px}
.vs-hero__grid,.vs-menu-board,.vs-boek__grid,.vs-prod{grid-template-columns:1fr;gap:28px}
.vs-chairs li{grid-template-columns:64px 1fr;gap:4px 14px;padding:14px 0}
.vs-chairs p,.vs-chairs a{grid-column:2}
.vs-chairs a{justify-self:start}
.vs-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:minmax(230px,auto)}
.vs-look--a{grid-row:span 2}
.vs-look--d{grid-column:1/-1}
.vs-posts{grid-template-columns:1fr}
.vs-posts a,.vs-posts a+a{padding:18px 0;border-right:0;border-bottom:1px dashed var(--vs-line)}
.vs-faq{grid-template-columns:1fr;gap:0}
.vs-prod>img{aspect-ratio:16/9}
.vs-foot__cols{grid-template-columns:1fr 1fr}
}
@container vs (max-width:560px){
.vs-main>div{padding-left:16px;padding-right:16px}
.vs-hero{padding-top:24px;padding-bottom:44px}
.vs-hero__meta{flex-direction:column;gap:4px}
.vs-h1{font-size:46px;margin-bottom:24px}
.vs-h2{font-size:36px}
.vs-hero__txt dd{font-size:26px}
.vs-prijs,.vs-team,.vs-looks,.vs-boek,.vs-prod,.vs-journal{padding-top:52px;padding-bottom:52px}
.vs-list b{font-size:16px}
.vs-looks__head{flex-direction:column;align-items:flex-start}
.vs-grid{grid-template-columns:1fr;grid-auto-rows:auto}
.vs-look{height:260px}
.vs-look--txt{height:auto}
.vs-look--a{grid-row:span 1}
.vs-look--d{grid-column:auto}
.vs-look--txt{min-height:0}
.vs-book{padding:18px;box-shadow:5px 5px 0 var(--vs-ink)}
.vs-book__sum{flex-direction:column;align-items:stretch}
.vs-prod__t td:nth-child(2){display:none}
.vs-rev{grid-template-columns:1fr}
.vs-rev__score b{font-size:64px}
.vs-foot__mark{font-size:52px;white-space:normal}
.vs-foot__cols{grid-template-columns:1fr}
.vs-sh p{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.vs-site *{transition:none !important}}

// Voorstraat 41 · kapsalon en barbier, Utrecht · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.vs-site'); if(!s) return;
var mb=s.querySelector('.vs-menu'), nav=s.querySelector('.vs-nav');
mb.addEventListener('click',function(){var o=nav.classList.toggle('is-open');mb.setAttribute('aria-expanded',o?'true':'false');mb.textContent=o?'Sluit':'Menu';});
s.querySelectorAll('.vs-filter button').forEach(function(btn){btn.addEventListener('click',function(){
  var f=btn.getAttribute('data-f');
  s.querySelectorAll('.vs-filter button').forEach(function(x){x.classList.toggle('is-on',x===btn);});
  s.querySelectorAll('.vs-look').forEach(function(el){var c=el.getAttribute('data-c'); el.classList.toggle('is-off',!(f==='all'||c==='all'||c.split(' ').indexOf(f)>-1));});
});});
var state={beh:'Skin fade · 45 min · € 38',who:'eerste vrije',tijd:'13:30'};
function sum(){s.querySelector('.vs-sum-beh').textContent=state.beh; s.querySelector('.vs-sum-rest').textContent='do 15 okt, '+state.tijd+' · '+state.who;}
s.querySelectorAll('.vs-chips').forEach(function(g){var key=g.getAttribute('data-g');
  g.querySelectorAll('button').forEach(function(btn){btn.addEventListener('click',function(){if(btn.disabled) return;
    g.querySelectorAll('button').forEach(function(x){x.classList.toggle('is-on',x===btn);}); state[key]=btn.getAttribute('data-v'); sum();});});
});
}
init(document.querySelector('.jouw-container'));