:root{
  /* Neo-brutalist tokens (inspired by kristi.digital's bold bento/sticker vibe) */
  --bg:#fbf7ef;
  --paper:#fffdf8;
  --ink:#121212;

  --card:#ffffff;
  --cardSoft:#fffdf8;

  /* Brand + playful accents */
  --brand:#4f7f57;     /* groen */
  --brandRed:#d24b4d;  /* rood */
  --accentYellow:#ffe36e;
  --accentBlue:#4a7dff;
  --accentPink:#ff4fd8;
  --accentOrange:#ff9a3d;
  --accentLime:#b6ff3b;

  /* Brutal borders + hard shadows */
  --borderW:3px;
  --border:var(--borderW) solid var(--ink);
  --shadow:10px 10px 0 var(--ink);
  --shadowSm:6px 6px 0 var(--ink);

  --radius:22px;
  --radiusSm:16px;

  --maxw:1040px;
  --pad:18px;
  --padMobile:14px;

  --sectionGap:18px;
  --cardGap:16px;

  /* fixed header setup */
  --headerTop:0px;
  --headerReserve:98px;
  --headerHomeExtra:0px;
  --headerStackOverlap:12px;
  /* extra breathing room between menu + home banner (home only) */
  --headerBannerGap:0px;
  --wrapPad:var(--pad);

  --font:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Clean Apple-type typography */
  --textBase:16.5px;
  --textBaseMobile:16px;
  --lhBase:1.55;
  --trackingBase:-0.005em;
  --trackingHead:-0.04em;
  --trackingCardTitle:-0.025em;
  --weightBody:500;
  --weightStrong:650;
  --weightHead:900;
}

/* Prevent tiny layout overflows from creating horizontal scrollbars */
html, body{overflow-x:hidden;}


/* Home-only header reserve (for the banner under the menu) */
:root.isHome{
  --headerBannerGap:16px;
  --headerHomeExtra:calc(126px - var(--headerStackOverlap) + var(--headerBannerGap));
}

@media (max-width: 980px){
  :root.isHome{
    --headerBannerGap:10px;
    --headerHomeExtra:calc(118px - var(--headerStackOverlap) + var(--headerBannerGap));
  }
}

@media (max-width:760px){
  :root.isHome{
    --headerBannerGap:8px;
    --headerHomeExtra:calc(150px - var(--headerStackOverlap) + var(--headerBannerGap));
  }
}


/* ✅ EARLY COLLAPSE: voorkom “small desktop wrap” */
@media (max-width: 980px){
  :root{
	--headerReserve:108px; /* hamburger header iets hoger */
  }
}

@media(max-width:760px){
  :root{
	--headerStackOverlap:10px;
	--wrapPad:var(--padMobile);
	--headerReserve:112px; /* ✅ mobiel nog iets groter */
  }
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--font);
  font-weight:var(--weightBody);
  letter-spacing:var(--trackingBase);
  line-height:var(--lhBase);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,79,216,.10), transparent 42%),
    radial-gradient(circle at 84% 18%, rgba(74,125,255,.10), transparent 40%),
    radial-gradient(circle at 74% 86%, rgba(182,255,59,.10), transparent 46%),
    radial-gradient(circle at 18% 86%, rgba(255,154,61,.10), transparent 46%),
    repeating-linear-gradient(0deg, rgba(18,18,18,.055) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(18,18,18,.045) 0 1px, transparent 1px 26px),
    var(--bg);
}

/* ✅ zorgt dat anchor-jumps niet achter de header verdwijnen */
html{scroll-padding-top:calc(var(--headerReserve) + var(--headerHomeExtra) + var(--headerTop) + 10px);}
html{font-size:var(--textBase);} 
@media(max-width:760px){html{font-size:var(--textBaseMobile);}}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--font);
  font-weight:var(--weightBody);
  letter-spacing:var(--trackingBase);
  line-height:var(--lhBase);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,79,216,.10), rgba(255,255,255,0) 38%),
    radial-gradient(circle at 85% 18%, rgba(74,125,255,.10), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 18% 92%, rgba(182,255,59,.10), rgba(255,255,255,0) 42%),
    repeating-linear-gradient(0deg, rgba(18,18,18,.04) 0 1px, rgba(0,0,0,0) 1px 38px),
    repeating-linear-gradient(90deg, rgba(18,18,18,.04) 0 1px, rgba(0,0,0,0) 1px 38px),
    var(--bg);
}


/* ✅ spacer voor fixed header */
#siteHeader{
  height:calc(var(--headerReserve) + var(--headerHomeExtra) + var(--headerTop));
}

.wrap{
  max-width:var(--maxw);
  /* Center the page content on desktop and keep a small top/bottom rhythm */
  margin:0.65em auto;
  padding:var(--pad);
}
@media(max-width:760px){.wrap{padding:var(--padMobile);}}

/* utilities */
.u-mt-8{margin-top:8px!important;}
.u-mt-12{margin-top:12px!important;}
.u-mt-16{margin-top:16px!important;}
.u-mt-18{margin-top:18px!important;}
.u-mt-24{margin-top:24px!important;}

/* links */
a{color:inherit;text-decoration:none;}
a:visited,a:hover,a:active{color:inherit;}
a:focus-visible{outline:4px solid rgba(74,125,255,.45);outline-offset:4px;border-radius:14px;}

/* icons */
.ms{
  font-family:"Material Symbols Rounded";
  font-variation-settings:"FILL" 0,"wght" 600,"GRAD" 0,"opsz" 24;
  font-size:20px;
  line-height:1;
  display:inline-block;
}

