/* fonts are served from this site (no Google Fonts request): variable fonts, latin subset,
   which covers Dutch, English and French. Both are SIL Open Font License. */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap; src:url('fonts/inter-latin.woff2') format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/space-grotesk-latin.woff2') format('woff2'); }

:root{
    --bg:#0b0f2a; --bg2:#150f2e; --ink:#fdf3f6; --muted:#b9a9c9;
    --line:rgba(255,255,255,.12); --glass:rgba(255,255,255,.06); --glass-strong:rgba(255,255,255,.11);
    --p1:#ff9ec4; --p2:#ff6f9c; --gold:#ffd27a; --dusk:#8a6bb8;
    --grad: conic-gradient(from 180deg at 50% 50%, var(--p1), var(--dusk), var(--gold), var(--p2), var(--p1));
    --radius: 22px; --ease: cubic-bezier(.16,1,.3,1);
  }
  *,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
  ::selection{background:var(--p2); color:#fff;}
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:linear-gradient(var(--dusk),var(--p2)); border-radius:10px;}
  html,body{background:var(--bg); color:var(--ink);}
  body{ font-family:'Inter',system-ui,sans-serif; line-height:1.5; }
  body.custom-cursor{ cursor:none; }
  body.preloading{ overflow:hidden; height:100vh; }
  @media(hover:none), (pointer:coarse){ body{ cursor:auto; } }
  h1,h2,h3,.brand{font-family:'Space Grotesk',system-ui,sans-serif;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
  body.custom-cursor button{ cursor:none; }
  :focus-visible{ outline:2px solid var(--p1); outline-offset:3px; }
  @media(hover:none), (pointer:coarse){ button, a{ cursor:auto; } }
  img,svg{display:block; max-width:100%;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }

  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  #iconDefs{ position:absolute; width:0; height:0; overflow:hidden; }

  /* ============ preloader ============ */
  #preloader{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; background:var(--bg); }
  .pl-inner{ position:relative; z-index:2; text-align:center; transition:opacity .5s var(--ease), transform .5s var(--ease); }
  .pl-enso{ margin:0 auto 18px; filter:drop-shadow(0 0 18px rgba(255,158,196,.5)); }
  .pl-enso circle{ transform-origin:50% 50%; transform:rotate(-90deg); }
  .pl-count{ font-family:'Space Grotesk'; font-size:2.2rem; font-weight:700; letter-spacing:-.02em; }
  .pl-count span{ font-size:1.1rem; color:var(--muted); }
  .pl-label{ margin-top:8px; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }
  .pl-panel{ position:absolute; left:0; right:0; background:var(--bg); z-index:1; transition:transform .95s cubic-bezier(.76,0,.24,1); }
  .pl-panel-top{ top:0; height:51%; }
  .pl-panel-bottom{ bottom:0; height:51%; }
  #preloader.reveal .pl-inner{ opacity:0; transform:scale(.85) translateY(-10px); }
  #preloader.reveal .pl-panel-top{ transform:translateY(-100%); }
  #preloader.reveal .pl-panel-bottom{ transform:translateY(100%); }

  /* ============ fixed backdrop layers ============ */
  #sky-gl{ position:fixed; inset:0; z-index:0; width:100vw; height:100vh; display:block; background:linear-gradient(180deg,#0b0f2a,#2a1a3a 60%,#5a3a52); }
  .mountain{ position:fixed; left:-6%; right:-6%; bottom:-2%; pointer-events:none; }
  .mountain-back{ height:36vh; z-index:1; background:linear-gradient(180deg, rgba(30,20,48,.35), rgba(20,14,36,.55));
    clip-path:polygon(0% 100%,0% 62%,7% 48%,14% 60%,23% 32%,32% 54%,41% 22%,50% 50%,58% 18%,67% 46%,76% 27%,85% 52%,93% 36%,100% 56%,100% 100%); }
  .mountain-front{ height:24vh; z-index:2; background:linear-gradient(180deg, rgba(10,6,20,.55), rgba(6,4,14,.85));
    clip-path:polygon(0% 100%,0% 70%,10% 55%,20% 68%,30% 44%,40% 64%,50% 36%,60% 60%,70% 40%,80% 62%,90% 46%,100% 66%,100% 100%); }
  .torii-wrap{ position:fixed; left:50%; bottom:9vh; transform:translateX(-50%); width:min(33vw,330px); z-index:2;
    pointer-events:none; filter:drop-shadow(0 14px 30px rgba(0,0,0,.55)); animation:toriiBob 7s ease-in-out infinite; }
  .torii-wrap .silhouette-img{ width:100%; height:auto; display:block; }
  @keyframes toriiBob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-8px); } }
  #petals-canvas{ position:fixed; inset:0; z-index:3; width:100vw; height:100vh; pointer-events:none; }
  .grain{
    position:fixed; inset:-50%; z-index:4; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .vignette{ position:fixed; inset:0; z-index:5; pointer-events:none; box-shadow:inset 0 0 260px rgba(0,0,0,.65); }

  /* ============ progress bar ============ */
  #progress{
    position:fixed; top:0; left:0; height:3px; width:100%; z-index:200;
    background:linear-gradient(90deg,var(--p1),var(--dusk),var(--gold));
    box-shadow:0 0 16px rgba(255,158,196,.7);
    transform:scaleX(0); transform-origin:left center; will-change:transform;
  }

  /* ============ custom cursor ============ */
  .cursor-blob{
    position:fixed; top:0; left:0; width:16px; height:16px; border-radius:50%; z-index:999;
    pointer-events:none; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,214,235,.95), rgba(255,158,196,.15) 70%, transparent 75%);
    transition:width .25s var(--ease), height .25s var(--ease);
  }
  .cursor-ring{
    position:fixed; top:0; left:0; width:40px; height:40px; border-radius:50%; z-index:998;
    pointer-events:none; transform:translate(-50%,-50%); border:1px solid rgba(255,214,235,.45);
    transition:width .3s var(--ease), height .3s var(--ease), border-color .3s;
  }
  body.hovering .cursor-blob{width:8px; height:8px;}
  body.hovering .cursor-ring{width:64px; height:64px; border-color:rgba(255,158,196,.7);}
  @media(hover:none), (pointer:coarse){ .cursor-blob,.cursor-ring{display:none;} }
  body:not(.custom-cursor) .cursor-blob, body:not(.custom-cursor) .cursor-ring{display:none;}

  /* ============ sound toggle ============ */
  .sound-toggle{
    position:fixed; right:20px; bottom:20px; z-index:150; display:flex; align-items:center; gap:10px;
    padding:12px 18px; border-radius:999px; background:rgba(15,10,24,.55); border:1px solid var(--line);
    backdrop-filter:blur(12px); font-size:.82rem; font-weight:600; color:var(--muted);
    transition:border-color .3s, color .3s, background .3s;
  }
  .sound-toggle:hover{ border-color:rgba(255,214,235,.4); color:var(--ink); }
  .sound-toggle .wave{ display:flex; gap:2px; align-items:flex-end; height:14px; }
  .sound-toggle .wave i{ display:block; width:2px; background:var(--p1); border-radius:2px; height:4px; transition:height .3s; }
  .sound-toggle.on .wave i{ animation:wave 900ms ease-in-out infinite; }
  .sound-toggle.on{ color:var(--ink); border-color:rgba(255,158,196,.5); }
  .sound-toggle .wave i:nth-child(1){animation-delay:0ms;}
  .sound-toggle .wave i:nth-child(2){animation-delay:150ms;}
  .sound-toggle .wave i:nth-child(3){animation-delay:300ms;}
  @keyframes wave{ 0%,100%{height:4px;} 50%{height:14px;} }

  /* ============ scroll rig ============ */
  #scrollContent{ position:relative; z-index:10; will-change:transform; }
  body.js-smooth #scrollContent{ position:fixed; top:0; left:0; width:100%; }
  #scrollSpacer{ position:relative; z-index:-1; }

  /* ============ header ============ */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between; padding:18px clamp(20px,5vw,64px);
    backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
    background:rgba(11,15,42,.4); border-bottom:1px solid var(--line); transition:transform .5s var(--ease);
  }
  header.hide{transform:translateY(-110%);}
  .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.15rem;}
  a.brand{ color:inherit; text-decoration:none; transition:transform .15s var(--ease); }
  a.brand:active{ transform:scale(.97); }
  .brand-mark{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle, rgba(255,158,196,.25), transparent 70%);
    animation:spin 10s linear infinite; box-shadow:0 0 20px rgba(255,158,196,.35);
  }
  .brand-mark svg, .brand-mark img{ width:22px; height:22px; object-fit:contain; }
  /* the original Bienahana logo on a white card: its black hair and blue lettering need a light
     background to stay readable on the dark header (images/logo-bienahana-header.webp, scaled down) */
  .brand-logo{
    display:block; height:40px; width:auto; box-sizing:content-box; padding:5px 12px; border-radius:12px;
    background:rgba(255,255,255,.95); box-shadow:0 6px 20px -8px rgba(255,111,156,.45);
  }
  @media(max-width:480px){ .brand-logo{ height:32px; padding:4px 10px; border-radius:10px; } }
  .footer-logo{ display:block; max-width:180px; background:rgba(255,255,255,.94); border-radius:12px; padding:12px 16px; margin-bottom:16px; }
  @keyframes spin{to{transform:rotate(360deg);}}
  /* logo on the left; menu, language switch and booking button grouped on the right */
  header nav{ margin-left:auto; margin-right:clamp(16px,2.6vw,36px); }
  nav ul{list-style:none; display:flex; gap:clamp(14px,2.6vw,32px); font-size:.9rem; color:var(--muted);}
  nav a{position:relative; padding:6px 0;}
  nav a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--p1); transition:width .3s var(--ease);}
  nav a:hover{color:var(--ink);}
  nav a:hover::after{width:100%;}
  nav a.active{ color:var(--ink); }
  nav a.active::after{ width:100%; }
  .lang-switch{ display:flex; align-items:center; gap:2px; font-size:.78rem; font-weight:600; color:var(--muted); margin-right:clamp(8px,1.5vw,18px); }
  .lang-switch a{ padding:5px 7px; border-radius:6px; letter-spacing:.03em; }
  .lang-switch a:hover{ color:var(--ink); }
  .lang-switch a.active{ color:var(--ink); background:var(--glass); }
  .lang-switch span{ color:var(--line); }
  .mobile-nav .lang-switch{ margin:22px 0 0; font-size:.9rem; justify-content:center; }
  .nav-cta{ display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; font-weight:600; font-size:.86rem; background:var(--ink); color:#241226; transition:transform .25s var(--ease), box-shadow .25s; }
  .nav-cta:hover{transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,158,196,.25);}

  /* ---------- mobile nav ---------- */
  .nav-toggle{ display:none; width:34px; height:34px; position:relative; flex:none; cursor:pointer; }
  .nav-toggle span{
    display:block; position:absolute; left:6px; right:6px; height:2px; background:var(--ink); border-radius:2px;
    transition:transform .3s var(--ease), opacity .2s;
  }
  .nav-toggle span:nth-child(1){ top:11px; }
  .nav-toggle span:nth-child(2){ top:17px; }
  .nav-toggle span:nth-child(3){ top:23px; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .mobile-nav-backdrop{
    position:fixed; inset:0; z-index:140; background:rgba(5,3,10,.55); opacity:0; pointer-events:none; transition:opacity .3s;
  }
  .mobile-nav-backdrop.open{ opacity:1; pointer-events:auto; }

  .mobile-nav{
    position:fixed; top:0; right:0; bottom:0; z-index:150; width:min(78vw,320px);
    background:rgba(11,15,42,.97); backdrop-filter:blur(20px); border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .4s var(--ease); padding:100px 30px 40px; overflow-y:auto;
  }
  .mobile-nav.open{ transform:translateX(0); }
  .mobile-nav ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
  .mobile-nav a{ font-size:1.15rem; color:var(--ink); font-family:'Space Grotesk'; display:inline-block; padding:8px 0; } /* 44px+ tap height */
  .mobile-nav a.active{ color:var(--p1); }
  .mobile-nav .mobile-cta{
    margin-top:10px; display:inline-flex; align-items:center; padding:12px 22px; border-radius:999px;
    background:linear-gradient(135deg,var(--p2),var(--dusk)); color:#fff; font-weight:600; font-size:1rem;
  }

  @media(max-width:900px){
    nav ul{display:none;}
    .nav-cta{display:none;}
    .nav-toggle{ display:block; }
  }

  /* ============ hero ============ */
  .hero{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:140px 20px 80px; position:relative; overflow:hidden; }
  .hero.hero-compact{ min-height:64vh; padding:150px 20px 60px; }
  .hero-copy{ position:relative; opacity:0; transform:translateY(24px) scale(.98); transition:opacity 1s var(--ease), transform 1s var(--ease); }
  .hero-copy.in{ opacity:1; transform:translateY(0) scale(1); }
  .hero-copy::before{ content:''; position:absolute; inset:-16% -32%; z-index:-1; background:radial-gradient(closest-side, rgba(11,15,42,.55), transparent 72%); }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px;
    border:1px solid var(--line); background:var(--glass); font-size:.78rem; color:var(--muted);
    letter-spacing:.06em; text-transform:uppercase; margin-bottom:28px; backdrop-filter:blur(8px);
  }
  .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--p1); box-shadow:0 0 10px var(--p1); animation:pulse 1.8s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.7);}}
  .ink-wrap{ overflow:hidden; }
  .ink{ font-size:clamp(2.4rem, 7.4vw, 5.6rem); font-weight:700; line-height:1.04; letter-spacing:-.02em; max-width:20ch;
    color:var(--ink); text-shadow:0 4px 40px rgba(0,0,0,.5);
    clip-path:inset(0 100% 0 0); transition:clip-path 1.4s cubic-bezier(.65,0,.35,1) .1s; }
  .ink.in{ clip-path:inset(0 0 0 0); }
  .ink.ink-sm{ font-size:clamp(2rem, 5.6vw, 3.6rem); }
  .ink .grad{ background:var(--grad); background-size:300% 300%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:hue 8s ease infinite; }
  @keyframes hue{0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;}}
  .hero p.lead{ max-width:58ch; margin:26px auto 40px; color:#e6dcec; font-size:clamp(1rem,2vw,1.2rem); min-height:1.6em; text-shadow:0 2px 20px rgba(0,0,0,.5); }
  .type-cursor{ display:inline-block; width:2px; background:var(--p1); margin-left:2px; animation:blink 1s step-end infinite; }
  @keyframes blink{ 50%{opacity:0;} }
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:64px;}
  .btn{
    display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:999px;
    font-weight:600; font-size:.96rem; position:relative; transform:translate(var(--mx,0),var(--my,0));
    transition:transform .15s var(--ease), box-shadow .3s;
  }
  .btn-primary{background:linear-gradient(135deg,var(--p2),var(--dusk)); color:#fff; box-shadow:0 10px 40px -8px rgba(255,111,156,.55);}
  .btn-primary:hover{box-shadow:0 16px 50px -8px rgba(255,111,156,.75);}
  .btn-ghost{background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--ink); backdrop-filter:blur(8px);}
  .btn-ghost:hover{background:rgba(255,255,255,.14);}
  .btn svg{width:18px; height:18px;}
  .btn.shake{ animation:shakeKey .45s var(--ease); }
  @keyframes shakeKey{ 10%,90%{transform:translate3d(-1px,0,0);} 20%,80%{transform:translate3d(2px,0,0);} 30%,50%,70%{transform:translate3d(-3px,0,0);} 40%,60%{transform:translate3d(3px,0,0);} }
  .hero-stats{ display:flex; gap:clamp(20px,5vw,60px); flex-wrap:wrap; justify-content:center; padding-top:44px; border-top:1px solid var(--line); width:100%; max-width:900px; }
  .stat{text-align:center; display:flex; flex-direction:column; align-items:center;}
  .stat .num, .stat .stars{ display:flex; align-items:flex-end; justify-content:center; height:2.6rem; line-height:1; }
  .stat .num{font-size:clamp(1.6rem,3.4vw,2.6rem); font-weight:700; font-family:'Space Grotesk';}
  .stat .stars{font-size:clamp(1.2rem,2.4vw,1.6rem); color:var(--gold); letter-spacing:2px;}
  .stat .lbl{font-size:.8rem; color:var(--muted); margin-top:4px;}
  .scroll-cue{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; animation:bob 2.2s ease-in-out infinite; }
  @keyframes bob{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);}}
  .scroll-cue .line{width:1px; height:36px; background:linear-gradient(var(--muted),transparent);}

  /* ============ breadcrumb ============ */
  .breadcrumb{ position:relative; z-index:5; text-align:center; padding:150px 20px 0; font-size:.82rem; color:var(--muted); }
  .breadcrumb a:hover{ color:var(--p1); }

  /* ============ marquee ============ */
  .marquee-wrap{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; overflow:hidden; background:var(--glass); white-space:nowrap; transform:skewY(-1.2deg); }
  .marquee{display:inline-flex; gap:56px; animation:scroll 30s linear infinite;}
  .marquee span{ font-family:'Space Grotesk'; font-size:1.3rem; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:16px; }
  .marquee span strong{color:var(--ink);}
  .marquee-wrap:hover .marquee{animation-play-state:paused;}
  @keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

  /* ============ sections ============ */
  section{padding:clamp(70px,10vw,140px) clamp(20px,6vw,64px); position:relative;}
  .section-head{max-width:720px; margin:0 auto 56px; text-align:center;}
  .section-head .tag{color:var(--p1); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem;}
  .section-head h2{font-size:clamp(1.9rem,4.6vw,3rem); letter-spacing:-.02em; margin-top:14px; line-height:1.1;}
  .section-head p{color:var(--muted); margin-top:18px; font-size:1.02rem;}
  .reveal{opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ============ services bento ============ */
  .bento{ max-width:900px; margin:0 auto; display:grid; gap:20px; grid-template-columns:1fr; grid-auto-rows:220px; perspective:1200px; }
  .card{
    border-radius:var(--radius); padding:32px; position:relative; overflow:hidden;
    background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px);
    display:flex; flex-direction:column; justify-content:flex-end;
    transform-style:preserve-3d; transition:transform .12s linear, border-color .4s, background .4s;
  }
  @media(min-width:640px){
    .bento{ grid-template-columns:repeat(2,1fr); }
  }
  .card:hover{border-color:rgba(255,214,235,.3); background:var(--glass-strong);}
  .card::after{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s; pointer-events:none; background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%), rgba(255,214,235,.16), transparent 60%); z-index:1; }
  .card.has-photo{ background-size:cover; background-position:center; }
  .card.has-photo::before{
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(180deg, rgba(11,15,42,.1) 0%, rgba(11,15,42,.6) 55%, rgba(11,15,42,.94) 100%);
  }
  .card.has-photo .card-icon, .card.has-photo h3, .card.has-photo p{ position:relative; z-index:2; }
  .card.has-photo h3, .card.has-photo p{ text-shadow:0 2px 10px rgba(0,0,0,.5); }

  .service-photo{
    position:relative; height:170px; border-radius:16px; overflow:hidden; margin-bottom:18px;
    background-size:cover; background-position:center;
  }
  .service-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(21,15,46,.92)); }
  .service-photo span{
    position:absolute; left:14px; bottom:10px; z-index:1; color:#fdf3f6; font-size:.78rem; font-weight:600;
    text-shadow:0 2px 8px rgba(0,0,0,.6);
  }
  .card:hover::after{opacity:1;}
  .card-icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--dusk),var(--p2)); margin-bottom:auto; transform:translateZ(30px); }
  .card-icon svg{width:24px; height:24px; color:#fff;}
  .card h3{font-size:1.22rem; margin-bottom:8px; letter-spacing:-.01em; transform:translateZ(20px);}
  .card p{color:var(--muted); font-size:.92rem; transform:translateZ(10px);}

  /* ============ pricing list (onze diensten) ============ */
  .price-groups{ max-width:960px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
  .price-group{
    border-radius:var(--radius); border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(10px);
    padding:30px clamp(20px,4vw,36px);
  }
  .price-group h3{ font-size:1.35rem; margin-bottom:6px; display:flex; align-items:center; gap:12px; }
  .price-group h3 .card-icon{ margin-bottom:0; flex:none; }
  .price-group .group-note{ color:var(--muted); font-size:.88rem; margin:6px 0 18px; }
  .price-table{ display:flex; flex-direction:column; gap:0; }
  .price-row{
    display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08);
    font-size:.94rem;
  }
  .price-row:last-child{ border-bottom:none; }
  .price-row .p-name{ color:#ecdfe6; flex:1; min-width:0; }
  .price-row .p-value{ flex:none; }
  .price-row .p-sub{ display:block; color:var(--muted); font-size:.8rem; margin-top:2px; }
  @media(max-width:480px){
    .price-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  }
  .price-row .p-value{ font-family:'Space Grotesk'; font-weight:700; color:var(--gold); white-space:nowrap; }
  .price-note{ text-align:center; color:var(--muted); font-size:.86rem; max-width:640px; margin:28px auto 0; }
  .content-photo{ display:block; max-width:420px; width:100%; margin:20px auto; border-radius:var(--radius); border:1px solid var(--line); }
  .content-photo.small{ max-width:280px; }

  /* ============ horizontal drag gallery ============ */
  .drag-gallery{ max-width:1200px; margin:0 auto; display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:20px; cursor:grab; user-select:none; }
  .drag-gallery.grabbing{cursor:grabbing;}
  .drag-gallery::-webkit-scrollbar{height:6px;}
  .g-card{
    flex:none; width:min(70vw,260px); aspect-ratio:4/5; scroll-snap-align:start; border-radius:var(--radius);
    background:linear-gradient(160deg, var(--gc1,rgba(255,158,196,.22)), var(--gc2,rgba(138,107,184,.1)));
    border:1px solid var(--line); backdrop-filter:blur(10px); pointer-events:none;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; text-align:center; padding:20px;
  }
  .g-card svg{width:26px; height:26px; opacity:.7;}
  .g-card span{ font-size:.8rem; color:var(--muted); }
  .g-card strong{ font-family:'Space Grotesk'; font-size:.98rem; }

  /* ============ instagram-style grid (gallerij) ============ */
  .ig-embed-slot{
    max-width:1100px; margin:0 auto; min-height:220px; border-radius:var(--radius); border:1px dashed var(--line);
    background:var(--glass); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    padding:40px 20px; text-align:center; color:var(--muted);
  }
  .ig-embed-slot svg{ width:34px; height:34px; opacity:.6; }
  .ig-embed-slot p{ font-size:.92rem; max-width:40ch; }
  .insta-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
  .insta-card{
    aspect-ratio:1/1; border-radius:16px; border:1px solid var(--line); backdrop-filter:blur(10px);
    background:linear-gradient(160deg, var(--gc1,rgba(255,158,196,.22)), var(--gc2,rgba(138,107,184,.1)));
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; gap:8px;
    transition:transform .3s var(--ease), border-color .3s;
  }
  .insta-card:hover{ transform:translateY(-4px); border-color:rgba(255,214,235,.35); }
  .insta-card svg{ width:22px; height:22px; opacity:.7; }
  .insta-card p{ font-size:.78rem; color:var(--muted); line-height:1.4; }
  .insta-card.photo{ position:relative; background-size:cover; background-position:center; padding:0; justify-content:flex-end; }
  .insta-card.photo p{ position:relative; z-index:1; color:#fdf3f6; font-size:.76rem; padding:14px; margin:0; width:100%; text-align:left; }
  .insta-card.photo::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(10,6,20,.85)); border-radius:15px; }
  /* live Instagram posts (assets/instagram.js): a real <img> for alt text and lazy loading */
  .ig-post{ isolation:isolate; overflow:hidden; color:inherit; text-decoration:none; }
  .ig-post img{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; }
  /* clamp on a box without padding, so no half line peeks out below the third */
  .insta-card.photo.ig-post p{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; padding:0; margin:14px; width:auto; align-self:stretch; }
  @media(max-width:480px){
    .insta-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .insta-card.photo p{ font-size:.7rem; padding:10px; }
    .insta-card.photo.ig-post p{ -webkit-line-clamp:2; padding:0; margin:10px; }
  }
  .ig-post:active{ transform:scale(.98); }
  .ig-badge{ position:absolute; top:10px; right:10px; z-index:1; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(10,6,20,.55); color:#fdf3f6; }
  .ig-badge svg{ width:16px; height:16px; opacity:1; }
  .ig-more{ text-align:center; margin-top:28px; }
  /* 6 posts on the free feed: 3 per row on wider screens, 2 per row on phones (below) */
  @media(min-width:481px){ .ig-live{ max-width:900px; grid-template-columns:repeat(3,minmax(0,1fr)); } }

  /* ============ story / about ============ */
  .story{ max-width:820px; margin:0 auto; text-align:center; }
  .story p{ color:#ecdfe6; font-size:1.08rem; margin-bottom:20px; }
  .story .pullquote{
    font-family:'Space Grotesk'; font-size:clamp(1.4rem,3.2vw,2.1rem); font-weight:700; margin:36px 0;
    background:var(--grad); background-size:300% 300%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:hue 8s ease infinite;
  }
  .story .signature{ color:var(--muted); font-size:.92rem; margin-top:8px; }
  .story-two-col{ max-width:1000px; margin:0 auto; display:grid; gap:40px; grid-template-columns:1fr 1fr; align-items:start; text-align:left; }
  @media(max-width:800px){ .story-two-col{ grid-template-columns:1fr; } }
  .story-two-col p{ color:#ecdfe6; font-size:1.02rem; margin-bottom:18px; }
  .story-two-col .signature{ color:var(--muted); font-size:.94rem; }

  /* ============ counters ============ */
  .counters{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px; text-align:center; }
  .counters .card{grid-column:auto; align-items:center; grid-auto-rows:auto;}
  .counters .num{ font-family:'Space Grotesk'; font-size:clamp(2rem,4.4vw,2.8rem); font-weight:700; background:var(--grad); background-size:300% 300%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:hue 8s ease infinite; }
  .counters .lbl{color:var(--muted); margin-top:6px; font-size:.88rem;}

  /* ============ testimonials ============ */
  .t-track-wrap{max-width:1200px; margin:0 auto; overflow:hidden;}
  .t-track{display:flex; gap:24px; width:max-content; animation:tscroll 46s linear infinite;}
  .t-track-wrap:hover .t-track{animation-play-state:paused;}
  @keyframes tscroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .t-card{ width:320px; flex:none; padding:28px; border-radius:var(--radius); background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); }
  .t-card .stars{color:var(--gold); letter-spacing:2px; margin-bottom:14px;}
  .t-card p{color:#ecdfe6; font-size:.96rem; margin-bottom:20px;}
  .t-who{display:flex; align-items:center; gap:12px;}
  .t-avatar{width:40px; height:40px; border-radius:50%; background:var(--grad); background-size:cover; background-position:center; flex:none;}
  .t-who strong{display:block; font-size:.92rem;}
  .t-who span{color:var(--muted); font-size:.8rem;}

  /* ============ afspraak (booking) ============ */
  .booking{ max-width:1000px; margin:0 auto; display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .booking-card{ border-radius:var(--radius); padding:34px 28px; border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:14px; }
  .booking-card.feat{ border-color:rgba(255,214,235,.35); background:linear-gradient(160deg,rgba(138,107,184,.2),rgba(255,111,156,.1)); }
  .booking-card h3{font-size:1.15rem;}
  .booking-card p{color:var(--muted); font-size:.94rem; flex:1;}
  .booking-note{ max-width:700px; margin:36px auto 0; text-align:center; color:var(--muted); font-size:.88rem; padding:16px 20px; border:1px dashed var(--line); border-radius:14px; }

  /* ============ contact ============ */
  .contact-grid{ max-width:1000px; margin:0 auto; display:grid; gap:32px; grid-template-columns:1.1fr 1fr; align-items:start; }
  @media(max-width:800px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-info{ display:flex; flex-direction:column; gap:18px; }
  .contact-row{ display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-radius:16px; background:var(--glass); border:1px solid var(--line); }
  .contact-row svg{ width:20px; height:20px; color:var(--p1); flex:none; margin-top:2px; }
  .contact-row a, .contact-row span{ font-size:.94rem; }
  .hours-table{ display:flex; flex-direction:column; gap:4px; font-size:.88rem; }
  .hours-table .h-row{ display:flex; justify-content:space-between; gap:12px; }
  .hours-table .h-row.closed .h-time{ color:var(--muted); font-style:italic; }
  .contact-form{ display:flex; flex-direction:column; gap:14px; padding:30px; border-radius:var(--radius); background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); }
  .contact-form label{ font-size:.82rem; color:var(--muted); margin-bottom:6px; display:block; }
  .contact-form input, .contact-form select, .contact-form textarea{
    width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.05);
    color:var(--ink); font-family:inherit; font-size:.94rem;
  }
  .contact-form textarea{ resize:vertical; min-height:100px; }
  .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:none; border-color:rgba(255,158,196,.5); }
  .form-status{ font-size:.86rem; min-height:1.2em; }
  .form-status.ok{ color:#8be9a0; }
  .form-status.err{ color:#ff9ec4; }
  .form-consent{ font-size:.78rem; color:var(--muted); margin:-4px 0 2px; }
  .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  /* ============ faq ============ */
  .faq{max-width:820px; margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{ width:100%; text-align:left; padding:22px 4px; display:flex; justify-content:space-between; align-items:center; font-size:1.02rem; font-weight:500; }
  .faq-q .plus{transition:transform .3s var(--ease); color:var(--p1); font-size:1.3rem; flex:none; margin-left:16px;}
  .faq-item.open .faq-q .plus{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
  .faq-a p{color:var(--muted); padding:0 4px 22px; max-width:65ch;}

  /* ============ CTA banner ============ */
  .cta-banner{
    max-width:1000px; margin:0 auto; border-radius:28px; padding:clamp(44px,7vw,80px) clamp(24px,6vw,60px);
    text-align:center; position:relative; overflow:hidden; border:1px solid var(--line);
    background:radial-gradient(circle at 30% 20%, rgba(138,107,184,.35), transparent 60%),
               radial-gradient(circle at 80% 80%, rgba(255,111,156,.3), transparent 60%), var(--bg2);
  }
  .cta-banner h2{font-size:clamp(1.8rem,4.4vw,2.8rem); letter-spacing:-.02em; margin-bottom:16px;}
  .cta-banner p{color:var(--muted); max-width:52ch; margin:0 auto 32px; font-size:1.02rem;}

  /* ============ footer ============ */
  footer{border-top:1px solid var(--line); padding:56px clamp(20px,6vw,64px) 32px;}
  .footer-grid{ max-width:1100px; margin:0 auto; display:grid; gap:36px; grid-template-columns:1.6fr repeat(3,1fr); }
  .footer-brand p{color:var(--muted); margin-top:14px; max-width:30ch; font-size:.9rem;}
  .footer-col h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:14px;}
  .footer-col ul{list-style:none; display:flex; flex-direction:column; gap:9px;}
  .footer-col a{color:#d9cfe0; font-size:.9rem; transition:color .2s;}
  .footer-col a:hover{color:var(--p1);}
  .socials{display:flex; gap:12px; margin-top:18px;}
  .socials a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:.25s var(--ease); }
  .socials a:hover{background:var(--dusk); border-color:var(--dusk); transform:translateY(-3px);}
  .socials svg{width:16px; height:16px;}
  .footer-bottom{ max-width:1100px; margin:44px auto 0; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:.8rem; }
  @media(max-width:768px){ .footer-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:480px){ .footer-grid{grid-template-columns:1fr;} }