/* ==========================================================================
   RESTORA — landing page
   Design tokens → primitives → components → sections → responsive
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --cream:#FAF6F0;
  --cream-2:#F4EEE4;
  --cream-3:#EFE7DA;
  --navy:#12294A;
  --navy-2:#0C1E38;
  --gold:#B8975A;
  --gold-2:#D6BE93;
  --ink:#3B4550;
  --muted:#818A94;
  --rule:rgba(184,151,90,.34);
  --rule-soft:rgba(18,41,74,.10);
  --rule-dark:rgba(255,255,255,.14);

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost','Segoe UI',system-ui,-apple-system,sans-serif;

  --gutter:clamp(20px,5vw,92px);
  --section-y:clamp(58px,8vw,104px);
  --max:1180px;

  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--navy)}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:600;color:var(--navy);
  letter-spacing:-.012em;line-height:1.08}
p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.stack{display:flex;flex-direction:column}
.ctr{text-align:center}
.center{align-items:center}

/* ---------- type primitives ---------- */
.h-xl{font-size:clamp(34px,6vw,64px);line-height:1.06}
.h-lg{font-size:clamp(28px,4.6vw,47px)}
.h-md{font-size:clamp(23px,3vw,33px)}
.h-sm{font-size:clamp(19px,2vw,25px)}
.h-xs{font-size:clamp(17px,1.6vw,21px)}

.lede{font-size:clamp(15px,1.35vw,17px);line-height:1.78;color:var(--ink)}
.small{font-size:clamp(13px,1.1vw,13.5px);line-height:1.7;color:var(--muted)}
.num{font-family:var(--serif);font-size:15px;color:var(--gold);font-weight:500}

.eyebrow{display:flex;align-items:center;gap:14px;
  font-size:clamp(9px,.85vw,9.5px);letter-spacing:.30em;color:var(--gold);
  text-transform:uppercase;font-weight:400}
.eyebrow::after{content:"";flex:0 0 46px;height:1px;background:var(--rule)}
.eyebrow--ctr{justify-content:center}
.eyebrow--ctr::before{content:"";flex:0 0 46px;height:1px;background:var(--rule)}

.quote{font-family:var(--serif);font-weight:400;color:var(--navy);line-height:1.42}
.attrib{font-size:clamp(10.5px,1vw,11.5px);letter-spacing:.13em;color:var(--muted);
  text-transform:uppercase;line-height:1.5}
.tag{font-size:clamp(9.5px,.9vw,10px);letter-spacing:.16em;color:var(--gold);
  text-transform:uppercase}
.strike{font-size:15px;color:var(--muted);text-decoration:line-through}

hr.rule{height:1px;background:var(--rule-soft);border:0;margin:0}
.rule-gold{height:1px;background:var(--rule);border:0;margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:var(--navy);color:#fff;
  font-size:clamp(11.5px,1.1vw,13px);letter-spacing:.13em;text-transform:uppercase;
  padding:18px 34px;border:1px solid var(--navy);min-height:52px;text-align:center;
  transition:background .4s ease,color .4s ease,transform .3s var(--ease),box-shadow .4s ease;
}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px rgba(18,41,74,.16)}
.btn:active{transform:translateY(0) scale(.988);box-shadow:none}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn--gold:hover{background:#C6A669;color:var(--navy)}
.btn--ghost{background:transparent;color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff}
.btn--full{width:100%}

/* ---------- stars ---------- */
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.stars svg{display:block}

/* ---------- dark band ---------- */
.dark{background:var(--navy);color:rgba(255,255,255,.72)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .lede{color:rgba(255,255,255,.72)}
.dark .small,.dark .attrib{color:rgba(255,255,255,.5)}
.dark hr.rule{background:var(--rule-dark)}
.dark .quote{color:#fff}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:clamp(18px,2.4vw,34px)}
.nav__logo{height:clamp(40px,5vw,56px);width:auto;mix-blend-mode:multiply}
.nav__links{display:flex;align-items:center;gap:clamp(20px,3vw,38px);
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--navy)}
.nav__link{position:relative;color:var(--navy);cursor:pointer}
.nav__link::after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease)}
.nav__link:hover{color:var(--navy)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{padding:13px 24px;min-height:44px;font-size:11px}
.nav__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.nav__burger span{display:block;width:22px;height:1px;background:var(--navy);position:relative}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;
  width:22px;height:1px;background:var(--navy);transition:transform .3s var(--ease)}
.nav__burger span::before{top:-7px}
.nav__burger span::after{top:7px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;background:var(--cream) no-repeat;
  background-image:url('../img/hero-crop.jpg');
  background-size:126% auto;background-position:80% 66%}
.hero__scrim,.hero__scrim2,.hero__wash{position:absolute;inset:0;pointer-events:none}
.hero__scrim{background:linear-gradient(96deg,
  rgba(250,246,240,.985) 0%,rgba(250,246,240,.96) 30%,rgba(250,246,240,.74) 46%,
  rgba(250,246,240,.26) 64%,rgba(250,246,240,0) 82%)}
.hero__scrim2{background:linear-gradient(180deg,
  rgba(250,246,240,.94) 0%,rgba(250,246,240,.3) 15%,rgba(250,246,240,0) 32%)}
.hero__wash{background:var(--cream);opacity:0;z-index:2;
  transition:opacity 1.6s var(--ease) .1s}
.hero__inner{position:relative;z-index:3;padding-bottom:clamp(40px,6vw,60px)}
.hero__copy{max-width:600px;gap:clamp(16px,2vw,26px);padding-top:clamp(24px,5vw,60px)}
.hero__meta{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(10px,1.6vw,20px)}
.hero__price{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,2.4vw,28px)}
.price-big{font-family:var(--serif);font-size:clamp(22px,2.4vw,26px);font-weight:600;
  color:var(--navy);line-height:1}
.sep{width:1px;height:13px;background:var(--rule-soft)}

/* ==========================================================================
   GENERIC GRIDS
   ========================================================================== */
.grid{display:grid;gap:0}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cell{padding:clamp(26px,3vw,36px) clamp(20px,2.6vw,30px) 0;
  border-right:1px solid var(--rule-soft)}
.cell:last-child{border-right:0}

/* ---------- cyclus ---------- */
.cyclus__grid{margin-top:clamp(40px,6vw,76px);border-top:1px solid var(--rule)}

/* ---------- mismatch ---------- */
.mismatch__cols{display:flex;gap:clamp(36px,6vw,80px);align-items:center;
  margin-top:clamp(40px,5vw,70px)}
.mismatch__text{width:46%;gap:clamp(18px,2.2vw,26px)}
.mismatch__list{flex-grow:1}
.mm-row{display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);
  padding-block:clamp(18px,2.4vw,26px);border-bottom:1px solid var(--rule-dark)}
.mm-row:last-child{border-bottom:0}
.mm-row svg{flex:0 0 auto}