/* typography */
h1,h2,h3{margin:0;}
.heroTitle{font-size:clamp(2.2rem,5.6vw,3.2rem);letter-spacing:var(--trackingHead);font-weight:var(--weightHead);line-height:1.06;}
.pageTitle{font-size:clamp(1.9rem,5.0vw,2.8rem);letter-spacing:var(--trackingHead);font-weight:var(--weightHead);line-height:1.10;}
.cardTitle{font-size:1.08rem;font-weight:var(--weightHead);letter-spacing:var(--trackingCardTitle);}
.cardText{margin:10px 0 0;line-height:1.62;color:rgba(18,18,18,.74);font-weight:var(--weightBody);}
.muted{color:rgba(18,18,18,.60);}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;
  border-radius:var(--radiusSm);
  border:var(--border);
  background:var(--accentLime);
  box-shadow:var(--shadowSm);
  font-weight:900;
  color:var(--ink)!important;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.btn .ms{color:var(--ink)!important;}
.btn:hover{transform:translate(-2px,-2px);box-shadow:12px 12px 0 var(--ink);filter:saturate(1.05);}
.btn:active{transform:translate(1px,1px);box-shadow:4px 4px 0 var(--ink);}


.btnPrimary{background:var(--brand);color:#fff!important;}
.btnPrimary .ms{color:rgba(255,255,255,.96)!important;}
.btnGhost{background:var(--paper);color:var(--ink)!important;}
.btnGhost .ms{color:var(--ink)!important;}
.btnIcon{padding:10px 12px;background:var(--paper);color:var(--ink)!important;}
.btnIcon .ms{color:var(--ink)!important;}

/* =========================
   FIXED HEADER
   ========================= */
.topbar{
  position:fixed;
  top:var(--headerTop);
  left:0;
  right:0;
  z-index:1000;
  padding:0;
}

.topbar::before{content:none;}

/* Header shell (neo-brutal) */
.topbarInner{
  width:min(var(--maxw), calc(100% - (var(--wrapPad) + var(--wrapPad))));
  margin:0 auto;
  background:var(--card);
  border:var(--border);
  border-radius: 22px;
  box-shadow:var(--shadowSm);
  padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:66px;
  /* allow hover shadows/focus rings to render outside the shell */
  overflow:visible;
}


/* =========================
   HOME: banner onder menu (premium)
   ========================= */
.topbarSub{
  position:fixed;
  left:0;
  right:0;
  /* slight separation from the menu on home (desktop gets a bit more) */
  top:calc(var(--headerTop) + var(--headerReserve) - var(--headerStackOverlap) + var(--headerBannerGap));
  z-index:980;
  width:100%;
  padding:0;
  pointer-events:none;
}

.topbarSubInner{
  width:min(var(--maxw), calc(100% - (var(--wrapPad) + var(--wrapPad))));
  margin:0 auto;
  position:relative;
  overflow:hidden;
  pointer-events:auto;

  height:112px;
  border-radius:var(--radius);
  border:var(--border);
  background:var(--accentYellow);
  box-shadow:var(--shadow);

  display:flex;
  align-items:center;
  padding:14px 16px;
}

.topbarSubCopy{
  max-width:60ch;
  z-index:2;
}

.topbarSubEyebrow{
  font-weight:950;
  letter-spacing:-0.02em;
  color:rgba(16,16,16,.72);
  font-size:.92rem;
}

/* Desktop/mobile text + label toggles */
.hdrMob{display:none;}
.routeLabelShort{display:none;}

/* Route button label: two-line (desktop) for a calmer, more premium feel */
.routeText{display:inline-flex;flex-direction:column;line-height:1.05;}
.routeTextMain{font-weight:950;}
.routeTextSub{font-weight:850;font-size:.78rem;opacity:.70;margin-top:1px;letter-spacing:-0.01em;}


.topbarSubTitle{
  margin-top:6px;
  font-weight:950;
  letter-spacing:-0.05em;
  font-size:1.18rem;
  color:rgba(16,16,16,.92);
}

/* Header banner: routebeschrijving */
.topbarSubActions{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.routePill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:var(--radiusSm);
  border:var(--border);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadowSm);
  font-weight:950;
  color:var(--ink)!important;
  font-size:.96rem;
  transition:transform .14s ease, box-shadow .14s ease;
  white-space:nowrap;
}
.routePill:hover{ transform:translate(-2px,-2px); box-shadow:12px 12px 0 var(--ink); }
.routePill:active{ transform:translate(1px,1px); box-shadow:4px 4px 0 var(--ink); }
.routePill:active{
  transform:translateY(0);
  box-shadow:0 12px 26px rgba(16,16,16,.10);
}

.topbarSubNote{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:var(--radiusSm);
  border:var(--border);
  background:var(--accentLime);
  color:var(--ink);
  font-weight:950;
  font-size:.96rem;
  white-space:nowrap;
  box-shadow:var(--shadowSm);
}

/* Make the parking badge feel clickable/premium even if it's not a link */
.topbarSubNote{ transition:transform .14s ease, box-shadow .14s ease; }
.topbarSubNote:hover{ transform:translate(-1px,-1px); box-shadow:10px 10px 0 var(--ink); }

/* Make the home banner copy feel a bit calmer + more premium */
.topbarSubEyebrow{
  letter-spacing:-0.03em;
}
.topbarSubTitle{
  line-height:1.15;
}


/* Art sits in the right corner and is intentionally cropped */
.topbarSubArt{
  position:absolute;
  right:-46px;
  bottom:-130px;
  width:360px;
  height:360px;
  z-index:1;
  pointer-events:none;
  filter:saturate(1.06) contrast(1.02);
}

.topbarSubArtImg{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 20%;
  transform: rotate(-2deg);
}

/* Soft fade so it blends nicely */
.topbarSubInner::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg, rgba(18,18,18,.08) 0 10px, rgba(0,0,0,0) 10px 20px);opacity:.18;pointer-events:none;z-index:0;}

@media (max-width:980px){
  .topbarSubInner{ height:104px; }
  .topbarSubTitle{ font-size:1.08rem; }
  .topbarSubArt{ width:320px; height:320px; right:-56px; bottom:-138px; }
}

