/* Sultan Glam Studio : voorbeeldsite van Obreon (niet openbaar).
   Ivoire et champagne, espresso, une touche d'or. Cormorant Garamond pour les titres, Manrope pour le texte.
   Tout est servi par le site : la CSP (_headers) n'autorise que 'self', aucun style ni script inline. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-normal.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("fonts/manrope-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  --ivoor: #F6F0E7;
  --parel: #FBF8F3;
  --champagne: #EAD9BF;
  --champagne-2: #F1E6D4;
  --goud: #B48A4E;        /* décor seulement (filets, cadres) : trop clair pour du texte sur ivoire */
  --goud-diep: #7E5A27;   /* or pour le texte sur fond clair : contraste 5,4 sur ivoire, 5 sur champagne-2 */
  --goud-licht: #D8B77E;  /* or pour le texte sur espresso : contraste 9 */
  --espresso: #231913;
  --espresso-2: #2E221A;
  --nacht: #1A120D;
  --inkt: #2A1F18;
  --tekst: #4A3B30;
  --grijs: #6E5D50;
  --serif: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;
  --sans: Manrope, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --rand: clamp(16px, 4vw, 40px);
  --kop: 64px;
}
@media (min-width: 900px) { :root { --kop: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivoor);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, figure, blockquote { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.02; letter-spacing: -.01em; color: var(--espresso); }
h2 { font-size: clamp(2.5rem, 4.4vw + .9rem, 4.4rem); }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--goud-diep); }
/* une section commence juste sous l'en-tête collant ; la carte de l'agenda garde un peu d'air (plus bas) */
[id] { scroll-margin-top: var(--kop); }
:focus-visible { outline: 2px solid var(--goud-diep); outline-offset: 3px; }
.donker :focus-visible { outline-color: var(--goud-licht); }

.wrap { width: min(100% - 2 * var(--rand), 1200px); margin-inline: auto; }

.skip {
  position: absolute; left: 12px; top: -120px; z-index: 50;
  padding: .8rem 1.2rem; border-radius: 999px;
  background: var(--espresso); color: var(--ivoor); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.eyebrow {
  display: flex; align-items: center; gap: .9rem; margin: 0 0 1.3rem;
  font-size: .75rem; font-weight: 600; line-height: 1.3; letter-spacing: .3em; text-transform: uppercase;
  color: var(--goud-diep);
}
.eyebrow::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.donker .eyebrow { color: var(--goud-licht); }

/* Le bandeau honnête : il défile avec la page, le moteur porte ensuite le mot « Voorbeeld » à chaque étape */
.bandeau {
  padding: .55rem var(--rand); background: var(--espresso); color: rgba(246, 240, 231, .84);
  text-align: center; font-size: .75rem; line-height: 1.45; letter-spacing: .02em; text-wrap: balance;
}
.bandeau strong { margin-right: .3em; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--goud-licht); }

/* En-tête : fond plein (WebKit ignore backdrop-filter en capture, et le texte qui défile dessous restait lisible) */
.kopbalk { position: sticky; top: 0; z-index: 20; background: var(--ivoor); border-bottom: 1px solid rgba(126, 90, 39, .16); }
.kopbalk-in { display: flex; align-items: center; gap: 2.4rem; min-height: var(--kop); }
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; margin-right: auto; text-decoration: none; line-height: 1; }
.brand-naam { font-family: var(--serif); font-size: 1.625rem; font-weight: 600; letter-spacing: .28em; color: var(--espresso); }
.brand-sub { margin-top: .3rem; font-size: .625rem; font-weight: 700; letter-spacing: .42em; text-transform: uppercase; color: var(--goud-diep); }
.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; gap: 2.2rem; }
  .nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
    color: var(--inkt); transition: color .2s;
  }
  .nav a:hover { color: var(--goud-diep); }
}

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.7rem; border: 1px solid transparent; border-radius: 999px;
  font: 600 .8125rem/1.15 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; text-align: center;
  transition: background-color .2s, color .2s, border-color .2s, transform .12s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { transform: scale(.98); }
