/* ==========================================================================
   Salon Maria: glaslaag
   Wordt als LAATSTE stylesheet geladen en legt over de hele site één
   glassysteem: een warme sfeerachtergrond waar het glas iets om te breken
   heeft, een zwevende glazen navigatie, glazen knoppen (helder, mat-wit en
   gerookt), glazen kaarten, velden en de chat. Navigatiewoorden in kapitalen.
   Zonder backdrop-filter (of met "minder transparantie") valt alles terug
   op bijna dekkende vlakken, zodat de tekst altijd leesbaar blijft.
   ========================================================================== */

:root {
  --ambient: #f5efe4;

  /* helder, mat-wit glas (standaard) */
  --glass-fill: linear-gradient(145deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.42) 100%);
  --glass-fill-strong: linear-gradient(145deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.62) 100%);
  --glass-blur: blur(24px) saturate(175%);
  --glass-blur-heavy: blur(40px) saturate(190%);
  /* lichtrand: bovenkant vangt licht, onderkant een zachte reflectie */
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  --glass-drop: 0 1px 1px rgba(74, 58, 32, 0.04), 0 8px 24px -8px rgba(74, 58, 32, 0.14), 0 30px 60px -30px rgba(74, 58, 32, 0.22);
  --glass-drop-lift: 0 1px 1px rgba(74, 58, 32, 0.05), 0 14px 32px -10px rgba(74, 58, 32, 0.22), 0 40px 80px -30px rgba(74, 58, 32, 0.28);

  /* gerookt glas voor de donkere knoppen */
  --smoke-fill: linear-gradient(145deg, rgba(38, 36, 33, 0.82) 0%, rgba(31, 32, 33, 0.66) 100%);
  --smoke-edge: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.1);

  /* helder glas op foto's */
  --clear-fill: linear-gradient(145deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 100%);
  --clear-edge: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.34);

  --r-glass: 22px;
  --r-glass-sm: 14px;
  --r-pill: 999px;
}

/* ---------- sfeerachtergrond ---------- */
html { background: var(--ambient); scroll-padding-top: 120px; }
body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 32vmax at 12% 18%, rgba(226, 214, 176, 0.75), transparent 70%),
    radial-gradient(34vmax 30vmax at 88% 12%, rgba(236, 206, 188, 0.6), transparent 70%),
    radial-gradient(40vmax 34vmax at 78% 78%, rgba(190, 196, 160, 0.45), transparent 70%),
    radial-gradient(36vmax 30vmax at 18% 88%, rgba(241, 222, 196, 0.7), transparent 70%),
    radial-gradient(30vmax 26vmax at 50% 50%, rgba(255, 252, 246, 0.9), transparent 75%),
    var(--ambient);
}
/* fijne korrel, zodat de verlopen niet banden */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page, .services-list, .skin, .testimonials, .faq { background: transparent; }
.footer-main::before { display: none; }

/* ---------- het glasrecept ---------- */
.navbar, .btn, .card, .service, .testi, .acc, .info-card, .contact-form, .price-terms, .band-col,
.legal-box, .legal-prevails, .chat-panel, .chat-launch, .lang-switch, .stat, .step, .price-list,
.price-side, .booking-frame, .tablist, .filter-btn, .field input, .field textarea, .field select,
.price-search input, .chat-option, .pill, .page-hero-media, .event-img, .bio-media, .band-media,
.service-img, .gallery-item img, .bento-feature {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

/* lichtbrekende rand: een verlopende 1px-lijn, bovenaan fel, onderaan bijna weg */
.navbar, .btn, .card, .service, .testi, .acc, .info-card, .contact-form, .price-terms, .band-col,
.legal-box, .chat-panel, .chat-launch, .stat, .step, .price-list, .price-side, .tablist { position: relative; }
.navbar::before, .btn::before, .card::before, .service::before, .testi::before, .acc::before,
.info-card::before, .contact-form::before, .price-terms::before, .band-col::before, .legal-box::before,
.chat-panel::before, .chat-launch::before, .stat::before, .step::before, .price-list::before,
.price-side::before, .tablist::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* kaarten en panelen */
.card, .service, .testi, .info-card, .contact-form, .price-terms, .band-col, .legal-box, .stat, .step,
.price-list, .price-side {
  background: var(--glass-fill); border-radius: var(--r-glass);
  box-shadow: var(--glass-edge), var(--glass-drop);
}
.service.is-highlight { box-shadow: var(--glass-edge), inset 0 0 0 1px rgba(216, 207, 174, 0.9), var(--glass-drop); }
.card > *, .service > *, .testi > *, .info-card > *, .contact-form > *, .price-terms > *, .band-col > *,
.legal-box > *, .stat > *, .step > *, .price-list > *, .price-side > * { position: relative; z-index: 1; }

/* de gestapelde behandelingen schuiven over elkaar: iets dichter glas */
.service { background: var(--glass-fill-strong); -webkit-backdrop-filter: var(--glass-blur-heavy); backdrop-filter: var(--glass-blur-heavy); }

/* cijfers, stappen en de tarievenlijst krijgen een eigen glasvlak */
.stats { gap: 16px; }
.stat { padding: 32px 20px; }
.steps { box-shadow: none; gap: 16px; }
.step { padding: 28px; align-self: stretch; }
.price-side { padding: 24px; }
.price-list { padding: 32px; }
.price-row::after { background: rgba(31, 32, 33, 0.08); }

/* beeld krijgt dezelfde ronding en een lichtrand */
.page-hero-media, .event-img, .bio-media, .band-media, .service-img, .bento-feature { border-radius: var(--r-glass); }
.page-hero-media, .event-img, .bio-media, .band-media, .bento-feature { box-shadow: var(--glass-drop); }
.service-img, .service-img img, .event-img img, .bento-feature > img, .gallery-item img { border-radius: var(--r-glass-sm); }
.bento-feature > img, .event-img img { border-radius: inherit; }
.gallery-item img { box-shadow: var(--glass-drop); }

/* accordeon */
.acc { background: var(--glass-fill); border-radius: var(--r-glass-sm); box-shadow: var(--glass-edge), 0 6px 18px -10px rgba(74, 58, 32, 0.18); transition: box-shadow 0.35s var(--ease-out), background-color 0.35s var(--ease-out); }
.acc > * { position: relative; z-index: 1; }
.acc:hover, .acc.open { background: var(--glass-fill-strong); box-shadow: var(--glass-edge), var(--glass-drop); }

/* pillen */
.pill-light { background: var(--clear-fill); box-shadow: var(--clear-edge), 0 8px 20px -10px rgba(0, 0, 0, 0.25); }
.pill-highlight { background: var(--glass-fill); box-shadow: var(--glass-edge); color: var(--dark); }
.label::before { background: linear-gradient(145deg, #fff 0%, var(--beige) 60%); box-shadow: inset 0 0 0 1px rgba(216, 207, 174, 0.8); }

/* ---------- knoppen ---------- */
.btn {
  border-radius: var(--r-pill); overflow: hidden; isolation: isolate;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.btn > * { position: relative; z-index: 1; }
/* lichtstreep die bij hover over het glas trekt */
.btn::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 45%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg); opacity: 0;
}
.btn:hover::after { animation: glassSheen 0.9s var(--ease-out); }
@keyframes glassSheen {
  0% { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(330%) skewX(-18deg); opacity: 0; }
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }

/* mat-wit glas, donkere tekst (navigatie, hero, event) */
.btn-white { background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.64)); color: var(--dark); box-shadow: var(--glass-edge), 0 10px 30px -12px rgba(31, 32, 33, 0.35); }
.btn-white:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.8)); color: var(--dark); box-shadow: var(--glass-edge), 0 16px 36px -12px rgba(31, 32, 33, 0.4); }

/* helder glas op foto's, witte tekst */
.btn-light { background: var(--clear-fill); color: #fff; box-shadow: var(--clear-edge), 0 10px 30px -12px rgba(0, 0, 0, 0.35); }
.btn-light:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.16)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 16px 36px -12px rgba(0, 0, 0, 0.4); }

