/* Front page sections (Diensten, Voor wie, Werkwijze, Contact). Values from the Main design. Shared card/form CSS: contact-form.css. */
.sec-last,.kc-front .sec.sec-last{border-bottom:0}
.sec-wrap{display:flex;flex-direction:column;gap:56px}
.sec-wrap-lg{gap:64px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.sec-title{display:flex;flex-direction:column;gap:20px}
.sec-title-wide{max-width:820px}
.lead-26{max-width:26em}
.lead-24{max-width:24em}
.num{font-size:13px;color:var(--muted)}
.row-top{display:flex;justify-content:space-between;align-items:flex-start}
.mt-auto{margin-top:auto}
.h3s{margin:0;font-size:24px;letter-spacing:-.025em;font-weight:600}
/* services */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:20px}
.svc{padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;gap:28px}
.svc-text{display:flex;flex-direction:column;gap:12px}
.svc-title{margin:0;font-size:28px;letter-spacing:-.03em;font-weight:600;line-height:1.15}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--text)}
.ticks svg{flex:none;margin-top:5px;color:var(--acc-fg)}
/* audiences */
.whos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.who{background:var(--bg);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:16px;transition:background-color 200ms ease}
.who:hover{background:var(--bg2)}
/* process */
.steps-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:48px 40px}
.step{display:flex;flex-direction:column;gap:20px;border-top:1px solid var(--line2);padding-top:28px}
.step.last{border-top:1px solid var(--acc-fg)}
.step-kanji{font-size:clamp(64px,7vw,96px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--line3);transition:-webkit-text-stroke-color 200ms ease}
.step:hover .step-kanji{-webkit-text-stroke-color:var(--acc-fg)}
.step.last .step-kanji{color:var(--acc-fg);-webkit-text-stroke-color:var(--acc-fg)}
.num-loop{font-size:13px;display:flex;align-items:center;gap:6px}
/* contact */
.contact-wrap{display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,96px)}
.contact-info{flex:1 1 360px;display:flex;flex-direction:column;gap:24px}
.contact-links{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.contact-link{color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;transition:color 150ms ease}
.contact-link:hover{color:var(--acc-fg)}
.contact-card{flex:999 1 520px;min-width:0;padding:clamp(24px,3.4vw,44px)}
/* Voor wie: with 3 cards, the 2-column range would leave an empty 4th cell, so the last card spans both columns.
   Container query on the grid's own content box (border excluded): 2 columns fit at >= 2*320+1 = 641px, 3 at >= 3*320+2 = 962px. */
.whos{container-type:inline-size}
@container (641px <= width < 962px){.who:last-child:nth-child(odd){grid-column:1/-1}}
.svc-more{margin-top:-32px;display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:15px}.svc-more .tlink{min-height:44px}