/* Emilie Terwiel — stijlblad
   Opbouw naar Marcel's Green Soap: smalle kapitalen, grote afgeronde kleurvlakken,
   klikbare kaarten met een rond pijlknopje. Kleuren uit het eigen palet (cactus/vetplant). */

@font-face { font-family: "Big Shoulders"; src: url("../fonts/bigshoulders-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url("../fonts/ibmplexserif-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url("../fonts/ibmplexserif-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url("../fonts/ibmplexserif-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Palet: cactus/vetplant, rustig. Tekst in donkerpaars in plaats van zwart, geen roze. */
  --papier: #F6F2F0;
  --greige: #DDD5D1;
  --greige-licht: #ECE6E2;
  --mint: #B6CDC7;
  --salie: #82A79C;
  --blauw: #6F90A7;
  --lei: #4A5068;
  --aubergine: #4B2846;
  --inkt: #3A1F37;       /* donkerpaars voor alle tekst */
  --roze: #4B2846;       /* accent = aubergine (roze is uit het palet) */
  --roze-licht: #B6CDC7;
  --wit: #FFFFFF;

  /* Type */
  --display: "Big Shoulders", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --tekst: "Plex Serif", Georgia, "Times New Roman", serif;

  --r-groot: 28px;
  --r-klein: 18px;
  --maat: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--aubergine); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--wit); padding: .5rem 1rem; z-index: 20; }

