/* =====================================================================
   MARLI NAILS: design system (October 2026)
   Warm off-white and charcoal, with Marli pink from the logo as the accent.
   Bricolage Grotesque for headings, Instrument Serif Italic for a few words,
   DM Sans for everything you read.
   Three recurring details give the site its own handwriting:
   1. the nail shape (photo frames, thumbnails and the small pink marks),
   2. stickers (short labels that sit slightly tilted on photos),
   3. the treatment index (thumbnail, name, price) instead of cards.
   ===================================================================== */
:root{
  --ivory:#f7f3ee; --paper:#fdfbf8; --stone:#efe8df; --stone-2:#ddd3c7;
  --ink:#231f1d; --text:#3a3431; --muted:#615953;
  --pink:#c8136a;      /* buttons, stickers, the booking block (white text 5.6:1) */
  --pink-dk:#a80f58;   /* hover */
  --pink-text:#b3125f; /* pink words on light backgrounds (6:1) */
  --pink-hot:#f00070;  /* the logo pink, only for small marks */
  --pink-pale:#ffd6e7; /* pink words on the pink block (large text) */
  --pink-soft:#f49ac1; /* pink words on charcoal */
  --line:rgba(35,31,29,.14);
  --nail:50% 50% 50% 50% / 62% 62% 38% 38%;   /* almond nail */
  --nail-tip:50% 50% 10px 10px / 30% 30% 10px 10px; /* tall frame with a nail-tip top */
  --display:"Bricolage Grotesque","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"DM Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:1440px; --pad:clamp(20px,4.5vw,64px); --sec:clamp(80px,10vw,152px);
  --ease:cubic-bezier(.22,.8,.2,1); --hdr:76px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 24px)}
