/* ============================================================
   Beauty Future — "Het Salonhuis" · warme boutique-maison
   Instrument Serif + Hanken Grotesk
   porselein #F8F2E9 · inkt-pruim #2B1430 · pruim #6A1F70 ·
   koper #9A4A0C · goud (op donker) #E9B36C
   Geïnspireerd op: Buly 1803 (maison-header, erfgoed),
   Susanne Kaufmann (fotografie-rust), Gisou (warmte, scroll-flow)
   ============================================================ */
:root{
  --porcelain:#F8F2E9;
  --sand:#EFE3D0;
  --paper:#FFFDF9;
  --ink:#2B1430;
  --mute:#5D4460;
  --plum:#6A1F70;
  --plum-deep:#4A1350;
  --copper:#9A4A0C;
  --honey:#C98A3D;
  --gold:#E9B36C;
  --dark:#2B1430;
  --dark-txt:#F7EFE3;
  --dark-soft:rgba(247,239,227,.72);
  --line:rgba(43,20,48,.15);
  --line-strong:rgba(43,20,48,.32);
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --maxw:1200px;
  --ease:cubic-bezier(.65,.05,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:112.5%;overflow-x:hidden}
body{font-family:var(--sans);background:var(--porcelain);color:var(--ink);line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--plum);color:#fff;padding:14px 22px;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;color:var(--ink);letter-spacing:.005em}
h1 em,h2 em,h3 em{font-style:italic;color:var(--plum)}

.kicker{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--copper);font-weight:700;display:inline-flex;align-items:center;gap:.9em}
.kicker::before{content:"\2726";font-size:.68rem;letter-spacing:0;color:var(--honey)}
.kicker.center{display:flex;justify-content:center}

/* ============ HEADER — boutique met gecentreerd logo ============ */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(248,242,233,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.scrolled{box-shadow:0 12px 34px -24px rgba(43,20,48,.4)}

/* dunne bovenbalk: adres links, telefoon + taal rechts */
.utilbar{background:var(--ink);color:var(--dark-soft)}
.utilbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding-top:2px;padding-bottom:2px}
.util-note{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--dark-soft)}
.util-actions{display:flex;align-items:center;gap:18px}
.utilticker{display:none}

.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:13px 0}
.nav-side{display:flex;align-items:center;gap:22px}
.nav-links-left{justify-self:start}
.nav-links-right{justify-self:end}
.nav-side a{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink);position:relative;padding:8px 0;transition:color .25s;white-space:nowrap}
.nav-side a::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:2px;height:1px;width:0;background:var(--copper);transition:width .3s var(--ease)}
.nav-side a:hover,.nav-side a.active{color:var(--plum)}
.nav-side a:hover::after,.nav-side a.active::after{width:100%}
.brand{justify-self:center}
.logo-img{height:56px;width:auto;transition:height .3s}
header.scrolled .logo-img{height:44px}
.header-tel{font-size:.82rem;letter-spacing:.06em;min-height:36px;padding:4px 0;color:var(--dark-txt);font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;text-transform:none;transition:color .25s}
.header-tel:hover{color:var(--gold)}
.header-tel svg{width:14px;height:14px}
.nav-side a.header-tel::after{display:none}
.menu-toggle{display:none;background:none;border:1px solid var(--line-strong);color:var(--plum);font-size:1.35rem;cursor:pointer;line-height:1;min-width:44px;min-height:44px}
.mobile-menu{display:none}
.lang-btn{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;font-weight:700;color:var(--dark-txt);background:transparent;border:1px solid var(--gold);padding:9px 13px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s;line-height:1;white-space:nowrap}
.lang-btn:hover{background:var(--gold);color:var(--ink)}
.mobile-menu .lang-btn{display:block;width:100%;text-align:center;margin-top:14px;padding:13px}

