/* ==========================================================================
   Salon Maria: homepage
   Layout, spacing rhythm, components and motion follow the original design;
   typography is a bespoke editorial system (Gambetta display serif +
   Switzer grotesk). Breakpoints: desktop ≥1200 · tablet 810–1199.98 · phone ≤809.98
   ========================================================================== */

:root {
  --sans: "Switzer", "Switzer Fallback", "Helvetica Neue", Arial, sans-serif;
  --serif: "Gambetta", "Gambetta Fallback", Georgia, "Times New Roman", serif;

  --dark: #1f2021;
  --dark-70: rgba(31, 32, 33, 0.7);
  --dark-50: rgba(31, 32, 33, 0.5);
  --dark-20: rgba(31, 32, 33, 0.2);
  --dark-10: rgba(31, 32, 33, 0.1);
  --white: #fff;
  --off-white: #f9f9f9;
  --beige: #e2dbbe;
  --beige-60: rgba(226, 219, 190, 0.6);
  --beige-50: rgba(226, 219, 190, 0.5);
  --sand-light: #f0ebde;   /* footer: light beige veil over the photo */
  --cream: #f4efe5;        /* navbar and mobile menu */
  --sand: #e7e1d0;         /* footer bottom bar */
  --line-light: rgba(249, 249, 249, 0.5);
  --hairline: rgba(31, 32, 33, 0.12);
  --beige-line: #d8cfae;
  --radius-card: 6px;
  --radius-item: 4px;
  --white-70: rgba(255, 255, 255, 0.7);

  /* type scale */
  --display-xl: clamp(64px, 6.9vw, 104px);
  --display-l: clamp(44px, 4.2vw, 60px);
  --display-l-narrow: clamp(40px, 3.4vw, 48px);
  --display-m: 30px;
  --track-display: -0.02em;

  /* heading-reveal spring, expressed as a linear() easing curve (900ms) */
  --spring: linear(0, 0.005, 0.0188, 0.0395, 0.0656, 0.0959, 0.1294, 0.165, 0.202, 0.2399, 0.278, 0.316, 0.3536, 0.3903, 0.4261, 0.4608, 0.4942, 0.5263, 0.5569, 0.5861, 0.6139, 0.6402, 0.6651, 0.6885, 0.7106, 0.7314, 0.7509, 0.7691, 0.7862, 0.8021, 0.817, 0.8309, 0.8438, 0.8558, 0.867, 0.8773, 0.8869, 0.8959, 0.9041, 0.9117, 0.9188, 0.9253, 0.9314, 0.9369, 0.9421, 0.9468, 0.9512, 0.9552, 0.9589, 0.9623, 0.9654, 0.9683, 0.971, 0.9734, 0.9756, 0.9777, 0.9796, 0.9813, 0.9829, 0.9844, 0.9857, 0.9869, 0.988, 0.9891, 0.99, 0.9909, 0.9917, 0.9924, 0.993, 0.9937, 0.9942, 0.9947, 0.9952, 0.9956, 0.996, 0.9963, 0.9967, 0.9969, 0.9972, 0.9975, 0.9977, 0.9979, 0.9981, 0.9982, 0.9984, 0.9985, 0.9987, 0.9988, 0.9989, 1);
  /* hover / layout springs (~350ms, slight ease-out) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-layout: cubic-bezier(0.2, 0.9, 0.25, 1.02);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0; background: #fff; color: var(--dark);
  font-family: var(--sans); font-size: 15px; line-height: 1.55; font-weight: 400;
  font-synthesis: none; font-kerning: normal; font-feature-settings: "kern" on, "liga" on;
}
h1, h2, h3, h4, h5, p, ul, figure, figcaption { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { display: block; width: 24px; height: 24px; flex: none; }

.page { position: relative; display: flex; flex-direction: column; min-height: 100vh; background: #fff; }
main { display: flex; flex-direction: column; }
section { position: relative; width: 100%; }

/* ---------- typography ----------
   serif  : hero, section headlines, treatment names, numbers
   sans   : everything else (body, nav, buttons, labels, small headings) */
.h1 { font-family: var(--serif); font-weight: 400; font-size: var(--display-xl); line-height: 0.94; letter-spacing: var(--track-display); text-wrap: balance; }
.h1 em, .h2 em, .h3 em { font-style: normal; }
/* descender room: line-heights are tight, containers must never cut a g, j or p */
.h1, .h2, .h3 { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: var(--display-l); line-height: 1.02; letter-spacing: var(--track-display); }
.h3 { font-family: var(--serif); font-weight: 400; font-size: var(--display-m); line-height: 1.12; letter-spacing: -0.01em; }
.h4 { font-weight: 500; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
.h5 { font-weight: 400; font-size: 17px; line-height: 1.35; letter-spacing: -0.005em; color: var(--dark); }
.h1, .h2, .h3, .h4, .h5, .p, .p-lg, .small, .footer-link { overflow-wrap: break-word; }
.p { font-size: 16px; line-height: 1.55; }
.p-lg { font-size: 18px; line-height: 1.5; }
.small { font-size: 13px; line-height: 1.55; }
.muted { color: var(--dark-70); }
.pre { white-space: pre-wrap; }
.num { font-variant-numeric: lining-nums tabular-nums; }

/* word-by-word blur reveal on headings */
.h-anim .w { display: inline-block; opacity: 0.001; filter: blur(10px); transform: translateY(10px); will-change: transform; }
.h-anim.in .w { animation: wordIn 900ms var(--spring) both; animation-delay: calc(200ms + var(--i, 0) * 50ms); }
@keyframes wordIn {
  from { opacity: 0.001; filter: blur(10px); transform: translateY(10px); }
  to   { opacity: 1; filter: blur(0px); transform: none; }
}

/* ---------- labels & pills ---------- */
.label {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 14px 8px 12px; border-radius: 50px; box-shadow: inset 0 0 0 1px var(--beige-50);
  font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-70); white-space: nowrap;
}
.label::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--beige); flex: none; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 14px; border-radius: 50px; font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; overflow: clip;
  font-variant-numeric: lining-nums tabular-nums;
}
.pill-light { color: #fff; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: inset 0 0 0 1px var(--line-light); }
.pill-highlight { color: var(--dark-70); background: var(--beige-60); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.pill-row { display: flex; align-items: center; gap: 10px; }

/* ---------- buttons ----------
   Architectural, quiet: rectangular with a 4px radius, hairline border,
   thin diagonal arrow, 50px tall. Hover inverts the fill; the arrow nudges. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 50px; padding: 0 22px 0 24px; border-radius: 4px;
  font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; cursor: pointer;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.btn-text { position: relative; z-index: 1; }
.icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; transition: transform 0.35s var(--ease-out); }
.circle { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: inherit; }
.rot { display: block; width: 20px; height: 20px; transform: rotate(-45deg); transform-origin: 50% 50%; }
.rot .ic { width: 20px; height: 20px; }
.btn:hover .icon-wrap, .link-line:hover .icon-wrap, .footer-cta-link:hover .icon-wrap { transform: translate(2px, -2px); }

/* white: hairline on white, inverts to dark on hover (nav, hero, event) */
.btn-white { background: #fff; color: var(--dark); box-shadow: inset 0 0 0 1px var(--dark-20); }
.btn-white:hover { background: var(--dark); color: #fff; box-shadow: inset 0 0 0 1px var(--dark); }
.btn-white .ct { display: none; }
.btn-white .icon-wrap { order: 2; }

/* light: hairline outline on photography, fills white on hover */
.btn-light {
  color: #fff; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.btn-light:hover { background: #fff; color: var(--dark); box-shadow: inset 0 0 0 1px #fff; }

/* primary / dark: solid ink, outlines itself on hover */
.btn-primary, .btn-dark { background: var(--dark); color: #fff; box-shadow: inset 0 0 0 1px var(--dark); }
.btn-primary:hover, .btn-dark:hover { background: #fff; color: var(--dark); }

/* text link with a hairline that sweeps out right and back in from the left */
.link-line {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 6px; font-size: 14px; line-height: 1.2; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; cursor: pointer;
  transition: color 0.3s var(--ease-out);
}
.link-line .icon-wrap, .link-line .circle, .link-line .rot, .link-line .rot .ic { width: 16px; height: 16px; }
.link-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: 0 50%; }
.link-line:hover::after { animation: lineSweep 0.7s var(--ease-out); }
@keyframes lineSweep {
  0%   { transform: scaleX(1); transform-origin: 100% 50%; }
  45%  { transform: scaleX(0); transform-origin: 100% 50%; }
  50%  { transform: scaleX(0); transform-origin: 0 50%; }
  100% { transform: scaleX(1); transform-origin: 0 50%; }
}
.link-dark { color: var(--dark); }
.link-dark:hover { color: var(--dark-70); }
.link-white { color: #fff; }
.link-white:hover { color: var(--white-70); }

/* ---------- navbar ---------- */
.nav-wrap { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: 20px 50px 50px; }
.navbar {
  display: flex; align-items: center; gap: 25px; padding: 18px 20px; border-radius: var(--radius-card);
  background: var(--cream); box-shadow: inset 0 0 0 1px rgba(31, 32, 33, 0.10);
}
.nav-top { display: flex; align-items: center; gap: 10px; flex: none; }
.navbar .btn { min-height: 44px; padding: 0 18px 0 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: -0.01em; color: var(--dark); white-space: nowrap; }
.brand-mark { display: block; height: 36px; width: auto; flex: none; }
.burger { display: none; position: relative; width: 44px; height: 44px; margin: -10px -11px -10px 0; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--dark); }
.burger-line { display: block; width: 22px; height: 1px; background: currentColor; transition: transform 0.4s var(--ease-out); transform-origin: 50% 50%; }
.navbar.open .burger-line:first-child { transform: translateY(4px) rotate(45deg); }
.navbar.open .burger-line:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-panel, .nav-panel-inner { display: contents; }
.nav-links { flex: 1 0 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.nav-link { display: flex; flex-direction: column; align-items: center; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--dark-70); white-space: nowrap; transition: color 0.3s var(--ease-out); }
.nav-link:hover { color: var(--dark); }
.nav-title { display: block; }
.ul { display: block; width: 38px; height: 1px; background: var(--beige); transform: scale(0); transform-origin: 50% 50%; transition: transform 0.35s var(--ease-out); }
.nav-link:hover .ul { transform: none; }
.nav-link.is-current { color: var(--dark); }
.nav-link.is-current .ul { transform: none; }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 1; height: 100vh; overflow: clip; display: flex; flex-direction: column; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 86% 50%; }
/* soft scrim so the white hero copy stays readable on the light photo */
.hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(31, 32, 33, 0.55) 0%, rgba(31, 32, 33, 0.28) 40%, rgba(31, 32, 33, 0) 72%), linear-gradient(90deg, rgba(31, 32, 33, 0.30) 0%, rgba(31, 32, 33, 0) 55%); }
.hero-inner { position: relative; display: flex; align-items: center; gap: 16px; height: 100%; padding: 50px 80px; overflow: clip; }
.hero-left { flex: 1.7 0 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 32px; }
.hero-content { width: 100%; max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; color: #fff; }
.hero-content .h1 { width: 100%; }
.hero-content .p { width: 100%; max-width: 30em; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.hero-buttons { display: flex; align-items: center; gap: 12px; overflow: clip; }
.hero-info { color: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 1.55; width: 100%; font-variant-numeric: lining-nums tabular-nums; }
.hero-right { flex: 1 0 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 10px; overflow: clip; }

/* ---------- stats ---------- */
.stats { display: flex; align-items: flex-start; justify-content: center; gap: 10px; padding: 60px 80px; overflow: clip; }
.stat { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.stat-num { display: inline-block; font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -0.02em; color: var(--dark); font-variant-numeric: lining-nums tabular-nums; }
.stat-label { font-size: 14px; line-height: 1.5; text-align: center; width: 100%; color: var(--dark-70); }

/* ---------- text center ---------- */
.text-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 60px 50px 80px; text-align: center; }
.text-center .h2 { width: 100%; max-width: 780px; }
.text-center .intro { width: 100%; max-width: 560px; font-size: 17px; }

/* ---------- bento ---------- */
.bento { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 80px; overflow: clip; }
.bento-feature {
  position: relative; flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 32px; padding: 30px; border-radius: var(--radius-card); overflow: clip; color: #fff;
}
.bento-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); }
.bento-feature > .bento-img { object-position: 50% 50%; }
.bento-feature > *:not(img) { position: relative; }
.bento-feature .h2 { width: 100%; max-width: 440px; font-size: var(--display-l-narrow); color: #fff; }
.check-list { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; width: 100%; overflow: clip; }
.check-item { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.5; color: #fff; white-space: nowrap; }
.bento-cards { flex: 1 0 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; overflow: clip; }
.card {
  width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px;
  padding: 32px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--hairline);
}
.card-grow { flex: 1 0 0; }
.card .h3, .card .p { width: 100%; }
.card .p { max-width: 34em; }
.card .link-line { margin-top: 6px; }

/* ---------- services ---------- */
.services { display: flex; align-items: flex-start; gap: 36px; padding: 80px; }
.services-head { position: sticky; top: 36px; z-index: 1; flex: 1 0 0; min-width: 0; max-width: 340px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.services-head .h2, .services-head .p { width: 100%; }
.services-head .h2 { font-size: var(--display-l-narrow); }
.services-head .btn { margin-top: 6px; }
.services-list { position: relative; z-index: 2; flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; background: #fff; overflow: clip; }
.service-sticky { position: sticky; top: 36px; width: 100%; height: 300px; }
.service {
  display: flex; align-items: flex-start; gap: 28px; width: 100%; min-height: 300px; padding: 30px; border-radius: var(--radius-card);
  background: #fff; box-shadow: inset 0 0 0 1px var(--hairline);
}
.service.is-highlight { box-shadow: inset 0 0 0 1px var(--beige-line); }
.service-img { flex: none; width: 193px; height: 240px; border-radius: var(--radius-card); overflow: hidden; }
.service-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); }
.service-body { flex: 1 0 0; min-width: 0; height: 240px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.service-text { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
.service-text .h3, .service-text .p { width: 100%; }
.service-text .p { max-width: 36em; }
.service-btn { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px; width: 200px; }

/* ---------- treatment steps ---------- */
.skin { background: var(--off-white); display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 80px; overflow: clip; }
.skin-top { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
.skin-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; width: 100%; }
.skin-row .h2 { flex: 1 0 0; min-width: 0; }
.skin-intro { flex: 1 0 0; min-width: 0; max-width: 24em; padding-bottom: 0.3em; }
.steps { display: flex; align-items: flex-start; justify-content: center; gap: 24px; width: 100%; padding: 40px 0; overflow: clip; box-shadow: inset 0 1px 0 var(--dark-10), inset 0 -1px 0 var(--dark-10); }
.step { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
.step .p:first-child { font-size: 13px; letter-spacing: 0.02em; font-variant-numeric: lining-nums tabular-nums; }
.step .p:last-child { width: 100%; max-width: 30em; }

/* ---------- values (was testimonials) ---------- */
.testimonials { background: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 40px; padding: 80px; overflow: clip; }
.testimonials-top { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; text-align: center; }
.testimonials-top .h2 { width: 100%; }
.testi-grid { display: flex; align-items: stretch; justify-content: center; gap: 10px; width: 100%; overflow: clip; }
.testi {
  flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px;
  padding: 32px; border-radius: var(--radius-card); background: #fff; box-shadow: inset 0 0 0 1px var(--hairline);
}
.stars { display: flex; align-items: center; gap: 3px; color: var(--dark); overflow: clip; margin-bottom: 8px; }
.stars .ic { width: 20px; height: 20px; }
.testi > .p { font-weight: 500; }
.testi .p, .testi .small { width: 100%; }
.testi-meta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; width: 100%; overflow: clip; }

/* ---------- event ---------- */
.event { display: flex; align-items: flex-start; gap: 36px; padding: 80px; overflow: clip; }
.event-img { flex: 1 0 0; min-width: 0; max-width: 420px; aspect-ratio: 765 / 1024; border-radius: var(--radius-card); overflow: clip; }
.event-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); }
.event-body { flex: 1 0 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; overflow: clip; }
.event-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; width: 100%; }
.event-content .h2, .event-content .p { width: 100%; }
.event-content .h2 { font-size: var(--display-l-narrow); }
.event-content > .p { max-width: 36em; }
.event-details { display: flex; align-items: center; gap: 18px; width: 100%; font-size: 13px; line-height: 1.5; color: var(--dark-70); overflow: clip; font-variant-numeric: lining-nums tabular-nums; }
.event-details p { white-space: pre; }
.accordion { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; overflow: clip; margin-top: 6px; }
.event-cta { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 12px; width: 100%; overflow: clip; }

/* accordion item */
.acc {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 16px; border-radius: var(--radius-item); background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); cursor: pointer; overflow: clip;
  transition: box-shadow 0.3s var(--ease-out);
}
.acc:hover, .acc.open { box-shadow: inset 0 0 0 1px var(--dark-20); }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; overflow: clip; }
.acc-head .h5 { flex: 1 0 0; min-width: 0; }
.acc-icon { position: relative; display: block; flex: none; width: 24px; height: 24px; color: var(--dark); transform-origin: 50% 50%; transition: transform 0.4s var(--ease-out); }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc.open .acc-icon { transform: rotate(45deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows 0.4s var(--ease-layout); }
.acc.open .acc-panel { grid-template-rows: 1fr; }
.acc-body { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s 0.4s; }
.acc.open .acc-body { visibility: visible; transition-delay: 0s; }
.acc-body > * { padding-top: 12px; max-width: 38em; }
.acc-body .small { font-size: 15px; }
.acc-list li { position: relative; padding-left: 15px; font-size: 15px; line-height: 1.55; color: var(--dark-70); }
.acc-list li::before { content: "•"; position: absolute; left: 0; top: 0; }

/* ---------- faq ---------- */
.faq { background: #fff; display: flex; align-items: flex-start; justify-content: center; gap: 36px; padding: 80px; overflow: clip; }
.faq-left { flex: 1 0 0; min-width: 0; max-width: 450px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.faq-left .h2 { width: 100%; font-size: var(--display-l-narrow); }
.faq-copy { width: 100%; max-width: 30em; }
.faq-copy .p + .p { margin-top: 20px; }
.faq-copy .text-link { color: var(--dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity 0.3s var(--ease-out); }
.faq-copy .text-link:hover { opacity: 0.6; }
.faq-left .link-line { margin-top: 0; }
.faq-list { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; overflow: clip; }

/* ---------- footer (editorial, light beige, photo behind a veil) ---------- */
.footer { position: relative; background: var(--cream); color: var(--dark); }
.footer-main { position: relative; overflow: clip; display: flex; justify-content: center; }
.footer-bg { position: absolute; inset: 0; z-index: 0; }
.footer-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: saturate(0.85); }
/* cream veil (same family as the navbar) that thins out towards the bottom */
.footer-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--cream) 0%, rgba(244, 239, 229, 0.86) 30%, rgba(244, 239, 229, 0.8) 100%); }
/* the white page dissolves into the footer */
.footer-main::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 180px; z-index: 1; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); pointer-events: none; }
.footer-container { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 40px; width: 100%; max-width: 1440px; padding: 0 80px; }
.footer-col-1 { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 56px; padding: 200px 0 64px; }
.footer-brand { display: inline-flex; align-items: center; gap: 16px; font-family: var(--serif); font-weight: 400; font-size: 62px; line-height: 1; letter-spacing: -0.015em; color: var(--dark); white-space: nowrap; }
.footer-brand .brand-mark { height: 44px; }
.footer-line { display: block; width: 54px; height: 1px; background: var(--dark); opacity: 0.2; }
.footer-desc { max-width: 342px; font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; color: var(--dark); opacity: 0.9; }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.footer-eyebrow { font-size: 16px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--dark); opacity: 0.6; }
.footer-big { display: inline-block; font-size: 32px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--dark); font-variant-numeric: lining-nums tabular-nums; transition: opacity 0.3s var(--ease-out); }
.footer-big:hover { opacity: 0.6; }
.footer-col-2 { flex: none; width: 440px; display: flex; flex-direction: column; align-items: flex-start; gap: 64px; padding: 220px 0 64px; }
.footer-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.footer-cta-text { max-width: 290px; font-size: 16px; line-height: 1.35; letter-spacing: -0.01em; color: var(--dark); opacity: 0.8; }
.footer-cta-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: 60px; font-size: 16px; line-height: 1.4; font-weight: 400; color: var(--dark); box-shadow: inset 0 -1px 0 var(--dark-20); transition: color 0.3s var(--ease-out); }
.footer-cta-link .icon-wrap { color: var(--dark); width: 20px; height: 20px; }
.footer-cta-link .rot, .footer-cta-link .rot .ic { width: 20px; height: 20px; }
.footer-cta-link:hover { color: var(--dark-50); }
.footer-cols { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.footer-nav { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-nav .footer-eyebrow { margin-bottom: 4px; }
.footer-navlink { position: relative; display: inline-block; font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; color: var(--dark); white-space: nowrap; }
.footer-navlink::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--dark); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.4s var(--ease-out); }
.footer-navlink:hover::after { transform: none; }
.footer-bar { position: relative; z-index: 1; background: var(--dark); color: var(--cream); display: flex; justify-content: center; }
.footer-bar .footer-container { align-items: center; justify-content: space-between; gap: 40px; padding: 30px 280px 30px 80px; /* room for the chat launcher */ }
.footer-bar-left { display: flex; align-items: center; gap: 40px; min-width: 0; }
.footer-bar p, .footer-bar a { font-size: 15px; line-height: 1.4; letter-spacing: -0.01em; color: rgba(244, 239, 229, 0.92); white-space: nowrap; }
.footer-bar .footer-addr { color: rgba(244, 239, 229, 0.6); font-variant-numeric: lining-nums tabular-nums; }
.footer-bar a { font-weight: 500; transition: opacity 0.3s var(--ease-out); }
.footer-bar a:hover { opacity: 0.6; }

