/* ───────────────────────────────────────────────
   Cases: drie fictieve businesscases (commercie, finance, operations)
   Alles wat de pagina extra nodig heeft bovenop styles/about/pages.css:
   een overzicht van drie aanklikbare voorbeelden, kerncijfers als tegels,
   het probleem naast wat de agent ziet, een rekentabel en de boodschap.
   ─────────────────────────────────────────────── */

/* ─── melding: illustratief, geen gerealiseerd resultaat ─── */
.cs-note {
  display: inline-flex; align-items: flex-start; gap: 12px;
  margin-top: 26px; padding: 14px 18px 14px 16px; border-radius: 12px;
  background: rgba(201,169,106,.14); border: 1px solid rgba(176,137,63,.32);
  font-size: 14.5px; line-height: 1.55; color: var(--navy); max-width: 62ch;
}
.cs-note::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-deep); margin-top: .5em; }
.cs-note b { font-weight: 500; }

/* ─── overzicht: drie aanklikbare voorbeelden ─── */
.cs-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 6vh, 64px); }
.cs-index a {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 24px;
  border-radius: 18px; background: #fff; border: 1px solid rgba(16,26,48,.08);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-soft), border-color .45s var(--ease-soft);
}
.cs-index a:hover { transform: translateY(-3px); border-color: rgba(176,137,63,.5); box-shadow: 0 34px 60px -40px rgba(16,26,48,.45); }
.cs-index .k { font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--navy); }
.cs-index .k2 { margin-top: 14px; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.cs-index .k2 + strong { margin-top: -4px; }
.cs-index strong { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 2.9vw, 42px); line-height: 1; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.cs-index p { font-size: 15px; line-height: 1.55; color: var(--grey); }
.cs-index .go { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--navy); }
.cs-index .go svg { width: 14px; transition: transform .4s var(--ease-out); }
.cs-index a:hover .go svg { transform: translateX(4px); }

/* ─── een case ─── */
.cs .pg__in { border-top: 1px solid rgba(16,26,48,.12); padding-top: clamp(40px, 6vh, 72px); }
.cs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; }
.cs__fictief {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
  padding: 9px 14px; border: 1px solid rgba(16,26,48,.16); border-radius: 999px; white-space: nowrap;
}
.cs__fictief::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep); }

/* kerncijfers */
.cs__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 5vh, 48px); }
.cs__stat { padding: 22px 24px 24px; border-radius: 18px; background: #fff; border: 1px solid rgba(16,26,48,.08); }
.cs { scroll-margin-top: 12px; }
.cs__stat span { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.cs__stat strong { display: block; margin-top: 12px; font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.05; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.cs__stat--type strong { font-weight: 400; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.02em; }
.cs__stat--acc { background: var(--navy); border-color: var(--navy); }
.cs__stat--acc span { color: var(--gold); }
.cs__stat--acc strong { color: var(--ivory); }

/* probleem naast wat de agent ziet */
.cs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(40px, 6vh, 64px); }
.cs__blok h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 1.8vw, 25px); line-height: 1.2; letter-spacing: -.022em; color: var(--navy); padding-bottom: 14px; border-bottom: 1px solid rgba(16,26,48,.14); }
.cs__blok p { margin-top: 16px; font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.7; color: #2A2F3E; max-width: 58ch; }
.cs__blok .plist { margin-top: 8px; }
.cs__blok .plist li { padding: 14px 0; }
.cs__blok .plist li b { font-weight: 500; color: var(--navy); }

/* rekentabel */
.cs__calc { margin-top: clamp(40px, 6vh, 64px); padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: #fff; border: 1px solid rgba(16,26,48,.08); }
.cs__calc .pg__label { color: var(--gold-deep); }
.cs__table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.cs__table th { text-align: left; padding: 0 0 12px; border-bottom: 1px solid rgba(16,26,48,.14); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }
.cs__table td { padding: 14px 0; border-bottom: 1px solid rgba(16,26,48,.08); font-size: clamp(15px, 1.05vw, 16.5px); line-height: 1.5; color: #2A2F3E; vertical-align: top; }
.cs__table th:last-child, .cs__table td:last-child { text-align: right; white-space: nowrap; padding-left: 24px; font-variant-numeric: tabular-nums; color: var(--navy); }
.cs__table tr.is-total td { border-bottom: 0; padding-top: 20px; padding-bottom: 4px; font-weight: 500; color: var(--navy); }
.cs__table tr.is-total td:last-child { font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; letter-spacing: -.03em; color: var(--gold-deep); }
.cs__table tr.is-total + tr.is-total td { padding-top: 14px; }
.cs__table tr.is-total + tr.is-total td:last-child { font-size: clamp(20px, 1.8vw, 26px); color: var(--navy); }
.cs__uitleg { margin-top: 20px; font-size: clamp(15px, 1.05vw, 16.5px); line-height: 1.65; color: #2A2F3E; max-width: 66ch; }
.cs__aanname { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--grey); max-width: 70ch; }
.cs__aanname b { font-weight: 500; color: var(--navy); }

/* boodschap */
.cs__quote { margin-top: clamp(36px, 5vh, 56px); padding: clamp(28px, 4vw, 52px); border-radius: 26px; background: var(--ivory-2); display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px 32px; align-items: start; }
.cs__quote span { font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); padding-top: 10px; }
.cs__quote p { font-family: var(--font-display); font-weight: 300; font-size: clamp(21px, 2.2vw, 31px); line-height: 1.28; letter-spacing: -.025em; color: var(--navy); max-width: 30ch; }
.cs__quote p em { font-style: normal; color: var(--gold-deep); }

/* slot: oproep op navy, zelfde blok als de andere pagina's */
.cs-end p { margin-top: 18px; max-width: 46ch; font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.6; color: rgba(244,239,231,.74); }
.cs-end .abo__end-in { align-items: flex-end; }
.cs-end .abo__end h2, .cs-end h2 { max-width: 20ch; }
.cs-end .acd__cta .actions__primary small, .cs-end small { display: block; margin-top: 12px; font-size: 12.5px; letter-spacing: .02em; color: rgba(244,239,231,.6); }

/* ─── verschijnen bij het scrollen (alleen met JS, anders staat alles er gewoon) ─── */
html.js .cs-rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-out); }
html.js .cs-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .cs-rv { opacity: 1; transform: none; transition: none; } }
@media print { html.js .cs-rv { opacity: 1; transform: none; transition: none; } }