/* ---------- quiz ---------- */
.quiz__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--cream);border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);margin-top:clamp(34px,4.6vw,56px)}
.q-opt{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.6vw,18px);
  padding:clamp(24px,3.4vw,38px) 14px;border-right:1px solid var(--rule-soft);
  transition:background .35s ease;width:100%;min-height:120px;justify-content:center}
.q-opt:last-child{border-right:0}
.q-opt span{font-size:clamp(11px,1.1vw,12px);letter-spacing:.15em;text-transform:uppercase;
  color:var(--navy);font-weight:400}
.q-opt svg{transition:transform .45s var(--ease)}
.q-opt .q-bed{fill:rgba(18,41,74,.10)}
.q-opt .q-head{fill:rgba(18,41,74,.34)}
.q-opt .q-body{stroke:rgba(18,41,74,.34)}
.q-opt:hover{background:rgba(184,151,90,.07)}
.q-opt:hover svg{transform:translateY(-3px) scale(1.04)}
.q-opt[aria-pressed="true"]{background:var(--navy)}
.q-opt[aria-pressed="true"] span{color:#fff}
.q-opt[aria-pressed="true"] .q-bed{fill:rgba(255,255,255,.26)}
.q-opt[aria-pressed="true"] .q-head{fill:#fff}
.q-opt[aria-pressed="true"] .q-body{stroke:#fff}

.quiz__empty{padding-top:clamp(30px,4vw,52px);text-align:center}
.quiz__empty p{font-family:var(--serif);font-size:clamp(18px,2vw,24px);color:var(--muted)}
.quiz__result{display:none;align-items:center;gap:clamp(28px,5vw,64px);
  margin-top:clamp(28px,4vw,44px);padding:clamp(30px,4.4vw,52px) clamp(24px,4vw,56px);
  background:var(--navy);opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s var(--ease)}
.quiz__result.is-open{display:flex}
.quiz__result.is-shown{opacity:1;transform:none}
.quiz__badge{border:1px solid rgba(255,255,255,.2);padding:clamp(20px,2.6vw,30px) clamp(26px,3.4vw,42px);
  text-align:center}
.quiz__cm{font-family:var(--serif);font-size:clamp(34px,4.4vw,52px);font-weight:500;color:#fff;line-height:1}
.quiz__cm-unit{font-family:var(--serif);font-size:clamp(17px,2vw,24px);color:rgba(255,255,255,.55)}

/* ---------- twee hoogtes ---------- */
.flip-row{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);
  margin-top:clamp(30px,4vw,52px)}
.flip-row .line{flex-grow:1;height:1px;background:var(--rule)}
.flip-row .label{font-family:var(--serif);font-size:clamp(17px,2.2vw,29px);color:var(--navy)}

/* ---------- slaaphoudingen ---------- */
.pos-list{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--rule)}
.pos{display:flex;gap:clamp(24px,4vw,48px);padding-block:clamp(28px,3.6vw,44px);
  border-bottom:1px solid var(--rule-soft);align-items:flex-start}
.pos:last-child{border-bottom:0}
.pos--accent{background:rgba(184,151,90,.05)}
.pos__head{width:190px;flex:0 0 190px}
.pos__body{flex-grow:1;display:flex;gap:clamp(22px,3.6vw,44px)}
.pos__copy{flex:1}
.pos__quote{flex:1;border-left:1px solid var(--rule-soft);padding-left:clamp(20px,3vw,36px)}
.badge-note{display:inline-block;margin-top:12px;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--rule);padding:5px 10px}

/* ---------- reviews ---------- */
.rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.rev-score{font-family:var(--serif);font-size:clamp(38px,5vw,56px);font-weight:500;
  color:var(--navy);line-height:1}
.rev-hero{margin-top:clamp(36px,5vw,66px);padding-block:clamp(34px,4.4vw,56px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rev-col{padding:clamp(28px,3.4vw,44px) clamp(22px,2.6vw,40px) 0 0;
  border-right:1px solid var(--rule-soft);transition:background .5s ease}
.rev-col:hover{background:rgba(184,151,90,.06)}
.rev-col:last-child{border-right:0}

/* ---------- signup ---------- */
.signup__cols{display:flex;gap:clamp(32px,5vw,76px);align-items:center}
.signup__text{width:53%;gap:clamp(16px,2vw,24px)}
.signup__box{flex-grow:1;border:1px solid rgba(255,255,255,.18);
  padding:clamp(28px,3.6vw,42px) clamp(24px,3vw,40px)}
.gift-row{display:flex;align-items:center;gap:16px;padding-bottom:22px;
  border-bottom:1px solid var(--rule-dark)}
.field{border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:13px}
.field input{width:100%;background:none;border:0;outline:none;color:#fff;
  font-size:15px;padding:0}
.field input::placeholder{color:rgba(255,255,255,.42)}
.consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.consent input{flex:0 0 15px;width:15px;height:15px;margin:3px 0 0;accent-color:var(--gold)}
.consent span{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.6)}
.note-row{display:flex;align-items:flex-start;gap:11px;padding-top:14px;
  border-top:1px solid var(--rule-dark)}
.note-row span{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.66)}

/* ---------- offer ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(24px,3vw,34px);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.tier{padding:clamp(30px,3.6vw,44px) clamp(22px,2.8vw,40px);
  border-right:1px solid var(--rule-soft);display:flex;flex-direction:column}
.tier:last-child{border-right:0}
.tier--best{background:rgba(184,151,90,.07)}
.tier__price{font-family:var(--serif);font-size:clamp(32px,4vw,44px);font-weight:600;
  color:var(--navy);line-height:1}
.tier__why{margin-top:18px;flex-grow:1}
.tier__btn{margin-top:20px}
.faq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(34px,4.4vw,52px);gap:0}
.faq-cell{padding-right:clamp(22px,3vw,40px);border-right:1px solid var(--rule-soft)}
.faq-cell:last-child{border-right:0;padding-right:0}
.faq-cell + .faq-cell{padding-left:clamp(22px,3vw,40px)}

.trustbar{background:var(--navy-2);padding:clamp(18px,2.4vw,26px) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,2vw,24px);
  flex-wrap:wrap}
.trustbar .attrib{color:rgba(255,255,255,.72)}
.trustbar .sep{background:rgba(255,255,255,.16)}

.closer{background:var(--navy);padding-block:clamp(52px,7vw,86px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,26px);
  text-align:center}
.closer__logo{background:var(--cream);padding:16px 30px}
.closer__logo img{height:clamp(52px,7vw,74px);width:auto;mix-blend-mode:multiply}

/* ---------- sticky bar ---------- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--navy);
  transform:translateY(110%);transition:transform .6s var(--ease);
  box-shadow:0 -10px 34px rgba(12,30,56,.22)}
.stickybar.is-shown{transform:translateY(0)}
.stickybar__inner{max-width:var(--max);margin-inline:auto;
  padding:13px var(--gutter);display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.stickybar__label{font-size:12.5px;letter-spacing:.06em;color:rgba(255,255,255,.78)}
.stickybar__price{font-family:var(--serif);font-size:22px;font-weight:600;color:#fff;line-height:1}
.stickybar .btn{padding:13px 26px;min-height:44px;font-size:11.5px}

/* ==========================================================================
   MOTION — only ever applied when JS is confirmed alive
   ========================================================================== */
.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease),transform .95s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv-img{opacity:0;clip-path:inset(0 0 100% 0);
  transition:opacity .5s ease,clip-path 1.25s var(--ease)}