/* ============ TEKST-ONTHULLING (regelmasker) ============ */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.split .wi{display:inline-block;transform:translateY(112%);transition:transform .85s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.split.in .wi{transform:translateY(0)}

/* ============ GORDIJN-ONTHULLING (foto's) ============ */
.curtain{position:relative;overflow:hidden}
.curtain::after{content:"";position:absolute;inset:-1px;background:var(--sand);transform:none;transition:transform 1.05s var(--ease) .12s;z-index:2}
.curtain.in::after{transform:translateX(102%)}

/* ============ HERO — het salonhuis ============ */
.hero{position:relative;padding:204px 0 96px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.eyebrow{font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;color:var(--copper);font-weight:700;margin-bottom:26px}
.hero h1{font-size:clamp(3rem,6.2vw,5.2rem);margin-bottom:18px;max-width:11em}
.rotoline{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--mute);margin-bottom:20px}
.rotoline .rot{display:inline-block;font-style:italic;color:var(--plum);border-bottom:1px solid var(--honey);min-width:5.4em;text-align:center;transition:opacity .3s,transform .3s}
.rotoline .rot.out{opacity:0;transform:translateY(.4em)}
.hero p.lead{font-size:1.08rem;color:var(--mute);max-width:31rem;margin:0 0 34px;font-weight:500}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.hero-stage{position:relative;height:min(72vh,620px);min-height:480px}
.photo-a{position:absolute;right:0;top:0;width:72%;height:88%;border:1px solid var(--line-strong);background:var(--paper);box-shadow:0 40px 80px -50px rgba(43,20,48,.55)}
.photo-b{position:absolute;left:0;bottom:0;width:46%;height:52%;border:1px solid var(--line-strong);background:var(--paper);box-shadow:0 30px 60px -40px rgba(43,20,48,.5)}
.photo-a .kb,.photo-b .kb{position:absolute;inset:0;background-size:cover;background-position:center}
.kb{animation:kenburns 16s var(--ease) infinite alternate}
.kb2{animation-duration:20s;animation-delay:2s}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.photo-tag{position:absolute;left:14px;bottom:12px;z-index:3;background:rgba(43,20,48,.82);color:var(--dark-txt);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;padding:7px 12px}
.seal{position:absolute;left:calc(46% - 64px);top:6%;width:128px;height:128px;z-index:4;filter:drop-shadow(0 14px 24px rgba(43,20,48,.3))}
.seal svg{width:100%;height:100%;animation:sealspin 26s linear infinite}
@keyframes sealspin{to{transform:rotate(360deg)}}
.seal circle{fill:var(--plum)}
.seal text{fill:var(--gold);font-family:var(--sans);font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:700}
.seal .mid{fill:none;stroke:var(--gold);stroke-width:.75;opacity:.7}

/* ============ TICKER ============ */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);overflow:hidden;padding:15px 0}
.ticker-track{display:flex;width:max-content;animation:bf-tick 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center}
.ticker span::after{content:"\2726";color:var(--honey);margin:0 30px;font-size:.72rem;font-style:normal}
@keyframes bf-tick{to{transform:translateX(-50%)}}
@keyframes utilmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ KNOPPEN ============ */
.btn{font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;padding:1.2em 2.2em;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:.8em;transition:background .25s,color .25s,border-color .25s,box-shadow .25s;will-change:transform}
.btn-plum{background:var(--plum);color:#fff}
.btn-plum:hover{background:var(--plum-deep);box-shadow:0 16px 30px -16px rgba(74,19,80,.6)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--porcelain)}

/* ============ SECTIES ============ */
.sec-pad{padding:88px 0}
.sec-head{max-width:640px;margin:0 auto 50px;text-align:center}
.sec-head h2{font-size:clamp(2.1rem,4vw,3.1rem);margin:18px 0 14px}
.sec-head p{color:var(--mute);font-weight:500}
.tinted{background:var(--sand)}