.btn-donker { background: var(--espresso); color: var(--ivoor); }
.btn-donker:hover { background: var(--espresso-2); }
.btn-lijn { border-color: rgba(42, 31, 24, .34); color: var(--inkt); }
.btn-lijn:hover { border-color: var(--espresso); background: rgba(255, 255, 255, .55); }
.btn-goud { background: var(--goud-licht); color: var(--espresso); }
.btn-goud:hover { background: #E4C793; }
.btn-lijn-licht { border-color: rgba(216, 183, 126, .55); color: var(--ivoor); }
.btn-lijn-licht:hover { border-color: var(--goud-licht); color: var(--goud-licht); }
.btn-klein { min-height: 44px; padding: 0 1.15rem; font-size: .75rem; }
.acties { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.acties .btn { flex: 1 1 auto; }
@media (min-width: 600px) { .acties .btn { flex: 0 0 auto; } }

/* Les photos : un fin cadre doré décalé, la signature du site */
.kader { position: relative; isolation: isolate; width: calc(100% - 14px); max-width: 520px; }
.kader img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: var(--champagne-2); }
.kader::after {
  content: ""; position: absolute; z-index: -1; inset: 14px -14px -14px 14px;
  border: 1px solid rgba(180, 138, 78, .75); border-radius: 2px; pointer-events: none;
}

/* Héros : la photo dans un halo de lumière chaude, comme sous la lampe du studio */
.hero { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 64px) 0 clamp(80px, 9vw, 124px); }
.hero-grid { display: grid; gap: clamp(48px, 6vw, 88px); align-items: center; }
.hero h1 { font-size: clamp(2.8rem, 4.6vw + 1.1rem, 5.25rem); line-height: .98; }
.hero-lead { max-width: 30ch; margin-top: 1.4rem; font-size: clamp(1.0625rem, .45vw + .95rem, 1.25rem); color: var(--tekst); }
.hero-foto::before {
  content: ""; position: absolute; z-index: -2; inset: -16% -30% -12%;
  background: radial-gradient(closest-side, rgba(234, 217, 191, .95), rgba(234, 217, 191, .4) 55%, rgba(234, 217, 191, 0));
  pointer-events: none;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .hero-foto { justify-self: end; margin-right: 14px; }
}

/* Diensten */
.aanbod { padding: clamp(80px, 10vw, 140px) 0; background: var(--parel); border-block: 1px solid rgba(126, 90, 39, .12); }
.aanbod-grid { display: grid; gap: clamp(56px, 6vw, 96px); }
.looks { margin: 2.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(126, 90, 39, .22); }
.look { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1rem; padding: 1.5rem 0 1.6rem; border-bottom: 1px solid rgba(126, 90, 39, .22); }
/* en Manrope : les chiffres elzéviriens de Cormorant faisaient lire « o1 » */
.look-nr { grid-row: 1 / span 2; padding-top: .85rem; font-size: .8125rem; font-weight: 600; line-height: 1; letter-spacing: .12em; color: var(--goud-diep); font-variant-numeric: tabular-nums; }
.look h3 { font-size: clamp(1.75rem, 1.2vw + 1.3rem, 2.25rem); line-height: 1.08; }
.look p { grid-column: 2; max-width: 42ch; margin-top: .45rem; color: var(--tekst); }
.prijsnoot { margin-top: 1.8rem; font-size: .9375rem; color: var(--tekst); }
.prijsnoot strong { font-weight: 700; color: var(--inkt); }
@media (min-width: 960px) {
  .aanbod-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
  .aanbod-foto { order: -1; position: sticky; top: calc(var(--kop) + 40px); }
}