/* gerookt glas, witte tekst */
.btn-primary, .btn-dark { background: var(--smoke-fill); color: #fff; box-shadow: var(--smoke-edge), 0 10px 30px -12px rgba(31, 32, 33, 0.5); }
.btn-primary:hover, .btn-dark:hover { background: linear-gradient(145deg, rgba(48, 45, 41, 0.9), rgba(31, 32, 33, 0.78)); color: #fff; box-shadow: var(--smoke-edge), 0 16px 36px -12px rgba(31, 32, 33, 0.55); }
.btn-primary::before, .btn-dark::before { opacity: 0.45; }
.btn-primary::after, .btn-dark::after { background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%); }
.btn-light::after { background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%); }

/* ---------- navigatie ---------- */
.nav-wrap { position: fixed; z-index: 30; padding: 16px 50px 0; pointer-events: none; }
.navbar {
  pointer-events: auto; padding: 12px 12px 12px 26px; border-radius: var(--r-pill);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: var(--glass-blur-heavy); backdrop-filter: var(--glass-blur-heavy);
  box-shadow: var(--glass-edge), var(--glass-drop);
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.navbar > * { position: relative; z-index: 1; }
.nav-wrap.is-scrolled .navbar { background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.5)); box-shadow: var(--glass-edge), var(--glass-drop-lift); }
.navbar .btn { min-height: 46px; }

.nav-links { gap: 4px; }
.nav-link {
  position: relative; flex-direction: row; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark);
  transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.nav-link .ul { display: none; }
.nav-link:hover { background: rgba(255, 255, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.nav-link.is-current { background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 4px 14px -6px rgba(74, 58, 32, 0.3); }

.lang-switch {
  border-radius: var(--r-pill); min-width: 46px; min-height: 46px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.lang-switch:hover { background: rgba(255, 255, 255, 0.85); color: var(--dark); }

/* footer-navigatie ook in kapitalen */
.footer-navlink { font-size: 15px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-nav { gap: 14px; }

/* ---------- velden ---------- */
.field input, .field textarea, .field select, .price-search input {
  background-color: rgba(255, 255, 255, 0.55); border-radius: var(--r-glass-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(31, 32, 33, 0.1);
  transition: box-shadow 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.field input, .field select { height: 46px; }
.field input:focus, .field textarea:focus, .field select:focus, .price-search input:focus {
  background-color: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 1px var(--dark), 0 0 0 4px rgba(226, 219, 190, 0.6);
}
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 1px #a33a2b; }
.price-search input { height: 46px; }

/* ---------- tabs en filters als glazen segmenten ---------- */
.tablist { gap: 4px; padding: 5px; width: max-content; max-width: 100%; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.4); box-shadow: var(--glass-edge); }
.tab { padding: 0 18px; border-radius: var(--r-pill); color: var(--dark-70); transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); z-index: 1; }
.tab::after { display: none; }
.tab.is-active { color: var(--dark); background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7)); box-shadow: inset 0 1px 0 #fff, 0 4px 14px -6px rgba(74, 58, 32, 0.3); }
.price-filters { gap: 6px; }
.filter-btn { min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); color: var(--dark-70); transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.filter-btn:hover { background: rgba(255, 255, 255, 0.5); color: var(--dark); }
.filter-btn.is-active { color: var(--dark); background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 4px 14px -6px rgba(74, 58, 32, 0.3); }
.booking-frame { border-radius: var(--r-glass-sm); }

/* ---------- chat ---------- */
.chat-launch { border-radius: var(--r-pill); overflow: hidden; background: var(--smoke-fill); box-shadow: var(--smoke-edge), 0 16px 40px -12px rgba(31, 32, 33, 0.5); }
.chat-launch > * { position: relative; z-index: 1; }
.chat-launch::before { opacity: 0.45; }
.chat-launch:hover, .chat.open .chat-launch { background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7)); color: var(--dark); box-shadow: var(--glass-edge), 0 16px 40px -12px rgba(31, 32, 33, 0.35); }
.chat-panel {
  border-radius: var(--r-glass); background: linear-gradient(160deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.66));
  -webkit-backdrop-filter: var(--glass-blur-heavy); backdrop-filter: var(--glass-blur-heavy);
  box-shadow: var(--glass-edge), 0 30px 80px -20px rgba(31, 32, 33, 0.35);
}
.chat-panel > * { position: relative; z-index: 1; }
.chat-head { background: rgba(255, 255, 255, 0.35); box-shadow: inset 0 -1px 0 rgba(31, 32, 33, 0.08); }
.chat-option { border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(31, 32, 33, 0.08); }
.chat-option:hover { background: var(--smoke-fill); color: #fff; box-shadow: var(--smoke-edge); }
.chat-close { border-radius: var(--r-pill); }

/* ---------- tablet ---------- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .nav-wrap { padding: 16px 32px 0; }
  .navbar { padding-left: 22px; gap: 14px; }
  .nav-links { gap: 0; }
  .nav-link { padding: 0 9px; font-size: 11px; letter-spacing: 0.1em; }
}
@media (min-width: 810px) and (max-width: 949.98px) {
  .nav-link { padding: 0 7px; letter-spacing: 0.08em; }
}

/* ---------- telefoon: de balk wordt een glazen paneel ---------- */
@media (max-width: 809.98px) {
  html { scroll-padding-top: 96px; }
  .nav-wrap { padding: 12px 12px 0; }
  .navbar { padding: 12px 12px 12px 18px; border-radius: 28px; max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; }
  .navbar.open { background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.68)); }
  .burger { margin: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
  .navbar.open .nav-panel-inner { padding-top: 36px; padding-bottom: 8px; gap: 32px; }
  .nav-links { gap: 6px; }
  .nav-link { justify-content: center; width: 100%; min-height: 52px; }
  .nav-link .nav-title { font-size: 15px; line-height: 1.3; letter-spacing: 0.16em; font-weight: 500; }
  .navbar .btn { width: 100%; justify-content: space-between; }
  .stats { gap: 12px; }
  .step, .price-list, .price-side { padding: 24px; }
  .tablist { width: 100%; }
  .tab { flex: 1 0 auto; padding: 0 12px; }
}

/* ---------- toegankelijkheid ---------- */
/* focusringen winnen altijd van de glasschaduwen hierboven */
html .btn:focus-visible, html .nav-link:focus-visible, html .lang-switch:focus-visible, html .burger:focus-visible,
html .brand:focus-visible, html .tab:focus-visible, html .filter-btn:focus-visible, html .chat-option:focus-visible,
html .chat-launch:focus-visible, html .chat-close:focus-visible, html .acc-head:focus-visible, html .link-line:focus-visible,
html .footer-navlink:focus-visible, html .footer-cta-link:focus-visible, html .footer-big:focus-visible {
  outline: 2px solid var(--dark); outline-offset: 3px;
}
html .hero .btn:focus-visible, html .bento-feature .btn:focus-visible { outline-color: #fff; }

/* geen blur mogelijk of minder transparantie gevraagd: bijna dekkende vlakken */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar, .card, .service, .testi, .info-card, .contact-form, .price-terms, .band-col, .legal-box, .stat, .step,
  .price-list, .price-side, .acc, .chat-panel { background: rgba(255, 255, 255, 0.94); }
  .btn-light { background: rgba(31, 32, 33, 0.45); }
}
@media (prefers-reduced-transparency: reduce) {
  .navbar, .card, .service, .testi, .info-card, .contact-form, .price-terms, .band-col, .legal-box, .stat, .step,
  .price-list, .price-side, .acc, .chat-panel, .btn-white { background: rgba(255, 255, 255, 0.96); }
  .btn-primary, .btn-dark, .chat-launch { background: var(--dark); }
  .btn-light { background: rgba(31, 32, 33, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover::after { animation: none; }
  .btn, .btn:hover, .btn:active { transform: none; }
}

/* sticky kolommen schuiven onder de zwevende navigatie door */
@media (min-width: 810px) {
  .services-head, .service-sticky { top: 124px; }
}

/* rijen met glaskaarten mogen hun schaduw laten zien; de secties eromheen knippen nog steeds */
.bento-cards, .services-list, .testi-grid, .steps, .accordion, .stats, .check-list { overflow: visible; }

/* met vijf navigatie-items past alles weer: ook op tablet staan Home en de naam in beeld */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .nav-link:first-child { display: flex; }
}

/* kapitalen nemen meer ruimte: per breedte iets compacter, zodat niets over de naam schuift */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .nav-wrap { padding-left: 32px; padding-right: 32px; }
  .navbar { gap: 16px; }
  .nav-link { padding: 0 9px; letter-spacing: 0.1em; }
}
@media (min-width: 810px) and (max-width: 1023.98px) {
  .nav-wrap { padding-left: 16px; padding-right: 16px; }
  .navbar { gap: 8px; padding-left: 18px; }
  .nav-link { padding: 0 6px; font-size: 11px; letter-spacing: 0.07em; }
  .navbar .btn { padding: 0 14px 0 16px; gap: 10px; }
}