/* ─── smal ─── */
@media (max-width: 900px) {
  .cs-index { grid-template-columns: 1fr; }
  .cs__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs__grid { grid-template-columns: 1fr; gap: 36px; }
  .cs__quote { grid-template-columns: 1fr; gap: 12px; }
  .cs__quote span { padding-top: 0; }
}
@media (max-width: 600px) {
  .cs__stat { padding: 18px 18px 20px; }
  .cs__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .cs__stat span { letter-spacing: .12em; overflow-wrap: anywhere; }
  .cs__table tr { display: block; padding: 12px 0; border-bottom: 1px solid rgba(16,26,48,.08); }
  .cs__table td { display: block; padding: 0; border: 0; }
  .cs__table td:last-child { text-align: left; padding-left: 0; margin-top: 4px; white-space: normal; }
  .cs__table tr.is-total { border-bottom: 0; padding-top: 18px; }
  .cs__table tr.is-total td { padding: 0; }
  .cs__table tr.is-total td:last-child { margin-top: 6px; }
  .cs__table tr.is-total + tr.is-total { padding-top: 10px; }
}

/* ─── v2: elke case zijn eigen bedrijf, met tekening en profiel ─── */
.cs-index a { overflow: hidden; }
.cs-index__beeld { display: block; margin: -26px -28px 18px; aspect-ratio: 3 / 1.25; overflow: hidden; border-bottom: 1px solid rgba(16,26,48,.08); background: #F7F3EC; }
.cs-index__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.cs-index a:hover .cs-index__beeld img { transform: scale(1.03); }

.cs__scene { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-top: clamp(32px, 5vh, 48px); align-items: start; }
.cs__scene--rechts .cs__tekening { order: 2; }
.cs__tekening { margin: 0; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(16,26,48,.08); display: flex; flex-direction: column; }
.cs__tekening img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; flex: 1 1 auto; }
.cs__tekening figcaption { padding: 12px 18px 14px; font-size: 12.5px; line-height: 1.5; color: var(--grey); border-top: 1px solid rgba(16,26,48,.08); }
.cs__profiel { padding: 24px 26px 18px; border-radius: 22px; background: var(--ivory-2); }
.cs__profiel dl { margin-top: 10px; }
.cs__profiel dl div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(16,26,48,.1); }
.cs__profiel dl div:last-child { border-bottom: 0; }
.cs__profiel dt { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); padding-top: 3px; }
.cs__profiel dd { font-size: 15px; line-height: 1.45; color: var(--navy); font-weight: 500; }

/* case 2: het profiel op navy */
.cs__scene--donker { background: var(--navy); border-radius: 26px; padding: 16px; }
.cs__scene--donker .cs__profiel { background: transparent; }
.cs__scene--donker .pg__label { color: var(--gold); }
.cs__scene--donker dt { color: rgba(244,239,231,.55); }
.cs__scene--donker dd { color: var(--ivory); }
.cs__scene--donker dl div { border-color: rgba(244,239,231,.14); }
.cs__scene--donker .cs__tekening { border-color: transparent; }