@media (max-width:760px){
  /* Mobile header (home): title top-left + 1 CTA under it, image stays prominent */
  .topbarSubInner{ height:150px; padding:14px 16px; }
  .topbarSubCopy{ max-width:none; }

  /* Text: keep it short (avoid repeated words) */
  .hdrDesk{ display:none; }
  .hdrMob{ display:inline; }
  .topbarSubEyebrow{ font-size:.92rem; }
  .topbarSubTitle{ display:none; }

  /* CTA under the text */
  .topbarSubActions{
    margin-top:10px;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    flex-wrap:nowrap;
  }
  .topbarSubNote{ display:none; }

  /* Shorter button label on mobile */
  .routeLabelLong{ display:none; }
  .routeLabelShort{ display:inline; }

  /* Bigger image presence */
  .topbarSubArt{ width:380px; height:380px; right:-78px; bottom:-190px; }
  .topbarSubArtImg{ opacity:.80; }
}


.brand{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.brandName{font-weight:950;letter-spacing:-0.05em;font-size:1.32rem;}
.dot{color:var(--brand);}


.brandLogo{
  width:28px;
  height:28px;
  object-fit:contain;

  /* remove badge/pill styling */
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
  border-radius:0;

  /* subtle depth that follows the image shape */
  filter: drop-shadow(0 8px 16px rgba(16,16,16,.12));
}

.brandLogoSm{
  width:24px;
  height:24px;
  object-fit:contain;
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
  border-radius:0;
  filter: drop-shadow(0 8px 16px rgba(16,16,16,.12));
}

/* Desktop nav: allow wrapping (no scrollbars) */
.nav{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  white-space:normal;
  min-width:0;
}

/* Premium segmented nav (keeps the "tappable chip" vibe without pills) */
.navSegmented{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:var(--radiusSm);
  max-width:100%;
  flex-wrap:wrap;
  overflow:visible;
  border:var(--border);
  background:var(--paper);
  box-shadow:var(--shadowSm);
}



.navActions{
  display:flex;
  align-items:center;
  gap:10px;
}
/* ✅ Prevent 'Contact' overflowing: let the links area shrink + scroll if needed */
.navDesktop{
  flex:1;
  min-width:0; /* allows children to shrink instead of overflowing */
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

/* The segmented links should wrap on tight widths (no scrollbars) */
.navSegmented{
  flex:1 1 auto;
  min-width:0;
}

/* Desktop: keep the nav on one line inside the header; scroll if needed */
@media (min-width: 1121px){
  .navSegmented{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .navSegmented::-webkit-scrollbar{display:none;}
}

/* Keep actions visible; never shrink them away */
.navActions{flex:0 0 auto;}


/* Links become "tabs" inside the segmented shell */
.navLink{
  padding:10px 12px;
  border-radius:14px;
  border:2px solid transparent;
  background:transparent;
  box-shadow:none;
  font-weight:950;
  color:rgba(18,18,18,.78);
  font-size:.98rem;
  transition:background .14s ease, transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  white-space:nowrap;
}


.navLink:hover{background:#fff; border-color:rgba(18,18,18,.25); transform:translate(-2px,-2px); box-shadow:var(--shadowSm);}

/* Active tab */
.navLink.isActive{background:var(--accentBlue); color:#fff; border-color:rgba(18,18,18,.35); box-shadow:var(--shadowSm);}

.navButton{
  padding:10px 14px;
  border-radius:var(--radius);
  border:var(--border);
  background:var(--brand);
  box-shadow:var(--shadowSm);
  font-weight:900;
  font-size:.98rem;
  position:relative;
  white-space:nowrap;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.navButton,.navButton:visited,.navButton:hover,.navButton:active{
  color:rgba(255,255,255,.96)!important;
}

/* Contact knop rood */
.navButtonRed{background:var(--brandRed);}
.navButtonRed:hover{transform:translate(-2px,-2px);box-shadow:12px 12px 0 var(--ink);}
.navButtonRed:active{transform:translate(1px,1px);box-shadow:4px 4px 0 var(--ink);}

/* Premium attention for proefles: subtle float (no shake) */
.navButtonFloat{
  animation: ctaFloat 5.2s ease-in-out infinite;
}
.navButtonFloat::after{content:"";position:absolute;inset:-6px;border-radius:var(--radius);border:2px dashed rgba(18,18,18,.35);opacity:.35;pointer-events:none;}
@keyframes ctaFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-2px);}
}

/* Hamburger button (hidden by default) */
.menuToggle{
  display:none;
  border:var(--border);
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadowSm);
  border-radius:var(--radiusSm);
  padding:12px 14px;
  cursor:pointer;
  color:var(--ink);
}

.menuToggle.isOpen{
  background:var(--paper);
  box-shadow:12px 12px 0 var(--ink);
  transform:translate(-2px,-2px);
}
.menuToggle .ms{font-size:22px;}

/* Desktop: hide hamburger (desktop shows inline nav) */
@media (min-width: 1121px){
  .menuToggle{display:none;}
}


/* When the desktop overlay menu is open, hide the old desktop nav links
   without shifting the header layout (prevents a “double menu” look). */
.desktopMenuOpen .navDesktop{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

/* Desktop bento menu (only used at >=1121px; mobile menu stays separate) */
.desktopMenu{display:none;}
@media (min-width: 1121px){
  .desktopMenu{
    display:block;
    position:fixed;
    left:50%;
    top:calc(var(--headerTop) + 86px);
    width:min(960px, calc(100% - (var(--wrapPad) + var(--wrapPad))));
    z-index:1200;
    border:var(--border);
    /* Match the home route card: rounded rectangle, not a pill */
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    /* Route-card like base */
    background:var(--accentYellow);
    overflow:hidden;
    max-height:calc(100vh - (var(--headerTop) + 110px));
    opacity:0;
    transform:translateX(-50%) translateY(8px) scale(.985);
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;
  }

  /* Subtle pattern like the route card */
  .desktopMenu::after{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(45deg, rgba(18,18,18,.08) 0 10px, rgba(0,0,0,0) 10px 20px);
    opacity:.14;
    pointer-events:none;
    z-index:0;
  }
  .desktopMenu.isOpen{
    opacity:1;
    transform:translateX(-50%) translateY(0) scale(1);
    pointer-events:auto;
  }

  .desktopMenuTop{
    position:relative;
    z-index:1;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 16px 12px;
    border-bottom:var(--border);
    background:rgba(255,255,255,.35);
  }
  .desktopMenuBrand{
    font-weight:950;
    letter-spacing:-0.05em;
    font-size:1.22rem;
  }

  .desktopMenuGrid{
    position:relative;
    z-index:1;
    padding:16px;
    display:grid;
    gap:14px;
    grid-template-columns:repeat(12, 1fr);
  }

  .deskTile{
    grid-column:span 4;
    display:flex;align-items:center;gap:12px;
    padding:18px 16px;
    border:var(--border);
    border-radius:var(--radiusSm);
    box-shadow:var(--shadowSm);
    background:var(--paper);
    font-weight:950;
    font-size:1.06rem;
    color:var(--ink);
    transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
  }
  .deskTile .ms{font-size:22px;}
  .deskTile:hover{transform:translate(-2px,-2px);box-shadow:12px 12px 0 var(--ink);}
  .deskTile:active{transform:translate(1px,1px);box-shadow:4px 4px 0 var(--ink);}

  .deskTileCTA{
    grid-column:span 6;
    justify-content:center;
    text-align:center;
    font-size:1.12rem;
  }

  .tileBlue{background:rgba(74,125,255,.16);}
  .tileYellow{background:rgba(255,227,110,.35);}
  .tilePink{background:rgba(255,79,216,.16);}
  .tileOrange{background:rgba(255,154,61,.20);}
  .tileLime{background:rgba(182,255,59,.20);}
  .tileSoft{background:rgba(255,255,255,.96);}
  .tileBrand{background:var(--brand); color:rgba(255,255,255,.96);}
  .tileBrand .ms{color:rgba(255,255,255,.96);} 
  .tileRed{background:var(--brandRed); color:rgba(255,255,255,.96);}
  .tileRed .ms{color:rgba(255,255,255,.96);} 

  .desktopMenuBottom{
    position:relative;
    z-index:1;
    padding:0 16px 16px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .deskChip{
    display:inline-flex;align-items:center;gap:8px;
    border:var(--border);
    /* Less "pill" — closer to the route card language */
    border-radius:var(--radiusSm);
    background:rgba(255,255,255,.96);
    box-shadow:var(--shadowSm);
    padding:10px 12px;
    font-weight:950;
    font-size:.98rem;
  }
  .deskChip .ms{font-size:20px;}
  .deskChip:hover{transform:translate(-2px,-2px);box-shadow:12px 12px 0 var(--ink);} 
}

/* =========================
   MOBILE MENU
   ========================= */
.menuBackdrop{
  position:fixed;
  inset:0;
  background:rgba(16,16,16,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index:1100;
  opacity:0;
  transition:opacity .22s ease;
}

.menuBackdrop.isOpen{opacity:1;}

.mobileMenu{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  top:calc(var(--headerTop) + 86px);
  width:min(var(--maxw), calc(100% - (var(--wrapPad) + var(--wrapPad))));
  z-index:1200;
  border:var(--border);
  /* Match the home route card: rounded rectangle, not a pill */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  /* Calmer base (mobile menu only): keep it premium + readable */
  background:rgba(255,255,255,.92);
  overflow:hidden;
  max-height:calc(100vh - (var(--headerTop) + 96px));
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  /* Hide scrollbar chrome (still scrolls if needed) */
  scrollbar-width:none; /* Firefox */

  /* Open animation */
  opacity:0;
  transform:translateX(-50%) translateY(-10px) scale(.985);
  transition:opacity .22s ease, transform .22s ease;
}

.mobileMenu.isOpen{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
}

/* Subtle pattern like the route card */
.mobileMenu::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(45deg, rgba(18,18,18,.08) 0 10px, rgba(0,0,0,0) 10px 20px);
  opacity:.07;
  pointer-events:none;
  z-index:0;
}

/* WebKit scrollbar hiding (Chrome/Safari) */
.mobileMenu::-webkit-scrollbar{width:0;height:0;}

.mobileMenuTop{
  position:relative;
  z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 14px 12px;
  border-bottom:var(--border);
  background:rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobileBrand{display:flex;align-items:center;gap:10px;}
.mobileBrandText{font-weight:950;letter-spacing:-0.05em;font-size:1.22rem;}
.mobileMenuTitle{font-weight:950;letter-spacing:var(--trackingHead);font-size:1.12rem;}

.menuClose{
  border:var(--border);
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadowSm);
  /* Less pill — closer to route card language */
  border-radius:var(--radiusSm);
  padding:12px 14px;
  cursor:pointer;
  color:var(--ink);
}
.menuClose .ms{font-size:22px;}

.mobileMenuLinks{position:relative;z-index:1;padding:14px;display:grid;gap:12px;}

.mobileLink{
  display:flex;align-items:center;gap:10px;
  border:var(--border);
  border-radius:var(--radiusSm);
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadowSm);
  padding:16px 14px;
  font-weight:950;
  font-size:1.06rem;
}
.mobileLink.isActive{
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 40px rgba(16,16,16,.10);
  border-color:rgba(16,16,16,.16);
}


.mobileCTA{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:var(--border);
  border-radius:var(--radiusSm);
  background:var(--brand);
  box-shadow:var(--shadowSm);
  padding:18px 14px;
  font-weight:950;
  font-size:1.06rem;
  color:rgba(255,255,255,.96)!important;
}

.mobileCTAContact{background:var(--brandRed);}

/* ✅ KEY CHANGE:
   - Hamburger menu al bij 980px aan
   - voorkomt lelijke wrap op “small desktop” */
@media (max-width: 1120px){
  .navDesktop{display:none;}
  .menuToggle{display:inline-flex;align-items:center;justify-content:center;}

  .topbarInner{
	border-radius:22px;
	padding:12px 12px;
	min-height:72px;
  }
  .brandName{font-size:1.34rem;}
}

/* ✅ Mobile: nog iets groter / comfy */
@media (max-width:760px){
  .topbarInner{
	border-radius:22px;
	padding:12px 12px;
	min-height:76px;
  }
  .brandName{font-size:1.38rem;}
}

/* =========================
   HERO + TOP IMAGE / VIDEO
   ========================= */
.hero{
  margin-top:var(--sectionGap);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  background:var(--card);
}
.heroSimple{
  position:relative;
  background:var(--paper);
}
.heroSimple::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:repeating-linear-gradient(135deg, rgba(18,18,18,.06) 0 10px, rgba(0,0,0,0) 10px 22px);
  opacity:.22;
  transform:rotate(-2deg);
  pointer-events:none;
}
.heroSimple > *{position:relative;z-index:1;}
.heroInner{padding:22px;}
.heroEyebrow{font-weight:900;color:rgba(18,18,18,.78);letter-spacing:-0.02em;margin:0 0 10px;}
.brandInline{font-weight:950;color:rgba(16,16,16,.88);}
.dotBrand{color:var(--brand);}
.heroIntro{margin:10px 0 0;line-height:1.75;color:rgba(16,16,16,.82);font-weight:600;max-width:92ch;}
.heroActions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.microRow{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;}
.microPill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-radius:var(--radiusSm);
  border:var(--border);
  background:var(--paper);
  box-shadow:var(--shadowSm);
  font-weight:900;
  color:var(--ink);
}


/* hero media block */
.heroTopMedia{
  position:relative;
  width:100%;
  border-bottom:var(--border);
  background:var(--card);
}
.heroTopImg{
  width:100%;
  height:auto;
  display:block;
}
.heroTopOverlay{
  position:absolute;
  inset:0;
  /* Remove the white wash overlay so photos keep their original contrast */
  background:none;
  pointer-events:none;
}

/* HERO VIDEO */
.heroTopMediaVideo{background:var(--card);}
.videoShell{
  width:100%;
  aspect-ratio: 16 / 9;
  background:var(--paper);
  display:block;
  position:relative;
  border-radius:calc(var(--radiusSm) - 2px);
  overflow:hidden;
  border:var(--border);
  box-shadow:var(--shadowSm);

}
.heroVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}