/* ==========================================================================
   Footer: één luxe glazen kaart in beige-roze, zonder foto.
   Indeling blijft gelijk; de onderbalk zit nu binnen de kaart.
   ========================================================================== */
.footer {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 40px 50px 24px; border-radius: 36px; color: var(--dark);
  background:
    radial-gradient(60% 80% at 8% 0%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(55% 75% at 100% 100%, rgba(230, 188, 176, 0.7), transparent 65%),
    radial-gradient(45% 60% at 70% 10%, rgba(226, 214, 176, 0.5), transparent 70%),
    linear-gradient(150deg, rgba(249, 234, 226, 0.84) 0%, rgba(242, 222, 212, 0.74) 50%, rgba(236, 210, 198, 0.78) 100%);
  -webkit-backdrop-filter: blur(40px) saturate(170%); backdrop-filter: blur(40px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(90, 58, 40, 0.05), 0 30px 70px -30px rgba(120, 76, 56, 0.35), 0 60px 120px -60px rgba(120, 76, 56, 0.3);
}
/* verlopende lichtrand, zoals bij de andere glasvlakken */
.footer::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 28%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 236, 226, 0.7) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.footer-main, .footer-bar { position: relative; z-index: 1; background: transparent; }
.footer-main::before { display: none; }

.footer-col-1 { padding: 96px 0 64px; }
.footer-col-2 { padding: 104px 0 64px; }
.footer-brand { letter-spacing: -0.02em; }
/* gouden haarlijn in plaats van het grijze streepje */
.footer-line { width: 72px; opacity: 1; background: linear-gradient(90deg, #b89b6a, rgba(184, 155, 106, 0.1)); }
.footer-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; }
.footer-cta-link { box-shadow: inset 0 -1px 0 rgba(31, 32, 33, 0.14); }

/* onderbalk: licht, binnen de kaart, gescheiden door een haarlijn */
.footer-bar { color: var(--dark); }
.footer-bar::before { content: ""; position: absolute; top: 0; left: 80px; right: 80px; height: 1px; background: linear-gradient(90deg, rgba(31, 32, 33, 0), rgba(31, 32, 33, 0.14) 15%, rgba(31, 32, 33, 0.14) 85%, rgba(31, 32, 33, 0)); }
.footer-bar p, .footer-bar a { color: rgba(31, 32, 33, 0.78); font-size: 14px; }
.footer-bar .footer-addr { color: rgba(31, 32, 33, 0.55); }
.footer-bar a:hover { opacity: 1; color: var(--dark); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .footer { background: #f3e5da; }
}
@media (prefers-reduced-transparency: reduce) { .footer { background: #f3e5da; } }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .footer { margin: 32px 32px 20px; border-radius: 30px; }
  .footer-col-1 { padding: 72px 0 48px; }
  .footer-col-2 { padding: 80px 0 48px; }
  .footer-bar::before { left: 40px; right: 40px; }
}
@media (max-width: 809.98px) {
  .footer { margin: 24px 12px 12px; border-radius: 26px; }
  .footer-col-1 { padding: 56px 0 40px; }
  .footer-col-2 { padding: 0 0 40px; }
  .footer-navlink { font-size: 14px; }
  .footer-bar::before { left: 25px; right: 25px; }
}

/* ==========================================================================
   Taalwissel zonder verspringen
   Elk navigatievak en de afspraakknop zijn zo breed als het langste woord van
   beide talen (het andere woord staat onzichtbaar in data-alt). Zo staan
   NL/EN, de knop en alle links in beide talen op exact dezelfde plek.
   ========================================================================== */
.nav-title[data-alt], .navbar .btn-text[data-alt] { display: inline-flex; flex-direction: column; align-items: center; }
.nav-title[data-alt]::after, .navbar .btn-text[data-alt]::after {
  content: attr(data-alt); display: block; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none;
}

/* aankomst via de taalwissel: koppen staan er meteen, zonder opnieuw in te vliegen */
.lang-arrive .h-anim .w { animation: none !important; opacity: 1; filter: none; transform: none; }

/* ==========================================================================
   Pop-up per behandeling (services.html, gebouwd door tools/build-treatments.py)
   Glazen paneel in dezelfde beige-roze tint als de footer: links de sfeerfoto,
   rechts de tekst die zelf scrolt, onderaan vaste knoppen voor afspraak en WhatsApp.
   Op de telefoon schuift het als een sheet van onderen omhoog.
   ========================================================================== */
.tx-open { font: inherit; }
.service { cursor: pointer; }
.service-btn { gap: 14px; }

dialog.tx {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px;
  border: 0; background: transparent; color: var(--dark); overflow: hidden;
}
dialog.tx[open] { display: flex; align-items: center; justify-content: center; }
dialog.tx::backdrop { background: rgba(58, 40, 26, 0.34); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
dialog.tx[open]::backdrop { animation: txFade 0.35s var(--ease-out); }
dialog.tx[open] .tx-panel { animation: txIn 0.55s var(--ease-layout); }
dialog.tx.is-closing::backdrop { animation: txFade 0.22s ease-in reverse forwards; }
dialog.tx.is-closing .tx-panel { animation: txOut 0.22s ease-in forwards; }
@keyframes txFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes txIn { from { opacity: 0; transform: translateY(18px) scale(0.975); } to { opacity: 1; transform: none; } }
@keyframes txOut { to { opacity: 0; transform: translateY(10px) scale(0.985); } }

.tx-panel {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  width: min(1120px, 100%); height: min(780px, 100%); border-radius: 32px; overflow: hidden;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(55% 70% at 100% 100%, rgba(230, 188, 176, 0.55), transparent 65%),
    linear-gradient(150deg, rgba(250, 238, 230, 0.9) 0%, rgba(244, 226, 216, 0.84) 60%, rgba(238, 214, 202, 0.86) 100%);
  -webkit-backdrop-filter: blur(40px) saturate(170%); backdrop-filter: blur(40px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 40px 100px -30px rgba(60, 36, 20, 0.55);
}
.tx-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, #fff 0%, rgba(255, 255, 255, 0.3) 28%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 236, 226, 0.7) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.tx-media { position: relative; margin: 12px; border-radius: 22px; overflow: hidden; }
.tx-media img { width: 100%; height: 100%; object-fit: cover; }
.tx-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 28, 16, 0) 60%, rgba(40, 28, 16, 0.18) 100%); }

.tx-body { display: flex; flex-direction: column; min-height: 0; }
.tx-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 56px 52px 28px 40px; scrollbar-width: thin; scrollbar-color: rgba(31, 32, 33, 0.2) transparent; }
.tx-title { font-size: var(--display-l-narrow); margin-top: 4px; }
.tx-lead { font-size: 18px; line-height: 1.5; letter-spacing: -0.005em; color: var(--dark); max-width: 36em; }
.tx-h { margin-top: 18px; font-size: 12px; line-height: 1.5; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dark-70); }
.tx-p { font-size: 16px; line-height: 1.65; color: var(--dark-70); max-width: 38em; }

.tx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 8px 0 0; }
.tx-facts > div { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.tx-facts dt { font-size: 11px; line-height: 1.4; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-50); }
.tx-facts dd { margin: 4px 0 0; font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--dark); font-variant-numeric: lining-nums tabular-nums; }

.tx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; width: 100%; }
.tx-steps li { display: flex; gap: 16px; padding: 14px 0; box-shadow: inset 0 -1px 0 rgba(31, 32, 33, 0.08); }
.tx-steps li:last-child { box-shadow: none; }
.tx-step-n { flex: none; width: 28px; font-family: var(--serif); font-size: 20px; line-height: 1.2; color: #b89b6a; }
.tx-steps strong { display: block; font-size: 16px; font-weight: 500; line-height: 1.4; }
.tx-steps span:not(.tx-step-n) { display: block; font-size: 15px; line-height: 1.55; color: var(--dark-70); }

.tx-prices { width: 100%; display: flex; flex-direction: column; padding: 6px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.tx-prices li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 15px; box-shadow: inset 0 -1px 0 rgba(31, 32, 33, 0.07); }
.tx-prices li:last-child { box-shadow: none; }
.tx-prices li span:last-child { font-weight: 500; white-space: nowrap; }

.tx-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.tx-list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--dark-70); }
.tx-list .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: #b89b6a; }
.tx-note { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--dark-50); max-width: 40em; }

