/* =============================================================================
   Linda  ·  Stylesheet
   -----------------------------------------------------------------------------
   Designconcept: licht en zacht. Bijna-wit met een roze zweem als basis, zacht
   oudroze voor de vlakken en banden, bladgoud als accent (het beeldmerk) en een
   warm donkerbruin voor tekst en knoppen. De gouden ring uit het logo komt
   terug in de hero en als accent door de hele pagina.

   Opbouw:
   1. Designtokens   4. Header/nav   7. Boekingssysteem
   2. Basis & type   5. Knoppen      8. Producten / contact / footer
   3. Toegankelijk   6. Hero/secties 9. Mobiele actiebalk  10. Responsive
   ========================================================================== */

/* -------------------- 1. DESIGNTOKENS -------------------- */
:root {
  /* Roze en goud uit het logo, maar dan licht: het roze is opgehelderd zodat
     het als zacht vlak werkt op een bijna-witte pagina.
     De namen --caramel / --honey / --champagne blijven staan omdat ze door de
     hele stylesheet gebruikt worden. */
  --root:        #4a3733;   /* warm donkerbruin — koppen, knoppen, tekstaccent */
  --cocoa:       #6d5049;
  --rose:        #f3d9d2;   /* zacht roze vlak */
  --rose-mid:    #e5bbb0;   /* iets dieper roze */
  --rose-deep:   #c08a7c;   /* roze accentlijn / rand */
  --caramel:     #c9a45c;   /* bladgoud */
  --caramel-deep:#8a6526;   /* donker genoeg voor accenttekst op licht */
  --honey:       #d8b06b;   /* licht goud */
  --champagne:   #ecd6ae;   /* zacht goud */
  --ash:         #b9a49a;   /* gedempte tegenhanger */
  --sage:        #5f7350;   /* zachte groen voor "succes" (bevestiging) */

  --paper:       #fffbfa;    /* bijna wit, met een roze zweem (achtergrond) */
  --paper-2:     #fdf1ee;    /* zacht roze voor afwisselende secties */
  --blush:       #f8e2dc;    /* dieper roze: de boekingsband */

  /* Donkere ankers onderaan de pagina (oproep + footer). Ze geven de pagina
     gewicht en laten het creme beeldmerk en het bladgoud tot hun recht komen. */
  --espresso:    #2e211d;
  --espresso-2:  #3b2b26;
  --ink:         #493733;    /* bodytekst */
  --ink-soft:    #7d635c;    /* gedempte tekst */
  --cream:       #fffdfc;    /* tekst op de donkere knoppen */
  --line:        #f0ddd7;
  --line-soft:   #e8cfc8;    /* lijn op de roze banden */
  --white:       #ffffff;

  --maxw: 1180px;
  --radius: 22px;
  --radius-sm: 13px;
  --shadow-lg: 0 40px 80px -40px rgba(59, 38, 32, .48);
  --shadow:    0 22px 50px -30px rgba(59, 38, 32, .40);
  --shadow-sm: 0 10px 26px -18px rgba(59, 38, 32, .36);

  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* 2026 refresh — rustiger, lichter en met minder decoratieve lagen. */

/* -------------------- 2. BASIS & TYPOGRAFIE -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Ankers stoppen netjes onder de plakkende koptekst */
section[id], [id]:target { scroll-margin-top: clamp(96px, 13vh, 132px); }

body {
  margin: 0;
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  overflow-x: clip; /* vangt eventuele kleine horizontale overloop op kleine schermen */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--root);
  margin: 0 0 .4em;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.9rem, 6.2vw, 4.7rem); font-weight: 400; letter-spacing: -.025em; }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -.02em; }
h3 { font-size: 1.5rem; }
h1, h2 { text-wrap: balance; }

/* Kleine bovenkop boven een sectietitel: een kaal label in het "data"-
   lettertype, hetzelfde als waarin tijden en prijzen staan. Geen streepje
   ervoor — de letterspatiering doet het werk. */
.eyebrow {
  margin: 0 0 .8rem;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--caramel-deep);
}

p { margin: 0 0 1rem; }
a { color: var(--caramel-deep); text-underline-offset: 3px; }

/* Korrel-overlay voor een tactiele, ambachtelijke uitstraling */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------- 3. TOEGANKELIJKHEID -------------------- */
.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;
}
.skip-link {
  position: absolute; left: 1rem; top: -3.5rem; z-index: 1000;
  background: var(--root); color: var(--cream);
  padding: .75rem 1.2rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* Duidelijke focusindicator (caramel op licht, champagne op donker) */
:focus-visible { outline: 3px solid var(--caramel-deep); outline-offset: 2px; border-radius: 4px; }
.section-booking :focus-visible,
.site-footer :focus-visible { outline-color: var(--caramel-deep); }

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

/* Scroll-onthulling — alleen actief als JS de klasse 'reveal-on' zet én de
   gebruiker geen 'verminderde beweging' heeft. Zonder JS blijft alles zichtbaar. */
.reveal-on .reveal { opacity: 0; transform: translateY(20px); }
.reveal-on .reveal.is-visible {
  opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease;
}

/* -------------------- 4. HEADER / NAV -------------------- */
.container {
  width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto;
  position: relative; z-index: 2;
}
@media (max-width: 420px) { .container { width: min(100% - 1.75rem, var(--maxw)); } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s;
}
.site-header.scrolled { box-shadow: 0 12px 34px -22px rgba(34, 25, 19, .45); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; line-height: 1; }
.brand-text { display: flex; flex-direction: column; }
/* Het beeldmerk is zwart lijnwerk op een doorzichtige achtergrond, dus het
   staat vrij op de pagina — geen kader of vlak eromheen. */
.brand-logo {
  width: clamp(62px, 6.4vw, 88px); height: auto; flex: none; margin-block: -.45rem;
  transition: width .25s ease;
}
.brand-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 3.05rem); line-height: .95; letter-spacing: -.022em;
  color: var(--root); transition: font-size .25s ease;
}
/* Bij het scrollen krimpt het merk een slag, zodat de balk smal blijft */
.site-header.scrolled .brand-logo { width: clamp(52px, 4.6vw, 64px); }
.site-header.scrolled .brand-name { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
/* De maten voor telefoons staan bij elkaar in hoofdstuk 10 (Responsive). */

.primary-nav ul { list-style: none; display: flex; gap: .35rem; margin: 0; padding: 0; align-items: center; }
.primary-nav a {
  text-decoration: none; color: var(--ink-soft); font-size: .95rem;
  padding: .5rem .85rem; border-radius: 100px;
  transition: color .2s, background .2s;
}
.primary-nav a:hover { color: var(--root); background: color-mix(in srgb, var(--rose) 55%, transparent); }
/* De sectie waar je nu bent, krijgt een klein gouden stipje eronder. */
.primary-nav a.is-current { color: var(--root); }
.primary-nav a { position: relative; }
.primary-nav a.is-current:not(.nav-cta)::after {
  content: ""; position: absolute; left: 50%; bottom: .2rem; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--caramel);
}
.nav-cta {
  background: var(--root); color: var(--cream) !important;
  padding: .62rem 1.35rem !important; border-radius: 100px;
  margin-left: .7rem; transition: background .2s, transform .15s;
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta:hover { background: var(--caramel-deep); }

.nav-toggle {
  display: none; position: relative; width: 46px; height: 46px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: ""; position: absolute; left: 50%; width: 22px; height: 2px;
  background: var(--root); transition: .25s; transform: translateX(-50%);
}
.nav-toggle-bar { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle-bar::before { top: -7px; } .nav-toggle-bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* -------------------- 5. KNOPPEN -------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 400;
  padding: .9rem 1.7rem; min-height: 48px; border-radius: 100px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s;
}
/* Op aanraakschermen geen zwevende hover-staat die blijft "plakken" */
@media (hover: none) { .btn:hover { transform: none; } }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--root); color: var(--cream); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--caramel-deep); }
.btn-primary:disabled { background: var(--line); color: var(--ink-soft); cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--root); border-color: var(--root); }
.btn-ghost:hover { background: var(--root); color: var(--cream); }
/* Knop op de donkere band — omgekeerd contrast t.o.v. de band zelf */
.btn-light { background: var(--cream); color: var(--espresso); box-shadow: var(--shadow); }
.btn-light:hover { background: var(--champagne); }