/* Werk : la galerie sur fond espresso */
.werk { padding: clamp(80px, 10vw, 140px) 0; background: var(--espresso); color: var(--ivoor); }
.werk h2 { color: var(--ivoor); }
.werk h2 em { color: var(--goud-licht); }
.werk-kop { display: grid; gap: 2rem; margin-bottom: clamp(40px, 5vw, 64px); }
.citaat blockquote { margin: 0; text-wrap: balance; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2rem); line-height: 1.2; color: var(--goud-licht); }
.citaat figcaption { margin-top: .6rem; font-size: .8125rem; color: rgba(246, 240, 231, .74); }
.galerij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; margin: 0; padding: 0; list-style: none; }
.tegel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; background: var(--espresso-2); }
.tegel figcaption { margin-top: .7rem; font-size: .6875rem; font-weight: 600; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: rgba(246, 240, 231, .8); }
.tegel-groot { grid-column: 1 / -1; }
.werk-meer { margin-top: clamp(40px, 5vw, 56px); }
@media (min-width: 900px) {
  .werk-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: end; }
  .galerij { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
  /* la grande photo occupe deux rangées : elle prend la hauteur des deux, sans être agrandie au-delà de sa taille */
  .tegel-groot { grid-column: span 2; grid-row: span 2; display: flex; }
  .tegel-groot figure { display: flex; flex-direction: column; flex: 1; }
  .tegel-groot img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
}

/* Voor de bruid */
.bruid { padding: clamp(80px, 10vw, 140px) 0; background: var(--champagne-2); }
.bruid-grid { display: grid; gap: clamp(56px, 6vw, 96px); align-items: center; }
.bruid-tekst p:not(.eyebrow) { max-width: 38ch; margin-top: 1.3rem; font-size: clamp(1.0625rem, .45vw + .95rem, 1.1875rem); color: var(--tekst); }
.bruid-tekst p:not(.eyebrow) + p { margin-top: .9rem; }
@media (min-width: 900px) {
  .bruid-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bruid-foto { justify-self: end; margin-right: 14px; }
}

/* Online boeken : à gauche l'invitation et la note « Voorbeeld », à droite la carte de l'agenda */
.boeken { padding: clamp(80px, 10vw, 140px) 0 clamp(96px, 11vw, 150px); }
.boek-grid { display: grid; gap: clamp(36px, 5vw, 64px); }
@media (min-width: 960px) {
  .boek-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .boek-intro { position: sticky; top: calc(var(--kop) + 40px); }
}
.boek-lead { max-width: 34ch; margin-top: 1.3rem; font-size: clamp(1.0625rem, .45vw + .95rem, 1.1875rem); color: var(--tekst); }
.boek-noot {
  max-width: 44ch; margin-top: 1.7rem; padding: 1rem 1.2rem;
  border: 1px solid rgba(126, 90, 39, .36); border-radius: 16px;
  font-size: .9375rem; line-height: 1.55; color: var(--tekst);
}
.boek-noot strong {
  display: inline-block; margin-right: .55rem; padding: .22rem .65rem; border-radius: 999px; vertical-align: .08em;
  background: var(--espresso); color: var(--ivoor);
  font-size: .6875rem; font-weight: 700; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase;
}
.boek-vraag { margin-top: 1rem; font-size: .9375rem; color: var(--tekst); }
.boek-vraag a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--goud-diep); text-underline-offset: .25em; }
.boek-kaart {
  position: relative; scroll-margin-top: calc(var(--kop) + 16px);
  background: #FFFCF7; color: var(--inkt);
  border: 1px solid rgba(126, 90, 39, .22); border-radius: 28px;
  box-shadow: 0 1px 2px rgba(35, 25, 19, .04), 0 24px 60px rgba(35, 25, 19, .09);
  font-size: 1rem; line-height: 1.5;
}
.boek-geenjs { padding: 28px 20px; }
.boek-geenjs a { color: var(--goud-diep); font-weight: 600; }
/* Au téléphone la carte prend toute la largeur : sept jours de 44 px ne tiennent pas entre les marges */
@media (max-width: 599px) {
  .boek-kaart { margin-inline: calc(-1 * var(--rand)); border-radius: 0; border-inline: 0; box-shadow: 0 18px 40px rgba(35, 25, 19, .07); }
}

/* Contact */
.finale { position: relative; overflow: hidden; padding: clamp(88px, 11vw, 150px) 0; background: var(--espresso); color: var(--ivoor); text-align: center; }
.finale::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(900px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(216, 183, 126, .16), rgba(216, 183, 126, 0)); pointer-events: none;
}
.finale-in { position: relative; }
.finale .eyebrow { justify-content: center; }
.finale .eyebrow::after { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.finale h2 { color: var(--ivoor); }
.finale h2 em { color: var(--goud-licht); }
.finale-in > p:not(.eyebrow):not(.plaats) { max-width: 34ch; margin: 1.3rem auto 0; color: rgba(246, 240, 231, .86); }
.finale .acties { justify-content: center; max-width: 34rem; margin-inline: auto; }
.plaats { margin-top: 2.4rem; font-size: .75rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--goud-licht); }

