/* ray.tdgdigital.com — "Neem plaats." Concept voor Raymond Deckers Haarmode (RDH Nuenen).
   Zwart/wit uit het logo, papier uit de salon, koper van het huisnummer 26. Motief: de spiegel en de kam. */
@font-face{font-family:"Display";src:url(/fonts/display.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Tekst";src:url(/fonts/tekst.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Accent";src:url(/fonts/accent.woff2) format("woff2");font-style:italic;font-display:swap}
:root{--inkt:#0f0f0e;--inkt2:#1b1b19;--papier:#f3efe7;--wit:#fbf9f5;--koper:#d07a48;--koper-d:#994a22;--groen:#1e3226;
  --lijn:rgba(255,255,255,.18);--lijn-d:rgba(15,15,14,.18);--rand:clamp(1.15rem,4.2vw,4.5rem);--kop-h:4.5rem;--accent:var(--koper)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--kop-h)}
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}}
body{margin:0;background:var(--inkt);color:var(--papier);font-family:"Tekst",system-ui,sans-serif;font-size:1.0625rem;line-height:1.6}
img,video,svg{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
p,li,dd{hyphens:auto;overflow-wrap:break-word}
h1,h2,h3,h4{hyphens:manual;overflow-wrap:normal;text-wrap:balance;margin:0}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
address{font-style:normal}
:focus-visible{outline:2px solid var(--koper);outline-offset:3px}
a[href^=mailto],a[href^=tel]{hyphens:none;overflow-wrap:anywhere}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--papier);color:var(--inkt);padding:.5rem 1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(100% - 2*var(--rand),88rem);margin-inline:auto}
.donker{background:var(--inkt);color:var(--papier)}
.papier{background:var(--papier);color:var(--inkt);--lijn:var(--lijn-d);--accent:var(--koper-d)}
section{position:relative;padding-block:clamp(4rem,9vw,8.5rem)}
.reus{font-family:"Display",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.9rem,7.4vw,7rem);line-height:.9;letter-spacing:.004em}
.groot{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.5}
.klein,small{font-size:.875rem}
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.6rem 1.5rem;background:var(--koper);color:var(--inkt);font-weight:700;text-decoration:none;border-radius:.15rem;transition:background-color .2s}
.knop:hover{background:var(--papier)}
.papier .knop{background:var(--inkt);color:var(--papier)}.papier .knop:hover{background:var(--koper-d)}
.link{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.3em}
.link:hover{color:var(--accent)}
.rij-knoppen{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;margin:0}
.nu{display:inline-flex;align-items:baseline;gap:.6rem;font-weight:600;margin:0 0 1.2rem}
.nu-stip{width:.6rem;height:.6rem;border-radius:50%;background:var(--koper);flex:none;transform:translateY(-.05em)}
.nu.is-open .nu-stip{background:#73d08a;box-shadow:0 0 0 .3rem rgba(115,208,138,.18)}

/* kam: de overgang tussen donker en papier (uit het kam-en-schaar-icoon van hun prijslijst) */
.kam{height:1.5rem;background:var(--papier);position:relative}
.kam::before{content:"";position:absolute;inset:0 0 .25rem;background:repeating-linear-gradient(90deg,var(--inkt) 0 .2rem,transparent .2rem .56rem)}
.kam::after{content:"";position:absolute;inset:0 0 auto;height:.3rem;background:var(--inkt)}
.kam-op-donker{background:var(--inkt)}
.kam-op-donker::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 .2rem,transparent .2rem .56rem)}
.kam-op-donker::after{background:rgba(255,255,255,.2)}
.papier + .donker::before,.papier + .s-groen::before{content:"";position:absolute;z-index:2;left:0;right:0;bottom:100%;height:1.25rem;background:repeating-linear-gradient(90deg,var(--inkt) 0 .2rem,transparent .2rem .56rem)}
.papier + .s-groen::before{background:repeating-linear-gradient(90deg,var(--groen) 0 .2rem,transparent .2rem .56rem)}