.js .rv-img.is-in{opacity:1;clip-path:inset(0 0 0 0)}
.js .eyebrow::after,.js .eyebrow::before{transform:scaleX(0);transform-origin:left;
  transition:transform .95s var(--ease) .2s}
.js .eyebrow--ctr::before{transform-origin:right}
.js .eyebrow.is-in::after,.js .eyebrow.is-in::before{transform:scaleX(1)}
.js .hero__wash{opacity:1}
.js .hero.is-in .hero__wash{opacity:0}
.js .hero-stage{opacity:0;transform:translateY(22px);
  transition:opacity .95s var(--ease),transform .95s var(--ease)}
.js .hero.is-in .hero-stage{opacity:1;transform:none}

.lines .ln{display:block;overflow:hidden;padding-bottom:.04em}
.js .lines .ln > span{display:block;transform:translateY(112%);
  transition:transform 1.05s var(--ease)}
.js .hero.is-in .lines .ln > span{transform:none}
.js .hero.is-in .lines .ln:nth-child(1) > span{transition-delay:.10s}
.js .hero.is-in .lines .ln:nth-child(2) > span{transition-delay:.20s}
.js .hero.is-in .lines .ln:nth-child(3) > span{transition-delay:.30s}

/* ---------- intro ---------- */
.intro{display:none}
.js .intro{position:fixed;inset:0;z-index:200;background:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:24px;
  transition:opacity .8s ease,transform .9s cubic-bezier(.7,0,.3,1)}
.js .intro.is-gone{opacity:0;transform:translateY(-100%);pointer-events:none}
.intro img{height:clamp(72px,12vw,104px);width:auto;mix-blend-mode:multiply;opacity:0;
  transform:translateY(16px);transition:opacity .8s ease,transform 1s var(--ease)}
.intro.is-lit img{opacity:1;transform:none}
.intro__line{width:clamp(120px,26vw,170px);height:1px;background:var(--gold);
  transform:scaleX(0);transition:transform 1s var(--ease) .35s}
.intro.is-lit .intro__line{transform:scaleX(1)}
.intro__sub{font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);opacity:0;transition:opacity .9s ease .55s;text-align:center}
.intro.is-lit .intro__sub{opacity:1}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .hero{background-size:150% auto;background-position:76% 68%}
  .hero__scrim{background:linear-gradient(96deg,
    rgba(250,246,240,.99) 0%,rgba(250,246,240,.97) 40%,rgba(250,246,240,.8) 58%,
    rgba(250,246,240,.3) 76%,rgba(250,246,240,0) 92%)}
  .mismatch__cols{flex-direction:column;align-items:stretch;gap:36px}
  .mismatch__text{width:100%}
  .signup__cols{flex-direction:column;align-items:stretch;gap:34px}
  .signup__text{width:100%}
  .pos__head{width:150px;flex:0 0 150px}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cell{border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
    padding-bottom:clamp(22px,3vw,30px)}
  .cell:nth-child(2n){border-right:0}
  .cell:nth-last-child(-n+2){border-bottom:0}
}

@media (max-width:820px){
  .nav__links{position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-top:1px solid var(--rule-soft);
    box-shadow:0 18px 40px rgba(18,41,74,.10);
    max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
  .nav{position:relative}
  .nav__links.is-open{max-height:340px}
  .nav__link{padding:18px var(--gutter);border-bottom:1px solid var(--rule-soft)}
  .nav__link::after{display:none}
  .nav__cta{margin:16px var(--gutter) 20px}
  .nav__burger{display:flex}

  .hero{background-size:cover;background-position:72% 70%}
  .hero__scrim{background:linear-gradient(180deg,
    rgba(250,246,240,.97) 0%,rgba(250,246,240,.94) 46%,rgba(250,246,240,.62) 72%,
    rgba(250,246,240,.34) 100%)}
  .hero__scrim2{background:none}
  .hero__copy{max-width:none;padding-bottom:clamp(140px,32vw,220px)}

  .quiz__result{flex-direction:column;align-items:stretch;gap:26px}
  .quiz__result .signup__box{width:100%}
  .quiz__aside{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .quiz__badge{width:100%}

  .pos{flex-direction:column;gap:18px}
  .pos__head{width:100%;flex:0 0 auto;display:flex;align-items:baseline;
    justify-content:space-between;gap:14px;flex-wrap:wrap}
  .pos__body{flex-direction:column;gap:20px}
  .pos__quote{border-left:0;border-top:1px solid var(--rule-soft);
    padding-left:0;padding-top:20px}

  .rev-head{flex-direction:column;align-items:flex-start;gap:22px}
  .rev-head > div:last-child{text-align:left!important}
  .rev-head .rev-score-row{justify-content:flex-start!important}
  .rev-grid{grid-template-columns:1fr}
  .rev-col{padding:26px 0;border-right:0;border-bottom:1px solid var(--rule-soft)}
  .rev-col:last-child{border-bottom:0}

  .tiers{grid-template-columns:1fr}
  .tier{border-right:0;border-bottom:1px solid var(--rule-soft);padding-inline:0}
  .tier:last-child{border-bottom:0}
  .tier--best{padding-inline:clamp(18px,4vw,24px)}

  .faq-grid{grid-template-columns:1fr}
  .faq-cell,.faq-cell + .faq-cell{padding:22px 0;border-right:0;
    border-bottom:1px solid var(--rule-soft);padding-left:0}
  .faq-cell:last-child{border-bottom:0}

  .trustbar{justify-content:center;text-align:center;row-gap:10px}
  .trustbar .sep{display:none}
  .trustbar .attrib::after{content:"·";margin-left:clamp(12px,2vw,24px);
    color:rgba(255,255,255,.3)}
  .trustbar .attrib:last-child::after{content:""}

  .stickybar__label{display:none}
  .stickybar__inner{justify-content:space-between}
}

@media (max-width:560px){
  .grid--4{grid-template-columns:1fr}
  .cell{border-right:0;padding-inline:0}
  .cell:nth-last-child(-n+2){border-bottom:1px solid var(--rule-soft)}
  .cell:last-child{border-bottom:0}
  .quiz__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .q-opt:nth-child(2n){border-right:0}
  .q-opt:nth-child(-n+2){border-bottom:1px solid var(--rule-soft)}
  .mm-row{flex-direction:column;align-items:flex-start;gap:14px}
  .flip-row .line{display:none}
  .flip-row{flex-direction:column;text-align:center;gap:14px}
  .flip-row .label{white-space:normal}
  .hero__price{flex-direction:column;align-items:flex-start;gap:16px}
  .btn{width:100%}
  .nav__cta{width:auto}
}

/* ==========================================================================
   REDUCED MOTION — content is never hidden
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .intro{display:none}
  .js .rv,.js .rv-img,.js .hero-stage,.js .lines .ln > span,
  .js .eyebrow::after,.js .eyebrow::before,.hero__wash,.quiz__result,.stickybar{
    transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .rv-img{opacity:1;clip-path:none}
  .js .hero-stage{opacity:1;transform:none}
  .js .lines .ln > span{transform:none}
  .js .eyebrow::after,.js .eyebrow::before{transform:scaleX(1)}
  .js .hero__wash{opacity:0}
  .quiz__result{opacity:1;transform:none}
  .btn:hover{transform:none}
  .q-opt:hover svg{transform:none}
}

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.cart-overlay{position:fixed;inset:0;z-index:90;background:rgba(12,30,56,.42);
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.cart-overlay.is-open{opacity:1;visibility:visible}

.cart{position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(420px,100vw);
  height:100vh;height:100dvh;   /* dvh volgt de adresbalk; anders valt de afrekenknop onder de schermrand */
  background:var(--cream);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .5s var(--ease);
  box-shadow:-18px 0 50px rgba(12,30,56,.18)}
.cart.is-open{transform:none}
.cart__head{display:flex;align-items:center;justify-content:space-between;
  padding:24px 26px;border-bottom:1px solid var(--rule-soft)}
.cart__title{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--navy)}
.cart__close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--navy);transition:transform .3s var(--ease)}
.cart__close:hover{transform:rotate(90deg)}
.cart__body{flex:1;overflow-y:auto;padding:26px}
.cart__line{display:flex;gap:18px;padding-bottom:24px;border-bottom:1px solid var(--rule-soft)}
.cart__thumb{flex:0 0 84px;width:84px;background:transparent;padding:0}
.cart__thumb img{mix-blend-mode:multiply}
.cart__name{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy);line-height:1.2}
.cart__qty{display:inline-flex;align-items:center;border:1px solid var(--rule-soft);margin-top:14px}
.cart__qty button{width:34px;height:34px;color:var(--navy);font-size:16px;line-height:1;
  transition:background .25s ease}