/* Pied de page */
.voet { padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--nacht); color: rgba(246, 240, 231, .74); font-size: .875rem; line-height: 1.5; }
.voet-in { display: grid; gap: 1.2rem; }
.voet-naam { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; letter-spacing: .04em; color: var(--ivoor); }
.voet-wat { margin-top: .3rem; }
.voet-links { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.voet a { display: inline-flex; align-items: center; min-height: 44px; color: var(--goud-licht); text-decoration: underline; text-decoration-color: rgba(216, 183, 126, .45); text-underline-offset: .3em; }
.voet a:hover { text-decoration-color: currentColor; }
@media (min-width: 900px) { .voet-in { grid-template-columns: 1fr auto; align-items: center; } }

/* 404 */
.nietgevonden { display: grid; place-items: center; min-height: 70vh; padding: 80px 0; text-align: center; }
.nietgevonden h1 { font-size: clamp(2.6rem, 5vw + 1rem, 4.6rem); }
.nietgevonden h1 + p { margin-top: 1rem; color: var(--tekst); }
.nietgevonden .eyebrow, .nietgevonden .acties { justify-content: center; }

/* Barre « Boek je afspraak » au téléphone, quand le bouton du héros n'est plus visible (cachée sur l'agenda, cf. app.js) */
.dock { display: none; }
@media (max-width: 759px) {
  .js .dock {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
    display: flex; align-items: center; justify-content: center;
    min-height: 54px; border-radius: 999px;
    background: var(--goud-licht); color: var(--espresso);
    font: 600 .8125rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
    box-shadow: 0 12px 32px rgba(20, 12, 8, .38);
    transform: translateY(calc(100% + 24px)); visibility: hidden;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s .35s;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .js .dock.on { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  /* un seul bouton de réservation à l'écran : celui de l'en-tête s'efface quand la barre arrive */
  .js .kopbalk .btn { transition: opacity .25s; }
  .dock-on .kopbalk .btn { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .js .dock, .js .kopbalk .btn { transition: none; }
}

/* Le parcours : moteur de templates/agenda-voorbeeld (agenda.js), habillé dans la charte Sultan.
   Chaque sélecteur commence par #flow : le banc (agenda.test.js --site) refuse une règle du site qui toucherait le moteur. */
#flow {
  --f-zacht: #F5ECE0;
  --f-lijn: rgba(42, 31, 24, .1);
  --f-lijn2: rgba(42, 31, 24, .2);
  --f-muted: #6E5D50;
  --f-err: #A1281C;
}
#flow button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#flow h2, #flow h3, #flow p, #flow dl, #flow dd, #flow ul { margin: 0; }
#flow ul { padding: 0; list-style: none; }
#flow h3 { font-family: var(--sans); line-height: 1.35; letter-spacing: normal; }
#flow input, #flow textarea { font: inherit; color: inherit; }
#flow button, #flow input, #flow textarea, #flow label, #flow a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#flow .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#flow .top { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px 0; position: relative; }
#flow .terug { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--inkt); transition: background-color .2s; }
#flow .terug:hover { background: var(--f-zacht); }
#flow .terug.weg { display: none; }
#flow .terug.weg + .stap { margin-left: 8px; }
#flow .stap { font-size: .75rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--goud-diep); }
#flow .balk { position: absolute; left: 22px; right: 22px; bottom: -12px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--f-lijn); }
#flow .balk-vul { display: block; height: 100%; background: var(--goud); transition: width .35s ease; }
#flow .balk-vul.s1 { width: 33.4%; }
#flow .balk-vul.s2 { width: 66.7%; }
#flow .balk-vul.s3, #flow .balk-vul.s4 { width: 100%; }

#flow .step { padding: 32px 16px 30px; }
#flow .step.nieuw { animation: boek-in .28s ease both; }
@keyframes boek-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#flow .step h2 { font-family: var(--serif); font-size: clamp(1.75rem, 1.2vw + 1.25rem, 2.1rem); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; color: var(--inkt); outline: none; }
#flow .sub { margin-top: .5rem; font-size: .9375rem; color: var(--f-muted); }
#flow .midden { text-align: center; }

/* étape 1 : la behandeling */
#flow .groep { margin-top: 24px; }
#flow .groep + .groep { margin-top: 26px; }
#flow .groep-naam { margin-bottom: 10px; font-size: .71875rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--goud-diep); }
#flow .lijst { display: grid; gap: 10px; }
#flow .dienst {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 68px; padding: 14px 16px 14px 20px; text-align: left;
  border: 1px solid var(--f-lijn2); border-radius: 18px; background: #fff;
  transition: border-color .18s, background-color .18s, transform .12s;
}
#flow .dienst:hover { border-color: var(--goud); }
#flow .dienst:active { transform: scale(.992); }
#flow .dienst.aan { border-color: var(--espresso); background: var(--f-zacht); }
#flow .dienst-tekst { display: grid; gap: 2px; min-width: 0; }
/* en Manrope : le « + » de « Make-up + hair » reste lisible */
#flow .dienst-naam { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--inkt); overflow-wrap: anywhere; }
#flow .dienst-info { font-size: .875rem; line-height: 1.4; color: var(--f-muted); }
#flow .dienst-meta { font-size: .8125rem; color: var(--f-muted); font-variant-numeric: tabular-nums; }
#flow .pijl { width: 18px; height: 18px; color: var(--goud-diep); }

/* étape 2 : dag en uur ; le jour choisi en gélule, comme les boutons */
#flow .gekozen { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 4px 6px 4px 16px; border-radius: 16px; background: var(--f-zacht); font-size: .9375rem; font-weight: 500; }
#flow .gekozen span { min-width: 0; overflow-wrap: anywhere; }
#flow .link { flex: none; min-height: 44px; padding: 0 10px; font-size: .875rem; font-weight: 500; color: var(--goud-diep); text-decoration: underline; text-underline-offset: 3px; }
#flow .wie { margin-top: 18px; }
#flow .wie-label { display: block; margin-bottom: 8px; font-size: .8125rem; font-weight: 500; color: var(--f-muted); }
#flow .chips { display: flex; flex-wrap: wrap; gap: 8px; }
#flow .chip { min-height: 44px; padding: 0 18px; border: 1px solid var(--f-lijn2); border-radius: 999px; font-size: .9375rem; font-weight: 500; transition: background-color .18s, border-color .18s, color .18s; }
#flow .chip:hover { border-color: var(--goud); }
#flow .chip.aan { background: var(--espresso); border-color: var(--espresso); color: var(--ivoor); }
#flow .snelst {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 16px; padding: 10px 16px;
  border: 1px solid rgba(180, 138, 78, .45); border-radius: 16px; text-align: left;
  font-size: .9375rem; font-weight: 500; color: var(--inkt); transition: border-color .18s, background-color .18s;
}
#flow .snelst:hover { border-color: var(--goud); background: var(--f-zacht); }
#flow .snelst .ic { width: 18px; height: 18px; color: var(--goud-diep); }

#flow .kal { margin-top: 24px; }
#flow .kal-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#flow .kal-maand { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; text-transform: capitalize; }
#flow .kal-nav { display: flex; gap: 6px; }
#flow .rond { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--f-lijn2); border-radius: 50%; transition: background-color .18s, opacity .18s; }
#flow .rond:hover:not(:disabled) { background: var(--f-zacht); }
#flow .rond:disabled { opacity: .35; cursor: default; }
#flow .kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
#flow .dow { padding: 4px 0 6px; text-align: center; font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--f-muted); }
#flow .dag {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 56px; min-width: 44px; border-radius: 999px;
  font-variant-numeric: tabular-nums; transition: background-color .15s, color .15s;
}
#flow .dag-nr { font-size: 1.0625rem; font-weight: 500; line-height: 1; }
#flow .dag-stip { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
#flow .dag.vrij .dag-stip, #flow .dag-stip.los { background: var(--goud); }
#flow .dag:hover:not(:disabled):not(.aan) { background: var(--f-zacht); }
#flow .dag:disabled { color: #B9ACA0; cursor: default; }
#flow .dag.voorbij { color: #D9CFC4; }
#flow .dag:not(.vrij):not(:disabled) { color: var(--f-muted); }
#flow .dag.vandaag:not(.aan):not(:disabled) { box-shadow: inset 0 0 0 1.5px rgba(180, 138, 78, .6); }
#flow .dag.aan { background: var(--espresso); color: var(--ivoor); }
#flow .dag.aan .dag-stip { background: var(--goud-licht); }
#flow .legende { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .8125rem; color: var(--f-muted); }