/* kop */
.kop{position:fixed;inset:0 0 auto;z-index:50;height:var(--kop-h);display:flex;align-items:center;gap:1.5rem;padding-inline:var(--rand);color:var(--papier);transition:background-color .3s}
.kop::before{content:"";position:absolute;inset:0 0 -2rem;z-index:-1;background:linear-gradient(rgba(15,15,14,.75),transparent);pointer-events:none;transition:opacity .3s}
.kop.is-vast{background:var(--inkt)}.kop.is-vast::before{opacity:0}
.kop-logo{display:flex;align-items:center;min-height:2.75rem;flex:none}
.kop-logo img{width:auto;height:2.5rem}
.kop-nav{margin-left:auto}
.kop-nav ul{display:flex;gap:.2rem}
.kop-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:0 .8rem;font-weight:600;font-size:.98rem;text-decoration:none}
.kop-nav a:hover,.kop-nav a[aria-current]{color:var(--koper)}
.kop-afspraak{min-height:2.75rem;padding:.4rem 1.2rem;flex:none}
.menu-knop{display:none;flex:none;width:2.9rem;height:2.9rem;align-items:center;justify-content:center;margin-left:.2rem}
.menu-streep,.menu-streep::before{display:block;width:1.6rem;height:2px;background:currentColor;transition:transform .25s}
.menu-streep::before{content:"";transform:translateY(.5rem)}
.menu-knop[aria-expanded=true] .menu-streep{transform:translateY(.25rem) rotate(45deg)}
.menu-knop[aria-expanded=true] .menu-streep::before{transform:rotate(-90deg)}
.lade{position:fixed;inset:0;z-index:45;background:var(--inkt);color:var(--papier);padding:calc(var(--kop-h) + 1.5rem) var(--rand) 2rem;overflow-y:auto;display:flex;flex-direction:column;gap:2rem}
.lade ul a{display:block;font-family:"Display",sans-serif;text-transform:uppercase;font-size:clamp(2.4rem,11vw,4rem);line-height:1.12;text-decoration:none}
.lade ul a[aria-current]{color:var(--koper)}
.lade-onder{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin:0}
.lade-onder a:not(.knop){min-height:2.75rem;display:inline-flex;align-items:center;font-weight:600}
@media (max-width:1050px){.kop-nav{display:none}.kop-afspraak{margin-left:auto}.menu-knop{display:inline-flex}}
@media (max-width:380px){.kop-afspraak{padding-inline:.9rem}}

/* opening: de beslagen spiegel */
.beslagen{display:none}
html.ray-beslagen{overflow:hidden}
html.ray-beslagen .beslagen{display:grid;position:fixed;inset:0;z-index:100;place-items:center;background:#c5c9c6;color:var(--inkt);touch-action:none;transition:opacity .9s}
.beslagen.is-weg{opacity:0;pointer-events:none}
.beslagen canvas{position:absolute;inset:0;width:100%;height:100%}
.beslagen-tekst{position:relative;display:grid;justify-items:center;gap:.9rem;padding:1.5rem;text-align:center;pointer-events:none;transition:opacity .5s}
.beslagen.is-bezig .beslagen-tekst{opacity:0}
.beslagen-tekst img{width:min(46vw,13rem);height:auto;filter:invert(1);user-select:none;-webkit-user-drag:none}
.beslagen-zin{font-family:"Accent",Georgia,serif;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.2;margin:0}
.beslagen-knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;align-items:center;margin:0;pointer-events:auto}
.beslagen .knop{background:var(--inkt);color:var(--papier)}
.beslagen .link{text-decoration-color:var(--inkt)}
.beslagen-hint{font-size:.9rem;margin:0;opacity:.75}
@media (max-height:480px){.beslagen-tekst img{width:6.5rem}.beslagen-hint{display:none}}

/* hero */
.s-hero{min-height:100svh;padding:calc(var(--kop-h) + 1rem) 0 clamp(2rem,5vw,4.5rem);display:flex;align-items:flex-end;overflow:hidden}
.hero-beeld{position:absolute;inset:0}
.hero-beeld picture,.hero-beeld img,.hero-beeld video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-beeld video{opacity:0;transition:opacity 1.2s}.hero-beeld video.is-aan{opacity:1}
.hero-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,14,.5) 0,rgba(15,15,14,.05) 26%,rgba(15,15,14,.25) 52%,rgba(15,15,14,.92) 86%,var(--inkt) 100%)}
.hero-tekst{position:relative;width:min(100% - 2*var(--rand),88rem);margin-inline:auto}
.hero-boven{font-weight:700;font-size:clamp(1rem,1.5vw,1.3rem);margin:0 0 .4rem}
.hero-boven i{font-style:normal;color:var(--koper);padding-inline:.25em}
.hero-kop{font-family:"Display",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:min(calc((100vw - 2*var(--rand))/4.08),46svh,22rem);line-height:.8;letter-spacing:.002em;margin:0 0 .12em -.03em;white-space:nowrap}
.hero-sub{font-family:"Accent",Georgia,serif;font-style:italic;font-size:clamp(1.25rem,2.3vw,2rem);line-height:1.25;margin:0 0 1.1rem;max-width:34ch}
html.ray-helder .hero-kop{animation:ray-helder 1.5s cubic-bezier(.2,.7,.2,1) both}
@keyframes ray-helder{from{filter:blur(.22em);opacity:.25}to{filter:blur(0);opacity:1}}
@media (max-width:700px){.hero-beeld::after{background:linear-gradient(180deg,rgba(15,15,14,.55) 0,rgba(15,15,14,.05) 20%,rgba(15,15,14,.5) 38%,rgba(15,15,14,.9) 62%,var(--inkt) 100%)}}
@media (orientation:landscape) and (max-height:520px){.s-hero{padding-bottom:1.2rem}.hero-kop{font-size:min(15vw,40svh)}.hero-sub{font-size:1.05rem;margin-bottom:.5rem}.hero-boven{display:none}.s-hero .nu{margin-bottom:.6rem}}