.cart__qty button:hover{background:rgba(184,151,90,.12)}
.cart__qty span{min-width:34px;text-align:center;font-size:14px;color:var(--navy)}
.cart__upsell{margin-top:24px;padding:20px;background:rgba(184,151,90,.10);
  border:1px solid var(--rule)}
.cart__upsell button{margin-top:14px;width:100%;padding:14px;min-height:46px;font-size:11px}
.cart__gift{display:flex;gap:11px;align-items:flex-start;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--rule-soft)}
.cart__foot{padding:24px 26px calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--rule-soft);background:var(--cream-2);flex-shrink:0}
.cart__total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.cart__total-val{font-family:var(--serif);font-size:29px;font-weight:600;color:var(--navy);line-height:1}
.cart__trust{display:flex;flex-wrap:wrap;gap:6px 14px;margin:16px 0 18px}
.cart__empty{text-align:center;padding:60px 20px;font-family:var(--serif);
  font-size:20px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .cart,.cart-overlay,.cart__close{transition:none!important}
}

/* ==========================================================================
   PRODUCT PAGE (PDP)
   ========================================================================== */
.pdp-body{background:var(--cream)}
.pdp-topbar{border-bottom:1px solid var(--rule-soft);background:var(--cream)}
.pdp{padding-block:clamp(30px,4vw,56px) clamp(50px,7vw,90px)}
.pdp__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,72px);
  align-items:start}

.pdp__main{margin:0;background:transparent;padding:0}
.pdp__main img{width:100%;mix-blend-mode:multiply}
.pdp__thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:8px;margin-top:10px}
.pdp__thumb{background:transparent;padding:0;border:1px solid var(--rule-soft);
  transition:border-color .3s ease,opacity .3s ease;opacity:.72}
.pdp__thumb img{mix-blend-mode:multiply;aspect-ratio:1;object-fit:cover;width:100%}
.pdp__thumb:hover{opacity:1}
.pdp__thumb.is-active{border-color:var(--gold);opacity:1}

.pdp__buy{position:sticky;top:26px}
.pdp__rating{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}

.bundles{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.bundles legend{padding:0}
.bundle{display:flex;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;
  border:1px solid var(--rule-soft);background:#fff;transition:border-color .3s ease,background .3s ease}
.bundle:hover{border-color:var(--rule)}
.bundle.is-selected{border-color:var(--navy);background:var(--cream)}
.bundle--best.is-selected{border-color:var(--gold);background:rgba(184,151,90,.08)}
.bundle input{flex:0 0 16px;width:16px;height:16px;accent-color:var(--navy);margin:0}
.bundle__main{flex:1;display:flex;flex-direction:column;gap:3px}
.bundle__name{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bundle__note{font-size:12.5px;color:var(--muted);line-height:1.5}
.bundle__flag{font-family:var(--sans);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--rule);padding:3px 8px;font-weight:400}
.bundle__flag--gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.bundle__price{text-align:right;display:flex;flex-direction:column;gap:2px}
.bundle__now{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--navy);line-height:1.1}
.bundle__price .strike{font-size:12.5px}

.pdp__assur{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.pdp__assur li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;
  line-height:1.65;color:var(--ink)}
.pdp__assur svg{flex:0 0 17px;margin-top:4px}
.pdp__assur strong{font-weight:500;color:var(--navy)}

.pdp__gift{display:flex;gap:14px;align-items:flex-start;margin-top:24px;padding:20px;
  background:rgba(184,151,90,.08);border:1px solid var(--rule)}

.pdp__cols{display:flex;gap:clamp(32px,5vw,72px);align-items:flex-start}
.pdp__spec{flex:0 0 min(380px,40%);background:var(--cream-2);padding:clamp(24px,3vw,36px)}
.spec{margin:0}
.spec > div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
  border-bottom:1px solid var(--rule-soft)}
.spec > div:last-child{border-bottom:0}
.spec dt{font-size:13px;color:var(--muted);margin:0}
.spec dd{font-size:13px;color:var(--navy);margin:0;text-align:right;font-weight:400}