#flow .uren { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--f-lijn); }
#flow .uren-dag { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
#flow .uren-dag::first-letter, #flow .recap-wanneer::first-letter { text-transform: uppercase; }
#flow .leeg { margin-top: 8px; font-size: .9375rem; color: var(--f-muted); }
#flow .deel { margin-top: 16px; }
#flow .deel-naam { display: block; margin-bottom: 8px; font-size: .71875rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--goud-diep); }
#flow .sloten { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
#flow .slot {
  min-height: 46px; border: 1px solid var(--f-lijn2); border-radius: 999px;
  font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color .15s, border-color .15s, color .15s;
}
#flow .slot:hover { border-color: var(--goud); color: var(--goud-diep); }
#flow .slot.aan { background: var(--espresso); border-color: var(--espresso); color: var(--ivoor); }

/* la barre « Verder », collée en bas de la carte */
#flow .bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #FFFCF7;
  border-top: 1px solid var(--f-lijn);
}
#flow .bar.nieuw { animation: boek-op .22s ease both; }
@keyframes boek-op { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#flow .recap { display: grid; gap: 1px; min-width: 0; font-size: .875rem; line-height: 1.35; }
#flow .recap-wat { font-weight: 500; overflow-wrap: anywhere; }
#flow .recap-wanneer { color: var(--f-muted); }
#flow .knop {
  flex: none; min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--espresso); color: var(--ivoor);
  font: 500 .8125rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .2s, transform .12s;
}
#flow .knop:hover { background: var(--espresso-2); }
#flow .knop:active { transform: scale(.98); }
#flow .knop.vol { width: 100%; margin-top: 8px; }
#flow .knop.rand { width: 100%; margin-top: 26px; border: 1px solid var(--f-lijn2); background: transparent; color: var(--inkt); }
#flow .knop.rand:hover { background: var(--f-zacht); }