.tx-actions {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 18px 52px 26px 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35)); box-shadow: inset 0 1px 0 rgba(31, 32, 33, 0.08);
}
.tx-actions .btn { min-height: 52px; }
.tx-wa { gap: 10px; }
.tx-wa .tx-ic { width: 20px; height: 20px; }
.tx-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; font-size: 14px; font-weight: 500; color: var(--dark-70); transition: color 0.3s var(--ease-out); }
.tx-call .ic { width: 18px; height: 18px; }
.tx-call:hover { color: var(--dark); }

.tx-close {
  position: absolute; top: 20px; right: 20px; z-index: 4; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; color: var(--dark);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.62)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 8px 20px -8px rgba(40, 28, 12, 0.35); transition: transform 0.3s var(--ease-out);
}
.tx-close:hover { transform: rotate(90deg); }
.tx-close .ic { width: 20px; height: 20px; }
html .tx-close:focus-visible, html .tx-call:focus-visible, html .tx-open:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
html.tx-lock { overflow: hidden; }

@media (min-width: 810px) and (max-width: 1099.98px) {
  .tx-panel { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
  .tx-scroll { padding: 52px 32px 24px 28px; }
  .tx-actions { padding: 16px 32px 22px 28px; }
  .tx-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 809.98px) {
  dialog.tx { padding: 0; }
  dialog.tx[open] { align-items: flex-end; }
  .tx-panel { display: flex; flex-direction: column; width: 100%; height: calc(100% - 28px); border-radius: 28px 28px 0 0; }
  dialog.tx[open] .tx-panel { animation: txUp 0.5s var(--ease-layout); }
  dialog.tx.is-closing .tx-panel { animation: txDown 0.25s ease-in forwards; }
  @keyframes txUp { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes txDown { to { transform: translateY(100%); } }
  .tx-media { flex: none; height: 26vh; min-height: 160px; margin: 10px 10px 0; border-radius: 20px; }
  .tx-scroll { padding: 24px 22px 20px; gap: 14px; }
  .tx-title { font-size: 34px; }
  .tx-lead { font-size: 16.5px; }
  .tx-facts { grid-template-columns: 1fr; }
  .tx-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; }
  .tx-facts dd { margin: 0; text-align: right; }
  .tx-actions { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); gap: 8px; }
  .tx-actions .btn { width: 100%; min-height: 48px; justify-content: space-between; }
  .tx-call { width: 100%; justify-content: center; }
  .tx-close { top: 20px; right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.tx[open] .tx-panel, dialog.tx[open]::backdrop, dialog.tx.is-closing .tx-panel, dialog.tx.is-closing::backdrop { animation: none; }
}
@media (prefers-reduced-transparency: reduce) { .tx-panel { background: #f6e9e0; } }
.tx-plus, .tx-plus .ic { width: 16px; height: 16px; }
.tx-open:hover .tx-plus { transform: rotate(90deg); }

/* ==========================================================================
   Cookiekaart (js/consent.js)
   Glazen kaart in dezelfde beige-roze tint als de footer. Blokkeert niets:
   geen sluier, de pagina blijft scrolbaar en klikbaar.
   ========================================================================== */
.ck {
  position: fixed; left: 24px; bottom: 24px; z-index: 40; width: min(400px, calc(100vw - 48px));
  display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 18px; border-radius: 28px; color: var(--dark);
  background:
    radial-gradient(70% 80% at 0% 0%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(60% 70% at 100% 100%, rgba(230, 188, 176, 0.5), transparent 65%),
    linear-gradient(150deg, rgba(250, 238, 230, 0.88), rgba(240, 220, 208, 0.8));
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 30px 70px -24px rgba(90, 56, 36, 0.45);
  opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-layout);
}
.ck.is-in { opacity: 1; transform: none; }
.ck[hidden] { display: none; }
.ck::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, #fff 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 236, 226, 0.7) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.ck-head { display: flex; align-items: center; gap: 12px; }
.ck-mark { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 999px; color: #9a7c4c;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(90, 56, 36, 0.4); }
.ck-mark svg { width: 22px; height: 22px; }
.ck-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }
.ck-text { font-size: 14.5px; line-height: 1.55; color: var(--dark-70); }

.ck-prefs { display: flex; flex-direction: column; gap: 8px; }
.ck-prefs[hidden] { display: none; }
.ck-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
label.ck-row { cursor: pointer; }
.ck-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-row-text strong { font-size: 14px; font-weight: 500; }
.ck-row-text span { font-size: 12.5px; line-height: 1.45; color: var(--dark-70); }
.ck-always { flex: none; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-50); }
.ck-switch { position: relative; flex: none; width: 46px; height: 28px; }
.ck-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ck-knob { position: absolute; inset: 0; border-radius: 999px; background: rgba(31, 32, 33, 0.14); box-shadow: inset 0 1px 2px rgba(31, 32, 33, 0.15); transition: background-color 0.3s var(--ease-out); }
.ck-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(31, 32, 33, 0.25); transition: transform 0.35s var(--ease-layout); }
.ck-switch input:checked + .ck-knob { background: var(--dark); }
.ck-switch input:checked + .ck-knob::after { transform: translateX(18px); }
.ck-switch input:focus-visible + .ck-knob { outline: 2px solid var(--dark); outline-offset: 3px; }

.ck-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-actions .ck-btn { flex: 1 1 140px; min-height: 46px; padding: 0 18px; justify-content: center; }
.ck-actions .ck-btn[hidden] { display: none; }
.ck-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.ck-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0; font-size: 13px; font-weight: 500; color: var(--dark-70); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.3s var(--ease-out); }
.ck-link:hover { color: var(--dark); }
html .ck-link:focus-visible, html .footer-consent:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