/* -------------------- 6. HERO & SECTIES -------------------- */
.section { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; z-index: 2; }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-lead { color: var(--ink-soft); font-size: clamp(1.05rem, 1.4vw, 1.15rem); max-width: 54ch; margin-bottom: 0; text-wrap: pretty; }
.section-services .section-head .section-lead,
.section-booking .section-head .section-lead { margin-inline: auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

/* HERO */
.hero {
  position: relative; overflow: hidden; min-height: min(86svh, 860px); display: grid; align-items: center;
  background:
    radial-gradient(95% 80% at 88% 8%, color-mix(in srgb, var(--rose) 80%, transparent) 0%, transparent 58%),
    linear-gradient(170deg, color-mix(in srgb, var(--rose) 40%, var(--paper)) 0%, var(--paper) 55%);
}
.hero-inner {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(3.5rem, 9vw, 7rem);
}
.hero h1 { margin-top: .2em; }
.hero h1::first-letter { color: var(--caramel-deep); }
.hero-text { font-size: clamp(1.1rem, 1.35vw, 1.28rem); color: var(--ink-soft); max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }

/* Praktische regel onder de knoppen: is de salon vandaag open, en het nummer. */
.hero-meta {
  display: flex; flex-wrap: wrap; gap: .9rem 2.6rem; max-width: 30rem;
  margin: 2.6rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
}
.hero-meta dt {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem;
}
.hero-meta dd {
  margin: 0; font-family: var(--font-mono); font-size: 1rem; color: var(--root);
  display: flex; align-items: center; gap: .5rem;
}
.hero-meta dd a { color: var(--root); text-decoration: none; }
.hero-meta dd a:hover { color: var(--caramel-deep); }
/* Stip: groen als het vandaag open is, gedempt als het dicht is. */
.hero-meta dd.is-open::before,
.hero-meta dd.is-closed::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage);
}
.hero-meta dd.is-closed::before { background: var(--ash); }

.hero-art {
  position: relative; display: grid; place-items: center; padding: .5rem;
  background:
    radial-gradient(58% 58% at 70% 26%, color-mix(in srgb, var(--rose-mid) 42%, transparent), transparent 70%),
    radial-gradient(48% 48% at 24% 76%, color-mix(in srgb, var(--champagne) 30%, transparent), transparent 72%);
}
/* Echte foto in een elegant boog-frame */
.hero-photo {
  position: relative; z-index: 1; margin: 0; width: 100%; max-width: 430px;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: clamp(110px, 26vw, 215px) clamp(110px, 26vw, 215px) 20px 20px;
  box-shadow: var(--shadow-lg);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo::after { /* warme waas + diepte, zodat de foto in het palet valt */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--root) 28%, transparent)),
    color-mix(in srgb, var(--caramel) 8%, transparent);
}
/* Gouden ring + blaadjes uit het logo, als accent achter de foto */
.hero-ring {
  position: absolute; z-index: 0; width: 118%; left: -22%; top: -4%;
  filter: drop-shadow(0 18px 34px rgba(59, 38, 32, .14));
}

/* Inkleur-animatie van de penseelstreek (uit bij "verminderde beweging") */
@media (prefers-reduced-motion: no-preference) {
  .hero-ring circle { stroke-dasharray: 1290; stroke-dashoffset: 1290;
    animation: paint 1.9s cubic-bezier(.22,.61,.36,1) .15s forwards; }
  .hero-ring circle:last-of-type { animation-delay: .45s; }
  .hero-copy > * { opacity: 0; animation: rise .8s ease forwards; }
  .hero-copy > :nth-child(1) { animation-delay: .05s; }
  .hero-copy > :nth-child(2) { animation-delay: .15s; }
  .hero-copy > :nth-child(3) { animation-delay: .27s; }
  .hero-copy > :nth-child(4) { animation-delay: .39s; }
}
@keyframes paint { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* OVER — echte foto in een afgerond frame */
.section-about { background: var(--paper); }
.about-art {
  aspect-ratio: 4 / 5; max-height: 34rem; box-shadow: var(--shadow-lg);
  border-radius: clamp(90px, 16vw, 170px) clamp(90px, 16vw, 170px) var(--radius) var(--radius);
  position: relative; overflow: hidden; margin: 0;
}
.about-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-art::after { /* warme waas zodat de foto in het palet valt */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--root) 22%, transparent)),
    color-mix(in srgb, var(--caramel) 7%, transparent);
}

/* DIENSTEN */
.section-services { background: var(--paper-2); }
/* De prijslijst staat gecentreerd, dus de kop erboven ook */
.section-services .section-head { margin-inline: auto; text-align: center; }