/* étape 3 : je gegevens */
#flow .step .recap { margin-top: 16px; padding: 12px 16px; border-radius: 16px; background: var(--f-zacht); }
#flow .form { display: grid; gap: 16px; margin-top: 18px; }
#flow .veld label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 500; }
#flow .opt { font-weight: 380; color: var(--f-muted); }
#flow .veld input, #flow .veld textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1px solid var(--f-lijn2); border-radius: 14px; background: #fff; font-size: 1rem;
  transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
#flow .veld textarea { min-height: 92px; resize: vertical; }
#flow .veld input:focus, #flow .veld textarea:focus { outline: none; border-color: var(--goud-diep); box-shadow: 0 0 0 3px rgba(180, 138, 78, .22); }
#flow .veld [aria-invalid="true"] { border-color: var(--f-err); }
#flow .fout { margin-top: 6px; font-size: .84375rem; color: var(--f-err); }
#flow .lokaal { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--f-zacht); font-size: .84375rem; color: var(--f-muted); }
#flow .lokaal .ic { width: 17px; height: 17px; margin-top: 2px; }

/* étape 4 : le coche dans un cercle à anneau doré, puis ce que le studio reçoit */
#flow .klaar { text-align: left; }
#flow .vinkje {
  position: relative; display: grid; place-items: center;
  width: 64px; height: 64px; margin: 14px auto 22px; border-radius: 50%;
  background: var(--espresso); color: var(--goud-licht);
}
#flow .vinkje::before { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(180, 138, 78, .6); border-radius: 50%; }
#flow .vinkje .teken { width: 30px; height: 30px; stroke-width: 2.4; stroke-dasharray: 24; stroke-dashoffset: 24; animation: boek-trek .5s .15s ease forwards; }
@keyframes boek-trek { to { stroke-dashoffset: 0; } }
#flow .klaar h2 { text-align: center; }
#flow .recap-lijst { margin-top: 22px; padding: 4px 18px; border: 1px solid var(--f-lijn2); border-radius: 18px; }
#flow .recap-lijst .rij { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: .9375rem; }
#flow .recap-lijst .rij + .rij { border-top: 1px solid var(--f-lijn); }
#flow .recap-lijst dt { flex: none; color: var(--f-muted); }
#flow .recap-lijst dd { min-width: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
#flow .recap-lijst dd::first-letter { text-transform: uppercase; }
#flow .tewe { margin-top: 18px; padding: 14px 16px; border-left: 2px solid var(--goud); border-radius: 0 14px 14px 0; background: var(--f-zacht); }
#flow .tewe-kop { font-size: .875rem; font-weight: 500; }
#flow .tewe ul { display: grid; gap: 6px; margin-top: 8px; }
#flow .tewe li { position: relative; padding-left: 14px; font-size: .9rem; line-height: 1.45; }
#flow .tewe li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--goud); }
#flow .zaakziet { margin-top: 28px; padding: 20px 16px; border-radius: 22px; background: var(--espresso); color: var(--ivoor); }
#flow .zaakziet-kop { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; line-height: 1.3; color: var(--ivoor); overflow-wrap: anywhere; }
#flow .melding { margin-top: 14px; padding: 12px 14px 14px; border-radius: 16px; background: rgba(255, 252, 247, .97); color: var(--inkt); box-shadow: 0 10px 28px rgba(20, 12, 8, .35); }
#flow .melding-kop { display: flex; align-items: center; gap: 8px; font-size: .78125rem; color: var(--f-muted); }
#flow .melding-app { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--espresso); color: var(--goud-licht); font-family: var(--serif); font-size: .75rem; font-weight: 600; }
#flow .melding-bron { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
#flow .melding-tijd { flex: none; margin-left: auto; }
#flow .melding-titel { margin-top: 8px; font-size: .9375rem; font-weight: 500; }
#flow .melding-tekst { margin-top: 1px; font-size: .9rem; color: #4A3B30; overflow-wrap: anywhere; }
#flow .melding-tekst::first-letter { text-transform: uppercase; }
#flow .voordelen { display: grid; gap: 10px; margin-top: 16px; }
#flow .voordelen li { display: flex; gap: 10px; font-size: .9rem; line-height: 1.45; color: rgba(246, 240, 231, .9); }
#flow .voordelen .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--goud-licht); }