.wrap {
  max-width: var(--maat);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

h1, h2, h3, .kop {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: .01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(3.2rem, 8.5vw, 6.6rem); }
h2 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
p { margin: 0; max-width: 62ch; }
.stapel { display: flex; flex-direction: column; gap: 1rem; }

.label {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1.05rem;
}

/* Knoppen: effen vlak, geen rand of schaduw */
.knop {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .05em;
  font-size: 1.2rem; line-height: 1;
  padding: 1rem 1.5rem; border-radius: 999px;
  text-decoration: none; border: 0;
  transition: transform .15s ease, background-color .15s ease;
}
.knop:hover { transform: translateY(-2px); }
.knop--donker, .knop--roze { background: var(--roze); color: var(--wit); }
.knop--donker:hover, .knop--roze:hover { background: #3A1F37; }
.knop--licht { background: var(--wit); color: var(--inkt); }
.knoppen { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Kop van de site */
.site-kop { padding-block: 1.1rem; }
.site-kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.logo { text-decoration: none; display: flex; flex-direction: column; line-height: .9; }
.logo img { width: 150px; height: auto; }
.voet__logo img { width: 190px; height: auto; margin-bottom: .5rem; }
.menu { display: flex; align-items: center; gap: .4rem 1.6rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; font-size: 1rem; }
.menu a:not(.knop):hover { text-decoration: underline; text-underline-offset: 4px; }
.menu .knop { font-size: 1.05rem; padding: .7rem 1.1rem; }

/* Openingsblok */
.held { padding-block: .5rem 2rem; }
.held__vlak {
  background: var(--mint);
  border-radius: var(--r-groot);
  padding: clamp(1.75rem, 4.5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.held__tekst { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.held__wie { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 1.05rem; color: var(--lei); }
.held__intro { font-size: 1.15rem; }
.held__intro strong { display: block; margin-bottom: .4rem; }
.held__beeld { position: relative; }
.held__beeld img { border-radius: var(--r-klein); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; width: 100%; }
.wolk {
  position: absolute; left: -2.2rem; bottom: 2rem;
  width: 9.5rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--aubergine); color: var(--wit);
  display: grid; place-items: center; text-align: center;
  font-family: var(--display); text-transform: uppercase; font-size: 1.45rem; line-height: 1;
  padding: 1rem;
}
.wolk::after { content: ""; position: absolute; width: 1.6rem; aspect-ratio: 1; border-radius: 50%; background: var(--aubergine); right: -.4rem; bottom: -1.3rem; }

/* Aanbod */
.aanbod { background: var(--lei); color: var(--papier); padding-block: clamp(3.5rem, 7vw, 6rem); margin-top: 1rem; }
.aanbod__intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.aanbod__intro h2 { max-width: 17ch; }
.aanbod__intro p { margin-inline: auto; }
.aanbod__intro .lijn { width: min(100%, 520px); height: 2px; background: var(--mint); border: 0; margin: .25rem 0; }

.kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.kaart {
  background: var(--wit); color: var(--inkt);
  border-radius: var(--r-klein); padding: 1rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  text-decoration: none;
  transition: transform .2s ease;
}
.kaart:hover { transform: translateY(-4px); }
.kaart img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.kaart__body { display: flex; flex-direction: column; gap: .7rem; padding: .25rem .5rem .5rem; flex: 1; }
.kaart__rol { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; color: var(--blauw); }
.kaart__tag { font-style: italic; font-size: 1.05rem; }
.kaart__voet { margin-top: auto; padding-top: .75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--greige); }
.kaart__voet span { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 1.1rem; }
.pijl { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--inkt); color: var(--wit); display: grid; place-items: center; font-size: 1.2rem; }
.kaart:nth-child(1) .kaart__body { }

/* Uitklapblokken */
.samen { padding-block: clamp(3.5rem, 7vw, 6rem); }
.samen__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.samen__grid > div { min-width: 0; }
.uitklap { display: flex; flex-direction: column; gap: .8rem; }
.uitklap details { border-radius: var(--r-klein); background: var(--greige); }
.uitklap details:nth-child(2) { background: var(--mint); }
.uitklap details:nth-child(3) { background: var(--salie); }
.uitklap summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1;
}
.uitklap summary::-webkit-details-marker { display: none; }
.uitklap summary .plus { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2px solid var(--inkt); display: grid; place-items: center; font-family: var(--tekst); font-size: 1.4rem; transition: transform .2s ease; }
.uitklap details[open] summary .plus { transform: rotate(45deg); }
.uitklap .inhoud { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; }

/* Waarom */
.waarom { background: var(--salie); color: var(--inkt); padding-block: clamp(3.5rem, 7vw, 6rem); }
.waarom h2 { margin-bottom: 2.5rem; }
.redenen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; list-style: none; margin: 0; padding: 0; }
.redenen li { display: flex; flex-direction: column; gap: .75rem; padding-top: 1.25rem; border-top: 2px solid var(--inkt); }
.redenen h3 { color: var(--inkt); }

/* Kennismaken */
.matchcall { padding-block: clamp(3rem, 6vw, 5rem); }
.matchcall__vlak {
  background: var(--salie); border-radius: var(--r-groot);
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
}
.matchcall__vlak > div { display: flex; flex-direction: column; gap: 1rem; min-width: 0; flex: 1 1 26rem; }

/* Voet */
.voet { background: var(--inkt); color: var(--papier); padding-block: 3.5rem 2rem; }
.voet__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.voet h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.voet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.voet a { text-underline-offset: 4px; }
.voet .knop { margin-top: 1.25rem; }
.voet__onder { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid rgba(247,243,236,.25); font-size: .9rem; color: var(--greige); display: flex; flex-wrap: wrap; gap: .5rem 2rem; }

/* Smal scherm */
@media (max-width: 900px) {
  .held__vlak, .samen__grid { grid-template-columns: minmax(0, 1fr); }
  .held__beeld { max-width: 460px; }
  .kaarten, .redenen { grid-template-columns: minmax(0, 1fr); }
  .kaarten { max-width: 560px; margin-inline: auto; }
  .voet__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .wolk { left: auto; right: -.5rem; bottom: -1.5rem; width: 7.5rem; font-size: 1.15rem; }
  .menu { gap: .4rem 1.1rem; }
  .logo img { width: 124px; }
}

/* ---------- Gedeeld: subpagina's ---------- */
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sectie { padding-block: clamp(3.5rem, 7vw, 6rem); }
.sectie--lei { background: var(--lei); color: var(--papier); }
.sectie--mint { background: var(--mint); }
.kop-blok { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tekst-kolom { display: flex; flex-direction: column; gap: 1.1rem; }
.tekst-kolom strong { font-weight: 700; }
.twee-kol { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.twee-kol > * { min-width: 0; }
.foto { border-radius: var(--r-klein); width: 100%; object-fit: cover; }

/* ---------- Over Emilie ---------- */
.held__vlak--greige { background: var(--greige); }
.held__vlak--greige .held__beeld img { object-position: 50% 30%; }
.held__vlak--greige .wolk, .held__vlak--greige .wolk::after { background: var(--salie); color: var(--inkt); }
.les { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.05; color: var(--aubergine); padding-left: 1rem; border-left: 4px solid var(--salie); max-width: 28ch; }
.ervaring { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ervaring li { background: var(--wit); color: var(--inkt); border-radius: var(--r-klein); padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; }
.ervaring b { font-family: var(--display); text-transform: uppercase; font-size: 1.45rem; line-height: 1; letter-spacing: .01em; }
.methodes { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.methodes li { border: 2px solid var(--inkt); border-radius: 999px; padding: .35rem .9rem; font-size: .95rem; background: var(--papier); }

/* ---------- Strategy Sprint ---------- */
.held__vlak--salie { background: var(--salie); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.held__vlak--salie .held__beeld img { aspect-ratio: 3 / 2; object-position: 50% 40%; }
.held__vlak--salie .wolk, .held__vlak--salie .wolk::after { background: var(--papier); color: var(--aubergine); }
.held__vlak--salie .held__wie { color: var(--inkt); }
.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.drie > div { display: flex; flex-direction: column; gap: .7rem; padding-top: 1rem; border-top: 2px solid var(--mint); }
.drie h3 { color: var(--mint); }
.opbrengst { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--inkt); }
.opbrengst li { display: flex; align-items: center; gap: 1.25rem; padding-block: 1.1rem; border-bottom: 2px solid var(--inkt); font-family: var(--display); text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1; }
.opbrengst li span { color: var(--aubergine); flex: none; font-family: var(--tekst); font-size: .8em; }
.zachte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.zachte li { background: var(--wit); border-radius: 14px; padding: 1rem 1.2rem; font-weight: 700; }
.stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; border-top: 1px solid var(--blauw); }
.stappen li { counter-increment: stap; display: grid; grid-template-columns: 3.2rem minmax(0, 14rem) minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--blauw); }
.stappen li::before { content: counter(stap, decimal-leading-zero); font-family: var(--display); color: var(--mint); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.stappen b { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1; font-weight: 700; }
.stappen span { color: var(--greige); }
.fotorij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fotorij img { aspect-ratio: 4 / 5; }
.pakket { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.pakket li { display: flex; gap: .9rem; align-items: baseline; }
.pakket li::before { content: "✓"; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--aubergine); color: var(--wit); display: grid; place-items: center; font-size: .9rem; transform: translateY(.3rem); }
.quote { background: var(--aubergine); color: var(--papier); border-radius: var(--r-groot); padding: clamp(2rem, 5vw, 4rem); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0; }
.quote p { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: .95; max-width: 16ch; }
.quote figcaption { color: var(--mint); }

@media (max-width: 900px) {
  .twee-kol, .drie { grid-template-columns: minmax(0, 1fr); }
  .held__vlak--salie .held__beeld { max-width: 100%; }
}
@media (max-width: 600px) {
  .ervaring, .zachte { grid-template-columns: minmax(0, 1fr); }
  .stappen li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .stappen span { grid-column: 2; }
}
.held__vlak--salie h1 { font-size: clamp(2.8rem, 5.4vw, 4.6rem); }
.held__vlak--salie { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.held__vlak--salie .held__beeld img { aspect-ratio: 4 / 3.4; }
@media (max-width: 900px) { .held__vlak--salie { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Homepage, ronde 2 ---------- */
.held__wie--regel { white-space: nowrap; }
@media (max-width: 700px) { .held__wie--regel { white-space: normal; font-size: .95rem; } }

/* Rondje "Get in touch" */
.rondje {
  position: absolute; width: 8.5rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--roze); color: var(--wit); text-decoration: none;
  display: grid; place-items: center; text-align: center; padding: 1rem;
  font-family: var(--display); text-transform: uppercase; font-size: 1.45rem; line-height: 1;
  transition: transform .2s ease;
}
.rondje:hover { transform: rotate(-6deg) scale(1.04); }

/* Opening over de hele breedte */
.held-breed { padding-block: .25rem 2rem; }
.held-breed__foto { position: relative; max-width: 1600px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.held-breed__foto img { width: 100%; aspect-ratio: 2576 / 970; min-height: 260px; object-fit: cover; object-position: 40% 50%; border-radius: var(--r-groot); }
.held-breed__foto .rondje { right: max(2.5rem, calc(env(safe-area-inset-right, 0px) + 1.5rem)); bottom: -2.5rem; }
.held-breed__tekst {
  position: relative; margin-top: -5.5rem; margin-left: clamp(0px, 3vw, 2.5rem);
  max-width: 760px; background: var(--papier);
  border-radius: var(--r-groot); padding: clamp(1.5rem, 3.5vw, 2.75rem);
  display: flex; flex-direction: column; gap: 1.25rem;
}
@media (max-width: 700px) {
  .held-breed__tekst { margin-top: -3rem; margin-left: 0; padding-inline: 1.25rem; }
  .held-breed__foto .rondje { width: 6.5rem; font-size: 1.1rem; bottom: -1.5rem; right: 1.5rem; z-index: 2; }
}

/* Opening met de foto in een blok */
.held__beeld .rondje { left: -2.2rem; bottom: 2rem; }
.held__beeld--steiger img { aspect-ratio: 1420 / 1190; object-position: 50% 50%; }
@media (max-width: 560px) { .held__beeld .rondje { left: auto; right: -.5rem; bottom: -1.5rem; width: 6.5rem; font-size: 1.1rem; } }

/* Aanbod */
.aanbod__intro .tekst-kolom { align-items: center; }
.kaart__rol { font-size: 1.35rem; color: var(--roze); letter-spacing: .05em; }
.pijl { background: var(--roze); }
.payoff {
  margin: clamp(3rem, 6vw, 5rem) auto 0; text-align: center; max-width: 22ch;
  font-family: var(--display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem); line-height: .95; text-wrap: balance;
  color: var(--papier);
}
.payoff em { font-style: normal; color: var(--roze-licht); }

/* Samenwerken: tegels die in elkaar passen */
.tegels {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-areas: "a a a b b" "c c c b b";
}
.tegel { border-radius: var(--r-groot); padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.tegel h3 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
.tegel--a { grid-area: a; background: var(--mint); border-radius: var(--r-groot) var(--r-groot) var(--r-groot) 90px; }
.tegel--b { grid-area: b; background: var(--salie); border-radius: 140px 140px var(--r-groot) var(--r-groot); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.tegel--c { grid-area: c; background: var(--greige); border-radius: 90px var(--r-groot) var(--r-groot) var(--r-groot); }
.tegel details { margin-top: auto; }
.tegel summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 1.1rem;
}
.tegel summary::-webkit-details-marker { display: none; }
.tegel summary .plus { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--roze); color: var(--wit); display: grid; place-items: center; font-family: var(--tekst); font-size: 1.3rem; transition: transform .2s ease; }
.tegel details[open] summary .plus { transform: rotate(45deg); }
.tegel details[open] summary .meer::after { content: "Minder"; }
.tegel details:not([open]) summary .meer::after { content: "Lees meer"; }
.tegel .inhoud { display: flex; flex-direction: column; gap: .8rem; margin-top: .9rem; }
@media (max-width: 700px) {
  .tegels { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c"; }
  .tegel--b { border-radius: 90px 90px var(--r-groot) var(--r-groot); }
}

/* Waarom + matchcall */
.waarom .knop { margin-top: 2.5rem; }
.matchcall__vlak { background: var(--mint); }

/* Variant blauw (voorbeeldpagina) */
.variant-blauw {
  --mint: #D3E0EA;
  --salie: #87A6BE;
  --blauw: #87A6BE;
}
.tegel--b h3 { font-size: clamp(1.5rem, 2.1vw, 1.75rem); overflow-wrap: anywhere; }
@media (max-width: 700px) { .tegel--b h3 { font-size: clamp(1.8rem, 7vw, 2.2rem); } }

/* ---------- Ronde 3: rustiger ---------- */
/* Pijlbolletjes: alleen de kop van het pijltje (play-symbool) */
.pijl { font-size: 0; background: var(--aubergine); }
.pijl::before { content: ""; width: .7rem; height: .8rem; margin-left: .18rem; background: var(--wit); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Labels boven secties: duidelijk zichtbaar */
.label--groot { font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: .1em; color: var(--aubergine); }
.aanbod .label--groot { color: var(--mint); }

/* Opening */
.held__vlak { background: var(--mint); }

/* Aanbod */
.aanbod__intro { position: relative; }
.aanbod h2 { color: var(--papier); }
.rondje--call {
  position: absolute; right: 0; top: 0;
  background: var(--mint); color: var(--inkt);
  width: 8rem; font-size: 1.35rem;
}
.rondje--call:hover { transform: rotate(-6deg) scale(1.04); }
@media (max-width: 900px) { .rondje--call { position: static; width: 7rem; font-size: 1.15rem; } }
.kaart__klein { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; color: var(--blauw); }
.kaart__body h3 { font-size: clamp(1.9rem, 2.8vw, 2.3rem); }
.payoff { max-width: none; font-size: clamp(1.7rem, 3.2vw, 2.7rem); white-space: nowrap; color: var(--papier); }
.payoff em { color: var(--mint); }
@media (max-width: 900px) { .payoff { white-space: normal; font-size: clamp(1.9rem, 7vw, 2.6rem); max-width: 20ch; } }

/* Samenwerken: rechthoekige tegels met kleine ronding */
.tegel, .tegel--a, .tegel--b, .tegel--c { border-radius: var(--r-klein); }
.tegel--b { padding-top: clamp(1.4rem, 3vw, 2rem); }
.tegel--a { background: var(--greige); }
.tegel--b { background: var(--mint); }
.tegel--c { background: var(--greige-licht); }
.tegel--b h3 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); overflow-wrap: normal; }
.tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "c c"; }
@media (max-width: 700px) { .tegels { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c"; } }
.tegel summary .plus { background: var(--aubergine); font-size: 0; }
.tegel summary .plus::before { content: ""; width: .6rem; height: .7rem; margin-left: .15rem; background: var(--wit); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tegel details[open] summary .plus { transform: rotate(90deg); }

/* Werken met Emilie: subtieler */
.waarom { background: var(--greige-licht); color: var(--inkt); }
.waarom h2 { font-size: clamp(2rem, 4vw, 3rem); }
.redenen li { border-top: 1px solid var(--salie); }
.redenen h3 { color: var(--aubergine); font-size: clamp(1.5rem, 2.4vw, 1.9rem); }

/* Afspraak: rustiger */
.matchcall__vlak { background: transparent; border: 2px solid var(--greige); }
.tegel--b h3 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }

/* ---------- Ronde 4 ---------- */
.aanbod__intro p { max-width: 84ch; }
.waarom {
  background-color: var(--greige-licht);
  background-image: linear-gradient(rgba(246, 242, 240, .62), rgba(246, 242, 240, .62)), url("../img/water-glinstering-2200.webp");
  background-size: cover; background-position: center;
}
@media (max-width: 900px) {
  .waarom { background-image: linear-gradient(rgba(246, 242, 240, .62), rgba(246, 242, 240, .62)), url("../img/water-glinstering-1200.webp"); }
}
.matchcall__vlak { background: #DCE7E3; border: 0; }

/* ---------- Strategy Sprint, ronde 2 ---------- */
.held__vlak--sprint { background: var(--mint); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.held__vlak--sprint h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.held__vlak--sprint .held__beeld img { aspect-ratio: 1 / 1; object-position: 55% 50%; }
@media (max-width: 900px) { .held__vlak--sprint { grid-template-columns: minmax(0, 1fr); } }
.twee-kol--midden { align-items: center; }
.kop-middel { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.opbrengst-rustig { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.opbrengst-rustig li { display: flex; align-items: baseline; gap: .8rem; font-weight: 700; }
.opbrengst-rustig li::before { content: ""; flex: none; width: .6rem; height: .7rem; background: var(--aubergine); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sectie--mint .label--groot { color: var(--aubergine); }
.stappen--licht { border-top-color: var(--salie); }
.stappen--licht li { border-bottom-color: var(--salie); }
.stappen--licht li::before { color: var(--aubergine); }
.stappen--licht b { font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--inkt); }
.stappen--licht span { color: var(--inkt); }
.citaat { margin: clamp(3rem, 6vw, 4.5rem) 0 0; text-align: center; }
.citaat blockquote { margin: 0; }
.citaat p { margin-inline: auto; max-width: none; font-family: var(--display); text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; color: var(--aubergine); }
.sectie--lei .label--groot { color: var(--mint); }
.rondje--sprint { position: static; width: 9rem; margin-top: .75rem; background: var(--mint); color: var(--inkt); font-size: 1.3rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .35rem; }
.rondje--sprint small { font-family: var(--tekst); text-transform: none; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.sectie--citaat { padding-block: 0 clamp(1rem, 3vw, 2rem); }
.sectie--citaat .citaat { margin-top: 0; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--greige); }

/* ---------- Over Emilie, ronde 2 ---------- */
.kop-een-regel { white-space: nowrap; }
.sectie--zacht { background: var(--greige-licht); }
.kolom-plak { position: sticky; top: 2rem; }
@media (max-width: 900px) { .kolom-plak { position: static; } }
.methodes-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; }
.methodes-lijst li { font-weight: 400; }
@media (max-width: 560px) { .methodes-lijst { grid-template-columns: minmax(0, 1fr); } }
.held h1 .regel { display: block; }