/* De prijslijst: oudroze met bladgoud, zoals de kaart in de salon */
.pricelist { max-width: 660px; margin-inline: auto; }
.pricelist-card {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.4rem, 5vw, 3.2rem) clamp(1.8rem, 4vw, 2.6rem);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--white) 80%, transparent), transparent 58%),
    linear-gradient(168deg, color-mix(in srgb, var(--rose) 45%, var(--white)), var(--rose-mid));
  border: 1px solid var(--line);
  color: var(--ink);
}
/* Fijne gouden binnenlijn, net als op de gedrukte kaart */
.pricelist-card::before {
  content: ""; position: absolute; inset: 10px; border-radius: calc(var(--radius) - 8px);
  border: 1px solid var(--caramel);
  opacity: .8; pointer-events: none;
}
.pricelist-logo { width: 128px; height: 128px; margin: 0 auto .4rem; }
.pricelist-brand {
  font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.2rem); font-weight: 400;
  letter-spacing: .3em; text-indent: .3em; margin: 0; color: var(--root);
}
.pricelist-title {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 400;
  letter-spacing: .22em; text-indent: .22em; color: var(--caramel-deep);
  margin: 1.3rem 0 1.8rem; padding-top: 1.3rem;
  border-top: 1px solid color-mix(in srgb, var(--champagne) 55%, transparent);
}
.pricelist-title span { color: color-mix(in srgb, var(--caramel-deep) 65%, transparent); }

.pl-group { text-align: left; margin-bottom: 2rem; }
.pl-group:last-child { margin-bottom: 0; }
.pl-cat {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--root);
  margin: 0 0 .2rem; padding-bottom: .5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--champagne) 55%, transparent);
}
.pl-leaf { flex: none; color: color-mix(in srgb, var(--champagne) 75%, var(--caramel-deep)); }
.pl-items { list-style: none; margin: 0; padding: 0; }
.pl-items li {
  padding: .7rem 0 .65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--root) 9%, transparent);
}
.pl-items li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Bovenste regel: naam · stippellijn · prijs */
.pl-row { display: flex; align-items: baseline; gap: .5rem; }
.pl-name { flex: none; font-size: 1.05rem; }
.pl-dots {
  flex: 1 1 auto; min-width: 1.5rem; align-self: center;
  border-bottom: 1px dotted color-mix(in srgb, var(--root) 40%, transparent);
  transform: translateY(-.15em);
}
.pl-price {
  flex: none; font-family: var(--font-mono); font-size: 1.02rem; font-weight: 500;
  white-space: nowrap; color: var(--root);
}
/* Tweede regel: duur, en bij kleuren hoeveel daarvan inwerktijd is */
.pl-meta {
  display: block; margin-top: .1rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .03em;
  color: color-mix(in srgb, var(--root) 85%, transparent);
}
.pl-badge {
  display: inline-block; margin-left: .6rem; vertical-align: middle;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .16rem .55rem; border-radius: 100px;
  background: color-mix(in srgb, var(--champagne) 85%, transparent); color: var(--root);
}
.pricelist-tagline {
  margin: 1.8rem 0 0; padding-top: 1.2rem; font-size: 1rem; font-style: italic;
  border-top: 1px solid color-mix(in srgb, var(--champagne) 45%, transparent);
  color: color-mix(in srgb, var(--root) 88%, transparent);
}


/* "30 min inwerktijd" — het blok waarin de kapster iemand anders kan helpen */
.opt-note {
  display: inline-block; padding: .1rem .5rem; border-radius: 100px;
  background: color-mix(in srgb, var(--rose-mid) 42%, transparent);
  color: var(--cocoa); font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .04em; white-space: nowrap;
}
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; background: var(--honey); color: var(--root);
  padding: .18rem .6rem; border-radius: 100px; margin-left: .7rem; vertical-align: middle;
}

/* -------------------- 7. BOEKINGSSYSTEEM -------------------- */
.section-booking { background: var(--blush); color: var(--ink); }
.section-booking .section-head { margin-inline: auto; text-align: center; }
.section-booking .section-lead { color: var(--ink-soft); }

.booking-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: clamp(1.6rem, 4vw, 2.8rem); max-width: 980px; margin-inline: auto; color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem); align-items: start;
}
.booking-flow { min-width: 0; }

/* Live samenvatting (rechterkolom; plakt mee tijdens het scrollen) */
.aside-card {
  position: sticky; top: 92px;
  background: linear-gradient(165deg, var(--white), color-mix(in srgb, var(--rose) 70%, var(--white)));
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.5rem 1.6rem;
}
.aside-title { font-family: var(--font-display); font-size: 1.45rem; margin-bottom: 1.1rem; color: var(--root); }
.live-summary dl { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; margin: 0; }
.live-summary dt { color: var(--ink-soft); font-size: .9rem; }
.live-summary dd { margin: 0; text-align: right; font-weight: 500; font-family: var(--font-mono); font-size: .9rem; }
.live-summary dd.is-empty { color: var(--line); font-weight: 400; }
.live-summary .sum-total { border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .4rem; font-size: 1.1rem; }
/* Het faseverloop past hier in een smallere kolom */
.live-summary .phase-list { font-size: .82rem; margin-top: .9rem; padding-top: .8rem; }
.live-summary .phase-list li { grid-template-columns: 3.2rem 1fr; gap: .15rem .5rem; }
.live-summary .phase-list .ph-dur { grid-column: 2; font-size: .72rem; }
.live-summary .phase-list .ph-free .ph-label::after { content: ", kapster vrij"; font-size: .72rem; }
.live-summary dd.sum-total { color: var(--root); }
.aside-note { color: var(--ink-soft); font-size: .8rem; line-height: 1.5; margin: 1.2rem 0 0; }

/* Stappenbalk: genummerde cirkels met verbindingslijn en vinkjes */
.booking-steps { display: flex; list-style: none; margin: 0 0 2.4rem; padding: 0; counter-reset: step; }
.booking-steps li {
  flex: 1; position: relative; text-align: center; counter-increment: step; padding-top: 48px;
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft);
}
.booking-steps li::before { /* genummerde cirkel */
  content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  background: var(--white); border: 2px solid var(--line); color: var(--ink-soft);
  font-size: .92rem; transition: background .2s, border-color .2s, color .2s;
}
.booking-steps li::after { /* lijn naar de volgende stap */
  content: ""; position: absolute; top: 18px; left: 50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.booking-steps li:last-child::after { display: none; }
.booking-steps li.is-active { color: var(--root); }
.booking-steps li.is-active::before { border-color: var(--root); background: var(--root); color: var(--cream); }
.booking-steps li.is-done { color: var(--caramel-deep); }
.booking-steps li.is-done::before { content: "✓"; border-color: var(--caramel); background: var(--caramel); color: var(--white); }
.booking-steps li.is-done::after { background: var(--caramel); }

/* Zachte overgang wanneer een nieuwe stap verschijnt */
@media (prefers-reduced-motion: no-preference) {
  .booking-step.is-active { animation: stepIn .32s ease; }
}
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.booking-step { border: 0; padding: 0; margin: 0; min-inline-size: auto; }
.booking-step[hidden] { display: none; }
.step-title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; padding: 0; margin-bottom: 1.3rem; color: var(--root); }
.step-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; }