/* welkom */
.s-welkom{padding-top:clamp(2.5rem,6vw,6rem)}
.welkom-rooster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.5rem clamp(2rem,6vw,7rem);align-items:start}
.welkom-kop{font-family:"Display",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,4.4vw,4.2rem);line-height:.95}
.welkom-citaat{font-family:"Accent",Georgia,serif;font-style:italic;font-size:clamp(1.35rem,2.35vw,2.15rem);line-height:1.36;margin:0 0 1.4rem;hyphens:manual}
.welkom-klein{color:var(--koper);font-weight:600;margin:0;grid-column:2}
@media (max-width:800px){.welkom-rooster{grid-template-columns:minmax(0,1fr)}.welkom-klein{grid-column:1}}

/* drie spiegels: Barber · Hair · MakeUp */
.s-drie{padding-top:0}
.drie-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.6rem)}
.drie-paneel a{text-decoration:none;position:relative}
.drie-beeld{display:block;aspect-ratio:3/4;overflow:hidden;position:relative;border-radius:.15rem}
.drie-beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.drie-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(15,15,14,.88));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.drie-paneel a:hover .drie-beeld img{transform:scale(1.04)}
.drie-paneel a{display:grid}
.drie-beeld,.drie-naam{grid-area:1/1}
.drie-naam{position:relative;align-self:end;padding:0 0 .12em clamp(.8rem,1.6vw,1.6rem);pointer-events:none;font-family:"Display",sans-serif;text-transform:uppercase;font-size:clamp(3.4rem,8.2vw,8rem);line-height:.82}
.drie-prijzen{display:grid;gap:.15rem;padding:.9rem 0 0;font-size:.95rem}
.drie-prijzen > span{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--lijn);padding-bottom:.35rem}
.drie-prijzen > span > span{min-width:0;overflow-wrap:break-word;hyphens:manual}
.drie-prijzen b{white-space:nowrap;color:var(--koper);font-weight:600}
.drie-paneel a:hover .drie-naam{color:var(--koper)}
@media (min-width:701px) and (max-width:960px){.drie-prijzen > span{flex-direction:column;gap:0}}
@media (max-width:700px){.drie-rij{grid-template-columns:minmax(0,1fr);gap:2rem}.drie-beeld{aspect-ratio:4/3}.drie-naam{font-size:clamp(4rem,22vw,6.5rem)}}