body{margin:0;background:var(--ivory);color:var(--text);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:1024px){body{font-size:18px}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em;max-width:62ch}
h1,h2,h3{margin:0;color:var(--ink);overflow-wrap:break-word}
h1,h2{font:600 1em/.98 var(--display);letter-spacing:-.035em;text-wrap:balance}
h3{font:600 1.1rem/1.3 var(--display);letter-spacing:-.01em;hyphens:auto}
em{font-style:italic}
/* The expressive italic: a serif word inside a grotesque heading. */
h1 em,h2 em,.lead em,.ftr-statement em{font-family:var(--serif);font-weight:400;font-size:1.08em;letter-spacing:-.01em;line-height:.9;color:var(--pink-text)}
ul,ol{margin:0;padding:0}
address{font-style:normal}
dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 20px}
dd{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap>*{min-width:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--pink-text);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
::selection{background:var(--pink-pale);color:var(--ink)}
.skip{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;background:var(--ink);color:var(--ivory);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.no-js{padding-top:48px;padding-bottom:48px}
.no-js h1{font-size:2.6rem;margin-bottom:20px}

/* ---------- Signature 1: the nail mark ---------- */
.nail-mark,.section-label::before,.strip-label::before,.facts strong::before,.card-f .price::before{content:"";display:inline-block;flex:none;width:9px;height:13px;border-radius:var(--nail);background:var(--pink-hot);transform:rotate(-14deg)}
.section-label,.kicker{display:flex;align-items:center;gap:10px;margin:0 0 22px;max-width:none;font:600 15px/1.3 var(--display);letter-spacing:0;color:var(--ink)}
.kicker::before{content:"";display:inline-block;flex:none;width:9px;height:13px;border-radius:var(--nail);background:var(--pink-hot);transform:rotate(-14deg)}
.lead{font:500 clamp(1.3rem,2vw,1.6rem)/1.35 var(--display);letter-spacing:-.015em;color:var(--ink)}

/* ---------- Signature 2: stickers ---------- */
.sticker{display:inline-flex;align-items:center;gap:8px;margin:0;max-width:none;padding:9px 16px 10px;border-radius:999px;background:var(--pink);color:#fff;font:600 15px/1.2 var(--display);letter-spacing:-.005em;transform:rotate(-4deg);box-shadow:0 10px 24px -14px rgba(35,31,29,.55)}
.sticker-ink{background:var(--ink);color:var(--ivory)}

/* ---------- Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 26px;border:1.5px solid transparent;border-radius:6px;font:600 16px/1.2 var(--display);letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn-pink{background:var(--pink);color:#fff}
.btn-pink:hover{background:var(--pink-dk)}
.btn-light{background:var(--ivory);color:var(--ink)}
.btn-light:hover{background:var(--ink);color:var(--ivory)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--ivory)}
.btn-arrow{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 16px/1.3 var(--display);color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 1.5px no-repeat;transition:color .3s,background-size .4s var(--ease)}
.tlink:hover{color:var(--pink-text);background-size:0 1.5px}
.tlink::after{content:"→";transition:transform .35s var(--ease)}
.tlink:hover::after{transform:translateX(4px)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:70;background:rgba(247,243,238,.97);transition:box-shadow .3s}
.hdr.solid{box-shadow:0 1px 0 var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hdr)}
.logo{display:flex;align-items:center;min-height:44px;flex:none}
.logo img{width:124px;height:auto}
.nav{display:none}
.nav ul{display:flex;gap:4px;list-style:none}
.nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 12px;font:500 15px var(--display);color:var(--ink);text-decoration:none}
.nav a::after{content:"";position:absolute;left:50%;bottom:4px;width:7px;height:10px;margin-left:-3.5px;border-radius:var(--nail);background:var(--pink-hot);transform:scale(0);transition:transform .35s var(--ease)}
.nav a:hover::after{transform:scale(.7)}
.nav a[aria-current="page"]::after{transform:scale(1)}
.nav a[aria-current="page"]{color:var(--pink-text)}
.hdr-act{display:flex;align-items:center;gap:22px}
.hdr-tel{display:none;align-items:center;min-height:44px;font-size:15px;color:var(--muted);text-decoration:none}
.hdr-tel:hover{color:var(--ink)}
.hdr-book{display:none;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:6px;background:var(--pink);font:600 15px var(--display);color:#fff;text-decoration:none;transition:background .3s}
.hdr-book:hover{background:var(--pink-dk)}
.menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:44px;min-width:44px;padding:0 4px;border:0;background:none;color:var(--ink);font:600 15px var(--display);cursor:pointer}
.menu-btn .bars{position:relative;width:24px;height:9px}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),width .35s var(--ease)}
.menu-btn .bars::before{top:0;right:0}
.menu-btn .bars::after{bottom:0;width:16px}
.menu-btn .bars span{display:none}
body.menu-open .menu-btn .bars::before{transform:translateY(3.5px) rotate(45deg)}
body.menu-open .menu-btn .bars::after{width:24px;transform:translateY(-3.5px) rotate(-45deg)}
@media (min-width:1180px){
  .nav{display:block}
  .hdr-book{display:inline-flex}
  .menu-btn{display:none}
}
@media (min-width:1440px){.hdr-tel{display:inline-flex}}

/* Mobile menu: a full page with large links */
.mmenu{position:fixed;left:0;right:0;top:var(--hdr);bottom:0;z-index:65;overflow-y:auto;padding:8px var(--pad) 40px;background:var(--ivory);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
body.menu-open .mmenu{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
body.menu-open{overflow:hidden}
.mmenu ul{list-style:none}
.mmenu li a{display:flex;align-items:center;gap:14px;min-height:64px;border-bottom:1px solid var(--line);font:600 clamp(1.8rem,8vw,2.4rem)/1.1 var(--display);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.mmenu li a::before{content:"";flex:none;width:12px;height:17px;border-radius:var(--nail);background:var(--pink-hot);transform:rotate(-14deg) scale(0);transition:transform .35s var(--ease)}
.mmenu li a[aria-current="page"]{color:var(--pink-text)}
.mmenu li a[aria-current="page"]::before{transform:rotate(-14deg) scale(1)}
.mm-info{display:grid;gap:12px;margin-top:32px;font-size:16px}
.mm-info p{margin:0}
.mm-info .btn{justify-self:start}
.mm-info p a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink)}
.mm-info .hours-note{color:var(--muted)}

/* ---------- Views and images ---------- */
.view{display:none}
.view.on{display:block}
.sec{padding:var(--sec) 0}
.ph{position:relative;overflow:hidden;background:var(--stone)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-tag{position:absolute;left:14px;right:14px;bottom:12px;font-size:14px;line-height:1.4;color:var(--ink)}
.ph-tag b{display:inline-block;margin-bottom:4px;padding:2px 8px;background:var(--paper);font-size:13px}
.reveal{opacity:1}

/* ---------- Hero: headline beside a photo collage ---------- */
.hero{padding:clamp(18px,3vw,40px) 0 clamp(48px,6vw,96px)}
.hero-place{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:600 15px/1.3 var(--display);color:var(--ink)}
.hero h1{font-size:clamp(2.6rem,11vw,4.4rem);margin-bottom:20px}
.hero-text{font-size:17px;max-width:38ch;margin-bottom:28px}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.hero-figure{position:relative;margin:44px 0 40px}
.hero-backdrop{width:80%;margin-left:auto;aspect-ratio:3/4;border-radius:var(--nail-tip)}
.hero-detail{position:absolute;left:0;bottom:-28px;width:52%;aspect-ratio:4/3;overflow:hidden;border:6px solid var(--ivory);border-radius:10px;background:var(--stone)}
.hero-detail img{width:100%;height:100%;object-fit:cover}
.hero-figure .sticker{position:absolute;left:2%;top:14%;z-index:2}
.hero-scroll{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 14px var(--display);color:var(--muted);text-decoration:none}
.hero-scroll:hover{color:var(--ink)}
@media (min-width:600px) and (max-width:1179px){
  .hero-figure{max-width:560px;margin-left:auto;margin-right:auto}
}
/* Desktop: the photograph runs from the header to the info strip and off the
   right edge of the screen, with one soft curve at its top-left corner. The
   text stands beside it on warm charcoal (the colour of the footer); nothing
   is laid over the photo except the sticker. Below 1180px (where the full navigation starts) the
   hero keeps the stacked layout above. */
@media (min-width:1180px){
  .hero{--hero-bg:var(--ink);--hero-fg:var(--ivory);--hero-text:rgba(247,243,238,.86);--hero-em:var(--pink-soft);--hero-mark:var(--pink-hot);
    position:relative;isolation:isolate;display:grid;min-height:min(calc(100svh - var(--hdr)),860px);padding:clamp(40px,5vw,80px) 0 clamp(28px,3vw,40px);background:var(--hero-bg);color:var(--hero-fg)}
  .hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto auto 1fr auto;column-gap:clamp(24px,2.6vw,44px);width:100%}
  .hero-figure{position:absolute;top:0;right:0;bottom:0;width:55%;margin:0}
  .hero-backdrop{position:absolute;inset:0;width:auto;margin:0;aspect-ratio:auto;border-radius:0;border-top-left-radius:min(16vw,280px)}
  .hero-backdrop img{object-position:50% 50%}
  .hero-detail{display:none}
  .hero-place,.hero-copy,.hero-scroll{grid-column:1/6}
  .hero-place{grid-row:2;margin:0 0 clamp(18px,1.8vw,26px);color:var(--hero-fg)}
  .hero-place .nail-mark{background:var(--hero-mark)}
  .hero-copy{grid-row:3;container-type:inline-size}
  /* Sized to the column, so the headline always breaks after "verzorgde". */
  .hero h1{font-size:min(12.4cqi,6.4rem);margin-bottom:clamp(20px,2vw,30px);color:var(--hero-fg)}
  .hero h1 em{white-space:nowrap;color:var(--hero-em)}
  .hero-text{font-size:clamp(17px,1.2vw,19px);max-width:36ch;margin-bottom:clamp(26px,2.4vw,36px);color:var(--hero-text)}
  .hero .tlink{color:var(--hero-fg)}
  .hero .tlink:hover{color:var(--hero-em)}
  .hero :focus-visible{outline-color:var(--hero-fg)}
  .hero-scroll{grid-row:5;align-self:end;color:var(--hero-text)}
  .hero-scroll:hover{color:var(--hero-fg)}
  /* The sticker sits on the curve of the photograph. */
  .hero-figure .sticker{left:-28px;top:clamp(120px,14vw,220px)}
  .btn-pink{transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
  .btn-pink:hover{transform:translateY(-1px);box-shadow:0 14px 26px -16px rgba(168,15,88,.7)}
}
@media (min-width:1600px){.hero-grid{column-gap:56px}}

/* Practical information under the hero */
.strip{padding:clamp(28px,4vw,48px) 0 0}
.strip ul{list-style:none;display:grid;gap:22px;padding-top:28px;border-top:1px solid var(--line)}
.strip li{display:grid;gap:6px;font-size:16px;color:var(--muted)}
.strip-label{display:flex;align-items:center;gap:10px;font:600 15px/1.3 var(--display);color:var(--pink-text)}
.strip strong{display:block;font-weight:600;color:var(--ink)}
.strip a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-underline-offset:4px}
@media (min-width:860px){.strip ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}}

/* ---------- Maak kennis (Marjon) ---------- */
.welkom-grid{display:grid;gap:56px}
.welkom h2{font-size:clamp(2.5rem,9.6vw,5rem);margin-bottom:28px}
.welkom-img{position:relative;margin:0 0 0 auto;width:min(88%,520px)}
.welkom-img .ph{border-radius:10px}
.welkom-img figcaption{position:absolute;left:-6%;bottom:-20px;z-index:2;display:grid;gap:2px;padding:12px 18px 13px;border-radius:14px;transform:rotate(3deg)}
.welkom-img figcaption strong{font:600 17px/1.2 var(--display)}
.welkom-img figcaption span{font:400 14px/1.3 var(--sans);color:rgba(247,243,238,.86)}
.welkom-copy .lead{margin-bottom:20px}
.welkom-copy p:not(.lead){font-size:17px}
.facts{list-style:none;display:grid;gap:22px;margin-top:44px}
.facts li{display:grid;gap:4px}
.facts strong{display:flex;align-items:center;gap:10px;font:600 1.12rem/1.3 var(--display);color:var(--ink)}
.facts span{font-size:16px;color:var(--muted);padding-left:19px}
@media (min-width:600px){.facts{grid-template-columns:1fr 1fr;gap:28px 32px}}
@media (min-width:1024px){
  .welkom-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:28px;align-items:center}
  .welkom-img{grid-column:1/6;width:auto;margin:0}
  .welkom-main{grid-column:7/13}
  .welkom-img figcaption{left:auto;right:-14%;bottom:12%}
}

/* ---------- Signature 3: the treatment index ---------- */
.treatments{background:var(--stone)}
.treat-layout{display:grid;gap:40px}
.treat-intro h2{font-size:clamp(2.5rem,9.6vw,4.8rem);margin-bottom:24px}
.treat-intro p{color:var(--muted);margin-bottom:8px}
.cards{list-style:none;counter-reset:t}
.cards li+li{border-top:1px solid var(--line)}
.card{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:18px;align-items:start;padding:24px 0;color:inherit;text-decoration:none}
.card .ph{grid-row:1/3;aspect-ratio:3/4;border-radius:var(--nail-tip);transition:transform .5s var(--ease)}
.card-b{min-width:0}
.card h3{font-size:clamp(1.6rem,6.4vw,2.2rem);line-height:1.05;letter-spacing:-.03em;margin-bottom:6px;transition:color .3s}
.card p{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
.card-f{display:flex;flex-wrap:wrap;align-items:center;gap:2px 20px;margin-top:10px;font-size:16px}
.card-f .price{display:inline-flex;align-items:center;gap:9px;font:600 16px var(--display);color:var(--ink)}
.card-f .go{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 16px var(--display);color:var(--pink-text)}
.card-f .go span{transition:transform .35s var(--ease)}
.card:hover h3{color:var(--pink-text)}
.card:hover .go span{transform:translateX(4px)}
.treat-foot{display:grid;gap:4px;font-size:15px;color:var(--muted)}
.treat-foot p{margin:0}
.treat-foot a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-underline-offset:4px}
@media (min-width:700px){
  .card{grid-template-columns:104px minmax(0,1fr) auto;column-gap:32px;align-items:center;padding:28px 0}
  .card .ph{grid-row:1}
  .card-b{display:contents}
  .card h3{grid-column:2;grid-row:1;align-self:end}
  .card p{grid-column:2;grid-row:2;align-self:start;max-width:44ch;font-size:17px}
  .card-f{grid-column:3;grid-row:1/3;flex-direction:column;align-items:flex-end;margin:0;text-align:right}
  .card .ph{grid-row:1/3}
}
@media (min-width:1024px){
  .treat-layout{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:28px;row-gap:24px;align-items:start}
  .treat-intro{grid-column:1/6;position:sticky;top:calc(var(--hdr) + 40px)}
  .cards,.treat-foot{grid-column:6/13}
  .cards{margin-top:-28px}
}
@media (hover:hover){.card:hover .ph{transform:rotate(-6deg) scale(1.05)}}

/* ---------- Galerij: a small visual story ---------- */
.sec-head{display:grid;gap:20px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head h2{font-size:clamp(2.5rem,9.6vw,4.8rem)}
.sec-head p{margin:0;color:var(--muted)}
.gallery-hint{margin-top:10px!important;font-size:15px}
@media (min-width:1024px){.sec-head{grid-template-columns:7fr 4fr;gap:64px;align-items:end}}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:36px 14px;align-items:start}
.gal figure{position:relative;margin:0;min-width:0}
.gal .ph{border-radius:10px;aspect-ratio:3/4}
.gal figure:nth-child(3n+1){grid-column:1/-1}
.gal figure:nth-child(6n+1) .ph{aspect-ratio:4/3}
.gal figure:nth-child(6n+4) .ph{aspect-ratio:4/5}
.gal figure:nth-child(3n) {margin-top:56px}
.gal figure:nth-child(3n) .ph{aspect-ratio:1/1}
.gal button{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:left;font:inherit;color:inherit;border-radius:10px}
.gallery-zoom{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--paper);color:var(--ink);font:500 20px/1 var(--display)}
.gal figcaption{padding-top:10px;font:500 15px/1.35 var(--display);color:var(--ink)}
/* Large photos carry their caption as a sticker on the bottom edge. */
.gal figure:nth-child(3n+1) figcaption{position:absolute;left:14px;bottom:-16px;z-index:2;display:inline-flex;max-width:calc(100% - 28px);padding:8px 14px 9px;border-radius:999px;background:var(--pink);color:#fff;font-weight:600;transform:rotate(-3deg);box-shadow:0 10px 24px -14px rgba(35,31,29,.55)}
.gal figure:nth-child(6n+4) figcaption{left:auto;right:14px;background:var(--ink);color:var(--ivory);transform:rotate(2.5deg)}
@media (min-width:600px) and (max-width:859px){.gal figure:nth-child(6n+4){width:72%;justify-self:end}}
@media (min-width:860px){
  .gal{grid-template-columns:repeat(12,minmax(0,1fr));gap:0 28px}
  .gal figure:nth-child(n){grid-column:span 4;margin:0 0 72px}
  .gal figure:nth-child(1){grid-column:1/8;grid-row:1}
  .gal figure:nth-child(2){grid-column:8/12;grid-row:1;margin:clamp(96px,10vw,160px) 0 72px -56px;z-index:1}
  .gal figure:nth-child(3){grid-column:8/13;grid-row:2;margin-top:clamp(40px,6vw,96px)}
  .gal figure:nth-child(4){grid-column:2/7;grid-row:2}
  .gal figure:nth-child(5){grid-column:3/7;grid-row:3;align-self:end}
  .gal figure:nth-child(6){grid-column:8/13;grid-row:3;margin-top:clamp(40px,5vw,80px)}
  .gal figure:nth-child(n) .ph{aspect-ratio:4/3}
  .gal figure:nth-child(2) .ph,.gal figure:nth-child(5) .ph{aspect-ratio:3/4}
  .gal figure:nth-child(4) .ph{aspect-ratio:4/5}
  .gal figure:nth-child(2) .ph{box-shadow:0 0 0 8px var(--ivory)}
  .gal figure:nth-child(2) figcaption{padding-left:8px}
  .gallery-zoom{opacity:0;transition:opacity .3s}
  .gal button:hover .gallery-zoom,.gal button:focus-visible .gallery-zoom{opacity:1}
}

/* Photo dialog */
dialog.lb{width:min(94vw,980px);max-width:none;padding:0;border:0;background:transparent;color:var(--ivory)}
dialog.lb::backdrop{background:rgba(24,20,18,.94)}
.lb .ph{height:min(70svh,720px);background:transparent}
.lb .ph img{object-fit:contain}
.lb-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;font-size:16px}
.lb-ctrl{display:flex;gap:8px}
.lb-ctrl button{min-height:48px;min-width:48px;padding:0 18px;border:1px solid rgba(247,243,238,.6);border-radius:6px;background:transparent;color:var(--ivory);font:600 15px var(--display);cursor:pointer}
.lb-ctrl button:hover{background:var(--ivory);color:var(--ink)}
.lb :focus-visible{outline-color:var(--ivory)}
@media (max-width:859px){.lb .ph{height:min(58svh,460px)}.lb-ctrl{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Afspraak: the bold pink moment ---------- */
.book{padding:var(--sec) 0;background:var(--pink);color:#fff}
.book-grid{display:grid;gap:48px}
.book h2{font-size:clamp(2.6rem,10vw,5.6rem);margin-bottom:24px;color:#fff}
.book h2 em{color:var(--pink-pale)}
.book .section-label{color:#fff}
.book .section-label::before{background:#fff}
.book-intro>p{max-width:42ch;margin-bottom:28px}
.book-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.book .tlink{color:#fff}
.book .tlink:hover{color:var(--pink-pale)}
.book :focus-visible{outline-color:#fff}
.book-cols{display:grid;align-content:start}
.book-cols>div{padding:22px 0;border-top:1px solid rgba(255,255,255,.4)}
.book-cols h3{margin-bottom:6px;font:600 15px/1.3 var(--display);color:#fff}
.book-cols a.big{display:inline-flex;align-items:center;min-height:44px;font:600 clamp(1.5rem,5.6vw,2.2rem)/1.2 var(--display);letter-spacing:-.025em;color:#fff;text-decoration:none;overflow-wrap:anywhere}
.book-cols a.big:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.book-cols dl{font-size:16px}
.hours-note{margin:12px 0 0;font-size:15px;color:var(--muted);max-width:36ch}
.book .hours-note{color:#fff}
@media (min-width:1024px){.book-grid{grid-template-columns:7fr 5fr;gap:96px;align-items:end}}

/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:var(--ivory);padding:clamp(64px,8vw,112px) 0 0;font-size:16px}
.ftr a{color:var(--ivory)}
.ftr :focus-visible{outline-color:var(--ivory)}
.ftr-intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid rgba(247,243,238,.18)}
.ftr-statement{margin:0;max-width:none;font:600 clamp(2.8rem,10vw,6.4rem)/.95 var(--display);letter-spacing:-.04em;color:var(--ivory)}
.ftr-statement em{color:var(--pink-soft)}
.ftr .tlink{color:var(--ivory)}
.ftr .tlink:hover{color:var(--pink-soft)}
.ftr-grid{display:grid;gap:40px;padding:48px 0}
.footer-brand{display:inline-flex}
.footer-brand img{width:140px;height:auto}
.ftr-brand p{margin:18px 0 0;color:rgba(247,243,238,.8)}
.ftr h2{margin-bottom:12px;font:600 15px/1.3 var(--display);letter-spacing:0;color:var(--pink-soft)}
.ftr ul{list-style:none;display:grid}
.ftr ul a,.ftr address a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none}
.ftr ul a:hover,.ftr address a:hover{text-decoration:underline;text-underline-offset:4px}
.ftr address{display:grid;gap:2px}
.ftr address a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(247,243,238,.4)}
.ftr dl{font-size:15px}
.ftr-note{margin:10px 0 0;font-size:15px;color:rgba(247,243,238,.8)}
.ftr-contact{display:grid;gap:36px}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding:18px 0 24px;border-top:1px solid rgba(247,243,238,.18);font-size:14px;color:rgba(247,243,238,.75)}
.ftr-base a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:900px){.ftr-grid{grid-template-columns:1.2fr .8fr 2fr;gap:56px}.ftr-contact{grid-template-columns:1fr 1fr;gap:40px}}

/* ---------- Inner pages ---------- */
.phead{padding:clamp(36px,5vw,80px) 0 clamp(40px,5vw,72px)}
.crumbs{margin-bottom:18px;font-size:14px;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-underline-offset:4px}
.phead h1{font-size:clamp(2.8rem,11vw,6.6rem);margin-bottom:24px}
.phead p{margin:0;font-size:1.06rem}
.ab-grid{display:grid;gap:48px}
.ab-grid .lead{margin:0 0 18px;font-size:clamp(1.3rem,2vw,1.6rem)}
.ab-grid>.ph{aspect-ratio:4/5;border-radius:var(--nail-tip);width:min(86%,520px);margin-left:auto}
@media (min-width:1024px){.ab-grid{grid-template-columns:7fr 5fr;gap:96px;align-items:end}.ab-grid>.ph{width:auto;margin-left:0}}

/* Prijslijst */
.pr-layout{display:grid}
.pidx{position:sticky;top:var(--hdr);z-index:5;margin:0 calc(var(--pad) * -1);padding:6px var(--pad);background:var(--ivory);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pidx::-webkit-scrollbar{display:none}
.pidx ul{list-style:none;display:flex;gap:0 20px;white-space:nowrap}
.pidx a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 15px var(--display);color:var(--muted);text-decoration:none}
.pidx a:hover{color:var(--ink)}
.pidx a.on{color:var(--pink-text)}
.pidx a::before{content:"";width:7px;height:10px;border-radius:var(--nail);background:var(--pink-hot);transform:scale(0);transition:transform .3s var(--ease)}
.pidx a.on::before{transform:scale(1)}
.pmain{display:grid;gap:clamp(56px,6vw,88px);padding:clamp(40px,5vw,72px) 0 var(--sec)}
@media (min-width:1024px){
  .pr-layout{grid-template-columns:230px minmax(0,1fr);gap:80px;align-items:start}
  .pidx{top:calc(var(--hdr) + 32px);margin:clamp(40px,5vw,72px) 0 0;padding:0;border:0;background:none;overflow:visible}
  .pidx ul{flex-direction:column;gap:0;white-space:normal}
}
.pg{scroll-margin-top:calc(var(--hdr) + 72px)}
@media (min-width:1024px){.pg{scroll-margin-top:calc(var(--hdr) + 16px)}}
.pg-head{display:grid;gap:6px;padding-bottom:16px;border-bottom:1.5px solid var(--ink)}
.pg-head h2{font-size:clamp(2rem,4vw,2.8rem)}
.pg-head p{margin:0;font-size:16px;color:var(--muted)}
.price-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:17px}
.price-table th,.price-table td{padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.price-table thead th{font:600 14px/1.4 var(--display);color:var(--muted);text-align:left}
.price-table thead th:not(:first-child),.price-table td{width:104px;text-align:right}
.price-table tbody th{text-align:left;font-weight:500;color:var(--ink);padding-right:16px;overflow-wrap:break-word}
.price-table td{font:600 17px var(--display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.price-table .ds{display:block;margin-top:4px;font:400 15px/1.5 var(--sans);color:var(--muted)}
.price-change{display:grid;gap:22px;padding:clamp(22px,3vw,34px);border-radius:12px;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.price-change .kicker{margin-bottom:12px}
.price-change h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:10px}
.price-change p{margin:0}
.period-switch{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:10px;background:var(--stone)}
.period-switch button{display:grid;gap:2px;align-content:center;min-height:60px;padding:10px 12px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:600 16px/1.3 var(--display);cursor:pointer}
.period-switch button small{font:400 14px var(--sans);color:var(--muted)}
.period-switch button[aria-pressed="true"]{background:var(--ink);color:var(--ivory)}
.period-switch button[aria-pressed="true"] small{color:rgba(247,243,238,.82)}
.period-status{margin:0;font-weight:600;color:var(--ink)}
@media (min-width:1280px){.price-change{grid-template-columns:1.3fr 1fr;align-items:center;gap:40px}}
.note-box{padding:22px 24px;border-radius:12px;background:var(--stone)}
.note-box h2{font-size:1.6rem;margin-bottom:8px}
.note-box p{margin:0}
.pnotes{display:grid;gap:10px}
.pnotes p{margin:0;font-size:15px;color:var(--muted)}
.pmain .hero-ctas{margin-top:-24px}
@media (max-width:479px){
  .price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .price-table tbody,.price-table tr{display:block;width:100%}
  .price-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;padding:18px 0;border-bottom:1px solid var(--line)}
  .price-table tbody th{grid-column:1/-1;padding:0;border:0;font-weight:600}
  .price-table tbody td{width:auto;padding:0;border:0;text-align:left;white-space:normal}
  .price-table tbody td::before{content:attr(data-label);display:block;font:400 14px var(--sans);color:var(--muted)}
  .price-table td[colspan="2"]{grid-column:1/-1}
}

/* Producten */
.prod-grid{display:grid;gap:56px;padding-top:clamp(24px,4vw,56px);padding-bottom:var(--sec)}
.pcat h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-bottom:18px}
.pitems{list-style:none;border-top:1.5px solid var(--ink)}
.pitems li{padding:16px 0;border-bottom:1px solid var(--line)}
.pline{display:flex;align-items:baseline;gap:10px}
.pline .nm{font-weight:500;color:var(--ink);min-width:0;overflow-wrap:break-word}
.pline .dots{flex:1;min-width:16px;border-bottom:1px dotted var(--stone-2);transform:translateY(-5px)}
.pline .pr{flex:none;font:600 17px var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.pitems .sz{display:block;font-size:15px;color:var(--muted)}
.prod-note{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:24px 28px;border-radius:12px;background:var(--stone)}
.prod-note p{margin:0}
@media (min-width:1024px){.prod-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}}

/* Over */
.bg-blush{background:var(--stone)}
.story-grid{display:grid;gap:40px}
.story-head h2{font-size:clamp(2.5rem,9vw,4.4rem);margin-bottom:20px}
.story-head p{color:var(--muted)}
@media (min-width:1024px){.story-grid{grid-template-columns:5fr 7fr;gap:96px;align-items:start}.story-head{position:sticky;top:calc(var(--hdr) + 40px)}}
.tl{list-style:none}
.tl li{display:grid;gap:6px;padding:26px 0;border-top:1px solid var(--line)}
.tl li:first-child{border-top:1.5px solid var(--ink)}
.tl .yr{font:italic 400 clamp(1.7rem,2.6vw,2.3rem)/1.1 var(--serif);color:var(--pink-text)}
.tl h3{margin-bottom:6px;font-size:1.25rem}
.tl p{margin:0}
@media (min-width:860px){.tl li{grid-template-columns:200px minmax(0,1fr);gap:4px 36px}}
.sec-head .kicker,.reg-grid .kicker{margin-bottom:18px}
.edu,.vals{list-style:none;display:grid;gap:14px}
.edu li,.vals li{padding:26px 24px;border-radius:12px;background:var(--paper)}
.vals li{background:var(--stone)}
.edu-n{display:block;margin-bottom:12px;font:italic 400 1.6rem/1 var(--serif);color:var(--pink-text)}
.edu h3,.vals h3{margin-bottom:8px;font-size:1.3rem}
.edu p,.vals p{margin:0;color:var(--muted)}
@media (min-width:860px){.edu{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.vals{grid-template-columns:1fr 1fr;gap:20px}}
.reg-grid{display:grid;gap:32px}
.reg-grid h2{font-size:clamp(2.3rem,4.6vw,3.6rem)}
.reg-list{margin:18px 0 24px;padding-left:1.2em}
.reg-list li{margin-bottom:8px}
.reg-list li::marker{color:var(--pink-text)}
@media (min-width:1024px){.reg-grid{grid-template-columns:5fr 7fr;gap:96px}}

/* Contact */
.ct-grid{display:grid;gap:56px;padding-top:clamp(24px,4vw,56px);padding-bottom:var(--sec)}
.direct{list-style:none;display:grid;gap:12px;margin-bottom:40px}
.direct a{display:grid;gap:2px;padding:20px 22px;border-radius:12px;background:var(--pink);color:#fff;text-decoration:none;transition:background .3s}
.direct li+li a{background:var(--ink);color:var(--ivory)}
.direct a:hover{background:var(--pink-dk)}
.direct li+li a:hover{background:#3a3431}
.direct small{font:600 15px/1.3 var(--display)}
.direct b{font:600 clamp(1.5rem,5.6vw,2.2rem)/1.2 var(--display);letter-spacing:-.025em;overflow-wrap:anywhere}
.direct a:focus-visible{outline-color:var(--ink)}
.direct .direct-insta{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.direct .direct-insta:hover{background:var(--stone)}
.cform{display:grid;gap:22px;padding:clamp(22px,3vw,40px);border-radius:12px;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.cform h2{font-size:clamp(1.9rem,3.4vw,2.5rem)}
.f{display:grid;gap:6px}
.f label{font:600 16px var(--display);color:var(--ink)}
.f input,.f textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--stone-2);border-radius:8px;background:#fff;color:var(--ink);font:400 17px/1.5 var(--sans);transition:border-color .2s,box-shadow .2s}
.f textarea{min-height:140px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(200,19,106,.22)}
.f .err{display:none;font-size:15px;font-weight:500;color:#9a2a3d}
.f.invalid .err{display:block}
.f.invalid input{border-color:#9a2a3d}
.cform .btn{width:100%}
.fnote{margin:0;font-size:15px;color:var(--muted)}
.ct-side{display:grid;gap:0;align-content:start}
.ct-side section{padding:24px 0;border-top:1px solid var(--line)}
.ct-side section:first-child{border-top:1.5px solid var(--ink)}
.ct-side h2{margin-bottom:10px;font:600 15px/1.3 var(--display);letter-spacing:0;color:var(--pink-text)}
.ct-side p{margin:0}
.badge-appt{display:inline-block;margin-top:16px;padding:8px 14px 9px;border-radius:999px;background:var(--ink);color:var(--ivory);font:600 14px var(--display);transform:rotate(-2deg)}
@media (min-width:600px){.cform .btn{width:auto}}
@media (min-width:1024px){.ct-grid{grid-template-columns:7fr 5fr;gap:96px}.ct-side{position:sticky;top:calc(var(--hdr) + 32px)}}

/* ---------- Motion: reveals, image masks, stickers that land, gentle drift ---------- */
@media (prefers-reduced-motion:no-preference){
  .view.on{animation:viewIn .6s var(--ease)}
  @keyframes viewIn{from{opacity:0}}
  .hero-place,.hero h1,.hero-text,.hero-ctas,.hero-scroll{animation:rise .9s var(--ease) both}
  .hero h1{animation-delay:.08s}.hero-text{animation-delay:.18s}.hero-ctas{animation-delay:.26s}.hero-scroll{animation-delay:.4s}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}}
  .hero-backdrop{animation:maskUp 1.3s var(--ease) .12s both}
  .hero-backdrop img{animation:settle 1.8s var(--ease) .12s both}
  .hero-detail{animation:rise 1s var(--ease) .6s both}
  .hero-figure .sticker{animation:land .7s cubic-bezier(.3,1.5,.5,1) .95s both}
  @keyframes maskUp{from{clip-path:inset(100% 0 0 0)}}
  @keyframes settle{from{transform:scale(1.1)}}
  @keyframes land{from{opacity:0;transform:rotate(10deg) scale(.6)}}
  @media (min-width:1180px){.hero-backdrop{animation:fadeIn 1.2s var(--ease) both}.hero-backdrop img{animation:settle 2.4s var(--ease) both}}
  @keyframes fadeIn{from{opacity:0}}
  .reveal:not(.ph){transition:opacity .9s var(--ease),transform 1s var(--ease)}
  .reveal:not(.ph):not(.in){opacity:0;transform:translateY(28px)}
  .ph.reveal{transition:clip-path 1.2s var(--ease)}
  .ph.reveal:not(.in){clip-path:inset(100% 0 0 0)}
  .card .ph.reveal{transition:clip-path 1.2s var(--ease),transform .5s var(--ease)}
  .ph.reveal img{transition:transform 1.4s var(--ease)}
  .ph.reveal:not(.in) img{transform:scale(1.08)}
  /* Menu links arrive one after another. */
  .mmenu li,.mm-info{opacity:0;translate:0 16px;transition:opacity .4s var(--ease),translate .5s var(--ease)}
  body.menu-open .mmenu li,body.menu-open .mm-info{opacity:1;translate:none}
  body.menu-open .mmenu li:nth-child(2){transition-delay:.04s}
  body.menu-open .mmenu li:nth-child(3){transition-delay:.08s}
  body.menu-open .mmenu li:nth-child(4){transition-delay:.12s}
  body.menu-open .mmenu li:nth-child(5){transition-delay:.16s}
  body.menu-open .mmenu li:nth-child(6){transition-delay:.2s}
  body.menu-open .mm-info{transition-delay:.24s}
  @media (hover:hover){
    .gal button .ph img,.welkom-img .ph img{transition:transform 1s var(--ease)}
    .gal button:hover .ph img{transform:scale(1.04)}
  }
  /* Where the browser supports it, a few pieces drift a little while you scroll. */
  @supports (animation-timeline:view()){
    .hero-detail,.welkom-img figcaption,.gal figure:nth-child(2),.gal figure:nth-child(5){animation-name:rise,drift;animation-duration:1.1s,1ms;animation-timing-function:var(--ease),linear;animation-delay:.55s,0s;animation-fill-mode:both,both;animation-timeline:auto,view();animation-range:normal,cover}
    .welkom-img figcaption,.gal figure:nth-child(2),.gal figure:nth-child(5){animation-name:none,drift}
    @keyframes drift{from{translate:0 36px}to{translate:0 -36px}}
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}