/* Korte uitleg onder een staptitel */
.step-help { margin: -.5rem 0 1.5rem; color: var(--ink-soft); font-size: .92rem; max-width: 54ch; }

/* Keuze-opties (stap 1: behandelingen, gegroepeerd per categorie) */
.option-grid { display: flex; flex-direction: column; gap: .6rem; }
.svc-group-label {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--caramel-deep); margin: 1.1rem 0 0;
}
.svc-group-label:first-child { margin-top: 0; }

.option-card {
  display: flex; align-items: center; gap: 1rem;
  text-align: left; width: 100%; padding: 1.05rem 1.25rem;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.option-card::before { /* selectie-indicator (wordt een vinkje bij keuze) */
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--white);
  display: grid; place-items: center; font-size: 13px; line-height: 1; color: transparent;
  transition: border-color .15s, background .15s;
}
.option-card:hover { border-color: var(--honey); transform: translateY(-1px); }
.option-card[aria-checked="true"] {
  border-color: var(--root); background: color-mix(in srgb, var(--rose) 55%, var(--white));
  box-shadow: var(--shadow-sm);
}
.option-card[aria-checked="true"]::before {
  content: "\2713"; border-color: var(--root); background: var(--root); color: var(--white);
}
.opt-main { flex: 1; min-width: 0; }
.opt-title { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-weight: 500; font-size: 1.1rem; }
.opt-desc { color: var(--ink-soft); font-size: .9rem; margin-top: .2rem; }
.opt-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; text-align: right; }
.opt-price { font-family: var(--font-mono); font-weight: 500; font-size: 1.08rem; color: var(--root); }
.opt-dur { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.opt-clock { flex: none; opacity: .8; }

/* Datum — maandkalender */
.date-picker { max-width: 420px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.1rem; }
.cal-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; margin: 0; color: var(--root); }
.cal-nav {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--white); color: var(--root); font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: border-color .15s, background .15s;
}
.cal-nav:hover:not(:disabled) { border-color: var(--root); background: var(--paper); }
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.cal-grid { display: grid; gap: .4rem; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.cal-weekdays { margin-bottom: .3rem; }
.cal-wd { text-align: center; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.cal-day {
  aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 0;
  border: 2px solid transparent; border-radius: 50%; background: var(--paper);
  font-family: var(--font-mono); font-size: .95rem; color: var(--ink); cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.cal-day:hover:not(.is-disabled):not(.is-selected) { border-color: var(--honey); }
.cal-day.is-today:not(.is-selected) { box-shadow: inset 0 0 0 2px var(--honey); font-weight: 500; }
.cal-day.is-selected { background: var(--root); border-color: var(--root); color: var(--cream); }
.cal-day.is-disabled { background: transparent; color: color-mix(in srgb, var(--ink-soft) 42%, transparent); cursor: not-allowed; }
.cal-day.cal-empty { background: transparent; border: 0; cursor: default; }

/* Tijd — gegroepeerd per dagdeel (Ochtend / Middag / Avond) */
.slot-picker { display: flex; flex-direction: column; gap: 1.1rem; }
.slot-group .svc-group-label { margin: 0 0 .6rem; }
.slot-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: .55rem; }
.slot-btn {
  padding: .8rem .4rem; background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; font-family: var(--font-mono); font-size: .95rem; color: var(--ink);
  text-align: center; transition: border-color .15s, background .15s, color .15s, transform .12s;
}
.slot-btn:hover:not([aria-checked="true"]) { border-color: var(--honey); transform: translateY(-1px); }
.slot-btn[aria-checked="true"] { border-color: var(--root); background: var(--root); color: var(--cream); font-weight: 500; }

/* Tijden die in de inwerktijd van een andere afspraak vallen */
.slot-btn.is-gap { border-style: dashed; border-color: var(--rose-deep); background: color-mix(in srgb, var(--rose) 60%, var(--white)); }
.slot-btn.is-gap[aria-checked="true"] {
  border-style: solid; border-color: var(--root);
  background: var(--root); color: var(--cream);
}
.slot-flag {
  display: block; margin-top: .2rem; font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cocoa); opacity: .8;
}
.slot-btn[aria-checked="true"] .slot-flag { color: var(--champagne); opacity: 1; }
.slots-status { color: var(--ink-soft); margin-bottom: 1.2rem; font-size: .95rem; }

/* Samenvatting & formulier */
.summary-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.15rem 1.35rem; margin-bottom: 1.6rem; }
.summary-box dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 0; }
.summary-box dt { color: var(--ink-soft); }
.summary-box dd { margin: 0; font-weight: 500; font-family: var(--font-mono); font-size: .95rem; }
.summary-box .sum-total { border-top: 1px dashed var(--line); padding-top: .55rem; margin-top: .3rem; }

/* Verloop van de afspraak: inzetten -> inwerken -> uitspoelen */
.phase-list { list-style: none; margin: 1.1rem 0 0; padding: .9rem 0 0; border-top: 1px dashed var(--line); display: grid; gap: .35rem; }
.phase-list li { display: grid; grid-template-columns: 4.2rem 1fr auto; align-items: baseline; gap: .6rem; font-size: .9rem; }
.phase-list .ph-time { font-family: var(--font-mono); color: var(--caramel-deep); }
.phase-list .ph-dur { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); }
/* De inwerktijd: de kapster is dan vrij voor iemand anders */
.phase-list .ph-free { color: var(--ink-soft); font-style: italic; }
.phase-list .ph-free .ph-label::after { content: ", kapster vrij"; font-style: normal; font-size: .78rem; opacity: .75; }
.sum-note { margin: .9rem 0 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.55; }
.appt-card .phase-list { margin-top: .9rem; padding-top: .9rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.form-row { margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.form-row label { font-size: .95rem; }
.form-row input, .form-row textarea {
  font: inherit; padding: .8rem .95rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--caramel-deep); }
.form-row input[aria-invalid="true"], .form-row textarea[aria-invalid="true"] { border-color: #b3261e; }
.field-error { color: #b3261e; font-size: .85rem; margin: 0; }

/* Bevestiging */
.booking-card.is-confirmed { grid-template-columns: 1fr; }
.booking-card.is-confirmed .booking-aside { display: none; }
.booking-confirm { text-align: center; padding: 1.5rem 0; max-width: 480px; margin-inline: auto; }
.booking-confirm h3 { color: var(--root); font-size: clamp(1.7rem, 4vw, 2.1rem); margin-bottom: .3rem; }
.confirm-sub { color: var(--ink-soft); margin-bottom: 1.7rem; }

/* Succes-badge met animatie (uit bij 'verminderde beweging') */
.confirm-badge { position: relative; width: 96px; height: 96px; margin: 0 auto 1.4rem; display: grid; place-items: center; }
.confirm-ring { position: absolute; width: 96px; height: 96px; border-radius: 50%; background: color-mix(in srgb, var(--sage) 30%, transparent); }
.confirm-tick { position: relative; width: 76px; height: 76px; filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--sage) 45%, transparent)); }
.confirm-tick .ct-circle { fill: var(--sage); }
.confirm-tick .ct-path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .confirm-ring { animation: ringPulse 1.3s ease-out .15s both; }
  .confirm-tick .ct-circle { transform-origin: center; animation: tickPop .45s cubic-bezier(.18,.9,.32,1.2) both; }
  .confirm-tick .ct-path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: tickDraw .45s ease .32s forwards; }
}
@keyframes ringPulse { 0% { transform: scale(.55); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes tickPop { 0% { transform: scale(0); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes tickDraw { to { stroke-dashoffset: 0; } }

/* Afspraakkaart (ticket) */
.appt-card {
  text-align: left; margin-bottom: 1.6rem; padding: 1.4rem 1.5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--white), color-mix(in srgb, var(--rose) 62%, var(--white)));
}
.appt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; }
.appt-ref { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--ink-soft); }
.appt-badge {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--sage); color: #fff; padding: .22rem .65rem; border-radius: 100px;
}
.appt-when {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--root); margin: 0 0 1rem;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; line-height: 1.1;
}
.appt-when span { font-family: var(--font-mono); font-size: 1rem; color: var(--caramel-deep); }
.appt-rows { display: grid; gap: .65rem; margin: 0; border-top: 1px dashed var(--line); padding-top: 1rem; }
.appt-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.appt-rows dt { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--ink-soft); font-size: .92rem; }
.appt-rows dd { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: .95rem; color: var(--root); }
.appt-icon { flex: none; color: var(--caramel-deep); }