/* ============ HET RITUEEL — hoofdstukken + draad ============ */
.ritual{position:relative;padding:96px 0 60px}
.thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.thread path{fill:none;stroke:var(--honey);stroke-width:1.6;opacity:.55}
.ritual .wrap{position:relative;z-index:1}
.ritual-head{max-width:600px;margin:0 auto 70px;text-align:center}
.ritual-head h2{font-size:clamp(2.2rem,4.2vw,3.3rem);margin:16px 0 12px}
.ritual-head p{color:var(--mute);font-weight:500}
.chapter{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:96px;position:relative}
.chapter:last-of-type{margin-bottom:0}
.chapter:nth-of-type(even) .ch-photo{order:2}
.ch-num{position:absolute;top:-58px;font-family:var(--serif);font-style:italic;font-size:clamp(6rem,11vw,9.5rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(106,31,112,.4);z-index:0;user-select:none}
.chapter:nth-of-type(odd) .ch-num{right:2%}
.chapter:nth-of-type(even) .ch-num{left:2%}
.ch-photo{position:relative;aspect-ratio:4/4.8;border:1px solid var(--line-strong);background:var(--paper);box-shadow:0 36px 70px -46px rgba(43,20,48,.5)}
.ch-photo>div{position:absolute;inset:0;background-size:cover;background-position:center}
.ch-copy{position:relative;z-index:1}
.ch-copy .kicker{margin-bottom:14px}
.ch-copy h3{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:16px}
.ch-copy p{color:var(--mute);margin-bottom:14px;font-weight:500;max-width:32rem}
.arrow-link{display:inline-flex;align-items:center;gap:12px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--plum);margin-top:10px;position:relative;padding-bottom:6px}
.arrow-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--honey);transform-origin:left;transition:transform .35s var(--ease)}
.arrow-link:hover::after{transform:scaleX(.4)}
.arrow-link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.arrow-link:hover svg{transform:translateX(6px)}

/* ============ CIJFERBAND ============ */
.statsband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.statsband .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:38px 20px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat b{font-family:var(--serif);font-size:2.4rem;font-weight:400;color:var(--plum);display:block;line-height:1.1}
.stat b em{font-style:italic}
.stat span{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);font-weight:600}

/* ============ MERKEN — donkere maisonstrook ============ */
.brands{padding:58px 0;background:var(--dark)}
.brands .wrap{display:flex;justify-content:center;gap:5.4vw;flex-wrap:wrap;align-items:baseline}
.brands span{font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--dark-txt)}
.brands-note{text-align:center;color:var(--gold);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;margin-top:20px}

/* ============ TWEEKOLOMS + FOTO ============ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.two-col .prose h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:16px 0 18px}
.two-col .prose p{color:var(--mute);margin-bottom:16px;font-weight:500}
.arch{background-size:cover;background-position:center;min-height:480px;border:1px solid var(--line-strong);box-shadow:0 36px 70px -46px rgba(43,20,48,.5)}

ul.checks{list-style:none;margin:8px 0 28px}
ul.checks li{position:relative;padding-left:32px;margin-bottom:10px;color:var(--mute);font-weight:500}
ul.checks li::before{content:"\2726";position:absolute;left:2px;top:.14em;color:var(--honey);font-size:.7rem}

/* ============ TEAM ============ */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;max-width:920px;margin:0 auto}
.member{background:var(--paper);border:1px solid var(--line-strong);padding:46px 40px;text-align:center;position:relative}
.member::before{content:"";position:absolute;inset:10px;border:1px solid var(--line);pointer-events:none}
.member .pf{width:150px;height:176px;margin:0 auto 24px;background-size:cover;background-position:center top;border:1px solid var(--line-strong)}
.member h3{font-size:1.7rem;margin-bottom:4px}
.member .role{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--copper);font-weight:700;margin-bottom:16px}
.member p{color:var(--mute);font-size:.95rem;font-weight:500}

/* ============ PAGINA-HERO ============ */
.page-hero{padding:208px 0 62px;text-align:center;background:var(--porcelain);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero::before{content:"\2726";position:absolute;left:50%;transform:translateX(-50%);bottom:18px;color:var(--honey);font-size:.8rem;opacity:.8}
.page-hero h1{font-size:clamp(2.4rem,4.8vw,3.7rem);margin:18px 0 12px}
.page-hero p{color:var(--mute);max-width:36rem;margin:0 auto;font-weight:500}
.crumbs{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);font-weight:700}
.crumbs a:hover{color:var(--plum)}