/* link onderaan de pagina en in de cookieverklaring */
.footer-consent { font: inherit; font-size: 14px; color: rgba(31, 32, 33, 0.78); cursor: pointer; transition: color 0.3s var(--ease-out); }
.footer-consent:hover { color: var(--dark); }
.legal-consent { font-size: inherit; color: var(--dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

@media (max-width: 809.98px) {
  .ck { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px 18px 14px; border-radius: 24px; }
  .footer-consent { display: inline-flex; align-items: center; min-height: 44px; }
  /* de chatknop wacht tot de keuze gemaakt is, zodat ze niet over elkaar vallen */
  html.ck-open .chat { opacity: 0; pointer-events: none; }
}
.chat { transition: opacity 0.3s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .ck { transition: none; } .ck-knob, .ck-knob::after { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .ck { background: #f6e9e0; } }

/* ==========================================================================
   Mega menu (gebouwd door tools/build-journal.py)
   Desktop: de menulink blijft een gewone link (actief, crawlbaar); de chevron
   ernaast opent een ruim ivoren paneel onder de balk. Telefoon: hetzelfde
   paneel wordt een rustige accordeon in het uitklapmenu, zonder beelden.
   ========================================================================== */
.nav-item { display: flex; align-items: center; }
.mega-caret {
  display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 40px; margin-left: -10px; border-radius: 999px;
  color: var(--dark-70); transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.mega-caret:hover { color: var(--dark); }
.mega-chev { width: 15px; height: 15px; transition: transform 0.35s var(--ease-layout); }
.nav-item.is-open .mega-chev { transform: rotate(180deg); }
html .mega-caret:focus-visible, html .mega-link:focus-visible, html .mega-post:focus-visible, html .mega-all:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }
.nav-item.is-open > .nav-link { background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.5); }

.mega-eyebrow { margin: 0 0 12px; font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dark-50); }
.mega-list { display: flex; flex-direction: column; gap: 2px; }
.mega-link { display: flex; flex-direction: column; gap: 2px; margin: 0 -14px; padding: 11px 14px; border-radius: 16px; transition: background-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.mega-link-title { font-family: var(--serif); font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; color: var(--dark); }
.mega-link-meta { font-size: 13px; line-height: 1.45; color: var(--dark-50); }
.mega-link:hover, .mega-link:focus-visible, .mega-link.is-preview { background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(90, 56, 36, 0.35); }
.mega-all { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; font-size: 14px; line-height: 1.2; font-weight: 500; color: var(--dark); box-shadow: inset 0 -1px 0 currentColor; }
.mega-all .icon-wrap, .mega-all .circle, .mega-all .rot, .mega-all .rot .ic { width: 16px; height: 16px; }
.mega-all:hover .icon-wrap { transform: translate(2px, -2px); }

@media (min-width: 810px) {
  .mega {
    position: absolute; left: 0; right: 0; top: calc(100% + 12px); z-index: 5;
    opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
    transition: opacity 0.22s var(--ease-out), transform 0.32s var(--ease-layout), visibility 0s linear 0.32s;
  }
  /* onzichtbare brug tussen balk en paneel: de cursor valt niet in een gat */
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .nav-item.is-open > .mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
  .mega-inner {
    display: grid; gap: 44px; padding: 34px 40px 36px; border-radius: 30px; text-align: left;
    background:
      radial-gradient(55% 90% at 100% 0%, rgba(246, 226, 214, 0.55), transparent 60%),
      linear-gradient(160deg, #fdfaf5, #f9f1e9);
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 0 0 1px rgba(31, 32, 33, 0.05), 0 34px 80px -30px rgba(90, 56, 36, 0.4);
  }
  .mega-inner--treatments { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 280px; }
  .mega-inner--treatments .mega-col + .mega-col .mega-eyebrow + .mega-list + .mega-eyebrow { margin-top: 22px; }
  .mega-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
  .mega-preview { position: relative; width: 100%; margin: 0; aspect-ratio: 4 / 4.4; border-radius: 22px; overflow: hidden; background: #ece2d4; }
  .mega-preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.28s var(--ease-out); }
  .mega-preview figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--dark);
    background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

  .mega-inner--journal { grid-template-columns: 260px minmax(0, 1fr); }
  .mega-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 2px; }
  .mega-intro .mega-eyebrow { margin-bottom: 4px; }
  .mega-lead { font-family: var(--serif); font-size: 28px; line-height: 1.12; letter-spacing: -0.015em; color: var(--dark); text-wrap: balance; }
  .mega-text { font-size: 14px; line-height: 1.55; color: var(--dark-70); }
  .mega-intro .mega-all { margin-top: 12px; }
  /* drie gelijke artikelen op het glasvlak: geen kaart, alleen een zachte lichtvlek bij hover/focus */
  .mega-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; }
  .mega-post { display: flex; flex-direction: column; gap: 8px; margin: -10px; padding: 10px 10px 14px; border-radius: 20px; background: transparent;
    box-shadow: inset 0 0 0 1px transparent; transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
  .mega-post:focus-visible { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
  .mega-thumb { position: relative; flex: none; display: block; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: #ece2d4; margin-bottom: 6px; }
  .mega-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1); }
  @media (hover: hover) and (pointer: fine) {
    .mega-post:hover { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
    .mega-post:hover .mega-thumb img { transform: scale(1.015); }
  }
  .mega-tag { font-size: 10.5px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: #8a6d3f; }
  .mega-post-title { font-family: var(--serif); font-size: 19px; line-height: 1.22; letter-spacing: -0.008em; color: var(--dark); text-wrap: balance; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  .mega-post-meta { font-size: 12.5px; line-height: 1.4; color: var(--dark-50); }
}
@media (min-width: 810px) and (max-width: 1099.98px) {
  .mega-inner { padding: 28px 28px 30px; gap: 28px; }
  .mega-inner--treatments { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mega-aside { display: none; }
  .mega-inner--journal { grid-template-columns: 200px minmax(0, 1fr); }
  .mega-lead { font-size: 23px; }
  .mega-post-title { font-size: 17px; }
  .mega-caret { width: 26px; margin-left: -8px; }
}

/* ---------- telefoon: accordeon in het uitklapmenu ---------- */
@media (max-width: 809.98px) {
  .nav-item { position: relative; flex-wrap: wrap; justify-content: center; width: 100%; }
  .nav-item > .nav-link { padding: 0 52px; }
  .mega-caret { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; margin: 0; color: var(--dark); background: rgba(255, 255, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }
  .mega { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows 0.4s var(--ease-layout); }
  .nav-item.is-open > .mega { grid-template-rows: 1fr; }
  .mega-inner { min-height: 0; overflow: hidden; visibility: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: visibility 0s linear 0.4s; }
  .nav-item.is-open > .mega > .mega-inner { visibility: visible; transition-delay: 0s; }
  /* een open accordeon mag nooit zichtbaar klikbaar blijven in een gesloten menu */
  .navbar:not(.open) .mega-inner { visibility: hidden !important; }
  .mega-inner > * { width: 100%; }
  .mega-col { display: flex; flex-direction: column; align-items: center; }
  .mega-inner--treatments { padding: 6px 0 14px; }
  .mega-eyebrow { margin: 12px 0 4px; text-align: center; font-size: 10.5px; }
  .mega-list { align-items: center; gap: 0; }
  .mega-link { align-items: center; margin: 0; padding: 9px 12px; min-height: 44px; justify-content: center; }
  .mega-link-title { font-family: var(--sans); font-size: 15px; letter-spacing: 0; }
  .mega-link-meta, .mega-preview, .mega-thumb, .mega-lead, .mega-text, .mega-tag, .mega-post-meta { display: none; }
  .mega-aside, .mega-intro { display: flex; justify-content: center; padding: 6px 0 4px; }
  .mega-intro .mega-eyebrow { display: none; }
  .mega-inner--journal { padding: 6px 0 14px; }
  .mega-posts { display: flex; flex-direction: column; align-items: center; order: -1; }
  .mega-post { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; text-align: center; }
  .mega-post-title { font-size: 15px; line-height: 1.35; color: var(--dark); }
  .mega-all { margin-top: 6px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mega, .mega-chev, .mega-preview img, .mega-thumb img { transition: none !important; }
}

/* pop-up behandeling: verwijzing naar het journal */
.tx-read { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
.tx-read .tx-h { margin-bottom: 6px; }
.tx-read-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 12px 0; font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--dark); box-shadow: inset 0 -1px 0 rgba(31, 32, 33, 0.1); transition: color 0.3s var(--ease-out); }
.tx-read-link .icon-wrap, .tx-read-link .circle, .tx-read-link .rot, .tx-read-link .rot .ic { width: 16px; height: 16px; flex: none; }
.tx-read-link:hover { color: #6b5a44; }
.tx-read-link:hover .icon-wrap { transform: translate(2px, -2px); }
html .tx-read-link:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

/* nieuw logo (2026): het hart-embleem naast de naam in Gambetta */
.brand { gap: 14px; }
.brand-mark { height: 42px; filter: drop-shadow(0 1px 1px rgba(120, 84, 40, 0.18)); }
.footer-brand .brand-mark { height: 64px; }
.chat-head .brand-mark { height: 38px; }
@media (max-width: 1199.98px) { .footer-brand .brand-mark { height: 52px; } }
@media (max-width: 809.98px) { .brand-mark { height: 38px; } .footer-brand .brand-mark { height: 46px; } }
@media (max-width: 809.98px) {
  /* het accordeon hangt al onder "Behandelingen": dat kopje niet nog eens herhalen */
  .mega-inner--treatments .mega-col:first-child .mega-eyebrow { display: none; }
}

/* tablet: met Journal en de chevrons erbij wordt de balk voller. Tot 1100px staat
   alleen het hart (de naam blijft voor schermlezers), tot 1024px vervalt Home,
   want het logo linkt al naar de homepage. */
@media (min-width: 810px) and (max-width: 1099.98px) {
  .navbar .brand > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 810px) and (max-width: 1023.98px) {
  .nav-links > .nav-link:first-child { display: none; }
}

/* ==========================================================================
   Morphing mega menu (desktop)
   Eén glazen paneel ("shell") onder de balk dat van item naar item verhuist:
   positie, breedte en hoogte schuiven mee, de inhoud vervaagt in elkaar over.
   Balk en paneel delen exact hetzelfde glas (--nav-glass), zodat ze als één
   geheel lezen. Daarom zit het glas van de balk op desktop in ::after: een
   element met backdrop-filter zou anders alles erin afsluiten van de pagina
   eronder, en dan zou het paneel geen echte blur krijgen.
   ========================================================================== */
.nav-wrap { --nav-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.34)); --nav-glass-shadow: var(--glass-edge), var(--glass-drop); }
.nav-wrap.is-scrolled { --nav-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.5)); --nav-glass-shadow: var(--glass-edge), var(--glass-drop-lift); }

@media (min-width: 810px) {
  .navbar, .nav-wrap.is-scrolled .navbar { isolation: isolate; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .navbar::after, .mega-shell {
    background: var(--nav-glass);
    -webkit-backdrop-filter: var(--glass-blur-heavy); backdrop-filter: var(--glass-blur-heavy);
    box-shadow: var(--nav-glass-shadow);
  }
  .navbar::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; transition: box-shadow 0.4s var(--ease-out); }

  /* het paneel zelf: alleen vorm en glas, de inhoud ligt erboven */
  .mega-shell {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 4; width: 0; height: 0; border-radius: 30px; pointer-events: none;
    opacity: 0; visibility: hidden; transform: translate3d(var(--sx, 0), -6px, 0);
    transition: transform 0.5s var(--ease-layout), width 0.5s var(--ease-layout), height 0.5s var(--ease-layout),
      opacity 0.24s var(--ease-out), visibility 0s linear 0.5s;
  }
  .mega-shell::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.5) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .mega-shell.is-on { opacity: 1; visibility: visible; transform: translate3d(var(--sx, 0), 0, 0); transition-delay: 0s; }
  .mega-shell.no-anim { transition: none !important; }

  /* inhoud: onder het eigen item, zonder eigen achtergrond; vervaagt in en uit */
  .mega { left: var(--mx, 0); right: auto; top: calc(100% + 10px); z-index: 5; transform: translate3d(var(--from, 0), 0, 0); transition: opacity 0.22s var(--ease-out), transform 0.45s var(--ease-layout), visibility 0s linear 0.45s; }
  .nav-item.is-open > .mega { transform: none; transition: opacity 0.32s var(--ease-out) 0.06s, transform 0.5s var(--ease-layout), visibility 0s; }
  #mega-treatments { width: min(880px, calc(100% - 24px)); }
  #mega-journal { width: min(960px, calc(100% - 24px)); }
  .mega-inner { background: none; box-shadow: none; }
  .mega::before { top: -14px; height: 14px; }
}
@media (min-width: 810px) and (max-width: 1099.98px) {
  #mega-treatments { width: min(620px, calc(100% - 24px)); }
}
@media (prefers-reduced-motion: reduce) {
  .mega-shell { transition: opacity 0.2s linear, visibility 0s linear 0.2s !important; }
  .mega, .nav-item.is-open > .mega { transform: none !important; }
}
.mega-shell { display: none; }
@media (min-width: 810px) { .mega-shell { display: block; } }
@media (min-width: 810px) {
  /* voorbeeldbeeld: twee lagen die in elkaar overvloeien */
  .mega-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--ease-out); }
  .mega-preview img.is-top { opacity: 1; z-index: 1; }
  .mega-preview figcaption { z-index: 2; }
}

/* automatisch invullen (Chrome/Safari): geen blauw vlak, maar het warme ivoor van de site.
   De browser laat zijn eigen achtergrondkleur niet overschrijven; een ingezette schaduw
   in de veldkleur is de ondersteunde manier. De randen blijven gelijk aan de gewone velden. */
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field textarea:-webkit-autofill, .field select:-webkit-autofill, .price-search input:-webkit-autofill {
  -webkit-text-fill-color: var(--dark); caret-color: var(--dark);
  box-shadow: inset 0 0 0 1000px #fbf6ef, inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(31, 32, 33, 0.1);
  transition: background-color 99999s ease-out 0s;
}
.field input:autofill, .field textarea:autofill, .field select:autofill, .price-search input:autofill {
  -webkit-text-fill-color: var(--dark); caret-color: var(--dark);
  box-shadow: inset 0 0 0 1000px #fbf6ef, inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(31, 32, 33, 0.1);
  transition: background-color 99999s ease-out 0s;
}
.field input:-webkit-autofill:focus, .field textarea:-webkit-autofill:focus, .field select:-webkit-autofill:focus, .price-search input:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px #fdfaf5, inset 0 0 0 1px var(--dark), 0 0 0 4px rgba(226, 219, 190, 0.6);
}
.field input:autofill:focus, .field textarea:autofill:focus, .field select:autofill:focus, .price-search input:autofill:focus {
  box-shadow: inset 0 0 0 1000px #fdfaf5, inset 0 0 0 1px var(--dark), 0 0 0 4px rgba(226, 219, 190, 0.6);
}

/* ==========================================================================
   Behandelkaarten (services): bijna onbewuste beweging
   - binnenkomen: 0 -> 1 en 12px omhoog in 620ms, één keer, per rij licht verschoven
   - hover (alleen echte muis): kaart 1px omhoog met een iets zachtere schaduw,
     beeld 1,018x in 650ms, pijl of plus 2px, onderstreping rustig
   - prefers-reduced-motion: niets beweegt, alles direct zichtbaar
   Alleen opacity en transform.
   ========================================================================== */
.svc-grid .service.sv-wait { opacity: 0; transform: translate3d(0, 12px, 0); }
.svc-grid .service.sv-in {
  opacity: 1; transform: none;
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--sv-delay, 0ms);
}
.svc-grid .service-img img { transform: translateZ(0); }
.tx-open:hover .tx-plus { transform: none; }

