/* ==========================================================================
   Site.css — shared foundation for every page.
   Tokens, reset, nav, footer, buttons, form controls, utilities.
   Page-specific styles live in Home_Style.css / Zoek_Style.css / Checkout_Style.css
   ========================================================================== */

/* ==========================================================================
   Fonts, self-hosted.
   Previously an @import to fonts.googleapis.com. Two reasons that had to go:

   1. Privacy. Google's font CDN receives the IP address of every visitor.
      A German court (LG München I, 3 O 17493/20) ruled that a GDPR breach.
      This site tells people we don't trade their data; loading fonts from
      Google would have made that untrue on the very first request.

   2. Speed. An @import inside a stylesheet is discovered only after that
      stylesheet is downloaded and parsed, and it then needs a fresh DNS +
      TLS handshake to googleapis, which returns CSS pointing at gstatic,
      needing another. The <h1> is the largest element on the page and uses
      Fraunces, so that serial chain sat directly in front of LCP.

   One variable font covers every weight. The display serif that used to sit
   alongside it was dropped: the reference design uses a single sans throughout,
   and removing it halved the font payload (113KB -> 47KB).
   Licence: fonts/OFL-Inter.txt (SIL OFL 1.1).
   ========================================================================== */

@font-face{
  font-family:'Inter';
  src:url('/fonts/inter-latin.woff2') format('woff2-variations'),
      url('/fonts/inter-latin.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Metric-matched fallbacks. While a webfont loads, the browser paints in a
   system face; if that face has different metrics the text reflows when the
   real font arrives, which is a layout shift and counts against CLS. These
   adjust the fallback so the swap is close to invisible. */
@font-face{
  font-family:'Inter-fallback';
  src:local('Helvetica Neue'),local('Helvetica'),local('Arial');
  size-adjust:107%;
  ascent-override:90%;
  descent-override:22%;
  line-gap-override:0%;
}

:root{
  /* Warm paper neutrals — deliberately not cold grey */
  --paper:#FFFFFF;
  --paper-2:#F6F8FA;
  --paper-3:#E9EEF3;
  --surface:#FFFFFF;

  --ink:#12213A;
  --ink-2:#3A4A61;
  --ink-3:#556478;
  /* was #8494A9 — only 2.75:1 on paper-2, below WCAG AA for body text.
     #626F84 clears 4.5:1 on white/paper/paper-2. */
  --ink-4:#647287;
  --line:#E3E8EE;
  --line-2:#CBD3DC;

  /* Brand */
  --navy:#12213A;
  --navy-dk:#0C1728;
  --navy-lt:#E8F0F8;
  --accent:#0D9488;
  --accent-dk:#0B7C74;
  --accent-lt:#E6F5F3;
  /* The accent fill is 3.74:1 on white — fine as a large button FILL, too low for
     inline link text. Use --accent-text (5.06:1) wherever the accent is text. */
  --accent-text:#0B7C74;
  /* Status colours carry meaning, so they must clear AA at body size on every
     surface they sit on, including their own tint. Both were below that. */
  --sage:#15803D;
  --sage-lt:#E9F7EE;
  --amber:#8A5A0B;
  --amber-lt:#FDF4E3;
  --red:#C0392B;
  --red-lt:#FDECEA;

  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --r-xl:26px;

  --sh-sm:0 1px 2px rgba(22,38,61,.05);
  --sh:0 2px 8px rgba(22,38,61,.06), 0 1px 2px rgba(22,38,61,.04);
  --sh-lg:0 12px 32px rgba(22,38,61,.09), 0 2px 8px rgba(22,38,61,.04);

  --ease:cubic-bezier(.22,.61,.36,1);

  --nav-h:66px;
}

*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:'Inter','Inter-fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(18,33,58,.12);
}
img,svg{max-width:100%;}
a{color:inherit;text-decoration:none;}
[hidden]{display:none !important;}

h1,h2,h3,h4{
  font-family:'Inter','Inter-fallback',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  /* Heavier and tighter than the old serif setting. A bold grotesk needs
     negative tracking at display sizes or it reads loose and generic. */
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
h1{font-weight:700;}
h3,h4{font-weight:600;letter-spacing:-.015em;}
p{margin:0;}

::selection{background:var(--accent);color:#fff;}

:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:1140px;
  margin:0 auto;
  padding:0 20px;
}
@media (min-width:768px){ .wrap{padding:0 32px;} }

.eyebrow{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:14px;
}

.badge-pill{
  display:inline-block;
  background:var(--accent-lt);
  color:var(--accent-dk);
  font-size:13px;font-weight:600;
  padding:6px 16px;border-radius:999px;
  margin-bottom:18px;
}
.section-head{max-width:660px;margin:0 auto 44px;text-align:center;}
.section-head h2{
  font-size:clamp(28px,4.6vw,46px);
  margin-bottom:14px;
}
.section-head h2 em{font-style:italic;color:var(--accent);}
.section-sub{
  font-size:16.5px;
  color:var(--ink-3);
  max-width:540px;
  margin:0 auto;
}

/* Hand-drawn underline accent — used under key words */
.squiggle{position:relative;white-space:nowrap;}
.squiggle::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-.16em;
  height:.34em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c14-4 30-6 44-4.5s28 5.5 42 3.5 26-5 30-6' fill='none' stroke='%230D9488' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  pointer-events:none;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Inter',sans-serif;
  font-size:15.5px;font-weight:600;
  line-height:1;
  padding:15px 26px;
  min-height:50px;
  border:1.5px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .12s var(--ease);
  text-align:center;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn:disabled{cursor:not-allowed;opacity:.55;transform:none;}

.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--accent-dk);}

