/* Alleen voor de algemene pagina: sectorkeuze onder de hero en de blokken van de varianten (?v=bureau, ?v=marketing). */

/* ---------- Sectorkeuze ---------- */
.sk { padding: clamp(40px, 6vw, 80px) 0; background: #fff; border-bottom: 1px solid var(--slate-200); }
.sk .eyebrow { justify-content: center; }
.sk-title { text-align: center; margin: 12px auto 0; max-width: 720px; }
.sk-grid { list-style: none; margin: clamp(24px, 4vw, 40px) auto 0; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sk-tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; height: 100%; padding: 18px 18px 18px 16px; background: #fff; border: 1.5px solid var(--slate-200); border-radius: 18px; text-decoration: none; color: var(--primary); box-shadow: var(--shadow-sm); transition: border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sk-tile:hover { border-color: var(--accent); box-shadow: 0 14px 30px -18px rgba(255,94,46,.55); transform: translateY(-1px); color: var(--primary); }
.sk-tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.sk-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--brand-orange-10); color: var(--accent); }
.sk-name { font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1.2; }
.sk-sub { grid-column: 2; font-size: 14px; line-height: 1.35; color: var(--fg-2); }
.sk-arrow { grid-column: 3; grid-row: 1 / span 2; color: var(--accent); transition: transform 150ms ease-out; }
.sk-tile:hover .sk-arrow { transform: translateX(3px); }
.sk-tile--other { background: var(--slate-50); border-style: dashed; }
.sk-tile--other .sk-icon { background: var(--brand-blue-10); color: var(--primary); }
@media (max-width: 900px) { .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .sk-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sk-tile { padding: 14px 14px 14px 12px; }
  .sk-icon { width: 40px; height: 40px; border-radius: 12px; }
  .sk-name { font-size: 17px; }
}

/* ---------- Varianten ---------- */
.vx { padding: clamp(44px, 6vw, 88px) 0; background: #fff; }
.vx .h2 { margin-top: 12px; max-width: 760px; }
.vx-table { margin-top: clamp(24px, 4vw, 36px); border: 1px solid var(--slate-200); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--shadow-md); }
.vx-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); }
.vx-row > span { padding: 16px 20px; border-top: 1px solid var(--slate-200); font-size: 16px; line-height: 1.45; color: var(--fg-2); }
.vx-row > span[role="rowheader"] { font-family: var(--font-heading); font-weight: 800; color: var(--primary); }
.vx-row > .vx-us { background: var(--brand-orange-10); color: var(--primary); font-weight: 600; }
.vx-head > span { border-top: 0; font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.vx-head > .vx-us { color: var(--accent); }
@media (max-width: 640px) {
  .vx-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vx-row > span[role="rowheader"] { grid-column: 1 / -1; padding-bottom: 4px; background: var(--slate-50); }
  .vx-head > span:first-child { display: none; }
  .vx-row > span { padding: 12px 14px; font-size: 15px; }
  .vx-head > span { font-size: 11px; letter-spacing: .04em; overflow-wrap: anywhere; }
}
.vx-points { list-style: none; margin: clamp(24px, 4vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vx-points li { display: grid; gap: 8px; align-content: start; padding: 22px; border: 1px solid var(--slate-200); border-radius: 20px; background: var(--slate-50); }
.vx-points b { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--primary); }
.vx-points li > span:last-child { font-size: 16px; line-height: 1.5; color: var(--fg-2); }
.vx-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-orange-10); color: var(--accent); }
@media (max-width: 860px) { .vx-points { grid-template-columns: minmax(0, 1fr); } }