@media (hover: hover) and (pointer: fine) {
  .svc-grid .service { transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 620ms cubic-bezier(0.22, 1, 0.36, 1); }
  .svc-grid .service.sv-in { transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--sv-delay, 0ms), transform 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--sv-delay, 0ms), box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1); }
  .svc-grid .service.sv-done { transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1); }
  .svc-grid .service:hover { transform: translate3d(0, -1px, 0); box-shadow: var(--glass-edge), var(--glass-drop-lift); }
  .svc-grid .service.is-highlight:hover { box-shadow: var(--glass-edge), inset 0 0 0 1px rgba(216, 207, 174, 0.9), var(--glass-drop-lift); }
  .svc-grid .service-img img { transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1); }
  .svc-grid .service:hover .service-img img { transform: scale(1.018) translate3d(0, -1px, 0); }
  .svc-grid .service .link-line .icon-wrap, .svc-grid .service .tx-plus { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
  .svc-grid .service .link-line:hover .icon-wrap { transform: translate(2px, -2px); }
  .svc-grid .service .tx-open:hover .tx-plus { transform: translateX(2px); }
  .svc-grid .service .link-line:hover::after { animation-duration: 0.55s; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-grid .service, .svc-grid .service.sv-wait, .svc-grid .service.sv-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .svc-grid .service-img img, .svc-grid .service:hover .service-img img { transform: none !important; transition: none !important; }
  .svc-grid .service .link-line .icon-wrap, .svc-grid .service .tx-plus { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) { .mega-post:hover .mega-thumb img { transform: none !important; } }

/* ==========================================================================
   Pop-up behandeling: laten voelen dat er meer tekst onder staat
   .tx-scroller krijgt van JS: is-overflow (er valt iets te scrollen),
   is-end (onderkant bereikt) en has-scrolled (bezoeker heeft ~32px gescrold).
   - vervaging: een masker op de tekstkolom (64px), zodat de tekst uitloopt in exact
     de achtergrond van het paneel; de scrollbalk-strook blijft onaangetast
   - "Meer informatie ↓": klein, gedempt, verdwijnt na de eerste scroll
   ========================================================================== */
@property --tx-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
.tx-scroller { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tx-scroller > .tx-scroll { flex: 1 1 auto; }
.tx-scroll {
  --tx-fade: 0px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tx-fade)), transparent 100%), linear-gradient(#000, #000);
  -webkit-mask-size: calc(100% - 12px) 100%, 12px 100%; -webkit-mask-position: left top, right top; -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tx-fade)), transparent 100%), linear-gradient(#000, #000);
  mask-size: calc(100% - 12px) 100%, 12px 100%; mask-position: left top, right top; mask-repeat: no-repeat;
  transition: --tx-fade 0.35s var(--ease-out);
  /* iets zichtbaarder, smal en warm, alleen in deze kolom */
  scrollbar-width: thin; scrollbar-color: rgba(138, 109, 63, 0.38) transparent;
}
.tx-scroller.is-overflow:not(.is-end) > .tx-scroll { --tx-fade: 64px; }
.tx-scroll::-webkit-scrollbar { width: 6px; }
.tx-scroll::-webkit-scrollbar-track { background: transparent; margin: 18px 0; }
.tx-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(138, 109, 63, 0.34); }
.tx-scroll::-webkit-scrollbar-thumb:hover { background: rgba(138, 109, 63, 0.5); }
html .tx-scroll:focus-visible { outline: 2px solid var(--dark); outline-offset: -4px; border-radius: 12px; }
.tx-scroll:focus:not(:focus-visible) { outline: none; }