.confirm-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.confirm-note { color: var(--ink-soft); font-size: .82rem; max-width: 440px; margin: 1.5rem auto 0; line-height: 1.55; }

/* Mijn afspraken (op de donkere band) */
.my-bookings { max-width: 800px; margin: 2.8rem auto 0; }
.my-bookings h3 { color: var(--root); }
.my-bookings-note { color: var(--ink-soft); font-size: .9rem; }
.my-bookings ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.my-bookings li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .95rem 1.25rem; color: var(--ink);
}
.my-bookings .mb-info { font-size: .95rem; }
.my-bookings .mb-info strong { font-weight: 500; }
.btn-cancel {
  background: none; border: 1.5px solid var(--line); color: var(--ink-soft);
  padding: .42rem .95rem; border-radius: 100px; cursor: pointer; font: inherit; font-size: .85rem; transition: .15s;
}
.btn-cancel:hover { border-color: #b3261e; color: #b3261e; }

/* -------------------- 8. PRODUCTEN / CONTACT / FOOTER -------------------- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.6rem; }
.product-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-thumb { aspect-ratio: 1 / 1; background-size: cover; background-position: center; position: relative; }
/* Warme waas over de foto's, zodat de productreeks samenhangend oogt */
.product-thumb::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--root) 16%, transparent)),
    color-mix(in srgb, var(--caramel) 6%, transparent);
}
/* Vier tonale "niveaus" (van blond naar bruin) als nette placeholders */
.product-thumb.placeholder { background: linear-gradient(160deg, var(--honey), var(--caramel)); }
.product-card:nth-child(1) .product-thumb.placeholder { background: linear-gradient(160deg, var(--champagne), var(--honey)); }
.product-card:nth-child(2) .product-thumb.placeholder { background: linear-gradient(160deg, var(--honey), var(--caramel)); }
.product-card:nth-child(3) .product-thumb.placeholder { background: linear-gradient(160deg, var(--caramel), var(--cocoa)); }
.product-card:nth-child(4) .product-thumb.placeholder { background: linear-gradient(160deg, var(--cocoa), var(--root)); }
.product-thumb.placeholder::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(62% 50% at 30% 24%, rgba(255,255,255,.4), transparent 60%);
}
.product-body { padding: 1.2rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.product-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; }
.product-desc { color: var(--ink-soft); font-size: .92rem; flex: 1; }
.product-price { font-family: var(--font-mono); font-weight: 500; font-size: 1.05rem; margin-top: .5rem; color: var(--root); }

.section-products { background: var(--paper); }

.section-contact { background: var(--paper-2); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2rem); }
.contact-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--shadow-sm);
}
.contact-card-title {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--caramel-deep); margin: 0 0 1.3rem;
}
.contact-details { font-style: normal; color: var(--ink-soft); }
.contact-details p:last-child { margin-bottom: 0; }
.contact-details strong { color: var(--root); font-weight: 500; }
.contact-details a { color: var(--caramel-deep); }
.socials { display: flex; gap: 1.3rem; flex-wrap: wrap; }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: .72rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table td:last-child { text-align: right; font-family: var(--font-mono); font-size: .92rem; }
.hours-table tr.today td { color: var(--root); font-weight: 500; }
.hours-today {
  display: inline-block; margin-left: .6rem; vertical-align: middle;
  font-family: var(--font-mono); font-size: .56rem; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; padding: .16rem .55rem; border-radius: 100px;
  background: var(--champagne); color: var(--root);
}
.hours-closed { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }

/* CTA-BAND + FOOTER — een donker blok dat de pagina afsluit. Hier komt het
   creme beeldmerk terug en is bladgoud de accentkleur. */
.cta-band {
  position: relative; z-index: 2; overflow: hidden;
  background: linear-gradient(150deg, var(--espresso-2), var(--espresso) 62%);
  color: var(--cream);
}
.cta-band::before { /* de ring uit de hero, hier heel groot en heel zacht */
  content: ""; position: absolute; z-index: 0;
  width: 720px; height: 720px; right: -260px; top: -300px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--caramel) 26%, transparent);
  box-shadow: inset 0 0 0 20px color-mix(in srgb, var(--caramel) 5%, transparent);
  pointer-events: none;
}
.cta-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.cta-band h2 { color: var(--cream); margin-bottom: .5rem; }
.cta-copy { flex: 1 1 34rem; min-width: min(100%, 20rem); max-width: 38rem; }
.cta-text { color: color-mix(in srgb, var(--cream) 72%, transparent); margin: 0; }
.cta-band .btn { flex: none; }
.cta-band :focus-visible { outline-color: var(--champagne); }