/* HERO SPLIT (home) */
.heroSplit{display:flex;flex-direction:column;}

/* Option 1 hero: text left, video tile right (desktop) */
.heroSplitVideo .heroIntro{max-width:68ch;}
.heroSplitVideo .heroMedia{padding:0 22px 22px;}

.videoPosterBtn,
.videoFrameShell{
  width:100%;
  aspect-ratio:16 / 9;
  position:relative;
  display:block;
  padding:0;
  border:var(--border);
  border-radius:calc(var(--radiusSm) - 2px);
  overflow:hidden;
  background:var(--paper);
  box-shadow:var(--shadowSm);
  cursor:pointer;
}

.videoPosterImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

.videoPosterShade{
  position:absolute;inset:0;
  /* No white highlight layer; keep the poster clean */
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.22) 100%);
  pointer-events:none;
}

.videoPosterPlay{
  position:absolute;
  left:18px;
  bottom:16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:var(--border);
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadowSm);
  font-weight:950;
  color:rgba(16,16,16,.92);
}
.videoPosterPlay .ms{font-size:22px;}

.videoPosterBtn:focus-visible{outline:3px solid rgba(0,0,0,.28);outline-offset:3px;}
.videoPosterBtn:hover .videoPosterPlay{transform:translateY(-1px);}