/* spiegelwand */
.wand-kop{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:1.2rem clamp(2rem,6vw,7rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
.wand-intro{margin:0;color:rgba(243,239,231,.82)}
.wand-rij{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1.4rem,2.2vw,2.4rem) clamp(.8rem,1.4vw,1.5rem);width:min(100% - 2*var(--rand),88rem);margin-inline:auto}
.spiegel > button,.spiegel > a{display:grid;width:100%;text-align:left;text-decoration:none;gap:.1rem}
.spiegel-glas{display:block;position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:.12rem;background:linear-gradient(160deg,#2a2b29,#131312 60%,#232422);margin-bottom:.75rem;transition:filter .5s,box-shadow .3s}
.spiegel-glas::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset -.45rem 0 0 -.25rem rgba(255,255,255,.5);background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.13) 46%,transparent 54%);background-size:260% 100%;background-position:120% 0;transition:background-position 1.1s}
.spiegel button:hover .spiegel-glas::before,.spiegel [aria-pressed=true] .spiegel-glas::before{background-position:-20% 0}
.spiegel-glas img,.spiegel-glas video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spiegel-glas video{opacity:0;transition:opacity .35s}.spiegel-glas video.is-aan{opacity:1}
.spiegel-naam{font-family:"Display",sans-serif;text-transform:uppercase;font-size:clamp(1.9rem,2.9vw,2.9rem);line-height:.95}
.spiegel-rol{font-size:.9rem;color:rgba(243,239,231,.78);line-height:1.35}
.spiegel-mono{position:absolute;inset:0;display:grid;place-items:center;font-family:"Display",sans-serif;font-size:clamp(6rem,11vw,11rem);color:rgba(255,255,255,.14)}
.spiegel-vrij .spiegel-glas{background:none;outline:1px dashed rgba(255,255,255,.5);outline-offset:-1px}
.spiegel-vrij .spiegel-glas::before{display:none}
.spiegel-vrij-tekst{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;text-align:center;font-family:"Accent",Georgia,serif;font-style:italic;font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.25}
.spiegel-vrij a:hover .spiegel-naam{color:var(--koper)}
.s-wand.is-gekozen .spiegel-glas{filter:brightness(.5) saturate(.7)}
.s-wand.is-gekozen [aria-pressed=true] .spiegel-glas{filter:none;box-shadow:0 0 0 2px var(--koper)}
[aria-pressed=true] .spiegel-naam{color:var(--koper)}
.wand-voet{display:flex;flex-wrap:wrap;gap:.4rem 2rem;align-items:center;justify-content:space-between;margin-top:clamp(1.6rem,3vw,2.6rem);margin-bottom:0}
@media (max-width:1100px){.wand-rij{grid-template-columns:repeat(3,minmax(0,1fr))}.wand-kop{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.wand-rij{display:flex;width:100%;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--rand) .6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wand-rij::-webkit-scrollbar{display:none}.spiegel{flex:0 0 62vw;scroll-snap-align:center}.spiegel-mono{font-size:9rem}}
@media (max-width:700px) and (orientation:landscape){.spiegel{flex-basis:30vw}}

/* prijswijzer */
.prijs-kop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1rem clamp(2rem,6vw,7rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
.prijs-uitleg{margin:0}
.prijs-taal{grid-column:2;display:flex;gap:.3rem;margin:0}
.prijs-taal button{min-height:2.75rem;padding:0 1rem;font-weight:600;border:1px solid var(--lijn);border-radius:.15rem}
.prijs-taal [aria-pressed=true]{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.prijs-rooster{display:grid;grid-template-columns:13rem minmax(0,1fr) 21rem;gap:clamp(1.5rem,3.5vw,4rem);align-items:start}
.prijs-lengte{position:sticky;top:calc(var(--kop-h) + 1rem);display:grid;justify-items:center;gap:.8rem}
.lok{width:5.5rem;height:auto;aspect-ratio:120/520;overflow:visible}
.lok path{fill:none;stroke:var(--inkt);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:66;transition:stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1)}
.lengte-knoppen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;width:100%}
.lengte-knoppen button{display:grid;justify-items:center;align-content:end;gap:.2rem;min-height:4.6rem;padding:.4rem 0 .3rem;border:1px solid var(--lijn);border-radius:.15rem;font-weight:700;font-size:.85rem;transition:background-color .2s,color .2s}
.lengte-knoppen img{width:calc(2.3rem*var(--kamschaal));height:auto;filter:invert(1)}
.lengte-knoppen [aria-pressed=true]{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.lengte-knoppen [aria-pressed=true] img{filter:none}
.lengte-as{display:flex;justify-content:space-between;gap:.5rem;width:100%;font-size:.78rem;line-height:1.2;margin:0;color:rgba(15,15,14,.7)}
.lengte-as span:last-child{text-align:right}
.prijs-tabs{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;border-bottom:2px solid var(--inkt);margin-bottom:.6rem}
.prijs-tabs button{font-family:"Display",sans-serif;text-transform:uppercase;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1;min-height:3rem;min-width:2.75rem;padding:.3rem 0;color:rgba(15,15,14,.45);border-bottom:.3rem solid transparent;margin-bottom:-2px}
.prijs-tabs [aria-selected=true]{color:var(--inkt);border-bottom-color:var(--koper-d)}
.prijs-lijst h4{font-size:.95rem;font-weight:800;margin:1.6rem 0 .2rem}
.pr-rij label,.pr-vast{display:grid;grid-template-columns:1.5rem minmax(0,1fr) auto;gap:.2rem .9rem;align-items:center;min-height:3rem;padding:.45rem 0;border-bottom:1px solid var(--lijn)}
.pr-rij label{cursor:pointer}
.pr-vast .pr-naam{grid-column:2}
.pr-rij input{position:absolute;opacity:0;width:1px;height:1px}
.pr-vink{width:1.25rem;height:1.25rem;border:1.5px solid var(--inkt);border-radius:.12rem;display:grid;place-items:center}
.pr-rij input:checked + .pr-vink{background:var(--inkt)}
.pr-rij input:checked + .pr-vink::after{content:"";width:.62rem;height:.34rem;border-left:2px solid var(--papier);border-bottom:2px solid var(--papier);transform:translateY(-.08rem) rotate(-45deg)}
.pr-rij input:focus-visible + .pr-vink{outline:2px solid var(--koper-d);outline-offset:3px}
.pr-naam{hyphens:manual;overflow-wrap:break-word;min-width:0}
.pr-prijs{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.pr-lengte .pr-prijs{color:var(--koper-d)}
.pr-prijs.is-wissel{animation:ray-wissel .45s}
@keyframes ray-wissel{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
.pr-jm{display:grid;gap:0;font-weight:700}.pr-jm i{font-style:normal;font-weight:400;font-size:.85rem;margin-right:.3rem}
.pr-noot{font-size:.9rem;font-style:italic;margin:.5rem 0 0}
.prijs-bon{position:sticky;top:calc(var(--kop-h) + 1rem);background:var(--wit);padding:1.4rem 1.3rem 1.2rem;box-shadow:0 1px 0 var(--lijn),0 1.2rem 2.4rem -1.4rem rgba(15,15,14,.35)}
.prijs-bon h3{font-family:"Display",sans-serif;font-weight:400;text-transform:uppercase;font-size:2.1rem;line-height:1;margin-bottom:.7rem}
.prijs-bon ul{border-top:1px dashed rgba(15,15,14,.4);border-bottom:1px dashed rgba(15,15,14,.4);padding:.6rem 0;margin-bottom:.6rem;font-size:.92rem}
.prijs-bon li{display:flex;justify-content:space-between;gap:1rem;padding:.12rem 0;hyphens:none}
.prijs-bon li span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.bon-leeg{color:rgba(15,15,14,.65)}
.bon-totaal{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 1rem}
.bon-totaal b{font-family:"Display",sans-serif;font-weight:400;font-size:2.9rem;line-height:1}
.prijs-bon .knop{width:100%}
.bon-noten{font-size:.8rem;line-height:1.45;color:rgba(15,15,14,.75)}.bon-noten p{margin:0 0 .5em}
.bon-pdf{font-size:.85rem;margin:.6rem 0 0}
.bon-pdf a{display:inline-flex;min-height:2.75rem;align-items:center}
@media (max-width:1180px){.prijs-rooster{grid-template-columns:minmax(0,1fr) 19rem}.prijs-lengte{grid-column:1/-1;position:static;justify-items:start;max-width:30rem}.lok{display:none}}
@media (max-width:800px){.prijs-kop{grid-template-columns:minmax(0,1fr)}.prijs-taal{grid-column:1}.prijs-rooster{grid-template-columns:minmax(0,1fr)}.prijs-bon{position:static}.prijs-lengte{max-width:none}}

/* kleur: Star Colorist */
.s-kleur{min-height:min(46rem,90svh);display:flex;align-items:center}
.kleur-beeld{position:absolute;inset:0 0 0 38%}
.kleur-beeld img{width:100%;height:100%;object-fit:cover}
.kleur-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--inkt) 0,rgba(15,15,14,.55) 38%,rgba(15,15,14,.1) 100%)}
.kleur-rooster{position:relative;z-index:1}
.kleur-rooster > *{max-width:36rem}
.kleur-boven{font-weight:600;color:var(--koper);margin-bottom:.8rem}
.kleur-rooster .reus{max-width:9em;margin-bottom:1.6rem}
.kleur-citaat{font-family:"Accent",Georgia,serif;font-style:italic;font-size:clamp(1.3rem,2vw,1.85rem);line-height:1.34;margin:0 0 1.2rem}
@media (max-width:800px){.s-kleur{display:block;padding-top:0}.kleur-beeld{position:relative;inset:auto;aspect-ratio:16/10;margin-bottom:2rem}.kleur-beeld::after{background:linear-gradient(180deg,transparent 50%,var(--inkt))}}

/* verhaal */
.verhaal-rooster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem clamp(2rem,6vw,7rem);align-items:start}
.verhaal-beeld{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:sticky;top:calc(var(--kop-h) + 1.5rem)}
.verhaal-beeld img{width:100%;height:auto;border-radius:.12rem}
.verhaal-beeld img:first-child{grid-column:1/6;grid-row:1}
.verhaal-beeld img:last-child{grid-column:3/7;grid-row:2;margin-top:-18%;box-shadow:0 0 0 .5rem var(--papier)}
.verhaal-tekst .reus{margin-bottom:clamp(1.6rem,3vw,2.8rem)}
.verhaal-jaren li{display:grid;grid-template-columns:clamp(5.2rem,9vw,8.5rem) minmax(0,1fr);gap:1.2rem;align-items:baseline;padding:1.1rem 0;border-top:1px solid var(--lijn)}
.verhaal-jaren li:last-child{border-bottom:1px solid var(--lijn);margin-bottom:1.6rem}
.jaar{font-family:"Display",sans-serif;font-weight:400;font-size:clamp(2.8rem,5vw,4.8rem);line-height:.9;color:var(--koper-d)}
.verhaal-jaren p{margin:0}
@media (max-width:900px){.verhaal-rooster{grid-template-columns:minmax(0,1fr)}.verhaal-beeld{position:static;order:2}}