/* ==========================================================================
   BEHANDELINGEN-PAGINA (services)
   Layout 1:1 naar het Eclat services-stramien; componenten, type en knoppen
   zijn die van de homepage. Desktop: hero 2-koloms + raster van 2 x 300px.
   ========================================================================== */
.page-hero { display: flex; align-items: stretch; gap: 10px; padding: 160px 80px 0; }
.page-hero-left { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
.page-hero-left .h1 { width: 100%; max-width: 650px; font-size: var(--display-l); line-height: 1.05; }
.page-hero-left .p { width: 100%; max-width: 500px; }
.page-hero-buttons { display: flex; align-items: center; gap: 24px; padding-top: 26px; }
.page-hero-media { flex: 1 0 0; min-width: 0; min-height: 246px; border-radius: var(--radius-card); overflow: clip; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.svc { padding: 50px 80px 80px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; }
.svc-grid .service { height: 100%; }
@media (min-width: 810px) {
  .svc-grid .service-body { height: auto; min-height: 240px; gap: 16px; }
}

/* ==========================================================================
   CONTACTPAGINA  (Eclat /contact stramien)
   ========================================================================== */
.intro-section { padding: 160px 80px 80px; }
.intro-inner { width: 100%; max-width: 450px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.intro-inner .h1 { width: 100%; font-size: var(--display-l); line-height: 1.05; }
.intro-inner .p { width: 100%; }

.contact { display: flex; align-items: stretch; gap: 36px; padding: 0 80px 80px; }
.contact-info { flex: 1 0 0; min-width: 0; max-width: 400px; display: flex; flex-direction: column; gap: 10px; }
.info-card { display: flex; align-items: center; gap: 24px; padding: 30px; background: var(--off-white); border-radius: var(--radius-card); }
.info-card > .ic { flex: none; color: var(--dark); }
.info-body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.info-label { font-size: 16px; line-height: 1.4; color: var(--dark); }
.info-value { font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; color: var(--dark); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
a.info-value { transition: opacity 0.3s var(--ease-out); }
a.info-value:hover { opacity: 0.6; }
.info-body { container-type: inline-size; }
a.info-value[href^="mailto:"] { font-size: 20px; font-size: min(20px, 6.9cqi); line-height: 28px; }
.info-note { font-size: 13px; line-height: 1.5; color: var(--dark-70); }
.info-rows { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.6; }
.info-row span + span { color: var(--dark-70); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

.contact-form { flex: 1 0 0; min-width: 0; padding: 30px; background: var(--off-white); border-radius: var(--radius-card); }
.form { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.form-row { display: flex; gap: 10px; width: 100%; }
.field { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.field > span { font-size: 13px; line-height: 1.5; color: var(--dark-70); }
.field input, .field textarea {
  width: 100%; padding: 12px; background: #fff; border: 0; border-radius: var(--radius-item);
  box-shadow: inset 0 0 0 1px var(--hairline); font: inherit; font-size: 16px; line-height: 1.4;
  color: var(--dark); outline: none; transition: box-shadow 0.3s var(--ease-out);
}
.field textarea { height: 100px; min-height: 100px; resize: vertical; }
.field input { height: 40px; padding: 0 12px; }
.field input::placeholder, .field textarea::placeholder { color: var(--dark-50); }
.field input:focus, .field textarea:focus { box-shadow: inset 0 0 0 1px var(--dark); }
.form .btn { width: 100%; justify-content: space-between; margin-top: 4px; }
.form-note { font-size: 13px; line-height: 1.5; color: var(--dark-70); }
.field > .field-error { color: #a33a2b; }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 1px #a33a2b; }
.field input[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px #a33a2b; }

/* galerij op de plek van Eclats team-sectie: Salon Maria is een eenmanszaak,
   dus geen verzonnen medewerkers maar een eerlijke indruk van de salon */
.gallery { display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 80px; }
.gallery-top { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; text-align: center; }
.gallery-top .h2 { width: 100%; font-size: var(--display-l-narrow); text-wrap: balance; }
.gallery-top .p { width: 100%; max-width: 650px; text-wrap: balance; }
.gallery-grid { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.gallery-item { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 20px; text-align: center; }
.gallery-item img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius-card); }
.gallery-item .h3 { width: 100%; }
.gallery-note { font-size: 15px; line-height: 1.5; color: var(--dark-70); }
.gallery-cap { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.gallery-cap .h3, .gallery-cap .gallery-note { display: block; }

/* ==========================================================================
   TARIEVENPAGINA  (Eclat /prices stramien)
   ========================================================================== */
.page-hero.is-wide .page-hero-left { flex: 1 0 0; }
.page-hero.is-wide .page-hero-media { flex: 0 0 469px; position: relative; }
/* het beeld volgt de hoogte van de tekstkolom, niet andersom */
.page-hero.is-wide .page-hero-media img { position: absolute; inset: 0; }
.prices { display: flex; align-items: flex-start; gap: 24px; padding: 80px; }
.price-side { flex: 1 0 0; min-width: 0; max-width: 300px; display: flex; flex-direction: column; gap: 24px; }
.price-search { position: relative; width: 100%; }
.price-search .ic { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--dark-50); pointer-events: none; }
.price-search input {
  width: 100%; padding: 9px 12px 9px 36px; background: #fff; border: 0; border-radius: var(--radius-item);
  box-shadow: inset 0 0 0 1px var(--hairline); font: inherit; font-size: 16px; line-height: 22px;
  color: var(--dark); outline: none; transition: box-shadow 0.3s var(--ease-out);
}
.price-search input:focus { box-shadow: inset 0 0 0 1px var(--dark); }
.price-search input::placeholder { color: var(--dark-50); }
.price-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; cursor: pointer; background: var(--dark-50); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.price-filters { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.filter-btn { font-size: 15px; line-height: 1.5; color: var(--dark-50); text-align: left; white-space: nowrap; transition: color 0.3s var(--ease-out); }
.filter-btn:hover { color: var(--dark-70); }
.filter-btn.is-active { color: var(--dark); }
.price-list { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.price-row { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.price-row[hidden] { display: none; }
.price-head { display: flex; align-items: baseline; gap: 20px; width: 100%; }
.price-name { flex: 1 0 0; min-width: 0; }
.price-amount { flex: none; font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; color: var(--dark); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.price-note { font-size: 14px; line-height: 1.6; color: var(--dark-70); }
.price-row::after { content: ""; display: block; width: 100%; height: 1px; background: var(--beige-60); }
.price-empty { font-size: 16px; line-height: 1.55; color: var(--dark-70); }
.price-terms { display: flex; flex-direction: column; gap: 10px; padding: 30px; background: var(--off-white); border-radius: var(--radius-card); }
.price-terms .h4 { margin-bottom: 2px; }

/* ---------- chat (WhatsApp concierge) ---------- */
.chat { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chat-launch {
  display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 20px 0 18px; border-radius: var(--radius-item);
  background: var(--dark); color: #fff; font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap;
  box-shadow: 0 12px 32px rgba(31, 32, 33, 0.18), inset 0 0 0 1px rgba(244, 239, 229, 0.35); transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.chat-launch .ic { width: 20px; height: 20px; }
.chat-launch:hover, .chat.open .chat-launch { background: #fff; color: var(--dark); box-shadow: 0 12px 32px rgba(31, 32, 33, 0.12), inset 0 0 0 1px var(--dark-20); }
.chat-panel {
  width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow: auto;
  background: #fff; border-radius: var(--radius-card); box-shadow: 0 24px 64px rgba(31, 32, 33, 0.16), inset 0 0 0 1px var(--hairline);
  transform-origin: 100% 100%; opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.chat-panel[hidden] { display: none; }
.chat.open .chat-panel { opacity: 1; transform: none; }
.chat-head { display: flex; align-items: center; gap: 14px; padding: 18px 16px 18px 20px; background: var(--sand-light); box-shadow: inset 0 -1px 0 var(--hairline); }
.chat-head .brand-mark { height: 34px; }
.chat-head-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-title { font-family: var(--serif); font-size: 21px; line-height: 1.1; letter-spacing: -0.01em; color: var(--dark); }
.chat-sub { font-size: 12.5px; line-height: 1.4; color: var(--dark-70); }
.chat-close { position: relative; display: flex; width: 40px; height: 40px; margin-right: -8px; color: var(--dark); border-radius: var(--radius-item); transition: background-color 0.3s var(--ease-out); }
.chat-close:hover { background: rgba(31, 32, 33, 0.06); }
.chat-close-line { position: absolute; top: 50%; left: 50%; width: 16px; height: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.chat-close-line:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.chat-body { display: flex; flex-direction: column; gap: 18px; padding: 20px; }
.chat-intro { font-size: 15px; line-height: 1.5; color: var(--dark); max-width: 30em; }
.chat-options { display: flex; flex-direction: column; gap: 8px; }
.chat-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 14px 0 16px; border-radius: var(--radius-item);
  font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--dark); box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.chat-option .icon-wrap, .chat-option .rot, .chat-option .rot .ic { width: 16px; height: 16px; }
.chat-option:hover { background: var(--dark); color: #fff; box-shadow: inset 0 0 0 1px var(--dark); }
.chat-option:hover .icon-wrap { transform: translate(2px, -2px); }
.chat-form { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--hairline); }
.chat-label { font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-70); }
.chat-input {
  width: 100%; resize: none; padding: 8px 0 10px; border: 0; border-bottom: 1px solid var(--dark-20); border-radius: 0; background: transparent;
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--dark); outline: none; transition: border-color 0.3s var(--ease-out);
}
.chat-input::placeholder { color: var(--dark-50); }
.chat-input:focus { border-bottom-color: var(--dark); }
.chat-send { width: 100%; justify-content: space-between; margin-top: 4px; }
.chat-note { font-size: 12.5px; line-height: 1.5; color: var(--dark-70); }
.chat-note a { color: var(--dark); transition: opacity 0.3s var(--ease-out); }
.chat-note a:hover { opacity: 0.6; }
.chat-launch:focus-visible, .chat-close:focus-visible, .chat-option:focus-visible, .chat-send:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }
/* de launcher ligt onderaan op de donkere footerbalk: een witte ring blijft daar zichtbaar */
.chat-launch:focus-visible { box-shadow: 0 0 0 2px #fff, 0 12px 32px rgba(31, 32, 33, 0.18); }

/* ==========================================================================
   TABLET  810 – 1199.98
   ========================================================================== */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .nav-wrap { padding: 40px; }
  .hero-inner { padding: 40px; }
  .stats { padding: 40px; }
  .text-center, .bento, .skin, .testimonials, .event, .faq { padding: 50px 40px; }
  .bento-feature { align-self: stretch; gap: 20px; padding: 24px; }
  .card-grow { padding: 24px; }
  .services { flex-direction: column; gap: 35px; padding: 50px 40px; }
  .services-head { position: relative; top: auto; flex: none; width: 100%; max-width: 520px; }
  .services-list { flex: none; width: 100%; }
  .event-img { align-self: stretch; max-width: 250px; aspect-ratio: auto; }
  .event-body { align-self: auto; justify-content: flex-start; gap: 24px; }
  .page-hero { padding: 180px 40px 50px; gap: 10px; }
  .page-hero-left .h1 { font-size: 52px; }
  .page-hero-media { flex: 0 0 267px; min-height: 0; }
  .svc { padding: 0 40px 50px; }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .intro-section { padding: 180px 40px 40px; }
  .intro-inner .h1 { font-size: 52px; }
  .contact { padding: 0 40px 40px; gap: 12px; }
  .info-card, .contact-form { padding: 20px; }
  .gallery { padding: 40px; }
  .page-hero.is-flush { padding-bottom: 0; }
  .page-hero.is-wide .page-hero-left, .page-hero.is-wide .page-hero-media { flex: 1 0 0; }
  .prices { padding: 40px; }
  .price-side { max-width: 200px; }
  .price-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .price-name { flex: none; }
  .price-amount { align-self: flex-end; }
  .filter-btn { font-size: 14px; }
  .footer-container { padding: 0 40px; gap: 32px; }
  /* narrow tablets: keep the navbar on one line without overlap */
  .nav-links { gap: 18px; }
  .nav-link:first-child { display: none; }
  .footer-col-1 { padding: 140px 0 48px; gap: 44px; }
  .footer-brand { font-size: 52px; }
  .footer-col-2 { width: 380px; padding: 150px 0 48px; gap: 48px; }
  .footer-bar .footer-container { padding: 22px 200px 22px 40px; }
  .footer-bar-left { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (min-width: 810px) and (max-width: 949.98px) {
  .brand span { display: none; }
  .footer-brand { font-size: 40px; }
  .footer-brand .brand-mark { height: 36px; }
}

/* ==========================================================================
   PHONE  ≤ 809.98
   ========================================================================== */
@media (max-width: 809.98px) {
  :root {
    --display-xl: clamp(44px, 12.3vw, 64px);
    --display-l: clamp(38px, 10.5vw, 52px);
    --display-l-narrow: clamp(36px, 9.8vw, 46px);
    --display-m: 28px;
  }

  /* navbar → hamburger + collapsible panel */
  .nav-wrap { padding: 20px; }
  .navbar { flex-direction: column; align-items: center; gap: 0; }
  .nav-top { width: 100%; justify-content: space-between; gap: 0; }
  .burger { display: flex; }
  .nav-panel { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows 0.45s var(--ease-layout); }
  .navbar.open .nav-panel { grid-template-rows: 1fr; }
  .nav-panel-inner { display: flex; flex-direction: column; align-items: center; gap: 65px; min-height: 0; width: 100%; overflow: hidden; visibility: hidden; transition: padding-top 0.45s var(--ease-layout), visibility 0s 0.45s; }
  .navbar.open .nav-panel-inner { visibility: visible; transition-delay: 0s, 0s; }
  .navbar.open .nav-panel-inner { padding-top: 65px; padding-bottom: 4px; }
  .nav-links { flex: none; width: 100%; flex-direction: column; justify-content: flex-start; gap: 22px; }
  .nav-link { color: var(--dark); }
  .nav-link .nav-title { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 400; }

  /* hero */
  .hero { height: auto; }
  .hero-bg img { object-position: 50% 50%; }
  .bento-feature > .bento-img { object-position: 45% 50%; }
  /* phone: light photo under white copy -> same soft scrim as the hero */
  .bento-feature::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-card); pointer-events: none; background: linear-gradient(to top, rgba(31, 32, 33, 0.55) 0%, rgba(31, 32, 33, 0.3) 50%, rgba(31, 32, 33, 0.12) 100%); }
  .hero-inner { flex-direction: column; align-items: center; justify-content: flex-start; height: auto; padding: 150px 25px 25px; }
  .hero-left { flex: none; width: 100%; height: auto; gap: 28px; }
  .hero-content { gap: 20px; }
  .hero-content .p { font-size: 16px; }
  .hero-buttons { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
  .hero-buttons .btn { width: 100%; justify-content: space-between; }
  .hero-buttons .btn-white .btn-text { order: 1; }
  .hero-right { flex: none; width: 100%; height: auto; align-items: flex-start; }

  /* stats */
  .stats { flex-direction: column; gap: 28px; padding: 40px 25px; }
  .stat { flex: none; width: 100%; }
  .stat-num { font-size: 48px; }

  .text-center { padding: 40px 25px 60px; gap: 20px; }
  .skin, .testimonials { padding: 60px 25px; }

  /* bento */
  .bento { flex-direction: column; padding: 60px 25px; }
  .bento-feature { flex: none; width: 100%; padding: 24px; gap: 28px; }
  .bento-cards { flex: none; width: 100%; align-self: auto; }
  .card { padding: 24px; }
  .card-grow { flex: none; }

  /* services */
  .services { flex-direction: column; padding: 60px 25px; }
  .services-head { flex: none; width: 100%; max-width: none; }
  .services-list { flex: none; width: 100%; }
  .service-sticky { height: auto; }
  .service { flex-direction: column; padding: 24px; }
  .service-img { width: 100%; height: 108px; }
  .service-body { flex: none; width: 100%; height: auto; justify-content: center; gap: 18px; }

  /* steps */
  .skin-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .skin-row .h2, .skin-intro { flex: none; width: 100%; padding-bottom: 0; }
  .steps { flex-direction: column; gap: 28px; }
  .step { flex: none; width: 100%; }

  /* values */
  .testi-grid { flex-direction: column; }
  .testi { flex: none; width: 100%; padding: 24px; }

  /* event */
  .event { flex-direction: column; padding: 60px 25px; }
  .event-img { flex: none; width: 100%; max-width: none; height: 255px; aspect-ratio: auto; }
  .event-body { flex: none; width: 100%; align-self: auto; justify-content: flex-start; gap: 24px; }
  .event-details { flex-direction: column; align-items: flex-start; gap: 6px; }
  .event-cta { align-items: flex-start; justify-content: flex-start; }

  /* faq */
  .faq { flex-direction: column; padding: 50px 25px; }
  .faq-left { flex: none; width: 100%; max-width: none; }
  .faq-list { flex: none; width: 100%; }
  .acc { padding: 16px; }

  /* contact- en tarievenpagina */
  .intro-section { padding: 120px 25px 25px; }
  .intro-inner .h1 { font-size: 44px; }
  .contact { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 25px 25px; }
  .contact-info { flex: none; width: 100%; max-width: none; }
  .contact-form { flex: none; width: 100%; padding: 24px; }
  .info-card { padding: 24px; gap: 18px; }
  .form-row { flex-direction: column; gap: 10px; }
  .gallery { padding: 25px; gap: 36px; }
  .gallery-grid { flex-direction: column; gap: 50px; }
  .gallery-item { flex: none; width: 100%; }
  .page-hero.is-flush { padding-bottom: 0; }
  .page-hero.is-wide .page-hero-media { flex: none; order: 0; height: 233px; }
  .prices { flex-direction: column; align-items: stretch; gap: 24px; padding: 25px; }
  .price-side { position: static; flex: none; width: 100%; max-width: none; }
  .price-filters { flex-direction: row; flex-wrap: wrap; gap: 0 10px; }
  .filter-btn { min-height: 44px; }
  .price-list { flex: none; width: 100%; gap: 36px; }
  .price-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .price-name { flex: none; width: 100%; }

  /* behandelingen-pagina */
  .page-hero { flex-direction: column; align-items: stretch; gap: 24px; padding: 120px 25px 50px; }
  .page-hero-media { flex: none; order: -1; height: 155px; min-height: 0; }
  .page-hero-left { gap: 10px; }
  .page-hero-left .h1 { font-size: 44px; }
  .page-hero-buttons { flex-direction: column; align-items: flex-start; }
  .svc { padding: 0 25px 50px; }
  .svc-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  /* chat */
  .chat { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .chat-launch { width: 56px; min-height: 56px; padding: 0; justify-content: center; }
  .chat-launch-text { display: none; }
  .chat-launch .ic { width: 22px; height: 22px; }
  .chat-panel { width: calc(100vw - 32px); max-height: calc(100dvh - 100px); }

  /* footer */
  .footer-container { flex-direction: column; align-items: stretch; gap: 0; padding: 0 25px; }
  .footer-col-1 { padding: 110px 0 48px; gap: 44px; }
  .footer-brand { font-size: clamp(36px, 11.4vw, 46px); gap: 12px; }
  .footer-brand .brand-mark { height: 36px; }
  .footer-desc { max-width: 100%; }
  .footer-big { font-size: 28px; }
  .footer-col-2 { width: 100%; padding: 0 0 48px; gap: 48px; }
  .footer-cta-text { max-width: 300px; }
  .footer-navlink { font-size: 19px; padding: 10px 0; }
  .footer-navlink::after { bottom: 8px; }
  .footer-nav { gap: 0; }
  .footer-bar .footer-container > a { display: inline-flex; align-items: center; min-height: 44px; }
  .chat-close { width: 44px; height: 44px; margin-right: -10px; }
  .footer-bar .footer-container { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 100px 24px 25px; }
  .footer-bar-left { flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer-bar p, .footer-bar a { white-space: normal; font-size: 14px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .h-anim .w { opacity: 1; filter: none; transform: none; }
  .h-anim.in .w { animation: none; }
  .rot, .ul, .icon-wrap, .acc-icon, .acc, .burger-line, .acc-panel, .nav-panel, .nav-panel-inner, .link-line, .btn, .footer-navlink::after, .footer-cta-link, .chat-panel, .chat-launch, .chat-option { transition: none; }
  .link-line:hover::after { animation: none; }
}

/* ==========================================================================
   OVER-PAGINA + JURIDISCHE PAGINA'S  (Eclat /about en /legal stramien)
   ========================================================================== */
/* hero met brede liggende foto: links tekst, rechts beeld van 622x184 */
.page-hero.is-about { align-items: flex-start; gap: 36px; padding-bottom: 0; }
.page-hero.is-about .page-hero-left { flex: 1 0 0; justify-content: flex-start; }
.page-hero.is-about .page-hero-media { flex: 0 0 622px; height: 184px; min-height: 0; }

/* Maria: beeld links, verhaal rechts */
.bio { display: flex; align-items: flex-start; gap: 36px; padding: 80px; }
.bio-media { flex: 0 0 420px; height: 286px; border-radius: var(--radius-card); overflow: clip; }
.bio-media img { width: 100%; height: 100%; object-fit: cover; }
.bio-body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.bio-body .h2 { width: 100%; font-size: var(--display-l-narrow); }
.bio-role { font-size: 18px; line-height: 1.4; color: var(--dark-70); margin-top: -8px; }
.bio-body .p { max-width: 62ch; }
.bio-quote { font-family: var(--serif); font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; color: var(--dark); padding-left: 18px; box-shadow: inset 1px 0 0 var(--beige-line); }
.bio-facts { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.bio-fact { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--dark); }
.bio-fact .ic { flex: none; width: 24px; height: 24px; color: var(--dark); }

/* drie kaarten met beeld, rol en toelichting */
.gallery-role { font-size: 18px; line-height: 1.4; color: var(--dark-70); }
.gallery-item .link-line { margin-top: 4px; }

/* onderste band: salon, beeld, afspraak */
.band { display: flex; align-items: stretch; gap: 10px; padding: 0 80px 80px; }
.band-col { flex: 400 0 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 30px; background: #fff; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--hairline); }
.band-col:first-child { flex: 470 0 0; }
.band-col .p, .band-col .small { max-width: 34ch; }
.band-media { flex: 400 0 0; min-width: 0; min-height: 201px; border-radius: var(--radius-card); overflow: clip; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-cta .btn { align-self: flex-start; margin-top: 6px; }

/* juridische pagina's: één smalle leeskolom */
.legal { display: flex; justify-content: center; padding: 160px 80px 80px; }
.legal-inner { width: 100%; max-width: 650px; display: flex; flex-direction: column; align-items: flex-start; }
.legal-inner .h1 { width: 100%; font-size: var(--display-l); line-height: 1.05; margin-top: 10px; }
.legal-meta { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--dark-70); }
.legal-inner .h4 { margin-top: 40px; }
.legal-inner .p { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--dark-70); }
.legal-inner .p strong { color: var(--dark); font-weight: 500; }
.legal-inner a:not(.btn):not(.link-line) { color: var(--dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity 0.3s var(--ease-out); }
.legal-inner a:not(.btn):not(.link-line):hover { opacity: 0.6; }
.legal-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.legal-list li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.65; color: var(--dark-70); }
.legal-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: var(--dark-50); }
.legal-list li strong { color: var(--dark); font-weight: 500; }
.legal-box { width: 100%; margin-top: 48px; padding: 30px; background: var(--off-white); border-radius: var(--radius-card); }
.legal-box .h4 { margin-top: 0; }
.legal-box .p { margin-top: 12px; }
.legal-inner .small { margin-top: 24px; }
/* nog aan te leveren gegevens: zichtbaar, niet verzonnen */
.fill { display: inline-block; padding: 1px 8px; border-radius: 3px; background: var(--beige-20, #f4efe5); box-shadow: inset 0 0 0 1px var(--beige-line); color: var(--dark); font-size: 0.92em; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .page-hero.is-about { gap: 24px; }
  .page-hero.is-about .page-hero-media { flex: 0 0 442px; }
  .bio { gap: 24px; padding: 50px 40px; }
  .bio-media { flex: 0 0 402px; height: 392px; }
  .band { padding: 0 40px 50px; }
  .band-col { flex: 330 0 0; padding: 24px; }
  .band-col:first-child { flex: 330 0 0; }
  .band-media { flex: 220 0 0; }
  .legal { padding: 180px 40px 50px; }
  .legal-inner .h1 { font-size: 52px; }
}

@media (max-width: 809.98px) {
  .page-hero.is-about { flex-direction: column; align-items: stretch; gap: 24px; padding: 120px 25px 0; }
  .page-hero.is-about .page-hero-media { flex: none; order: 0; height: 318px; }
  .bio { flex-direction: column; align-items: stretch; gap: 24px; padding: 50px 25px; }
  .bio-media { flex: none; width: 100%; height: 318px; }
  .bio-body .p { max-width: none; }
  .bio-quote { font-size: 21px; }
  .gallery-grid-3 { flex-direction: column; gap: 50px; }
  .band { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 25px 50px; }
  .band-col, .band-col:first-child, .band-media { flex: none; width: 100%; padding: 24px; }
  .band-media { padding: 0; height: 201px; }
  .legal { padding: 120px 25px 50px; }
  .legal-inner .h1 { font-size: 44px; }
  .legal-inner .h4 { margin-top: 32px; }
  .legal-box { padding: 24px; }
}

/* taalwissel en juridische links */
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-item); box-shadow: inset 0 0 0 1px var(--hairline); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--dark); transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.lang-switch:hover { background: var(--dark); color: var(--cream); }
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
@media (max-width: 809.98px) {
  .nav-panel-inner .lang-switch { align-self: center; }
  .footer-legal { gap: 16px 20px; }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* tabbladen op de contactpagina (bericht / online agenda) */
.tabs { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.tablist { display: flex; align-items: center; gap: 28px; box-shadow: inset 0 -1px 0 var(--hairline); }
.tab { position: relative; min-height: 44px; padding: 0 0 12px; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--dark-50); white-space: nowrap; cursor: pointer; transition: color 0.3s var(--ease-out); }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--dark); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.4s var(--ease-out); }
.tab:hover { color: var(--dark-70); }
.tab.is-active { color: var(--dark); }
.tab.is-active::after { transform: none; }
.tab:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
.tabpanel[hidden] { display: none; }

/* keuzelijst in het formulier, zelfde maat als de invoervelden */
.field select {
  width: 100%; height: 40px; padding: 0 36px 0 12px; -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%231f2021' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 18px 18px;
  border: 0; border-radius: var(--radius-item); box-shadow: inset 0 0 0 1px var(--hairline);
  font: inherit; font-size: 16px; color: var(--dark); outline: none; cursor: pointer; transition: box-shadow 0.3s var(--ease-out);
}
.field select:focus { box-shadow: inset 0 0 0 1px var(--dark); }
.form-status { font-size: 14px; line-height: 1.5; color: var(--dark); }
.form-status[hidden] { display: none; }
.form-note a { color: var(--dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* online agenda */
.booking { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.booking .btn-primary { align-self: stretch; justify-content: space-between; }
.booking-alt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; margin-top: 4px; }
.booking-alt .btn-white { align-self: stretch; justify-content: space-between; }
.booking-frame { width: 100%; border-radius: var(--radius-item); overflow: clip; box-shadow: inset 0 0 0 1px var(--hairline); background: #fff; }
.booking-frame iframe { display: block; width: 100%; height: 680px; border: 0; }
.booking-frame[hidden] { display: none; }
.booking .small a { color: var(--dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 809.98px) {
  .tablist { gap: 20px; }
  .booking-frame iframe { height: 560px; }
}

/* Engelstalige juridische pagina's: welke taal leidend is */
.legal-prevails { width: 100%; margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-item); background: var(--off-white); font-size: 14px; line-height: 1.55; color: var(--dark-70); }