.faq{border-top:1px solid var(--rule);max-width:820px;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--rule-soft)}
.faq__item summary{list-style:none;cursor:pointer;padding:20px 0;
  font-family:var(--serif);font-size:clamp(17px,2vw,21px);font-weight:600;color:var(--navy);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-family:var(--sans);font-size:20px;
  color:var(--gold);font-weight:300;transition:transform .3s var(--ease)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{padding-bottom:22px;max-width:700px}

@media (max-width:900px){
  .pdp__grid{grid-template-columns:1fr}
  .pdp__buy{position:static}
  .pdp__cols{flex-direction:column}
  .pdp__spec{flex:1 1 auto;width:100%}
}


/* ---------- full-width media bands: image blends straight into the page --- */
.media-band img{width:100%;height:auto;display:block;mix-blend-mode:multiply}


/* ==========================================================================
   PDP DENSITY — the sales page carries more per screen than the landing page
   ========================================================================== */
.pdp-body{--section-y:clamp(38px,4.6vw,64px)}
.pdp{padding-block:clamp(20px,2.6vw,34px) clamp(32px,4vw,54px)}
.pdp-body .h-lg{font-size:clamp(24px,3.4vw,37px)}
.pdp-body .h-md{font-size:clamp(20px,2.4vw,27px)}
.pdp-body .h-xs{font-size:clamp(16px,1.5vw,19px)}
.pdp-body .lede{font-size:clamp(14.5px,1.25vw,16px);line-height:1.7}
.pdp-body .section > .wrap > .stack.ctr{gap:10px!important}

.pdp-body .bundle{padding:14px 17px}
.pdp-body .bundle__name{font-size:17.5px}
.pdp-body .bundles{gap:8px}
.pdp-body .btn{min-height:48px;padding:15px 30px}
.pdp__assur{margin-top:20px;gap:10px}
.pdp__gift{margin-top:18px;padding:16px 18px}
.pdp__rating{margin-top:9px}

/* description + specs read as one block */
.pdp__cols{gap:clamp(26px,3.4vw,52px)}
.pdp-body .pdp__cols .stack{gap:14px}
.pdp__spec{padding:clamp(20px,2.4vw,30px);align-self:stretch}
.pdp__spec h3{margin-bottom:14px!important}
.spec > div{padding:8px 0}
.spec dt,.spec dd{font-size:12.5px}

.pdp-body .cell{padding-top:clamp(20px,2.4vw,28px);padding-bottom:clamp(16px,2vw,22px)}
.pdp-body .faq__item summary{padding:15px 0}
.pdp-body .faq__item p{padding-bottom:17px}
.pdp-body .rev-col{padding-top:clamp(22px,2.6vw,32px)}
.pdp-body .closer{padding-block:clamp(44px,5.5vw,66px)}

/* ==========================================================================
   PDP — one-screen product block + a bundle selector with some conviction
   ========================================================================== */
@media (min-width:901px){
  .pdp{display:flex;align-items:center;min-height:calc(100vh - 96px)}
  .pdp__main img{max-height:min(48vh,470px);width:auto;max-width:100%;margin-inline:auto}
  .pdp__thumb img{aspect-ratio:1}
}
.pdp__main{display:flex;justify-content:center}

/* --- bundle selector --- */
.bundles__legend{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy);
  margin-bottom:12px;padding:0}
.bundles__legend span{font-family:var(--sans);font-size:12.5px;color:var(--gold);font-weight:400}

.bundle{position:relative;display:flex;align-items:center;gap:14px;padding:15px 18px;
  cursor:pointer;border:1.5px solid var(--rule-soft);background:#fff;
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.bundle:hover{border-color:var(--rule)}
.bundle input{position:absolute;opacity:0;width:0;height:0}
.bundle__tick{flex:0 0 21px;width:21px;height:21px;border:1.5px solid var(--rule-soft);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,border-color .3s ease}
.bundle__tick svg{opacity:0;transition:opacity .25s ease}
.bundle.is-selected{border-color:var(--navy);background:var(--cream);
  box-shadow:0 8px 24px rgba(18,41,74,.09)}
.bundle.is-selected .bundle__tick{background:var(--navy);border-color:var(--navy)}
.bundle.is-selected .bundle__tick svg{opacity:1}
.bundle--best{border-color:rgba(184,151,90,.5)}
.bundle--best.is-selected{border-color:var(--gold);background:rgba(184,151,90,.09);
  box-shadow:0 8px 24px rgba(184,151,90,.18)}
.bundle--best.is-selected .bundle__tick{background:var(--gold);border-color:var(--gold)}

.bundle__main{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.bundle__name{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--navy);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.2}
.bundle__note{font-size:12.5px;color:var(--muted);line-height:1.4}
.bundle__flag{font-family:var(--sans);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--rule);padding:3px 7px;font-weight:400;white-space:nowrap}
.bundle__flag--gold{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:500}

.bundle__price{text-align:right;display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.bundle__now{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--navy);line-height:1.15}
.bundle__was{font-size:12px;color:var(--muted);text-decoration:line-through;line-height:1.2}
.bundle__save{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  font-weight:500;margin-top:3px;white-space:nowrap}
.bundle.is-selected .bundle__save{color:var(--navy)}
.bundle--best.is-selected .bundle__save{color:var(--gold)}

/* --- CTA carries the price --- */
.pdp__cta{margin-top:18px;justify-content:space-between;padding-inline:26px}
.pdp__cta-price{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:0;
  text-transform:none}

/* --- compact assurance strip --- */
.pdp__assur--row{flex-direction:row;flex-wrap:wrap;gap:8px 20px;margin-top:16px}
.pdp__assur--row li{font-size:12.5px;gap:7px;align-items:center}
.pdp__assur--row svg{margin-top:0}

/* --- one-line gift note --- */
p.pdp__gift{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;
  background:rgba(184,151,90,.08);border:1px solid var(--rule);font-size:12.5px;color:var(--ink)}

/* ==========================================================================
   PDP v2 — consistent gallery, accordions, prominent gift, mobile fold
   ========================================================================== */

/* every gallery image occupies the same box, whatever its aspect ratio */
.pdp__main{background:transparent;padding:0;display:flex;align-items:center;justify-content:center}
.pdp__main img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (min-width:901px){
  .pdp__main{aspect-ratio:1/1;max-height:min(46vh,440px)}
  .pdp__main img{max-height:100%}
  .pdp{min-height:calc(100vh - 92px)}
}

/* accordions under the gallery */
.pdp__acc{margin-top:16px;border-top:1px solid var(--rule-soft)}
.acc{border-bottom:1px solid var(--rule-soft)}
.acc summary{list-style:none;cursor:pointer;padding:14px 0;font-family:var(--serif);
  font-size:17px;font-weight:600;color:var(--navy);display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--sans);font-size:19px;color:var(--gold);
  font-weight:300;transition:transform .3s var(--ease)}
.acc[open] summary::after{transform:rotate(45deg)}
.acc__body{padding-bottom:18px;display:flex;flex-direction:column;gap:12px}
.acc__body .lede{font-size:14.5px;line-height:1.7}
.acc__body strong{color:var(--navy);font-weight:500}

/* the gift is an offer, not a footnote */
a.pdp__gift{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px 18px;
  background:linear-gradient(100deg,rgba(184,151,90,.15),rgba(184,151,90,.06));
  border:1.5px solid var(--rule);color:var(--ink);
  transition:border-color .3s ease,transform .3s var(--ease),box-shadow .3s ease}