.tx-more {
  position: absolute; left: 0; right: 12px; bottom: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: 0.06em; color: rgba(31, 32, 33, 0.55); pointer-events: none;
  opacity: 0; transform: translate3d(0, 4px, 0); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.tx-more span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 14px; border-radius: 999px;
  background: rgba(253, 250, 245, 0.78); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 4px 14px rgba(90, 60, 30, 0.08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tx-more svg { width: 14px; height: 14px; }
.tx-scroller.is-overflow:not(.has-scrolled):not(.is-end) .tx-more { opacity: 1; transform: none; transition-delay: 0.45s; }
.tx-scroller.is-overflow:not(.has-scrolled):not(.is-end) .tx-more svg { animation: txNudge 1.8s ease-in-out 0.9s 3; }
@keyframes txNudge { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .tx-scroll { transition: none; }
  .tx-more, .tx-scroller.is-overflow:not(.has-scrolled):not(.is-end) .tx-more { transition: none; transform: none; }
  .tx-more svg { animation: none !important; }
}

/* titel van een behandelkaart linkt naar de eigen behandelpagina; link in de pop-up naar die pagina */
.service-title-link { color: inherit; text-decoration: none; }
.service-title-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(138, 109, 63, 0.55); }
.tx-page { margin-top: 4px; }

/* ==========================================================================
   Behandelkaarten (/behandelingen): champagneglas met daglicht
   Alleen .svc-grid. Warm, doorschijnend ivoor; licht valt van linksboven (lichte
   rand boven/links, warmere rand onder/rechts), zachte gelaagde schaduw in warme
   tonen. Eén pseudo-laag per kaart voor de rand (::before, bestaand) en één voor
   het daglicht (::after). Blur alleen op de kaart en de pil, niet op de beelden.
   ========================================================================== */
.svc-grid { position: relative; isolation: isolate; }
/* bijna onzichtbare warme gloed achter de kaarten, zodat het glas iets heeft om te breken */
.svc-grid::before {
  content: ""; position: absolute; inset: -6% -3%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 16% 28%, rgba(236, 212, 172, 0.34), transparent 70%),
    radial-gradient(34% 42% at 86% 64%, rgba(242, 204, 186, 0.28), transparent 70%),
    radial-gradient(28% 36% at 58% 8%, rgba(212, 222, 196, 0.22), transparent 72%);
}
.svc-grid .service {
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(255, 252, 247, 0.8) 0%, rgba(255, 248, 240, 0.7) 52%, rgba(252, 243, 233, 0.76) 100%);
  -webkit-backdrop-filter: var(--lux-blur); backdrop-filter: var(--lux-blur);
  box-shadow: var(--lux-edge), var(--lux-drop);
}
.svc-grid .service.is-highlight { box-shadow: var(--lux-edge), inset 0 0 0 1px rgba(214, 192, 156, 0.42), var(--lux-drop); }
/* haarlijn: licht boven/links, champagne onder/rechts */
.svc-grid .service::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 28%, rgba(236, 220, 196, 0.2) 60%, rgba(206, 180, 146, 0.36) 100%);
}
/* daglicht over het glas */
.svc-grid .service::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 38%, rgba(255, 250, 240, 0.22) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 130% 130%, 160% 160%; background-position: 0 0, 30% 0; background-repeat: no-repeat;
  opacity: 0.75; transition: opacity 600ms var(--ease-out), background-position 900ms var(--ease-out);
}

/* beeld: iets kleinere ronding dan de kaart, zachte schaduw, lichtrand en een vleugje warmte */
.svc-grid .service-img {
  position: relative; border-radius: 18px; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 1px rgba(90, 60, 30, 0.08), 0 12px 24px -14px rgba(90, 60, 30, 0.34);
}
.svc-grid .service-img img { border-radius: 18px; }
.svc-grid .service-img::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  background: radial-gradient(120% 100% at 50% 40%, rgba(0, 0, 0, 0) 62%, rgba(70, 44, 20, 0.07) 100%);
}

/* inhoud: glazen pil en een verfijnde onderstreping; afmetingen blijven gelijk */

.svc-grid .pill-highlight {
  color: var(--dark);
  background: linear-gradient(145deg, rgba(255, 253, 249, 0.74), rgba(250, 241, 230, 0.56));
  -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.4),
              0 0 0 1px rgba(206, 182, 148, 0.24), 0 4px 10px -6px rgba(110, 80, 50, 0.28);
}
.svc-grid .service .link-line::after { background: linear-gradient(90deg, currentColor 0%, currentColor 55%, rgba(138, 109, 63, 0.6) 100%); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .svc-grid .service:hover { transform: translate3d(0, -2px, 0); box-shadow: var(--lux-edge), var(--lux-drop-lift); }
  .svc-grid .service.is-highlight:hover { box-shadow: var(--lux-edge), inset 0 0 0 1px rgba(214, 192, 156, 0.5), var(--lux-drop-lift); }
  .svc-grid .service:hover::after { opacity: 1; background-position: 6% 4%, 55% 0; }
  .svc-grid .service:hover .service-img img { transform: scale(1.018); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-grid .service::after { transition: none; }
}
/* telefoon: minder blur en een lichtere schaduw, zelfde materiaal */
@media (max-width: 809.98px) {
  .svc-grid .service { border-radius: 26px; }
  .svc-grid .service-img, .svc-grid .service-img img { border-radius: 16px; }
  .svc-grid::before { inset: -2% 0; }
}
/* geen blur of minder transparantie gevraagd: bijna dekkend, zelfde warme toon */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .svc-grid .service { background: rgba(255, 250, 244, 0.96); }
}
@media (prefers-reduced-transparency: reduce) {
  .svc-grid .service { background: rgba(255, 250, 244, 0.97); }
  .svc-grid .service::after, .svc-grid::before { display: none; }
}

/* ==========================================================================
   Champagneglas op elke kaart (zelfde materiaal als de behandelkaarten)
   Drie maten: panelen (groot), vlakken (klein) en de gestapelde kaarten op de
   homepage (dichter glas, want ze schuiven over elkaar). Alleen oppervlak, rand,
   licht en schaduw; afmetingen, padding en typografie blijven zoals ze waren.
   "html " ervoor: journal.css en booking.css laden na dit bestand.
   ========================================================================== */
:root {
  --lux-fill: linear-gradient(155deg, rgba(255, 252, 247, 0.8) 0%, rgba(255, 248, 240, 0.7) 52%, rgba(252, 243, 233, 0.76) 100%);
  --lux-fill-dense: linear-gradient(155deg, rgba(255, 252, 247, 0.92) 0%, rgba(255, 249, 242, 0.86) 52%, rgba(252, 244, 235, 0.9) 100%);
  --lux-fill-soft: linear-gradient(150deg, rgba(255, 253, 249, 0.72) 0%, rgba(252, 245, 236, 0.58) 100%);
  --lux-blur: blur(24px) saturate(115%);
  --lux-blur-soft: blur(14px) saturate(112%);
  /* licht van linksboven: lichte rand boven/links, warme champagnerand onder/rechts */
  --lux-edge: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 1px 0 0 rgba(255, 255, 255, 0.55),
              inset 0 -1px 0 rgba(206, 180, 146, 0.22), inset -1px 0 0 rgba(206, 180, 146, 0.12);
  --lux-edge-soft: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(206, 182, 148, 0.16);
  /* contact, dichtbij, breed en een warme gloed; nooit grijs */
  --lux-drop: 0 1px 2px rgba(110, 80, 50, 0.06), 0 6px 14px -6px rgba(110, 80, 50, 0.1),
              0 28px 60px -28px rgba(120, 86, 54, 0.22), 0 44px 90px -44px rgba(214, 168, 118, 0.28);
  --lux-drop-lift: 0 1px 2px rgba(110, 80, 50, 0.07), 0 10px 20px -8px rgba(110, 80, 50, 0.13),
                   0 34px 70px -28px rgba(120, 86, 54, 0.26), 0 52px 100px -44px rgba(214, 168, 118, 0.34);
  --lux-drop-soft: 0 1px 2px rgba(110, 80, 50, 0.05), 0 8px 20px -12px rgba(110, 80, 50, 0.16);
  --lux-ring: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 28%, rgba(236, 220, 196, 0.2) 60%, rgba(206, 180, 146, 0.36) 100%);
  --lux-light: radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%);
}

