/* =========================================================================
   Diensten op papier: drie vlakken naast elkaar (4 november 2026, Hugo koos
   optie B: "naast elkaar").

   Hugo vond de oude prijslijst en de prijskaarten op petrol "ai achtig, met die
   lijnen en typografie van prijs en wat daaronder staat", en een eerste
   papieren versie met drie losse tekstkolommen "ongeorganiseerd". Daarom:
   drie even hoge vlakken op iets donkerder papier, zonder randen of lijnen;
   met subgrid staan naam, voor wie, tekst, prijs en link in alle drie op
   dezelfde hoogte. De prijs is één regel: bedrag en waarvoor. Geen
   onderzoekscijfers in deze teksten (stijlgids regel 34).
   ========================================================================= */

.sv{background:var(--bg);color:var(--ink);padding:clamp(84px,10vw,140px) 0}
.sv.sv-top{padding-top:clamp(132px,15vh,180px)}
.sv-head{font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-.02em;font-weight:500;
  color:var(--ink);margin:0 0 clamp(40px,5vw,64px)}
.sv-head span{color:var(--accent)}
.sv-foot{margin:clamp(36px,4.5vw,56px) 0 0;font-size:15.5px;line-height:1.65;color:var(--soft);max-width:68ch}

.svB-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.svB-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;
  background:#e8dfcf;padding:clamp(28px,3vw,42px);color:inherit;text-decoration:none;border-radius:2px;
  transition:background-color .25s ease,transform .25s ease}
.svB-card:hover{background:#e2d6c1;transform:translateY(-3px)}
.svB-card:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.svB-card h3{font-size:clamp(24px,2.2vw,30px);line-height:1.12;letter-spacing:-.012em;font-weight:500;
  color:var(--ink);margin:0 0 10px}
.svB-who{font-size:15px;line-height:1.5;font-style:italic;color:var(--grey);margin:0 0 18px}
.svB-what{font-size:16.5px;line-height:1.6;color:var(--soft);margin:0 0 28px}
/* Working together: wat je krijgt, als korte regels zonder lijsttekens of streepjes */
ul.svB-what{list-style:none;padding:0}
ul.svB-what li{margin:0 0 10px}
.svB-price{font-family:var(--disp);font-size:21px;line-height:1.35;color:var(--soft);margin:0 0 16px}
.svB-price b{font-weight:500;color:var(--ink)}
.svB-go{font-size:15px;font-weight:600;color:var(--accent);white-space:nowrap;align-self:end}
.svB-go::after{content:"→";display:inline-block;margin-left:9px;transition:transform .3s ease}
.svB-card:hover .svB-go::after,.svB-card:focus-visible .svB-go::after{transform:translateX(5px)}

@media (max-width:900px){
  .svB-list{grid-template-columns:1fr}
  .svB-card{grid-row:auto;grid-template-rows:none}
}
@media (prefers-reduced-motion:reduce){
  .svB-card{transition:none}.svB-card:hover{transform:none}.svB-go::after{transition:none}
}

/* ---- Working together onder de kop: dezelfde rust ------------------------
   Geen lijn onder de kopjes en tussen de diensten, tabellen zonder rasterlijnen
   en zonder etiketjes in kaders; het voorbeeld van de teardown met een zachte
   schaduw; uitklapblokken zonder stippellijnen. */
.sv-page .wk{padding-top:clamp(40px,5vw,72px)}
.sv-page .wk-h2{border-bottom:none;padding-bottom:0;color:var(--ink);
  font-size:clamp(32px,3.8vw,50px);letter-spacing:-.018em;margin-bottom:clamp(20px,3vw,40px)}
.sv-page .wk-row{border-bottom:none;padding:clamp(44px,6vw,80px) 0}
.sv-page .wk-side h3{font-size:clamp(25px,2.4vw,32px);letter-spacing:-.012em;color:var(--ink)}
.sv-page .wk-price strong{font-weight:500;color:var(--brand)}
.sv-page .wk-pic{border:none;background:transparent;box-shadow:0 26px 50px -28px rgba(74,52,30,.45)}
.sv-page .wk-table{background:transparent;border:none;padding:0}
.sv-page .wk-table th{border-bottom:none;font-style:italic;font-weight:400;font-size:14px;color:var(--grey);padding-bottom:6px}
.sv-page .wk-table td{border-bottom:none;padding:9px 16px 9px 0}
.sv-page .wk-table td:first-child{color:var(--ink);font-weight:500}
.sv-page .wk-tag{border:none;padding:0;font-size:14px;font-style:italic;color:var(--soft)}
.sv-page .wk-tag.is-order{color:var(--accent);font-weight:500}
.sv-page .folds details,.sv-page .folds details:last-of-type{border:none}
.sv-page .folds summary{font-family:var(--disp);font-size:18px;font-weight:500;padding:12px 0}

/* 7 nov 2026, Hugo: "working together fold is wel erg licht ... en premium".
   De bovenkant van Working together krijgt het donkere vlak van de dienstpagina's;
   de kaarten worden donkere vlakken met een haarlijn. Geen pijltje meer achter
   "See the details" en de kaarten schuiven niet omhoog. */
.svB-go::after{content:none}
.svB-card{background:#e1d7c5}
.svB-card:hover{background:#dbd0bd}
.svB-card:hover{transform:none}
.work-page .sv-top{background:var(--brand);color:var(--brand-ink)}
.work-page .sv-top .sv-head{color:#f6f3ec}
.work-page .sv-top .sv-head span{color:#e0653a}
.work-page .sv-top .svB-card{background:rgba(255,255,255,.045);border:1px solid rgba(238,240,234,.14)}
.work-page .sv-top .svB-card:hover{background:rgba(255,255,255,.08)}
.work-page .sv-top .svB-card h3{color:#f6f3ec}
.work-page .sv-top .svB-who{color:var(--brand-tint)}
.work-page .sv-top .svB-what{color:#dde3df}
.work-page .sv-top .svB-price{color:var(--brand-tint)}
.work-page .sv-top .svB-price b{color:#f6f3ec}
.work-page .sv-top .svB-go{color:#eaa982}
.work-page .sv-top .sv-foot{color:var(--brand-tint)}
.work-page .sv-top .sv-foot a{color:#eaa982}