/* de plank: brands */
.plank-lijst{margin-top:clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--lijn)}
.plank-merk{border-top:1px solid var(--lijn)}
.plank-merk summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none;cursor:pointer;padding:.7rem 0 .5rem;min-height:3rem}
.plank-merk summary::-webkit-details-marker{display:none}
.plank-naam{font-family:"Display",sans-serif;text-transform:uppercase;font-size:clamp(2.3rem,5.6vw,5.4rem);line-height:.95;transition:color .2s}
.plank-merk[open] .plank-naam,.plank-merk summary:hover .plank-naam{color:var(--koper)}
.plank-dep{font-size:.9rem;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:.8rem}
.plank-dep::after{content:"+";font-family:"Display",sans-serif;font-size:2.2rem;line-height:.6;color:var(--koper);transition:transform .3s}
.plank-merk[open] .plank-dep::after{transform:rotate(45deg)}
.plank-inhoud{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:1.5rem clamp(2rem,5vw,5rem);padding:1rem 0 2.5rem}
.plank-foto{align-self:start;min-width:0}
.plank-foto img{width:100%;height:auto;max-height:26rem;object-fit:cover;border-radius:.12rem}
.plank-tekst{max-width:44rem}
.plank-sub{font-family:"Accent",Georgia,serif;font-style:italic;font-size:1.4rem;line-height:1.3}
.plank-meer{margin:1.6rem 0 0}
@media (max-width:800px){.plank-inhoud{grid-template-columns:minmax(0,1fr)}.plank-dep{font-size:0;gap:0}}