.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover:not(:disabled){background:var(--navy-dk);}

.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn-outline:hover:not(:disabled){border-color:var(--ink);background:var(--paper-2);}

.btn-ghost{background:transparent;color:var(--ink-3);border-color:transparent;padding:12px 14px;}
.btn-ghost:hover:not(:disabled){color:var(--ink);background:var(--paper-2);}

.btn-sm{font-size:14.5px;padding:11px 18px;min-height:42px;}
.btn-block{width:100%;}
.btn-lg{font-size:17px;padding:17px 30px;min-height:56px;}

.arr{transition:transform .18s var(--ease);}
.btn:hover .arr{transform:translateX(3px);}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(251,249,246,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);
  gap:16px;
}
.logo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:700;font-size:20px;
  color:var(--ink);
  letter-spacing:-.02em;
  flex-shrink:0;
}
.logo-mark{
  width:26px;height:26px;flex-shrink:0;
  border-radius:7px;
  background:var(--navy);
  color:#fff;
  display:grid;place-items:center;
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:700;
  transform:rotate(-6deg);
}

.nav-links{display:none;align-items:center;gap:4px;}
.nav-links a{
  padding:9px 13px;
  border-radius:9px;
  font-size:14.5px;font-weight:500;
  color:var(--ink-3);
  transition:background .15s,color .15s;
}
.nav-links a:hover{color:var(--ink);background:var(--paper-2);}

.nav-right{display:flex;align-items:center;gap:10px;}
.nav-signin{display:none;font-size:14.5px;font-weight:500;color:var(--ink-3);padding:9px 12px;}
.nav-signin:hover{color:var(--ink);}
.nav-cta-btn{display:none;}

/* burger */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;
  padding:0 10px;
  background:transparent;border:none;cursor:pointer;
  border-radius:10px;
}
.burger:hover{background:var(--paper-2);}
.burger span{
  display:block;height:2px;width:100%;
  background:var(--ink);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s;
}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.menu-open .burger span:nth-child(2){opacity:0;}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile drawer */
.drawer{
  position:fixed;inset:var(--nav-h) 0 0;
  z-index:55;
  background:var(--paper);
  padding:22px 20px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:4px;
  transform:translateX(100%);
  transition:transform .3s var(--ease);
  overflow-y:auto;
  visibility:hidden;
}
body.menu-open .drawer{transform:translateX(0);visibility:visible;}
body.menu-open{overflow:hidden;}
.drawer a.drawer-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 4px;
  font-size:19px;font-weight:600;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.drawer a.drawer-link::after{content:"→";color:var(--ink-4);font-family:'Inter',sans-serif;font-size:16px;}
.drawer-foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:12px;}
.drawer-note{font-size:13.5px;color:var(--ink-4);text-align:center;}

@media (min-width:940px){
  .nav-links{display:flex;}
  .nav-signin{display:inline-flex;}
  .nav-cta-btn{display:inline-flex;}
  .burger{display:none;}
  .drawer{display:none;}
}

/* ---------- form controls ---------- */
.field{margin-bottom:16px;}
.field-row{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:600px){
  .field-row.two{grid-template-columns:1fr 1fr;}
  .field-row.pc{grid-template-columns:150px 1fr;}
  .field-row.three{grid-template-columns:1fr 1fr 1fr;}
}
label.lbl{
  display:block;
  font-size:13.5px;font-weight:600;
  color:var(--ink-2);
  margin-bottom:6px;
}
label.lbl .opt{font-weight:400;color:var(--ink-4);}

.inp{
  display:block;width:100%;
  font-family:'Inter',sans-serif;
  font-size:16px;   /* 16px min — stops iOS zoom-on-focus */
  font-weight:500;
  color:var(--ink);
  background:var(--surface);
  border:1.5px solid var(--line-2);
  border-radius:var(--r);
  padding:14px 15px;
  min-height:52px;
  outline:none;
  transition:border-color .16s,box-shadow .16s,background .16s;
  -webkit-appearance:none;appearance:none;
}
.inp::placeholder{color:var(--ink-4);font-weight:400;}
.inp:hover{border-color:var(--ink-4);}
.inp:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 3.5px rgba(18,33,58,.13);
}
select.inp{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6B85' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  padding-right:42px;
  cursor:pointer;
}
.inp.err{border-color:var(--red);background:var(--red-lt);}
.inp.err:focus{box-shadow:0 0 0 3.5px rgba(192,57,43,.14);}
.inp.ok{border-color:var(--sage);}