a.pdp__gift:hover{border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(184,151,90,.18);color:var(--ink)}
.pdp__gift-txt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.pdp__gift-txt strong{font-family:var(--serif);font-size:16.5px;font-weight:600;color:var(--navy)}
.pdp__gift-txt span{font-size:12.5px;line-height:1.55;color:var(--muted)}
.pdp__gift-arrow{flex:0 0 17px;transition:transform .35s var(--ease)}
a.pdp__gift:hover .pdp__gift-arrow{transform:translateX(4px)}

/* ---------- mobile: the buying decision fits the first screen ---------- */
@media (max-width:900px){
  .pdp{padding-block:10px 24px}
  .pdp__grid{gap:16px}
  .pdp__main{aspect-ratio:16/10;max-height:34vh}
  .pdp__thumbs{grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:6px;margin-top:8px}
  .pdp-body .h-md{font-size:22px}
  .pdp-body .lede{font-size:14px}
  .pdp__rating{margin-top:6px}
  .pdp__buy hr.rule{margin:14px 0!important}
  .bundles__legend{font-size:16px;margin-bottom:9px}
  .pdp-body .bundle{padding:11px 13px;gap:11px}
  .pdp-body .bundle__name{font-size:15.5px}
  .bundle__note{font-size:11.5px}
  .bundle__now{font-size:18px}
  .bundle__was{font-size:11px}
  .bundle__save{font-size:9px}
  .pdp-body .bundles{gap:6px}
  .pdp__cta{margin-top:12px;min-height:52px}
  .pdp__assur--row{margin-top:11px;gap:5px 14px}
  .pdp__assur--row li{font-size:11.5px}
  a.pdp__gift{margin-top:12px;padding:12px 14px;gap:11px}
  .pdp__gift-txt strong{font-size:14.5px}
  .pdp__gift-txt span{font-size:11.5px}
  .pdp__acc{margin-top:12px}
  .acc summary{padding:12px 0;font-size:15.5px}
}
/* ---------- phones: photo beside the title, offer on the first screen ----
   Both wrappers are dissolved into the grid so the photo can sit next to the
   heading instead of above it. That reclaims roughly 80px of height, which
   buys a noticeably larger product shot while the three prices and the order
   button still land on the first screen. Desktop keeps its two columns. */
@media (max-width:560px){
  .pdp__gallery{display:contents}
  .pdp__buy{display:contents}

  .pdp__grid{grid-template-columns:47% minmax(0,1fr);
    column-gap:14px;row-gap:0;align-items:center}
  .pdp{padding-block:8px 22px}

  .pdp__main{grid-column:1;grid-row:1;
    aspect-ratio:1/1;height:auto;max-height:none;
    display:flex;align-items:center;justify-content:center}
  /* the photo scales inside its frame - never larger than the box it sits in */
  .pdp__main img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
  .pdp__intro{grid-column:2;grid-row:1}

  /* everything below the fold line runs the full width */
  .pdp__buy hr.rule,.bundles,.pdp__cta,.pdp__assur,a.pdp__gift{grid-column:1 / -1}
  .pdp__thumbs{grid-column:1 / -1;order:98;margin-top:18px;
    grid-template-columns:repeat(auto-fit,minmax(52px,1fr))}
  .pdp__acc{grid-column:1 / -1;order:99;margin-top:18px}

  .pdp__intro .eyebrow{display:none}
  .pdp-body .h-md{font-size:20px;margin-top:0!important}
  .pdp-body .lede{font-size:12.5px;line-height:1.45;margin-top:6px}
  .pdp__rating{margin-top:5px;gap:6px}
  .pdp__rating .attrib{font-size:11px;line-height:1.35}
  .pdp__buy hr.rule{margin:15px 0!important}
  .bundles__legend{font-size:15px;margin-bottom:5px}
  .pdp-body .bundle{padding:9px 12px;gap:9px}
  .pdp-body .bundles{gap:7px}
  .pdp__cta{margin-top:12px;min-height:52px}
}

/* Short phones (roughly 640px tall and under). Only about 530px stays visible
   once the address bar is up, which is not enough for the photo, the copy and
   three price tiers at once. The offer wins: the lede moves out of the way and
   the photo shrinks, so the prices are on screen without scrolling. */
@media (max-width:560px) and (max-height:720px){
  /* A 640px-tall phone shows only about 530px. The photo keeps its square
     shape but takes a narrower column, and the spacing tightens, so all
     three prices stay on the first screen. */
  .pdp__grid{grid-template-columns:30% minmax(0,1fr);column-gap:12px}
  .pdp__intro .lede{display:none}
  .pdp__rating{margin-top:3px}
  .pdp__buy hr.rule{margin:9px 0!important}
  .bundles__legend{margin-bottom:4px}
  .pdp-body .bundle{padding:7px 11px;gap:8px}
  .pdp-body .bundles{gap:5px}
  .pdp__cta{margin-top:9px;min-height:48px}
}

/* ==========================================================================
   UTILITY PAGES — track / contact / aanmelden
   ========================================================================== */
.utility__wrap{max-width:860px}

/* form primitives */
.field-block{display:flex;flex-direction:column;gap:7px}
.field-block label{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.field-block label .opt{text-transform:none;letter-spacing:0;font-size:11.5px}
.field-block input,.field-block select,.field-block textarea{
  width:100%;background:#fff;border:1px solid var(--rule-soft);padding:13px 15px;
  font-size:15px;color:var(--navy);border-radius:0;transition:border-color .3s ease}
.field-block textarea{resize:vertical;min-height:120px;font-family:var(--sans)}
.field-block input:focus,.field-block select:focus,.field-block textarea:focus{
  outline:none;border-color:var(--gold)}
.field-block--dark label{color:rgba(255,255,255,.55)}
.field-block--dark input{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);
  padding:0 0 11px;color:#fff}
.field-block--dark input:focus{border-color:var(--gold-2)}

/* track */
.track{max-width:620px;margin:clamp(28px,4vw,46px) auto 0}
.track__label{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.track__row{display:flex;gap:10px}
.track__row input{flex:1;background:#fff;border:1px solid var(--rule-soft);padding:15px 17px;
  font-size:15px;color:var(--navy);transition:border-color .3s ease}
.track__row input:focus{outline:none;border-color:var(--gold)}
.track__row .btn{flex:0 0 auto;white-space:nowrap}
.track__hint{margin-top:12px}
.track__msg{margin-top:16px;padding:14px 16px;background:var(--cream-2);
  border-left:2px solid var(--gold);font-size:13.5px;line-height:1.65;color:var(--ink)}
.track__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(38px,5vw,64px);border-top:1px solid var(--rule)}
.track__step{padding:26px 22px 0 0;border-right:1px solid var(--rule-soft)}
.track__step:last-child{border-right:0}
.track__step h3{margin-top:10px}
.track__step p{margin-top:8px}
.utility__note{margin-top:clamp(30px,4vw,48px);padding:22px 24px;background:var(--cream-2);
  border-left:2px solid var(--gold)}

/* contact */
.contact__cols{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,56px);
  margin-top:clamp(30px,4vw,52px);align-items:start}