/* panelen */
html .card, html .service, html .testi, html .info-card, html .contact-form, html .price-list, html .legal-box, html .band-col {
  background: var(--lux-fill); -webkit-backdrop-filter: var(--lux-blur); backdrop-filter: var(--lux-blur);
  border-radius: 28px; box-shadow: var(--lux-edge), var(--lux-drop);
}
html .services-list .service { background: var(--lux-fill-dense); }
html .service.is-highlight { box-shadow: var(--lux-edge), inset 0 0 0 1px rgba(214, 192, 156, 0.42), var(--lux-drop); }
/* vlakken */
html .stat, html .step, html .price-side, html .price-terms, html .jr-note, html .jr-check {
  background: var(--lux-fill); -webkit-backdrop-filter: var(--lux-blur-soft); backdrop-filter: var(--lux-blur-soft);
  border-radius: 24px; box-shadow: var(--lux-edge), var(--lux-drop-soft);
}
html .acc { background: var(--lux-fill); border-radius: 18px; box-shadow: var(--lux-edge), var(--lux-drop-soft); }
html .acc:hover, html .acc.open { background: var(--lux-fill-dense); box-shadow: var(--lux-edge), var(--lux-drop); }
/* kleine feiten- en prijsblokken en meldingen: glas zonder eigen schaduwwolk */
html .sv-facts > div, html .tx-facts > div, html .sv-prices, html .tx-prices, html .jr-prose .sv-read a, html .form-result, html .legal-prevails {
  background: var(--lux-fill-soft); box-shadow: var(--lux-edge-soft), 0 4px 12px -8px rgba(110, 80, 50, 0.22);
}
/* de CTA-kaart houdt haar eigen zonlichtverloop, maar krijgt dezelfde rand en diepte */
html .jr-cta-card { box-shadow: var(--lux-edge), var(--lux-drop); }

/* haarlijn en daglicht */
html .card::before, html .service::before, html .testi::before, html .info-card::before, html .contact-form::before,
html .price-list::before, html .legal-box::before, html .band-col::before, html .stat::before, html .step::before,
html .price-side::before, html .price-terms::before { background: var(--lux-ring); }
html .card::after, html .testi::after, html .info-card::after, html .contact-form::after,
html .price-list::after, html .legal-box::after, html .band-col::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: var(--lux-light); opacity: 0.75;
}

/* beelden: zachte warme schaduw, geen kleurfilter */
html .bento-feature, html .band-media, html .bio-media, html .page-hero-media { box-shadow: 0 1px 2px rgba(90, 60, 30, 0.08), 0 18px 40px -22px rgba(90, 60, 30, 0.36); }
html .services-list .service-img { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 1px rgba(90, 60, 30, 0.08), 0 12px 24px -14px rgba(90, 60, 30, 0.34); }

/* glazen pillen overal */
html .pill-highlight {
  color: var(--dark);
  background: linear-gradient(145deg, rgba(255, 253, 249, 0.74), rgba(250, 241, 230, 0.56));
  -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.4),
              0 0 0 1px rgba(206, 182, 148, 0.24), 0 4px 10px -6px rgba(110, 80, 50, 0.28);
}

/* telefoon: iets minder blur, lichtere schaduw */
@media (max-width: 809.98px) {
  :root {
    --lux-blur: blur(16px) saturate(112%);
    --lux-blur-soft: blur(10px) saturate(110%);
    --lux-drop: 0 1px 2px rgba(110, 80, 50, 0.06), 0 8px 18px -10px rgba(110, 80, 50, 0.14), 0 26px 50px -30px rgba(120, 86, 54, 0.2);
  }
  html .card, html .service, html .testi, html .info-card, html .contact-form, html .price-list, html .legal-box, html .band-col { border-radius: 26px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .card, html .service, html .testi, html .info-card, html .contact-form, html .price-list, html .legal-box, html .band-col,
  html .stat, html .step, html .price-side, html .price-terms, html .jr-note, html .jr-check, html .acc { background: rgba(255, 250, 244, 0.96); }
}
@media (prefers-reduced-transparency: reduce) {
  html .card, html .service, html .testi, html .info-card, html .contact-form, html .price-list, html .legal-box, html .band-col,
  html .stat, html .step, html .price-side, html .price-terms, html .jr-note, html .jr-check, html .acc { background: rgba(255, 250, 244, 0.97); }
  html .card::after, html .testi::after, html .info-card::after, html .contact-form::after, html .price-list::after, html .legal-box::after, html .band-col::after { display: none; }
}

/* ==========================================================================
   Contactpagina: zonlicht, bladschaduw en het hart als watermerk
   Alleen op de pagina met het contactformulier (main:has(#contact-form)), NL en EN.
   Eén laag voor licht en schaduw (::before) en één voor het watermerk (::after),
   allebei statisch en achter de inhoud. De bladschaduw is een al vervaagde WebP
   (tools/make-contact-bg.py), dus de browser draait geen blurfilter. De glazen
   kaarten vervagen wat erachter ligt; daar komt de diepte vandaan.
   ========================================================================== */
main:has(#contact-form) { position: relative; isolation: isolate; overflow-x: clip; }
main:has(#contact-form)::before,
main:has(#contact-form)::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
main:has(#contact-form)::before {
  inset: 0 0 auto 0; height: 1600px;
  background:
    url("../assets/img/maria/bg-botanical-shadow.webp") right -60px top -20px / 1180px auto no-repeat,
    radial-gradient(680px 560px at 86% 8%, rgba(255, 236, 206, 0.5), rgba(255, 236, 206, 0) 70%),
    radial-gradient(620px 520px at 6% 78%, rgba(244, 214, 196, 0.32), rgba(244, 214, 196, 0) 70%);
  opacity: 0.72;
  /* de bladschaduw zelf: laag, warm; het licht ernaast houdt de ruimte rond de kop rustig */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
main:has(#contact-form)::after {
  top: 96px; left: 37%; width: 500px; aspect-ratio: 640 / 518;
  background: url("../assets/img/maria/bg-heart-watermark.webp") center / contain no-repeat;
  opacity: 0.045; filter: blur(0.6px);
}
@media (max-width: 1199.98px) {
  main:has(#contact-form)::before { background-size: 900px auto, auto, auto; }
  main:has(#contact-form)::after { left: 46%; width: 400px; opacity: 0.04; }
}
/* telefoon: kleiner en lichter, en weg van de kop; het hart alleen als flauw spoor rechts */
@media (max-width: 809.98px) {
  main:has(#contact-form)::before {
    height: 1400px; opacity: 0.5;
    background:
      url("../assets/img/maria/bg-botanical-shadow.webp") right -180px top 260px / 640px auto no-repeat,
      radial-gradient(360px 320px at 90% 20%, rgba(255, 236, 206, 0.45), rgba(255, 236, 206, 0) 70%),
      radial-gradient(340px 300px at 0% 70%, rgba(244, 214, 196, 0.28), rgba(244, 214, 196, 0) 70%);
  }
  main:has(#contact-form)::after { top: 40px; left: auto; right: -90px; width: 280px; opacity: 0.035; }
}
@media (prefers-reduced-transparency: reduce) {
  main:has(#contact-form)::after { display: none; }
}

/* hero-pillen: op heel smalle schermen (320 px, Engelse tekst) mogen ze doorlopen naar een volgende regel */
.pill-row { flex-wrap: wrap; row-gap: 10px; }