.videoEmbedFrame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

@media(min-width:900px){
  .heroSplitVideo{display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;}
  .heroSplitVideo .heroInner{padding:26px;}
  .heroSplitVideo .heroMedia{padding:26px 26px 26px 0;}
  .heroSplitVideo .heroIntro{max-width:60ch;}
}

@media(max-width:420px){
  .videoPosterPlay{left:12px;bottom:12px;padding:10px 12px;}
  .videoPosterPlayText{font-size:.95rem;}
}


/* =========================
   CARDS
   ========================= */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--cardGap);
  margin-top:var(--sectionGap);
}
@media(min-width:900px){
  .grid{grid-template-columns:1fr 1fr;}
  .cardWide{grid-column:1 / -1;}
}
.card{
  background:var(--card);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  overflow:hidden;
}
.cardSoft{background:var(--cardSoft);}
.cardHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.cardHeadLeft{display:flex;align-items:center;gap:12px;min-width:0;}
.iconPill{
  width:42px;height:42px;border-radius:999px;border:var(--border);
  background:rgba(255,255,255,.90);
  box-shadow:var(--shadowSm);
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}

/* brand card */
.cardBrand{color:rgba(255,255,255,.96);}
.cardBrand .cardText{color:rgba(255,255,255,.92);}
.cardBrand .iconPill{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22);}
.cardBrand .btnIcon{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.96)!important;
}
.cardBrand .btnIcon .ms{color:rgba(255,255,255,.96)!important;}
.cardBrandGreen{background:rgba(91,117,83,.92);}

/* top-media cards */
.cardHasTopMedia{padding:0;}
.cardTopMedia{
  position:relative;
  width:100%;
  border-bottom:var(--border);
  background:var(--paper);
}
.cardTopImg{
  width:100%;
  height:auto;
  display:block;
  object-position:var(--pos, 50% 50%);
}
.cardTopOverlay{
  position:absolute;inset:0;
  /* Remove the white wash overlay on card images */
  background:none;
  pointer-events:none;
}
.cardBody{padding:18px;}

/* =========================
   TARIEVEN PRICE CARDS
   ========================= */