/* case 3: de tekening over de volle breedte, het profiel als strook */
.cs__scene--breed { grid-template-columns: 1fr; }
.cs__scene--breed .cs__tekening img { aspect-ratio: 3 / 1.35; }
.cs__scene--breed .cs__profiel { padding-bottom: 22px; }
.cs__scene--breed .cs__profiel dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.cs__scene--breed .cs__profiel dl div { grid-template-columns: 1fr; gap: 4px; }
.cs__scene--breed .cs__profiel dl div:nth-last-child(-n+3) { border-bottom: 0; }

/* diagrammen bij de tekst */
.cs__diagram { margin: 22px 0 0; padding: 18px 18px 14px; border-radius: 18px; background: #fff; border: 1px solid rgba(16,26,48,.08); }
.cs__diagram img { display: block; width: 100%; height: auto; }
.cs__diagram figcaption { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 12.5px; line-height: 1.4; color: var(--grey); }
.cs__diagram figcaption .stil { margin-left: auto; color: rgba(92,90,86,.75); }
.cs__diagram .d { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; box-sizing: border-box; }
.cs__diagram .d--vol { background: var(--gold); }
.cs__diagram .d--rand { border: 2px solid var(--gold-deep); background: #fff; }
.cs__diagram .d--navy { background: var(--navy); box-shadow: inset 0 0 0 2.5px var(--navy), inset 0 0 0 5px var(--gold); }
.cs__diagram .l { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--navy); margin-right: 7px; vertical-align: 3px; }
.cs__diagram .l--goud { border-color: var(--gold-deep); }
.cs__diagram .l--stip { border-top-style: dashed; border-color: var(--gold-deep); }
.cs__blok .cs__diagram + p { margin-top: 18px; }

/* case 3: rekentabel naast het urenbeeld */
.cs__calc--twee { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.cs__calc--twee .cs__diagram { margin-top: 0; }
.cs__calc--twee .cs__uitleg { margin-top: 18px; font-size: 14px; }

@media (max-width: 900px) {
  .cs__scene, .cs__calc--twee { grid-template-columns: 1fr; }
  .cs__scene--rechts .cs__tekening { order: 0; }
  .cs__scene--breed .cs__profiel dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs__scene--breed .cs__profiel dl div:nth-last-child(-n+3) { border-bottom: 1px solid rgba(16,26,48,.1); }
  .cs__scene--breed .cs__profiel dl div:nth-last-child(-n+2) { border-bottom: 0; }
  .cs__scene--donker .cs__profiel dl div { border-color: rgba(244,239,231,.14); }
}
@media (max-width: 600px) {
  .cs-index__beeld { margin: -26px -28px 16px; }
  .cs__scene--breed .cs__profiel dl { grid-template-columns: 1fr; }
  .cs__scene--breed .cs__profiel dl div:nth-last-child(-n+2) { border-bottom: 1px solid rgba(16,26,48,.1); }
  .cs__scene--breed .cs__profiel dl div:last-child { border-bottom: 0; }
  .cs__profiel dl div { grid-template-columns: 1fr; gap: 3px; }
  .cs__diagram figcaption .stil { margin-left: 0; width: 100%; }
}

/* ─── v3: elke case sluit af met zijn eigen oproep, en de cases staan duidelijk los van elkaar ─── */
.cs__cta { margin-top: clamp(40px, 6vh, 64px); background: var(--navy); border-radius: 26px; padding: clamp(32px, 4.5vw, 60px); display: flex; align-items: center; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; }
.cs__cta h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -.03em; color: var(--ivory); max-width: 20ch; }
.cs__cta h3 em { font-style: normal; color: var(--gold); }
.cs__cta p { margin-top: 14px; max-width: 44ch; font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.6; color: rgba(244,239,231,.74); }
.cs__cta .actions__primary { flex: none; }
.cs__cta small { display: block; margin-top: 12px; font-size: 12.5px; letter-spacing: .02em; color: rgba(244,239,231,.6); }
.cs + .cs { padding-top: clamp(96px, 14vh, 170px); }
.cs + .cs .pg__in { border-top: 1px solid rgba(16,26,48,.16); padding-top: clamp(56px, 8vh, 96px); }
.cs:last-of-type { padding-bottom: clamp(80px, 12vh, 150px); }
@media (max-width: 700px) {
  .cs__cta { padding: 30px 24px 32px; }
  .cs__cta h3 { max-width: none; }
}