/* groen */
.s-groen{background:var(--groen);color:var(--papier)}
.groen-rooster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,4fr);gap:2rem clamp(1.5rem,4vw,4.5rem);align-items:center}
.groen-tekst .reus{font-size:clamp(2.6rem,5.2vw,5rem);margin-bottom:1.4rem}
.groen-tekst p{margin:0}
.groen-lijst{font-family:"Accent",Georgia,serif;font-style:italic;font-size:clamp(1.4rem,2.2vw,2.1rem);line-height:1.2}
.groen-lijst li{padding:.6rem 0;border-top:1px solid rgba(255,255,255,.25);hyphens:manual}
.groen-lijst li:last-child{border-bottom:1px solid rgba(255,255,255,.25)}
.groen-beeld{min-width:0}
.groen-beeld img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:.12rem}
@media (max-width:1000px){.groen-rooster{grid-template-columns:repeat(2,minmax(0,1fr))}.groen-tekst{grid-column:1/-1}.groen-beeld img{aspect-ratio:4/3}}
@media (max-width:640px){.groen-rooster{grid-template-columns:minmax(0,1fr)}}

/* giftcard */
.kaart-rooster{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:2.5rem clamp(2rem,6vw,7rem);align-items:center}
.kaart-links .reus{margin-bottom:1.4rem}
.kaart-links > p{max-width:36rem}
.kaart-schuif{display:grid;gap:.4rem;font-weight:700;max-width:36rem;margin:1.6rem 0 1.4rem}
.kaart-schuif input{appearance:none;-webkit-appearance:none;width:100%;height:2.75rem;margin:0;background:transparent;cursor:pointer;--kaartp:17%;touch-action:pan-y}
.kaart-schuif input::-webkit-slider-runnable-track{height:.3rem;border-radius:1rem;background:linear-gradient(90deg,var(--koper-d) var(--kaartp),rgba(15,15,14,.2) var(--kaartp))}
.kaart-schuif input::-moz-range-track{height:.3rem;border-radius:1rem;background:linear-gradient(90deg,var(--koper-d) var(--kaartp),rgba(15,15,14,.2) var(--kaartp))}
.kaart-schuif input::-webkit-slider-thumb{-webkit-appearance:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--inkt);border:.3rem solid var(--papier);box-shadow:0 0 0 1.5px var(--inkt);margin-top:-.8rem}
.kaart-schuif input::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--inkt);border:.3rem solid var(--papier);box-shadow:0 0 0 1.5px var(--inkt)}
.kaart-links .klein{margin:1.2rem 0 0}.kaart-links .klein a{display:inline-flex;min-height:2.75rem;align-items:center}
.kaart-rechts{padding:6% 4%;min-width:0}
.giftcard{aspect-ratio:1.586;background:linear-gradient(135deg,#232321,var(--inkt) 55%);color:var(--papier);border-radius:.7rem;padding:7% 7% 6%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:space-between;rotate:-4deg;box-shadow:0 2.4rem 3rem -1.8rem rgba(15,15,14,.6);container-type:inline-size}
.giftcard img{width:38%;height:auto;grid-column:1/-1}
.giftcard-naam{font-family:"Accent",Georgia,serif;font-style:italic;font-size:6cqi;align-self:end}
.giftcard-bedrag{font-family:"Display",sans-serif;font-size:23cqi;line-height:.8;color:var(--koper);align-self:end;font-variant-numeric:tabular-nums}
@media (max-width:800px){.kaart-rooster{grid-template-columns:minmax(0,1fr)}.kaart-rechts{order:-1;padding:4% 6% 2%}}

/* bezoek */
.bezoek-beeld{position:absolute;inset:0;opacity:.2}
.bezoek-beeld img{width:100%;height:100%;object-fit:cover}
.bezoek-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--inkt) 20%,transparent)}
.bezoek-rooster{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3.2fr) minmax(0,3.2fr);gap:2.5rem clamp(1.5rem,4vw,5rem);align-items:start}
.bezoek-links .reus{margin-bottom:1.4rem}
.bezoek-links .groot{max-width:34rem}
.s-bezoek h3{font-family:"Display",sans-serif;font-weight:400;text-transform:uppercase;font-size:2rem;line-height:1;margin-bottom:.9rem}
.tijden{width:100%;border-collapse:collapse}
.tijden th,.tijden td{text-align:left;font-weight:400;padding:.42rem 0;border-bottom:1px solid var(--lijn)}
.tijden td{text-align:right;white-space:nowrap}
.tijden tr.is-vandaag th,.tijden tr.is-vandaag td{color:var(--koper);font-weight:700}
.bezoek-rechts a{display:inline-flex;min-height:2.5rem;align-items:center}
.app{display:grid;gap:.5rem;margin-top:1.4rem}.app img{width:12rem;height:auto;border-radius:.3rem;background:#fff;padding:.3rem}
@media (max-width:1000px){.bezoek-rooster{grid-template-columns:repeat(2,minmax(0,1fr))}.bezoek-links{grid-column:1/-1}}
@media (max-width:600px){.bezoek-rooster{grid-template-columns:minmax(0,1fr)}}

/* voet */
.voet{border-top:1px solid var(--lijn);padding-block:2.5rem 2rem;font-size:.92rem}
.voet-rooster{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.5rem clamp(1.5rem,4vw,5rem);align-items:start}
.voet-logo{display:inline-flex;min-height:2.75rem}.voet-logo img{width:7rem;height:auto}
.voet-doel{max-width:40rem;margin:0;font-family:"Accent",Georgia,serif;font-style:italic;font-size:1.15rem;line-height:1.4}
.voet-links a{display:inline-flex;min-height:2.75rem;align-items:center}
.voet-klein{grid-column:1/-1;margin:0;color:rgba(243,239,231,.7);border-top:1px solid var(--lijn);padding-top:1rem}
.voet-klein a{display:inline-flex;min-height:2.75rem;align-items:center}
@media (max-width:800px){.voet-rooster{grid-template-columns:minmax(0,1fr)}}

/* subpagina's */
.s-pk{padding:calc(var(--kop-h) + clamp(3rem,8vw,7rem)) 0 clamp(2.5rem,5vw,4.5rem);overflow:hidden}
.s-pk .reus{font-size:min(clamp(3.2rem,9vw,9rem),calc((100vw - 2*var(--rand))/(var(--n,8)*.4)));max-width:13em}
.pag-salon .s-pk .reus{font-size:min(clamp(2.7rem,6.4vw,6.2rem),calc((100vw - 2*var(--rand))/(var(--n,8)*.4)))}
.pk-boven{font-weight:600;color:var(--koper);margin-bottom:.6rem}.pk-boven a{display:inline-flex;min-height:2.75rem;align-items:center}
.pk-beeld{position:absolute;inset:0}.pk-beeld img{width:100%;height:100%;object-fit:cover}
.pk-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,14,.72),rgba(15,15,14,.5) 50%,var(--inkt))}
.s-pk .wrap{position:relative}
.pag-salon .s-pk{min-height:78svh;display:flex;align-items:flex-end}
.proza{max-width:none}
.proza > *{max-width:46rem}
.proza h2{font-family:"Display",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2rem,3.4vw,3rem);line-height:1;margin:2rem 0 .8rem}
.proza ul{list-style:disc;padding-left:1.3rem;margin-bottom:1.2em}
.proza a:not(.knop){text-decoration-color:var(--koper-d);text-underline-offset:.2em}
.vac-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem clamp(2rem,6vw,7rem)}
.vac-lijst li{border-top:2px solid var(--inkt);padding-top:1.2rem}
.vac-lijst h2{font-family:"Display",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,4vw,3.8rem);line-height:.95;margin-bottom:1rem}
@media (max-width:800px){.vac-lijst{grid-template-columns:minmax(0,1fr)}}
.gal-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.5rem,1vw,1rem);margin-top:clamp(1.6rem,3vw,3rem)}
.gal-rij button{display:block;width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:.12rem}
.gal-w{grid-column:1/-1}.gal-w button{aspect-ratio:21/9}
.gal-rij img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gal-rij button:hover img{transform:scale(1.04)}
@media (max-width:1000px){.gal-rij{grid-template-columns:repeat(3,minmax(0,1fr))}.gal-rij li:last-child{display:none}}
@media (max-width:700px){.gal-rij{grid-template-columns:repeat(2,minmax(0,1fr))}.gal-rij li:last-child{display:block}.gal-w button{aspect-ratio:16/9}.gal-rij li:nth-last-child(2){grid-column:auto}}
.lichtbak{border:0;padding:0;background:rgba(15,15,14,.96);color:var(--papier);width:100vw;height:100dvh;max-width:none;max-height:none;overflow-y:auto}
.lichtbak[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;justify-items:center;gap:.6rem;padding:1rem}
.lichtbak::backdrop{background:rgba(15,15,14,.9)}
.lichtbak img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;align-self:center;min-height:0}
.lichtbak p{margin:0}
.lichtbak button{min-height:2.75rem;min-width:2.75rem;padding:0 1rem;font-weight:600;border:1px solid var(--lijn);border-radius:.15rem}
.lichtbak-sluit{justify-self:end}.lichtbak-nav{display:flex;gap:.6rem}
.s-tabellen h3{font-family:"Display",sans-serif;font-weight:400;text-transform:uppercase;font-size:2.2rem;line-height:1;margin:0 0 1rem;color:var(--koper)}
.tab-rooster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem clamp(2rem,5vw,6rem);margin-top:clamp(2rem,4vw,3.5rem);font-size:.95rem}
.tab-rooster > div > p{font-size:.85rem;color:rgba(243,239,231,.8);margin:0 0 .6em}
.ptabel{width:100%;border-collapse:collapse;margin-bottom:2.2rem;scroll-margin-top:calc(var(--kop-h) + 1rem)}
.ptabel caption{text-align:left;font-family:"Display",sans-serif;text-transform:uppercase;font-size:1.9rem;line-height:1;padding-bottom:.4rem}
.ptabel th,.ptabel td{padding:.42rem 0 .42rem .7rem;border-bottom:1px solid var(--lijn);text-align:right;font-weight:400;vertical-align:baseline;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptabel th:first-child{text-align:left;padding-left:0;white-space:normal;hyphens:auto;overflow-wrap:anywhere}
.ptabel thead th{font-weight:700;font-size:.85rem;vertical-align:bottom}
.ptabel thead img{width:calc(1.7rem*var(--kamschaal));height:auto;margin-left:auto}
.ptabel .pt-sub th{font-weight:800;padding-top:1.1rem}
.ptabel .pt-noot td{text-align:left;font-style:italic;white-space:normal;padding-left:0;font-size:.88rem}
@media (max-width:1100px){.tab-rooster{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.ptabel thead{display:none}.ptabel tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--lijn);padding:.35rem 0}
  .ptabel th,.ptabel td{border:0;padding:.1rem 0;text-align:left;font-size:.9rem}.ptabel tbody th{grid-column:1/-1}.ptabel td[colspan]{grid-column:1/-1;font-weight:700}
  .ptabel td[data-l]::before{content:attr(data-l);display:block;font-size:.68rem;opacity:.65}.ptabel td[data-l]{font-weight:700}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{.kop,.lade,.beslagen,.hero-beeld video{display:none!important}body{background:#fff;color:#000}}