.priceGrid{display:grid;gap:16px;margin-top:16px;}
@media(min-width:900px){.priceGrid{grid-template-columns:1fr 1fr;}}
.priceCard{
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:var(--card);
  padding:18px;
}
.priceTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.priceName{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:-0.03em;font-size:1.1rem;}
.pricePill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:var(--radiusSm);
  border:var(--border);
  background:rgba(74,125,255,.16);
  font-weight:950;
  color:rgba(18,18,18,.92);
  white-space:nowrap;
}
.priceDesc{margin-top:12px;color:rgba(16,16,16,.78);font-weight:850;line-height:1.7;}

/* =========================
   HOME: OVER ANTHONY COMBO CARDS
   ========================= */
.priceGridHome{margin-top:14px;}
.priceGridHome .comboSep{
  height:2px;
  background:rgba(16,16,16,.10);
  margin:12px 0;
  border-radius:999px;
}
.priceGridHome .priceTopSub{margin-top:2px;}

@media(min-width:900px){
  .priceGridHome .priceCardWide{grid-column:1 / -1;}
  .priceGridHome .comboCols{grid-template-columns:1fr 1fr;}
}

.priceGridHome .comboCols{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
.priceGridHome .comboBlock{
  background:rgba(255,255,255,.55);
  border:2px solid rgba(16,16,16,.10);
  border-radius:calc(var(--radius) - 6px);
  padding:14px;
}

.homeAnthonyCta{margin-top:14px;}

/* =========================
   HOME: START CARD (Proefles + Tarieven)
   ========================= */
.homeStartInner{
  margin-top:12px;
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .homeStartInner{grid-template-columns:1fr 1fr;}
}
.homeStartBlock{
  background:rgba(255,255,255,.92);
  border:var(--border);
  border-radius:calc(var(--radius) - 2px);
  box-shadow:var(--shadowSm);
  padding:14px;
}
.homeStartTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  letter-spacing:-0.03em;
  font-size:1.06rem;
}
.homeStartBlock .cardText{margin-top:10px;}
.homeStartActions{margin-top:12px;}

/* =========================
   HOME: TESTIMONIALS STRIP
   ========================= */
.homeTestimonialsStrip{padding:14px 14px 12px;}
.homeTestimonialsStrip .cardHead{margin-bottom:0;}
.homeTestimonialsStrip .reviewsTrack{margin-top:10px;}
.homeTestimonialsStrip .reviewCard{flex:0 0 min(360px, 88%);}
@media(max-width:760px){
  .homeTestimonialsStrip .reviewCard{flex-basis:92%;}
}

/* =========================
   FAQ
   ========================= */
.faqWrap{margin-top:14px;display:grid;gap:12px;}
.faqItem{
  border:var(--border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadowSm);
  overflow:hidden;
}
.faqItem > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-weight:950;
  letter-spacing:-0.02em;
  background:
	linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.92)),
	radial-gradient(circle at 12% 30%, rgba(91,117,83,.10), rgba(255,255,255,0) 55%);
}
.faqItem > summary::-webkit-details-marker{display:none;}
.faqItem > summary::marker{content:"";}
.faqQ{display:flex;align-items:center;gap:10px;min-width:0;}
.faqDot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(91,117,83,.95);
  box-shadow:0 0 0 5px rgba(91,117,83,.14);
  flex:0 0 auto;
}
.faqText{min-width:0;line-height:1.35;}
.faqChevron{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;
  border:2px solid rgba(16,16,16,.14);
  background:rgba(255,255,255,.85);
  flex:0 0 auto;
  transition:transform .18s ease, background .18s ease;
}
.faqItem[open] .faqChevron{transform:rotate(180deg);background:rgba(91,117,83,.14);}
.faqBody{
  padding:0 16px 14px;
  color:rgba(16,16,16,.78);
  font-weight:850;
  line-height:1.75;
  animation: faqIn .18s ease;
}
@keyframes faqIn{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:760px){
  .faqItem > summary{padding:13px 13px;}
  .faqChevron{width:38px;height:38px;}
}
@media (prefers-reduced-motion: reduce){
  .faqBody{animation:none;}
}

/* =========================
   TESTIMONIALS
   ========================= */
.reviewsTrack{
  margin-top:14px;display:flex;gap:12px;overflow-x:auto;padding:6px 2px 12px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.reviewCard{
  scroll-snap-align:start;
  flex:0 0 min(420px, 86%);
  border:var(--border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadowSm);
  padding:14px;
  text-align:left;
}
@media(max-width:760px){.reviewCard{flex-basis:92%;}}
.stars{display:flex;gap:2px;align-items:center;}
.starsGold .ms{
  font-variation-settings:"FILL" 1,"wght" 900,"GRAD" 0,"opsz" 24;
  font-size:22px;
  color:var(--accentYellow);
  text-shadow:none;
}
.quote{margin:10px 0 0;font-weight:900;color:rgba(16,16,16,.86);line-height:1.75;}
.reviewMeta{margin-top:12px;border-top:2px solid rgba(16,16,16,.10);padding-top:10px;display:grid;gap:4px;}
.reviewName{font-weight:950;letter-spacing:-0.02em;}
.reviewSrc{color:rgba(16,16,16,.65);font-weight:850;}
.reviewsHint{margin-top:10px;color:rgba(16,16,16,.65);font-weight:850;}



/* =========================
   HOME PAGE – VIDEO CARD + HERO (PAGE ONLY)
   ========================= */
.homePage .homeHero .heroActions{align-items:stretch;gap:12px;}
@media(max-width:520px){
  .homePage .homeHero .heroActions{flex-direction:column;align-items:stretch;}
  .homePage .homeHero .btnGhost{justify-content:center;}
}


@media(min-width:900px){
  .homePage .homeHero .heroInner{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    grid-template-areas:
      "eyebrow actions"
      "title actions"
      "intro actions";
    column-gap:22px;
    row-gap:10px;
    align-items:start;
  }
  .homePage .homeHero .heroEyebrow{grid-area:eyebrow;}
  .homePage .homeHero .heroTitle{grid-area:title;}
  .homePage .homeHero .heroIntro{grid-area:intro;max-width:62ch;}
  .homePage .homeHero .heroActions{
    grid-area:actions;
    margin-top:0;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    justify-content:center;
    gap:12px;
  }
  .homePage .homeHero .btnWithBalloon{width:100%;}
  .homePage .homeHero .btnProeflesCta,
  .homePage .homeHero .btnGhost{
    width:100%;
    justify-content:center;
  }
}
.homeVideoCard .cardTopMediaNoDivider{border-bottom:none;}
.homeVideoCard .homeVideoHost{padding:0;}
.homeVideoCard .videoPosterBtn,
.homeVideoCard .videoFrameShell{
  border:none;
  border-radius:0;
  box-shadow:none;
}
/* =========================
   FOOTER
   ========================= */
.siteFooter{margin-top:var(--sectionGap);padding:10px 0 2px;}

.footerShell{
  background:rgba(196,70,72,.92);
  border:var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:16px;
  color:rgba(255,255,255,.96);
}

.footerTop{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:var(--border);
}

.footerBrand{font-weight:950;letter-spacing:-0.04em;}
.footerHint{opacity:.86;font-weight:850;font-size:.92rem;}

.footerGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
}
.footerGrid > *{min-width:0;}