/* ============ TARIEVEN ============ */
.price-canvas{position:relative;border:1px solid var(--line-strong);padding:58px 50px;background:
  radial-gradient(120% 80% at 0% 0%,rgba(201,138,61,.07),transparent 55%),
  radial-gradient(120% 90% at 100% 100%,rgba(106,31,112,.05),transparent 55%),
  var(--paper)}
@media(max-width:560px){.price-canvas{padding:34px 22px}}
.price-cols{column-count:2;column-gap:58px;max-width:1020px;margin:0 auto}
.price-block{margin:0 0 42px;break-inside:avoid;-webkit-column-break-inside:avoid}
.price-block h2{font-size:1.6rem;margin-bottom:6px;display:flex;align-items:baseline;gap:16px}
.price-block h2::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.price-block .pb-note{color:var(--mute);font-size:.88rem;font-style:italic;font-family:var(--serif);margin-bottom:16px}
.price-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 2px;border-bottom:1px dotted var(--line-strong)}
.price-row .nm{color:var(--ink);font-weight:500}
.price-row .nm small{display:block;color:var(--mute);font-size:.8rem;font-weight:400}
.price-row .pr{font-family:var(--serif);font-size:1.15rem;color:var(--plum);white-space:nowrap}
.price-sub{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--copper);font-weight:700;margin:26px 0 4px}

/* ============ OPENINGSTIJDEN ============ */
.hours{max-width:460px;margin:0 auto;background:var(--paper);border:1px solid var(--line-strong);padding:30px 34px;position:relative}
.hours::before{content:"";position:absolute;inset:8px;border:1px solid var(--line);pointer-events:none}
.hours .hr{display:flex;justify-content:space-between;padding:11px 2px;border-bottom:1px dotted var(--line-strong);font-size:.97rem;font-weight:500;position:relative}
.hours .hr:last-child{border-bottom:none}
.hours .hr span:last-child{color:var(--plum);font-family:var(--serif);font-size:1.05rem}
.hours .hr.closed span:last-child{color:var(--mute);font-style:italic}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-line{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-size:.98rem;align-items:baseline;font-weight:500}
.contact-line .lbl{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--copper);font-weight:700;width:104px;flex:none}
.contact-line a:hover{color:var(--plum)}
.note-box{background:var(--paper);border:1px solid var(--line-strong);padding:26px 28px;margin-top:30px;position:relative}
.note-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--honey)}
.note-box h3{font-size:1.35rem;margin-bottom:8px}
.note-box p{color:var(--mute);font-size:.93rem;font-weight:500}

/* ============ CTA-BAND ============ */
.ctaband{background:var(--dark);text-align:center;color:var(--dark-txt);padding:94px 0;position:relative;overflow:hidden}
.ctaband::before{content:"\2726";position:absolute;top:34px;left:50%;transform:translateX(-50%);color:var(--gold);opacity:.8;font-size:.9rem}
.ctaband .kicker{color:var(--gold);justify-content:center;display:flex}
.ctaband .kicker::before{color:var(--gold)}
.ctaband h2{color:var(--dark-txt);font-size:clamp(2.1rem,4vw,3rem);margin:16px auto 14px;max-width:680px}
.ctaband h2 em{color:var(--gold)}
.ctaband p{color:var(--dark-soft);max-width:520px;margin:0 auto 34px;font-weight:500}
.ctaband .btn-plum{background:var(--porcelain);color:var(--ink)}
.ctaband .btn-plum:hover{background:var(--gold);color:var(--ink);box-shadow:none}
.cta-tel{display:block;font-family:var(--serif);font-style:italic;font-size:2.1rem;color:var(--dark-txt);margin-top:28px}
.cta-tel:hover{color:var(--gold)}