.contact__form{display:flex;flex-direction:column;gap:16px}
.contact__aside{display:flex;flex-direction:column;gap:16px}
.contact__card{background:var(--cream-2);padding:24px}
.contact__card--gold{background:rgba(184,151,90,.10);border:1px solid var(--rule)}
.link-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.link-list a{font-size:13.5px;color:var(--navy);border-bottom:1px solid var(--rule);
  padding-bottom:3px;transition:color .3s ease}
.link-list a:hover{color:var(--gold)}

/* aanmelden */
.signup-page{padding-block:clamp(44px,6vw,84px)}
.tick-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.tick-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.6;
  color:rgba(255,255,255,.8)}
.tick-list svg{flex:0 0 16px;margin-top:4px}

@media (max-width:820px){
  .track__row{flex-direction:column}
  .track__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .track__step{padding:22px 16px 18px 0;border-bottom:1px solid var(--rule-soft)}
  .track__step:nth-child(2n){border-right:0}
  .track__step:nth-last-child(-n+2){border-bottom:0}
  .contact__cols{grid-template-columns:1fr}
}
@media (max-width:520px){
  .track__steps{grid-template-columns:1fr}
  .track__step{border-right:0;padding-right:0}
}

/* ==========================================================================
   BUTTON MOTION — a sweep fill and an arrow that leads
   ========================================================================== */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);
  transform:translateY(101%);transition:transform .48s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--navy);border-color:var(--gold);box-shadow:0 16px 34px rgba(184,151,90,.24)}
.btn--gold::before{background:var(--navy)}
.btn--gold:hover{color:#fff;border-color:var(--navy);box-shadow:0 16px 34px rgba(18,41,74,.22)}
.btn--ghost::before{background:var(--navy)}
.btn--ghost:hover{color:#fff;border-color:var(--navy)}

.btn__arrow{flex:0 0 auto;transition:transform .45s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn:active{transform:translateY(0) scale(.985)}

@media (prefers-reduced-motion:reduce){
  .btn::before{display:none}
  .btn:hover{background:var(--navy);color:#fff}
  .btn--gold:hover{background:var(--gold);color:var(--navy)}
  .btn--ghost:hover{background:var(--navy);color:#fff}
  .btn:hover .btn__arrow{transform:none}
}

/* white logo on dark grounds */
.closer__logo{background:none;padding:0}
.closer__logo img{mix-blend-mode:normal}

/* ==========================================================================
   HELP WIDGET
   ========================================================================== */
.chat-launch{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;
  gap:11px;background:var(--navy);color:#fff;padding:14px 20px;border:1px solid var(--navy);
  box-shadow:0 14px 34px rgba(12,30,56,.26);cursor:pointer;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .35s var(--ease),box-shadow .35s ease,background .35s ease}
.chat-launch:hover{transform:translateY(-3px);background:var(--navy-2);
  box-shadow:0 18px 40px rgba(12,30,56,.32)}
.chat-launch.is-hidden{opacity:0;visibility:hidden;transform:translateY(14px)}
.chat-launch__dot{width:7px;height:7px;border-radius:50%;background:#5BD08A;flex:0 0 7px}

.chat{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:80;width:min(370px,calc(100vw - 32px));
  max-height:min(620px,calc(100vh - 44px));max-height:min(620px,calc(100dvh - 44px));background:var(--cream);display:flex;
  flex-direction:column;box-shadow:0 26px 60px rgba(12,30,56,.30);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.98);
  transition:opacity .4s ease,transform .45s var(--ease),visibility .45s}
.chat.is-open{opacity:1;visibility:visible;transform:none}
.chat__head{background:var(--navy);padding:18px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.chat__who{display:flex;flex-direction:column;gap:3px}
.chat__who strong{font-family:var(--serif);font-size:18px;font-weight:600;color:#fff}
.chat__who span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);display:flex;align-items:center;gap:7px}
.chat__close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.7);transition:color .3s ease,transform .3s var(--ease)}
.chat__close:hover{color:#fff;transform:rotate(90deg)}
.chat__body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:88%;padding:13px 15px;font-size:13.5px;line-height:1.6}
.msg--bot{background:#fff;border:1px solid var(--rule-soft);align-self:flex-start;color:var(--ink)}
.msg--me{background:var(--navy);color:#fff;align-self:flex-end}
.msg a{color:var(--gold);border-bottom:1px solid var(--rule)}
.chat__opts{padding:14px 20px 18px;border-top:1px solid var(--rule-soft);background:var(--cream-2);
  display:flex;flex-direction:column;gap:8px}
.chat__opts-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin-bottom:2px}
.chat__opt{text-align:left;background:#fff;border:1px solid var(--rule-soft);padding:11px 14px;
  font-size:13px;color:var(--navy);cursor:pointer;
  transition:border-color .3s ease,background .3s ease,transform .25s var(--ease)}
.chat__opt:hover{border-color:var(--gold);background:rgba(184,151,90,.07);transform:translateX(3px)}
.chat__foot{padding:12px 20px 16px;border-top:1px solid var(--rule-soft);background:var(--cream-2)}

@media (max-width:900px){
  .chat-launch{right:14px;bottom:14px;padding:12px 16px;font-size:11.5px}
  .chat{right:8px;left:8px;bottom:8px;width:auto;max-height:calc(100vh - 16px)}
}
@media (prefers-reduced-motion:reduce){
  .chat,.chat-launch,.chat__close,.chat__opt{transition:none!important}
}

/* ---------- help widget: readable text, options that stay out of the way --- */
.chat{max-height:min(640px,calc(100vh - 40px));max-height:min(640px,calc(100dvh - 40px))}
.chat__body{min-height:230px;padding:20px 20px 16px;gap:11px}
.msg{max-width:90%;padding:14px 16px;font-size:15px;line-height:1.62}
.msg--bot{color:var(--ink)}
.msg strong{color:var(--navy);font-weight:500}
.msg--me strong{color:#fff}

.chat__opts{padding:12px 16px 14px;gap:7px;max-height:196px;overflow-y:auto;
  flex:0 0 auto;scrollbar-width:thin}
.chat__opts::-webkit-scrollbar{width:5px}
.chat__opts::-webkit-scrollbar-thumb{background:var(--rule)}
.chat__opts-label{position:sticky;top:0;background:var(--cream-2);padding-bottom:6px;
  margin:0;z-index:1;font-size:9.5px;letter-spacing:.2em}
.chat__opt{padding:10px 13px;font-size:13.5px;line-height:1.45}
.chat__foot{padding:11px 16px 14px}
.chat__foot .small{font-size:12.5px}

@media (max-width:900px){
  .chat__body{min-height:180px}
  .chat__opts{max-height:172px}
  .msg{font-size:14.5px}
}

/* ==========================================================================
   REVIEWS PAGE
   ========================================================================== */
.rhero{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:6px}
.rhero__score{font-family:var(--serif);font-size:clamp(36px,5vw,52px);font-weight:600;
  color:var(--navy);line-height:1}

.rfilters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-top:clamp(26px,3.4vw,40px);padding-bottom:clamp(24px,3vw,34px);
  border-bottom:1px solid var(--rule)}
.rchip{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);
  background:transparent;border:1px solid var(--rule-soft);padding:9px 16px;cursor:pointer;
  transition:border-color .3s ease,background .3s ease,color .3s ease}
.rchip:hover{border-color:var(--gold)}
.rchip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}

.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule-soft);margin-top:1px}
.rcard{margin:0;background:var(--cream);padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;gap:12px}
.rcard .quote{font-size:clamp(15px,1.7vw,18px);flex-grow:1}
.rcard figcaption{display:flex;flex-direction:column;gap:3px;margin-top:auto}
.rcard__name{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.rcard__tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.rcard.is-hidden{display:none}

@media (max-width:900px){ .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .rgrid{grid-template-columns:1fr} .rchip{font-size:11px;padding:8px 13px} }

/* ==========================================================================
   PAGE TRANSITIONS — arriving and leaving
   Enter is a pure CSS animation, so it still works if the script fails.
   ========================================================================== */
/* Fade only - NEVER animate transform on body.
   A transform animation with fill-mode:both stays in effect after it ends,
   which turns body into a containing block. Every position:fixed element
   (cart drawer, overlay, chat, sticky bar) then anchors to the document
   instead of the screen: scroll down, open the cart, and it sits far above
   you. The lift is not worth that. */
@keyframes pageIn{ from{opacity:0} to{opacity:1} }
.js body{animation:pageIn .55s var(--ease) both}
.js body.is-leaving{opacity:0;transition:opacity .3s ease}

/* the target section gives a brief cue that you have arrived */
@keyframes anchorCue{ 0%{box-shadow:inset 0 0 0 0 rgba(184,151,90,0)}
  30%{box-shadow:inset 0 3px 0 0 var(--gold)} 100%{box-shadow:inset 0 0 0 0 rgba(184,151,90,0)} }
.js .is-target{animation:anchorCue 1.5s ease both}

@media (prefers-reduced-motion:reduce){
  .js body{animation:none}
  .js body.is-leaving{opacity:1;transition:none}
  .js .is-target{animation:none}
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal__wrap{max-width:820px}
.legal__meta{margin-top:10px;padding-bottom:clamp(20px,3vw,30px);border-bottom:1px solid var(--rule)}
.legal h2{margin-top:clamp(28px,3.4vw,40px);margin-bottom:10px}
.legal p{font-size:15px;line-height:1.8;margin-bottom:12px;color:var(--ink)}
.legal p.lede{margin-top:22px}
.legal a{border-bottom:1px solid var(--rule)}
.legal__list{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.legal__list li{font-size:15px;line-height:1.7;color:var(--ink)}
.legal__list--num{padding-left:22px}
ul.legal__list{list-style:disc}
ol.legal__list{list-style:decimal}
.legal__card{background:var(--cream-2);padding:clamp(20px,2.6vw,26px);margin:20px 0}
.legal__card--gold{background:rgba(184,151,90,.10);border:1px solid var(--rule)}
.legal__nav{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:clamp(36px,4.6vw,56px);
  padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--rule)}
.legal__nav a{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);
  border:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:9px 15px;
  transition:border-color .3s ease,background .3s ease}
.legal__nav a:hover{border-color:var(--gold);background:rgba(184,151,90,.07);color:var(--navy)}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.sitefoot{background:var(--navy-2);padding:clamp(40px,5vw,62px) 0 clamp(24px,3vw,32px)}
.sitefoot__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,44px)}
.sitefoot h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);
  font-family:var(--sans);font-weight:400;margin-bottom:14px}
.sitefoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sitefoot a{font-size:13.5px;color:rgba(255,255,255,.68);transition:color .3s ease}
.sitefoot a:hover{color:#fff}
.sitefoot p{font-size:13px;line-height:1.8;color:rgba(255,255,255,.55)}
.sitefoot__logo{height:56px;width:auto;margin-bottom:16px}
.sitefoot__bar{margin-top:clamp(28px,3.6vw,44px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.sitefoot__bar span{font-size:12px;color:rgba(255,255,255,.42)}
@media (max-width:820px){ .sitefoot__cols{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .sitefoot__cols{grid-template-columns:1fr} }

/* ---------- inactive links: shown, not clickable ---------- */
.sitefoot ul.is-inactive span{font-size:13.5px;color:rgba(255,255,255,.42);cursor:default}
.legal__nav.is-inactive span{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule-soft);padding:9px 15px;cursor:default}

.cart__note{margin-top:10px;padding:11px 13px;background:rgba(184,151,90,.12);
  border-left:2px solid var(--gold);font-size:12.5px;line-height:1.55;color:var(--ink)}

/* ==========================================================================
   ?motion=on — re-enable motion even when the OS asks to reduce it.
   Review aid only; the default always respects the visitor.
   ========================================================================== */
html.force-motion .js .rv,
html.force-motion.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease),transform .95s var(--ease)!important}
html.force-motion .rv.is-in{opacity:1!important;transform:none!important}
html.force-motion .rv-img{opacity:0;clip-path:inset(0 0 100% 0);
  transition:opacity .5s ease,clip-path 1.25s var(--ease)!important}
html.force-motion .rv-img.is-in{opacity:1!important;clip-path:inset(0 0 0 0)!important}
html.force-motion .eyebrow::after,
html.force-motion .eyebrow::before{transform:scaleX(0);
  transition:transform .95s var(--ease) .2s!important}
html.force-motion .eyebrow.is-in::after,
html.force-motion .eyebrow.is-in::before{transform:scaleX(1)!important}
html.force-motion .intro{display:flex!important;
  transition:opacity .8s ease,transform .9s cubic-bezier(.7,0,.3,1)!important}
html.force-motion .hero__wash{opacity:1;
  transition:opacity 1.6s var(--ease) .1s!important}
html.force-motion .hero.is-in .hero__wash{opacity:0!important}
html.force-motion .hero-stage{opacity:0;transform:translateY(22px);
  transition:opacity .95s var(--ease),transform .95s var(--ease)!important}
html.force-motion .hero.is-in .hero-stage{opacity:1!important;transform:none!important}
html.force-motion .lines .ln>span{transform:translateY(112%);
  transition:transform 1.05s var(--ease)!important}
html.force-motion .hero.is-in .lines .ln>span{transform:none!important}
html.force-motion body{animation:pageIn .55s var(--ease) both!important}
html.force-motion body.is-leaving{opacity:0;transition:opacity .3s ease!important}
html.force-motion #q-result,
html.force-motion .quiz__result{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s var(--ease)!important}
html.force-motion .quiz__result.is-shown{opacity:1!important;transform:none!important}
html.force-motion .btn:hover{transform:translateY(-2px)!important}
html.force-motion .btn:hover .btn__arrow{transform:translateX(5px)!important}