.footerCol{
  padding:14px 14px 12px;
  border:2px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  background:rgba(255,255,255,.06);
  box-shadow:0 10px 20px rgba(16,16,16,.08);
}

.footerColTitle{
  font-size:1.02rem;
  font-weight:950;
  letter-spacing:-0.02em;
  margin:0 0 10px;
  opacity:1;
  display:flex;
  align-items:center;
  gap:10px;
}
.footerColTitle::after{
  content:"";
  height:2px;
  flex:1;
  border-radius:999px;
  background:rgba(255,255,255,.26);
}

.footerList{list-style:none;padding:0;margin:0;display:grid;gap:10px;}

.footerExt,.footerLink{
  display:inline-block;
  font-weight:850;
  opacity:1;
  position:relative;
  padding:6px 0;
  width:fit-content;
  font-size:0.95rem;
}

.footerExt::after,.footerLink::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:2px;border-radius:999px;
  background:rgba(255,255,255,.78);
  transform:scaleX(.18);
  transform-origin:left;
  transition:transform .22s ease, opacity .22s ease;
  opacity:.9;
}
.footerExt:hover::after,.footerLink:hover::after{transform:scaleX(1);opacity:1;}

.footerBottomNote{
  margin-top:12px;
  text-align:center;
  color:rgba(255,255,255,.86);
  font-weight:850;
  line-height:1.5;
  font-size:.92rem;
}

@media(max-width:860px){
  .footerGrid{
	grid-template-columns:1fr;
	gap:12px;
	text-align:left;
  }
  .footerGrid > *{
	border-top:none;
	padding-top:0;
  }
  .footerList{justify-items:start;}
  .footerExt,.footerLink{width:auto;}
}

/* =========================
   PAGE LOADER
   ========================= */
.pageLoader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  /* sizing tokens */
  --loaderMark: clamp(132px, 18vw, 210px);
  --loaderGap: 18px;
  /* milk white */
  background:rgba(247,244,238,1);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.pageLoader::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 50% 35%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    radial-gradient(900px 500px at 50% 70%, rgba(0,0,0,.04), rgba(0,0,0,0) 55%);
  opacity:.55;
  pointer-events:none;
}
.pageLoader.isVisible{
  opacity:1;
  pointer-events:auto;
}
.pageLoader.isDone{
  opacity:0;
  pointer-events:none;
}
.pageLoaderInner{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  text-align:center;
}

/* Center mark exactly in the middle of the viewport */
.pageLoaderCenter{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Subtle impact ring under the mark (syncs with the "hit") */
.pageLoaderCenter::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--loaderMark) * 1.08);
  height:calc(var(--loaderMark) * 1.08);
  border-radius:999px;
  transform:translate(-50%,-50%) translateY(calc(var(--loaderMark) * 0.34)) scale(.72);
  background:
    radial-gradient(circle at 50% 50%, rgba(16,16,16,.14) 0%, rgba(16,16,16,.08) 22%, rgba(16,16,16,0) 56%);
  opacity:0;
  filter: blur(.15px);
  pointer-events:none;
  animation: loaderImpact 0.92s ease-in-out infinite;
}

/* Brand mark */
.pageLoaderMark{
  width:var(--loaderMark);
  height:var(--loaderMark);
  object-fit:contain;
  filter: drop-shadow(0 16px 22px rgba(16,16,16,.16));
  animation: loaderHit 0.92s ease-in-out infinite;
}

/* Loading copy */
.pageLoaderSub{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, calc(var(--loaderMark) / 2 + var(--loaderGap)));
  font-weight:900;
  color:rgba(16,16,16,.70);
  font-size:1.02rem;
  letter-spacing:-0.02em;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* Dots animation (subtle + premium) */
.pageLoaderDots{display:inline-flex; gap:6px; align-items:center;}
.pageLoaderDots i{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(16,16,16,.55);
  display:inline-block;
  animation: loaderDot 0.9s ease-in-out infinite;
}
.pageLoaderDots i:nth-child(2){ animation-delay: .12s; opacity:.85; }
.pageLoaderDots i:nth-child(3){ animation-delay: .24s; opacity:.7; }

/* Scroll lock while loading */
.isLoading body{ overflow:hidden; }

@keyframes loaderRotate{ to{ transform: rotate(360deg); } }


@keyframes loaderHit{
  /* a quick "snare hit" wobble + tiny bounce, then a pause */
  0%   { transform: rotate(-2deg) translateY(0) scale(1); }
  10%  { transform: rotate(-10deg) translateY(2px) scale(.985); }
  18%  { transform: rotate(6deg) translateY(-6px) scale(1.02); }
  30%  { transform: rotate(-3deg) translateY(0) scale(1); }
  55%  { transform: rotate(-2deg) translateY(0) scale(1); }
  100% { transform: rotate(-2deg) translateY(0) scale(1); }
}