/* ============ FOOTER ============ */
footer{background:var(--dark);color:var(--dark-soft);padding:68px 0 28px;position:relative;overflow:hidden}
footer::before{content:"beauty future";position:absolute;left:50%;bottom:-42px;transform:translateX(-50%);font-family:var(--serif);font-style:italic;font-size:clamp(4rem,13vw,10rem);white-space:nowrap;color:rgba(247,239,227,.05);pointer-events:none;z-index:0}
.foot-grid,.foot-bottom{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;margin-bottom:46px}
.foot-logo{height:52px;margin-bottom:16px;background:var(--porcelain);padding:8px 12px;width:auto}
footer .desc{color:var(--dark-soft);font-size:.9rem;max-width:280px;font-weight:500}
.foot-col h4{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:700}
.foot-col a,.foot-col p,.foot-col span{display:block;color:var(--dark-soft);font-size:.9rem;margin-bottom:9px;transition:color .25s;font-weight:500}
.foot-col a:hover{color:var(--dark-txt)}
.foot-bottom{border-top:1px solid rgba(247,239,227,.18);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.76rem;color:var(--dark-soft)}
.foot-bottom a{color:inherit;transition:color .2s}
.foot-bottom .foot-legal a:hover{color:var(--dark-txt)}
.foot-bottom .credit{color:var(--gold)}
.foot-bottom .credit:hover{color:var(--dark-txt)}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.12s}
.reveal-delay-2{transition-delay:.24s}

/* ============ ACCORDION ============ */
.acc{border:1px solid var(--line-strong);background:var(--paper);margin-top:28px;overflow:hidden;position:relative}
.acc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--honey);z-index:1}
.acc+.acc{margin-top:14px}
.acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 28px;font-family:var(--serif);font-size:1.4rem;color:var(--ink)}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"+";font-family:var(--sans);font-weight:400;font-size:1.6rem;color:var(--copper);line-height:1;transition:transform .3s var(--ease)}
.acc[open]>summary::after{transform:rotate(45deg)}
.acc[open]>summary{border-bottom:1px solid var(--line)}
.acc .acc-body{padding:8px 28px 22px}
.acc .price-sub:first-child{margin-top:14px}

/* ============ PRODUCTEN ============ */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.product{background:var(--paper);border:1px solid var(--line-strong);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.product:hover{transform:translateY(-6px);box-shadow:0 24px 44px -28px rgba(43,20,48,.45)}
.product .ph{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid var(--line);padding:16px;overflow:hidden}
.product .ph img{max-width:100%;max-height:100%;width:auto;height:auto;transition:transform .5s var(--ease)}
.product:hover .ph img{transform:scale(1.05)}
.product .pb{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.product .brand{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--copper);font-weight:700;margin-bottom:6px}
.product h3{font-size:1.3rem;line-height:1.15;margin-bottom:12px}
.product .pr{margin-top:auto;font-family:var(--serif);font-size:1.3rem;color:var(--plum)}
@media(max-width:900px){.shop-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.shop-grid{gap:16px}}
.product--wide{grid-column:1 / -1;flex-direction:row;align-items:stretch;position:relative}
.product--wide::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--honey);z-index:1}
.product--wide .ph{width:230px;flex:none;border-right:1px solid var(--line);border-bottom:none}
.product--wide .pb{justify-content:center;padding:26px 32px}
.product--wide h3{font-size:1.7rem;margin-bottom:8px}
.product--wide p{color:var(--mute);margin-bottom:14px;max-width:46ch;font-weight:500}
@media(max-width:560px){.product--wide{flex-direction:column}.product--wide .ph{width:100%;border-right:none;border-bottom:1px solid var(--line)}}

/* ============ JURIDISCH ============ */
.legal{max-width:780px;margin:0 auto}
.legal h2{font-size:1.55rem;margin:34px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--ink);margin-bottom:12px;font-weight:500}
.legal ul{margin:0 0 12px 22px}
.legal li{margin-bottom:6px}
.legal .muted{color:var(--mute);font-size:.92rem}
.legal a{color:var(--plum);text-decoration:underline}
.legal .note-box{margin-bottom:30px}
.muted{color:var(--mute)}