/* voorschot : montré, jamais payé ici */
#flow .ag-vsblok { padding: 12px 16px; border: 1px solid rgba(180, 138, 78, .45); border-radius: 14px; background: var(--f-zacht); }
#flow .ag-vs-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .9375rem; font-weight: 500; }
#flow .ag-vs-bedrag { font-family: var(--serif); font-size: 1.3rem; color: var(--espresso); font-variant-numeric: tabular-nums; }
#flow .ag-vs-tekst { margin-top: 2px; font-size: .84375rem; line-height: 1.45; color: var(--f-muted); }

/* étape 5 : l'agenda du studio, les jours en gélule */
#flow .zaakziet .ag-open { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 20px; padding: 10px 18px; background: var(--goud-licht); color: var(--espresso); }
#flow .zaakziet .ag-open:hover { background: #E9D3AE; }
#flow .ag-week { margin-top: 24px; }
#flow .ag-wdagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
#flow .ag-wdag {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 44px; min-height: 78px; padding-top: 6px; border-radius: 999px;
  font-variant-numeric: tabular-nums; transition: background-color .15s, color .15s;
}
#flow .ag-dow { font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; color: var(--f-muted); }
#flow .ag-nr { font-size: 1.0625rem; font-weight: 500; line-height: 1.1; }
#flow .ag-stippen { display: flex; align-items: center; gap: 3px; height: 6px; }
#flow .ag-stip { width: 5px; height: 5px; border-radius: 50%; background: rgba(42, 31, 24, .28); }
#flow .ag-stip.nieuw { background: var(--goud); }
#flow .ag-dicht { font-size: .625rem; font-weight: 500; letter-spacing: .08em; line-height: 6px; text-transform: uppercase; color: var(--f-err); }
#flow .ag-wdag:hover:not(:disabled):not(.aan) { background: var(--f-zacht); }
#flow .ag-wdag.vandaag:not(.aan) { box-shadow: inset 0 0 0 1.5px rgba(180, 138, 78, .6); }
#flow .ag-wdag:disabled { color: #B9ACA0; cursor: default; }
#flow .ag-wdag:disabled .ag-dow { color: inherit; }
#flow .ag-wdag.aan { background: var(--espresso); color: var(--ivoor); }
#flow .ag-wdag.aan .ag-dow { color: var(--goud-licht); }
#flow .ag-wdag.aan .ag-dicht { color: var(--goud-licht); }
#flow .ag-wdag.aan .ag-stip { background: rgba(246, 240, 231, .5); }
#flow .ag-wdag.aan .ag-stip.nieuw { background: var(--goud-licht); }
#flow .ag-dagkop { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--f-lijn); font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
#flow .ag-dagkop::first-letter { text-transform: uppercase; }
#flow .ag-noot { margin-top: 6px; font-size: .875rem; color: var(--f-muted); }
#flow .ag-lijst { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
#flow .ag-rij { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 10px 16px; border-radius: 14px; text-align: left; font-size: .9375rem; line-height: 1.35; }
#flow .ag-uur { flex: none; width: 96px; font-weight: 500; font-variant-numeric: tabular-nums; }
#flow .ag-titel { min-width: 0; overflow-wrap: anywhere; }
#flow .ag-wat { display: grid; flex: 1; gap: 2px; min-width: 0; }
#flow .ag-klant { font-size: .84375rem; overflow-wrap: anywhere; }
#flow .ag-vs { font-size: .8125rem; font-weight: 500; color: var(--goud-licht); }
#flow .ag-boeking { align-items: flex-start; background: var(--espresso); color: var(--ivoor); }
#flow .ag-boeking .ag-titel { font-weight: 500; }
#flow .ag-nieuw { flex: none; margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--goud-licht); color: var(--espresso); font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
#flow .ag-vb { background: var(--f-zacht); color: var(--f-muted); }
#flow .ag-vrij { border: 1px dashed var(--f-lijn2); background: #fff; transition: border-color .15s, background-color .15s; }
#flow .ag-vrij .ag-titel { color: var(--f-muted); }
#flow .ag-vrij:hover { border-color: var(--goud); background: var(--f-zacht); }
#flow .ag-blok { border: 1px solid var(--f-lijn2); background: var(--f-zacht) repeating-linear-gradient(135deg, transparent 0 7px, rgba(35, 25, 19, .07) 7px 8px); }
#flow .ag-blok .ag-titel { font-weight: 500; }
#flow .ag-actie { flex: none; margin-left: auto; font-size: .875rem; font-weight: 500; color: var(--goud-diep); }
#flow .knop.rand.ag-sluit { margin-top: 20px; }
#flow .knop.ag-klant-knop { margin-top: 10px; }
#flow .ag-echt { margin-top: 14px; text-align: center; font-size: .84375rem; line-height: 1.45; color: var(--f-muted); }

@media (min-width: 600px) {
  #flow .top { padding: 16px 22px 0; }
  #flow .terug.weg + .stap { margin-left: 12px; }
  #flow .balk { left: 34px; right: 34px; }
  #flow .step { padding: 34px 34px 34px; }
  #flow .bar { padding: 14px 34px; border-radius: 0 0 28px 28px; }
  #flow .dag { height: 60px; }
  #flow .ag-wdag { min-height: 84px; }
  #flow .sloten { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  #flow .zaakziet { padding: 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #flow *, #flow *::before, #flow *::after { animation: none !important; transition: none !important; }
  #flow .vinkje .teken { stroke-dashoffset: 0; }
}


/* titres : jamais un mot seul sur la dernière ligne */
h1, h2 { text-wrap: balance; }

/* retour au toucher du bouton du bas (iPhone) ; placé après .js .dock.on pour l'emporter */
.js .dock:active { transform: scale(.97); transition-duration: .12s; }