.err-msg{
  display:none;
  font-size:13px;font-weight:500;color:var(--red);
  margin-top:6px;
}
.err-msg.show{display:flex;gap:5px;align-items:flex-start;}
.hint{font-size:12.5px;color:var(--ink-4);margin-top:6px;}

/* checkbox / radio */
.check{
  display:flex;align-items:flex-start;gap:12px;
  cursor:pointer;
  font-size:14.5px;
  color:var(--ink-2);
  padding:4px 0;
  min-height:44px;
  align-items:center;
}
.check input{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;flex-shrink:0;
  margin:0;
  border:1.5px solid var(--line-2);
  border-radius:6px;
  background:var(--surface);
  cursor:pointer;
  display:grid;place-items:center;
  transition:background .15s,border-color .15s;
}
.check input:checked{background:var(--navy);border-color:var(--navy);}
.check input:checked::after{
  content:"";
  width:11px;height:6px;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
}
.check input:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;}

/* ---------- password field: show/hide, strength meter, match hint --------
   Shared by the login page and the post-checkout signup form. */
.pw-wrap{position:relative;display:flex;align-items:center;}
.pw-wrap .inp{padding-right:74px;}
.pw-eye{
  position:absolute;right:6px;
  font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:600;
  color:var(--navy);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 11px;
  min-height:34px;
  cursor:pointer;
}
.pw-eye:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

.pw-strength{display:flex;align-items:center;gap:10px;margin-top:9px;}
.pw-bars{display:flex;gap:4px;flex:1;}
.pw-bars span{
  flex:1;height:5px;border-radius:999px;
  background:var(--line);
  transition:background .2s var(--ease);
}
/* Fill severity climbs with the score; the empty track is the same ramp. */
.pw-bars span.on.s1{background:var(--red);}
.pw-bars span.on.s2{background:var(--amber);}
.pw-bars span.on.s3{background:var(--navy);}
.pw-bars span.on.s4{background:var(--sage);}
.pw-word{
  font-size:12px;font-weight:700;
  white-space:nowrap;min-width:74px;text-align:right;
}
.pw-word.s0,.pw-word.s1{color:var(--red);}
.pw-word.s2{color:var(--amber);}
.pw-word.s3{color:var(--navy);}
.pw-word.s4{color:var(--sage);}

.pw-match{font-size:12.5px;font-weight:600;margin-top:7px;}
.pw-match.is-ok{color:var(--sage);}
.pw-match.is-off{color:var(--ink-4);}

/* pill badge */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:600;
  padding:5px 11px;
  border-radius:999px;
  white-space:nowrap;
}
.pill-sage{background:var(--sage-lt);color:var(--sage);}
.pill-red{background:var(--red-lt);color:var(--red);}
.pill-navy{background:var(--navy-lt);color:var(--navy);}
.pill-amber{background:var(--amber-lt);color:var(--amber);}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}

/* ---------- footer ---------- */
.footer{
  background:var(--ink);
  color:rgba(255,255,255,.66);
  padding:52px 0 32px;
  margin-top:0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
@media (min-width:760px){
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
}
.footer .logo{color:#fff;}
.footer .logo-mark{background:var(--accent);}
.f-about{font-size:14.5px;line-height:1.65;margin-top:14px;max-width:300px;}
.f-human{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:16px;
  font-size:13px;font-weight:600;
  color:#fff;
  background:rgba(13,148,136,.18);
  border:1px solid rgba(13,148,136,.4);
  padding:6px 12px;border-radius:999px;
}
.f-col h4{
  font-family:'Inter',sans-serif;
  font-size:12px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:14px;
}
.f-col a{
  display:block;
  font-size:14.5px;
  padding:6px 0;
  color:rgba(255,255,255,.72);
  transition:color .15s;
}
.f-col a:hover{color:#fff;}
.footer-bar{
  display:flex;flex-direction:column;gap:10px;
  align-items:center;
  padding-top:26px;
  font-size:13.5px;
  text-align:center;
}
@media (min-width:600px){
  .footer-bar{flex-direction:row;justify-content:space-between;text-align:left;}
}
.footer-bar a:hover{color:#fff;}
.f-legal{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}

/* ---------- misc helpers ---------- */
.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;
}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ---------- WhatsApp contact FAB (injected by Site.js on every page) ---- */
.wa-fab{
  position:fixed;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:40;
  display:flex;align-items:center;gap:10px;
  background:#25D366;
  color:#fff;
  border-radius:999px;
  padding:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:box-shadow .18s,transform .18s,padding .18s;
}
.wa-fab:hover{
  box-shadow:0 8px 26px rgba(0,0,0,.28);
  transform:translateY(-2px);
}
.wa-fab svg{width:26px;height:26px;flex-shrink:0;}
.wa-fab-label{
  font-size:14.5px;font-weight:600;
  max-width:0;overflow:hidden;white-space:nowrap;
  transition:max-width .22s ease;
}
@media (min-width:640px){
  .wa-fab{padding:13px 18px 13px 13px;}
  .wa-fab-label{max-width:140px;}
}
@media (prefers-reduced-motion:reduce){
  .wa-fab,.wa-fab-label{transition:none;}
}
.mono{font-variant-numeric:tabular-nums;}