/* ============ BEWEGINGSREDUCTIE ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .split .wi{transform:none;transition:none}
  .curtain::after{display:none}
  .kb,.kb2{animation:none}
  .seal svg{animation:none}
  .ticker-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:6px}
  .utilticker{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .utilticker-track{animation:none}
  .ut-set[aria-hidden="true"]{display:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============ RESPONSIVE ============ */
@media(max-width:1180px){
  .nav-side a{display:none}
  .nav-links-left{display:none}
  .menu-toggle{display:block}
  /* logo blijft gecentreerd, menuknop staat rechts tegen de rand */
  .topbar{grid-template-columns:1fr auto 1fr}
  .brand{grid-column:2}
  .nav-links-right{grid-column:3;justify-content:flex-end}
  .util-note{display:none}
  .header-tel{display:none}
  .utilbar-inner{justify-content:space-between;gap:12px}
  .util-actions{gap:14px;flex:0 0 auto}
  /* lopende infobalk: telefoon, openingsdagen en adres schuiven voorbij */
  .utilticker{display:block;flex:1 1 auto;min-width:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%)}
  .utilticker-track{display:flex;width:max-content;animation:utilmarquee 30s linear infinite}
  .utilticker:hover .utilticker-track,.utilticker:focus-within .utilticker-track{animation-play-state:paused}
  .ut-set{display:flex;align-items:center;gap:12px;padding-right:12px}
  .ut-set > span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--dark-soft);white-space:nowrap}
  .ut-sep{color:var(--gold)}
  .ut-tel{display:inline-flex;align-items:center;gap:7px;min-height:36px;font-size:.78rem;letter-spacing:.06em;font-weight:700;color:var(--dark-txt);white-space:nowrap}
  .ut-tel svg{width:14px;height:14px}
  /* EN-knop en menuknop even breed en exact onder elkaar tegen de rechterrand */
  .util-actions .lang-btn{width:44px;min-width:44px;padding:9px 0;text-indent:.16em}
  .menu-toggle{width:44px;min-width:44px;padding:0;text-indent:0}
  .mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--dark);border-bottom:1px solid var(--line);padding:16px 26px 22px;box-shadow:0 24px 40px -24px rgba(43,20,48,.55)}
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block;padding:13px 0;border-bottom:1px solid rgba(247,239,227,.16);font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--dark-txt)}
  .mobile-menu a:last-of-type{border:none}
  .mobile-menu .lang-btn{border-color:var(--gold);color:var(--dark-txt)}
  .mobile-menu .lang-btn:hover{background:var(--gold);color:var(--ink)}
}
@media(max-width:1024px){
  .two-col,.contact-grid{grid-template-columns:1fr;gap:44px}
  .arch{min-height:400px}
  .team-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .price-cols{column-count:1}
  .statsband .wrap{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:none}
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(3),.stat:nth-child(4){border-bottom:none}
}
@media(max-width:880px){
  .hero{padding:150px 0 70px}
  .hero-grid{grid-template-columns:1fr;gap:46px;text-align:center}
  .hero h1{margin-left:auto;margin-right:auto}
  .hero p.lead{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-stage{order:-1;height:min(58vh,480px);min-height:400px;max-width:460px;margin:0 auto;width:100%}
  .chapter{grid-template-columns:1fr;gap:34px;margin-bottom:80px}
  .chapter:nth-of-type(even) .ch-photo{order:0}
  .ch-photo{max-width:440px;margin:0 auto;width:100%}
  .ch-num{top:-44px;font-size:5.4rem}
  .thread{display:none}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .sec-pad{padding:62px 0}
  .brands .wrap{gap:26px}
  .brands span{font-size:1.2rem}
  .statsband .wrap{grid-template-columns:1fr 1fr}
  .stat b{font-size:1.9rem}
  .seal{width:100px;height:100px;left:calc(46% - 50px)}
}