/* Footer — meerdere kolommen, in hetzelfde donkere blok */
.site-footer {
  background: var(--espresso); color: color-mix(in srgb, var(--cream) 72%, transparent);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; position: relative; z-index: 2;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.footer-logo { width: clamp(104px, 16vw, 140px); height: auto; margin-bottom: .9rem; }
.footer-name {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1; margin: 0; color: var(--cream);
}
.footer-tag { margin: .75rem 0 1.2rem; max-width: 32ch; font-style: italic; }
.footer-col h3 {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--champagne); margin: 0 0 1.2rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-col a, .footer-contact a { color: inherit; text-decoration: none; }
.footer-col a:hover, .footer-contact a:hover { color: var(--champagne); }
.footer-contact { font-style: normal; line-height: 2; }
.site-footer .socials a { color: var(--champagne); }
.site-footer :focus-visible { outline-color: var(--champagne); }
.footer-bottom {
  margin-top: clamp(2.2rem, 4vw, 3.2rem); padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
}
.site-footer .footer-meta {
  color: color-mix(in srgb, var(--cream) 45%, transparent);
  font-family: var(--font-mono); font-size: .74rem; margin: 0;
}

/* -------------------- 9. MOBIELE ACTIEBALK -------------------- */
/* Vaste balk onderaan het scherm op telefoons: bellen of meteen boeken.
   Hij schuift omhoog zodra je voorbij de hero bent (main.js zet .is-visible)
   en verdwijnt weer als je in het boekingsformulier zelf zit. */
.mobile-bar {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  display: none; gap: .55rem; align-items: stretch;
  padding: .55rem .9rem calc(.55rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 34px -26px rgba(34, 25, 19, .5);
  transform: translateY(115%); transition: transform .3s ease;
}
.mobile-bar.is-visible { transform: none; }
.mobile-bar a {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; border-radius: 100px; text-decoration: none;
  font-family: var(--font-body); font-size: 1rem; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.mobile-bar .mb-call {
  flex: none; padding-inline: 1.25rem;
  border: 1.5px solid var(--line-soft); background: var(--white); color: var(--root);
}
.mobile-bar .mb-book { flex: 1; background: var(--root); color: var(--cream); }
.mobile-bar svg { flex: none; }

/* -------------------- 10. RESPONSIVE -------------------- */

/* ---- Vanaf hier staat de hero onder elkaar ---- */
@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: clamp(1.8rem, 5vw, 3rem); padding-block: clamp(2.5rem, 7vw, 5rem); }
  .hero-art { order: -1; width: 100%; max-width: 420px; margin-inline: auto; }
  /* De ring wordt hier een dunne halo net om de boog van de foto heen.
     De maten zijn afgestemd op de cirkel in de SVG (die staat niet in het
     midden van het tekenvlak, vandaar de negatieve marge links). */
  .hero-ring { width: 136%; left: -25%; top: 5%; }
}

@media (max-width: 880px) {
  /* Booking wordt een kolom; de live-samenvatting (rechts) verbergen we --
     op stap 4 verschijnt dezelfde samenvatting alsnog in het formulier. */
  .booking-card { grid-template-columns: 1fr; }
  .booking-aside { display: none; }
}
/* Op desktop staat de samenvatting al rechts (aside), dus de kopie in het
   formulier (voor mobiel) verbergen we daar. */
@media (min-width: 881px) {
  #booking-summary { display: none; }
}

/* ---- Tablet en kleiner: een kolom, uitklapmenu, actiebalk ---- */
@media (max-width: 820px) {
  .grid-2 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .about-art { aspect-ratio: 16 / 10; order: 2; border-radius: var(--radius); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .cta-band .btn { width: 100%; }

  /* Hamburger + uitklapmenu */
  .nav-toggle { display: block; }
  .primary-nav {
    /* Over de volle schermbreedte, ook al hangt het menu in de container. */
    position: absolute; top: 100%; left: 50%; right: auto;
    width: 100vw; transform: translateX(-50%);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 26px 40px -28px rgba(34, 25, 19, .55);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .primary-nav.open { max-height: 70svh; overflow-y: auto; }
  .primary-nav ul {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .35rem 1.25rem calc(1.35rem + env(safe-area-inset-bottom));
  }
  .primary-nav li + li { border-top: 1px solid var(--line); }
  .primary-nav a { display: block; padding: 1.05rem .2rem; font-size: 1.05rem; border-radius: 0; }
  /* Het stipje van de huidige sectie wordt hier een gouden randje links */
  .primary-nav a.is-current:not(.nav-cta)::after { display: none; }
  .primary-nav a.is-current:not(.nav-cta) {
    box-shadow: inset 3px 0 0 var(--caramel); padding-left: .85rem;
  }
  .nav-cta { display: block; text-align: center; margin: 1rem 0 0 !important; }

  /* De actiebalk onderin verschijnt; de footer krijgt ruimte zodat de balk
     nooit over de laatste regel valt. */
  .mobile-bar { display: flex; }
  .site-footer { padding-bottom: calc(2rem + 66px + env(safe-area-inset-bottom)); }
  /* Menu open? Dan geen dubbele oproep onderin. */
  body.nav-open .mobile-bar { transform: translateY(115%); }
}

/* ---- Telefoon ---- */
@media (max-width: 620px) {
  /* Smallere koptekst: logo en naam een slag kleiner, zodat de balk laag blijft */
  .header-inner { padding-block: .5rem; }
  .brand { gap: .55rem; }
  .brand-logo, .site-header.scrolled .brand-logo { width: 46px; margin-block: -.3rem; }
  .brand-name, .site-header.scrolled .brand-name { font-size: 1.65rem; }
  .nav-toggle { width: 44px; height: 44px; }
  section[id], [id]:target { scroll-margin-top: 78px; }

  /* Hero: beeld boven, tekst gecentreerd eronder */
  .hero-art { max-width: 340px; }
  .hero-photo { max-width: 320px; }
  .hero-copy { text-align: center; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero-text { margin-inline: auto; font-size: 1.05rem; }
  .hero-actions { margin-top: 1.8rem; flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-meta {
    justify-content: center; text-align: center;
    margin-top: 2rem; padding-top: 1.2rem; gap: 1rem 2.2rem;
  }
  .hero-meta dd { justify-content: center; }

  /* Secties iets korter, anders wordt scrollen op een telefoon een reis */
  .section { padding-block: clamp(3.2rem, 12vw, 5rem); }
  .section-head { margin-bottom: 2rem; }

  /* Producten twee-op-een-rij: compacter en levendiger dan een brede kolom */
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .product-body { padding: .9rem 1rem 1.1rem; }
  .product-name { font-size: 1.1rem; }
  .product-desc { font-size: .85rem; }
  .product-price { font-size: .98rem; }

  /* Prijslijst: minder letterspatiering, anders breekt de naam af */
  .pricelist-card { padding-inline: 1.15rem; }
  .pricelist-card::before { inset: 7px; }
  .pricelist-logo { width: 96px; height: 96px; }
  .pricelist-brand { letter-spacing: .16em; text-indent: .16em; }
  .pricelist-title { font-size: 1.35rem; letter-spacing: .14em; text-indent: .14em; margin-bottom: 1.4rem; }
  .pl-name { font-size: 1rem; }

  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-logo { width: 92px; }
}

/* ---- Boekingsformulier op de telefoon ---- */
@media (max-width: 620px) {
  .booking-card { padding: 1.25rem 1.1rem 1.5rem; border-radius: var(--radius); }
  .step-title { font-size: 1.4rem; }
  .step-nav { flex-direction: column-reverse; margin-top: 1.8rem; }
  .step-nav .btn { width: 100%; }

  /* Stappenbalk: alleen de bolletjes, met het label van de stap waar je bent */
  .booking-steps { margin-bottom: 1.8rem; }
  .booking-steps li { padding-top: 40px; font-size: 0; min-width: 0; }
  .booking-steps li.is-active { font-size: .74rem; }
  .booking-steps li::before { width: 30px; height: 30px; font-size: .82rem; }
  .booking-steps li::after { top: 15px; }

  /* Kalender: dagen groot genoeg om met een duim te raken */
  .date-picker { max-width: none; }
  .cal-week { gap: .3rem; }
  .cal-day { aspect-ratio: auto; min-height: 44px; font-size: .95rem; }
  .cal-nav { width: 44px; height: 44px; }

  /* Tijdblokken: drie op een rij, ruim aantikbaar */
  .slot-row { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .45rem; }
  .slot-btn { min-height: 48px; padding: .55rem .3rem; }

  /* Behandelingskaart: naam boven, prijs en duur op een eigen regel eronder */
  /* Het keuzerondje lijnt uit met de naam bovenin, niet met het midden. */
  .option-card { flex-wrap: wrap; align-items: flex-start; padding: .95rem 1rem; gap: .5rem .9rem; }
  .option-card::before { margin-top: .15rem; }
  .opt-main { flex: 1 1 0; }
  .opt-title { font-size: 1.02rem; }
  .opt-side {
    flex: 1 1 100%; min-width: 0; flex-flow: row wrap; align-items: baseline;
    justify-content: flex-start; gap: .35rem .8rem; padding-left: 2.4rem; text-align: left;
  }
  .opt-price { font-size: 1rem; }

  .summary-box { padding: 1rem 1.1rem; }
  .summary-box dl, .live-summary dl { gap: .35rem .8rem; }
  .my-bookings li { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .confirm-actions .btn { width: 100%; }
}

/* ---- Kleine telefoons ---- */
@media (max-width: 400px) {
  .brand-name, .site-header.scrolled .brand-name { font-size: 1.45rem; }
  .products-grid { grid-template-columns: 1fr; }
  .booking-steps li.is-active { font-size: .68rem; }
  .slot-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricelist-brand { font-size: 2.1rem; }
  .mobile-bar .mb-call { padding-inline: 1rem; }
}

/* ---- Liggend op een telefoon: de hero mag niet het hele scherm vullen ---- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-art { max-width: 260px; }
  .section { padding-block: 3rem; }
}

/* -------------------- 11. CLEAN EDITORIAL REFRESH -------------------- */
:root {
  --root: #382d29;
  --cocoa: #66534c;
  --rose: #eee2de;
  --rose-mid: #dfcbc4;
  --caramel: #ad8b51;
  --caramel-deep: #80612f;
  --paper: #fdfbf9;
  --paper-2: #f5f0ed;
  --blush: #eee5e1;
  --ink: #403632;
  --ink-soft: #746761;
  --line: #e4dcd8;
  --line-soft: #d9cfca;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-lg: 0 26px 65px -42px rgba(40, 29, 24, .38);
  --shadow: 0 18px 42px -32px rgba(40, 29, 24, .32);
  --shadow-sm: 0 10px 28px -24px rgba(40, 29, 24, .28);
}

body { font-weight: 400; line-height: 1.65; }
h1 { font-size: clamp(3.2rem, 6.6vw, 5.6rem); line-height: .98; }
h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.eyebrow {
  margin-bottom: .65rem; font-family: var(--font-body); font-size: .82rem;
  font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--caramel-deep);
}
.section { padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.section-head { margin-bottom: clamp(2.4rem, 4vw, 3.5rem); }

.site-header { background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(18px); }
.header-inner { min-height: 76px; padding-block: .45rem; }
.brand-logo { width: 58px; margin-block: -.2rem; }
.brand-name { font-size: 2rem; }
.site-header.scrolled .brand-logo { width: 50px; }
.site-header.scrolled .brand-name { font-size: 1.8rem; }
.primary-nav ul { gap: .8rem; }
.primary-nav a { padding: .55rem .35rem; border-radius: 0; }
.primary-nav a:hover { background: transparent; }
.primary-nav a.is-current:not(.nav-cta)::after { bottom: .05rem; width: 100%; height: 1px; border-radius: 0; }
.nav-cta { margin-left: .6rem; padding: .65rem 1.25rem !important; border-radius: 8px; }

.btn { min-height: 50px; padding: .85rem 1.45rem; border-radius: 8px; }
.btn:hover { transform: none; }
.btn-primary { box-shadow: none; }

.hero { min-height: min(82svh, 800px); background: var(--paper); }
.hero-inner { grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr); gap: clamp(3rem, 7vw, 7rem); }
.hero-copy { max-width: 35rem; }
.hero h1::first-letter { color: inherit; }
.hero-text { max-width: 40ch; line-height: 1.65; }
.hero-actions { margin-top: 2rem; }
.hero-meta { margin-top: 2.2rem; padding-top: 1.2rem; }
.hero-meta dt { font-family: var(--font-body); letter-spacing: .03em; text-transform: none; font-size: .75rem; }
.hero-meta dd { font-family: var(--font-body); font-size: .95rem; }
.hero-art { padding: 0; background: transparent; justify-items: end; }
.hero-photo { max-width: 520px; aspect-ratio: 4 / 5; border-radius: 12px; box-shadow: var(--shadow-lg); }
.hero-photo::after, .about-art::after { display: none; }

.grid-2 { grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 8vw, 8rem); }
.about-art { max-height: 39rem; border-radius: 10px; box-shadow: none; }
.about-top > div:last-child { max-width: 34rem; }
.about-top > div:last-child p { font-size: 1.08rem; }

.section-services { background: var(--paper-2); }
.section-services .section-head, .section-booking .section-head { text-align: left; margin-inline: auto; max-width: 760px; }
.section-services .section-head .section-lead,
.section-booking .section-head .section-lead { margin-inline: 0; }
.pricelist { max-width: 760px; }
.pricelist-card {
  padding: clamp(1.5rem, 4vw, 2.6rem); border-radius: 10px; box-shadow: none;
  background: var(--white); border-color: var(--line); text-align: left;
}
.pricelist-card::before { display: none; }
.pl-group { margin-bottom: 2.25rem; }
.pl-cat { font-family: var(--font-body); font-size: .82rem; letter-spacing: .04em; text-transform: none; }
.pl-leaf { display: none; }
.pl-items li { padding-block: .85rem; }
.pl-name { font-size: 1rem; }
.pl-price, .pl-meta { font-family: var(--font-body); }
.pl-badge, .badge { letter-spacing: .04em; }

.section-booking { background: var(--paper); }
.booking-card { max-width: 1040px; border-radius: 10px; box-shadow: none; }
.option-card, .aside-card, .summary-box, .calendar, .contact-card { border-radius: 8px; box-shadow: none; }

.section-contact { background: var(--paper-2); }
.section-contact .section-head { margin-bottom: 2.4rem; }
.contact-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.contact-card { border: 0; border-radius: 0; padding: clamp(1.8rem, 4vw, 3rem); }
.contact-card-title, .footer-col h3 {
  font-family: var(--font-body); font-size: .78rem; letter-spacing: .03em; text-transform: none;
}
.hours-table td:last-child { font-family: var(--font-body); }

.cta-band { background: var(--espresso); }
.cta-band::before { display: none; }
.cta-inner { padding-block: clamp(3.2rem, 6vw, 4.5rem); }
.site-footer { padding-top: 3.5rem; }
.footer-logo { width: 88px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation-duration: .55s; }
}

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: 0; max-width: 100%; }
  .hero-photo { max-width: none; width: 100%; aspect-ratio: 16 / 11; }
  .hero-photo img { object-position: center 35%; }
  .grid-2 { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-art { max-height: 28rem; aspect-ratio: 16 / 10; }
}

@media (max-width: 700px) {
  .section-services .section-head, .section-booking .section-head { text-align: left; }
  .hero h1 { font-size: clamp(2.6rem, 11vw, 3.5rem); }
  .contact-grid { grid-template-columns: 1fr; }
  .primary-nav a { border-radius: 0; }
  .nav-toggle { border-radius: 8px; }
}

/* Telefoon: duidelijke inhoud, minder kaders en ruimte voor de foto. */
@media (max-width: 620px) {
  .container { width: calc(100% - 2.5rem); }
  .header-inner { min-height: 64px; }
  .brand-logo, .site-header.scrolled .brand-logo { width: 42px; }
  .brand-name, .site-header.scrolled .brand-name { font-size: 1.65rem; }
  .nav-toggle { border: 0; background: transparent; }
  .primary-nav ul { padding: .5rem 1.25rem 1.25rem; gap: 0; }
  .primary-nav a { min-height: 48px; padding: .8rem .25rem; }
  .primary-nav .nav-cta { border-radius: 8px; }
  .hero { min-height: 0; }
  .hero-inner { padding-block: 2rem 2.5rem; gap: 1.5rem; }
  .hero-copy { text-align: left; }
  .hero h1 { margin: 0 0 1rem; max-width: 10ch; line-height: 1.05; }
  .hero-text { margin: 0; font-size: 1rem; line-height: 1.6; }
  .hero-actions { flex-direction: row; gap: .6rem; margin-top: 1.4rem; align-items: center; }
  .hero-actions .btn { width: auto; font-size: .9rem; padding: .75rem 1rem; }
  .hero-actions .btn-ghost { border-color: transparent; padding-inline: .4rem; text-decoration: underline; text-underline-offset: 5px; }
  .hero-actions .btn-ghost:hover { background: transparent; color: var(--root); }
  .hero-meta { margin-top: 1.25rem; padding-top: .9rem; justify-content: space-between; gap: .6rem; text-align: left; }
  .hero-meta dt { font-size: .7rem; margin-bottom: .1rem; }
  .hero-meta dd { justify-content: flex-start; font-size: .85rem; }
  .hero-art { width: 100%; }
  .hero-photo { aspect-ratio: 5 / 4; border-radius: 10px; box-shadow: none; }
  .hero-photo img { object-position: center 55%; }
  .section { padding-block: 3rem; }
  h2 { font-size: clamp(2rem, 8.5vw, 2.65rem); line-height: 1.1; }
  .section-head { margin-bottom: 1.65rem; }
  .section-lead, .about-top > div:last-child p { font-size: 1rem; line-height: 1.65; }
  .eyebrow { margin-bottom: .5rem; }
  .about-top { gap: 1.5rem; }
  .about-art { aspect-ratio: 4 / 3; }
  .pricelist-card { background: transparent; border: 0; padding: 0; }
  .pl-group { margin-bottom: 1.6rem; }
  .pl-cat { font-size: .95rem; font-weight: 600; padding-bottom: .65rem; border-color: var(--line-soft); }
  .pl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; }
  .pl-name { min-width: 0; }
  .pl-dots, .pl-badge { display: none; }
  .pl-price { font-size: 1rem; font-variant-numeric: tabular-nums; }
  .pl-meta { font-size: .78rem; letter-spacing: 0; color: var(--ink-soft); }
  .booking-card { padding: 0; border: 0; background: transparent; }
  .booking-steps { margin-bottom: 1.5rem; }
  .booking-steps li { font-size: .65rem; padding-top: 38px; }
  .booking-steps li.is-active { font-size: .65rem; }
  .step-title { font-size: 1.45rem; }
  .option-card { padding: 1rem .85rem; border-radius: 10px; }
  .opt-title { line-height: 1.4; }
  .opt-side { padding-left: 2.1rem; }
  .opt-note { white-space: normal; }
  .badge { font-family: var(--font-body); font-size: .62rem; text-transform: none; margin-left: .35rem; }
  input, select, textarea { font-size: 16px; }
  .contact-grid { background: transparent; border: 0; gap: 2rem; overflow: visible; }
  .contact-card { padding: 0; background: transparent; }
  .contact-card-title { font-size: .95rem; margin-bottom: .8rem; }
  .contact-details a, .footer-contact a { overflow-wrap: anywhere; }
  .hours-table td { font-size: .9rem; }
  .hours-today { font-size: .55rem; margin-left: .3rem; letter-spacing: 0; }
  .cta-inner { padding-block: 2.5rem; gap: 1.25rem; }
  .cta-copy { flex-basis: auto; }
  .footer-grid { gap: 1.6rem; }
  .footer-logo { width: 60px; }
  .site-footer .footer-meta { font-family: var(--font-body); font-size: .75rem; }
  .mobile-bar { padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); box-shadow: none; }
  .mobile-bar a { border-radius: 8px; min-height: 46px; font-size: .92rem; }
  .reveal-on .reveal { opacity: 1; transform: none; }
  .reveal-on .reveal.is-visible { transition: none; }
}