@keyframes loaderImpact{
  /* appears on the "hit" and fades out during the pause */
  0%   { opacity:0; transform:translate(-50%,-50%) translateY(calc(var(--loaderMark) * 0.34)) scale(.72); }
  10%  { opacity:0; transform:translate(-50%,-50%) translateY(calc(var(--loaderMark) * 0.34)) scale(.72); }
  14%  { opacity:.18; transform:translate(-50%,-50%) translateY(calc(var(--loaderMark) * 0.34)) scale(.78); }
  18%  { opacity:.12; transform:translate(-50%,-50%) translateY(calc(var(--loaderMark) * 0.34)) scale(.98); }
  26%  { opacity:0; transform:translate(-50%,-50%) translateY(calc(var(--loaderMark) * 0.34)) scale(1.18); }
  100% { opacity:0; transform:translate(-50%,-50%) translateY(calc(var(--loaderMark) * 0.34)) scale(1.18); }
}

@media (prefers-reduced-motion: reduce){
  .pageLoaderMark{ animation:none !important; }
  .pageLoaderCenter::after{ animation:none !important; }
  .pageLoaderDots i{ animation:none !important; }
}
@keyframes loaderDot{
  0%,100%{ transform: translateY(0); opacity:.55; }
  50%{ transform: translateY(-5px); opacity:1; }
}

/* HARD FIX: TOP MEDIA DESKTOP = NEVER CROP (IMAGES ONLY) */
@media (min-width: 761px){
  .heroTopMedia:not(.heroTopMediaVideo),
  .cardTopMedia{
	height:auto !important;
	overflow:visible !important;
  }
  .heroTopMedia:not(.heroTopMediaVideo) .heroTopImg,
  .cardTopImg{
	width:100% !important;
	height:auto !important;
	max-width:100%;
	object-fit:contain !important;
	display:block;
  }
}

/* Mobile crop nicely */
@media (max-width:760px){
  .heroTopMedia{height:190px;overflow:hidden;}
  .heroTopImg{height:100%;object-fit:cover;}

  .cardTopMedia{height:220px;overflow:hidden;}
  .cardTopImg{height:100%;object-fit:cover;}
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .btn:hover{transform:none;box-shadow:none;}
  .faqBody{animation:none;}
  .navButtonFloat{animation:none;}
  .pageLoaderMark{animation:none;}
  .pageLoaderDots i{animation:none;}
  .pageLoader{transition:none;}
}

/* Slightly tighter desktop nav on smaller laptops */
@media (max-width: 1150px){
  .nav{gap:10px;}
  .navLink{padding:9px 10px;font-size:.94rem;}
  .navButton{padding:9px 12px;font-size:.94rem;}
  .navActions{gap:8px;}
  .brandName{font-size:1.24rem;}
}


/* Clean Apple: form typography */
input, button, textarea, select{font-family:var(--font); letter-spacing:var(--trackingBase);} 

/* =========================
   HOME – PROEFLES BADGE + BALLOON
   (safe add-on)
   ========================= */

.btnWithBalloon{
  position: relative;
  display: inline-block; /* prevents layout shift vs other buttons */
  vertical-align: top;

  /* Let the surrounding layout (e.g. .heroActions gap) control spacing,
     so the button below doesn't get extra space compared to other CTAs. */
  margin: 0;

  /* Reserve vertical space for the centered balloon above the button. */
  padding-top: 34px;
  padding-right: 0;
}


.btn .btnText{ display:inline; }

/* Homepage proefles CTA: keep label on one line */
.btnProeflesCta .btnText{ white-space:nowrap; }


.btnBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.16);
  color: #fff;
  font-weight: 950;
  letter-spacing: -.02em;
  white-space: nowrap;
  line-height: 1;
}

.btnBadge.isEmpty{
  opacity: .85;
}

.btnBadge.isLoading{
  position: relative;
  overflow: hidden;
}

.btnBadge.isLoading::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  animation: btnBadgeShimmer 1.05s linear infinite;
}

@keyframes btnBadgeShimmer{
  100%{ transform: translateX(100%); }
}

.btnBalloon{
  position:absolute;
  /* Centered above the button */
  top: 0;
  left: 50%;
  right: auto;

  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 2px solid rgba(16,16,16,.18);
  background: rgba(255,255,255,.95);
  color: rgba(16,16,16,.86);
  font-weight: 900;
  letter-spacing:-.02em;
  box-shadow: 0 10px 0 rgba(0,0,0,.06);

  /* Slight lift above the button while staying "attached" */
  --by: -10px;
  transform: translate(-50%, var(--by)) translateY(0);

  animation: balloonFloat 2.8s ease-in-out infinite;
  z-index: 2;
  pointer-events: none; /* never block clicking the button */
}

/* Keep the balloon sentence on one line */
.btnBalloon .balloonText{
  white-space: nowrap;
}

.btnBalloon .ms{
  font-variation-settings: "FILL" 1, "wght" 600;
}

@keyframes balloonFloat{
  0%,100%{ transform: translate(-50%, var(--by)) translateY(0); }
  50%{ transform: translate(-50%, var(--by)) translateY(-3px); }
}

.btnBalloon .balloonArrow{
  position:absolute;
  left: 50%;
  right: auto;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.95);
  border-right: 2px solid rgba(16,16,16,.18);
  border-bottom: 2px solid rgba(16,16,16,.18);
  transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 520px){
  .btnWithBalloon{ padding-top: 36px; }
  /* Mobile: keep the same centered behavior, just a hair closer */
  .btnBalloon{ --by: -8px; font-size: 13px; padding: 7px 9px; }
}

@media (prefers-reduced-motion: reduce){
  .btnBalloon{ animation: none; }
  .btnBadge.isLoading::after{ animation: none; }
}