/* CONTACT (/contact/): alle regels zijn gescoped op .cw-page of staan in een eigen cw-klasse.
   De header, topbar, het mobiele menu en de footer blijven ongemoeid (base.css). De hero is licht en heet daarom bewust niet
   .hero/.phero: site.js zet de header dan direct in de bestaande 'past-hero'-stand (wit, donkere tekst). Het blok onderaan dit
   bestand zorgt er alleen voor dat die stand ook zichtbaar is voordat dat script gelopen heeft (en zonder JavaScript).
   Typografie en vormtaal volgen de sectorpagina's (DM Sans 400/500, hairlines, afronding 5px 56px 5px 5px). */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-sans-latin-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-sans-latin-500.woff2) format('woff2')}

.cw-page{--cw-rule:#dacbd5;color:var(--ink)}
.cw-page :where(h1,h2,h3){font-family:'DM Sans',Arial,sans-serif;font-weight:500;color:var(--ink)}
.cw-wrap{width:100%;max-width:1216px;margin:0 auto;padding:0 clamp(24px,4vw,48px)}
.cw-page section[id]{scroll-margin-top:calc(var(--hdr-h) + 8px)}

/* ---- 1. HERO: licht, typografisch en compact ---- */
.cw-hero{background:#fff;padding:clamp(1rem,2.6vw,2.25rem) 0 clamp(1.25rem,3.4vw,2.75rem)}
.cw-hero .crumb{color:var(--muted);margin-bottom:clamp(.9rem,2vw,1.4rem);font-size:.85rem}
.cw-hero .crumb a{color:var(--ink)}
.cw-hero h1{font-size:clamp(2rem,1.2rem + 4.4vw,4.5rem);line-height:1.03;letter-spacing:-.05em;margin-bottom:clamp(.8rem,1.6vw,1.2rem);text-wrap:balance}
.cw-accent{color:var(--berry);white-space:nowrap}
.cw-lead{font-size:clamp(1.05rem,.95rem + .4vw,1.2rem);line-height:1.55;color:var(--muted);max-width:50ch}

/* ---- 2. WERKVLAK ---- */
.cw-work{background:var(--soft);background:color-mix(in srgb,var(--ink) 4%,#fff);padding:clamp(1.5rem,4.5vw,3.75rem) 0 clamp(3rem,6vw,5rem)}
.cw-work-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem 1.5rem;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.cw-work-title{flex:1 1 17rem;min-width:0}
.cw-work-title h2{font-size:clamp(1.8rem,1.2rem + 2vw,2.7rem);line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
.cw-work-title p{margin-top:.7rem;color:var(--muted);font-size:1.0625rem;line-height:1.55;max-width:44ch}
.cw-mark{flex:none;width:58px;height:auto;margin:.15rem 0 0 auto}

.cw-board{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:'choices panels' 'cb panels';column-gap:clamp(1.75rem,4vw,3.5rem);align-items:start;position:relative;background:#fff;border:1px solid rgba(34,20,38,.1);border-radius:5px 56px 5px 5px;box-shadow:0 28px 48px -36px rgba(64,18,52,.32);padding:clamp(1.25rem,3.4vw,3rem)}
.cw-choices{grid-area:choices;display:grid;border-top:1px solid var(--cw-rule)}
.cw-choice{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:64px;padding:1.1rem .9rem;border:0;border-bottom:1px solid var(--cw-rule);border-radius:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .2s,color .2s}
.cw-choice:focus-visible{outline-offset:-3px;border-radius:0}
.cw-choice-text{min-width:0}
.cw-choice-t{display:block;font-family:'DM Sans',Arial,sans-serif;font-weight:500;font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);line-height:1.2;letter-spacing:-.03em;transition:color .2s}
.cw-choice-s{display:block;margin-top:.35rem;color:var(--muted);font-size:.95rem;line-height:1.45}
.cw-dot{flex:0 0 14px;width:14px;height:14px;border-radius:50%;border:1.5px solid #b3a1ac;background:transparent;transition:background-color .2s,border-color .2s}
.cw-choice[aria-pressed="true"]{background:var(--berry-tint);color:var(--berry)}
.cw-choice[aria-pressed="true"] .cw-choice-t{color:var(--berry)}
.cw-choice[aria-pressed="true"] .cw-dot{background:var(--berry);border-color:var(--berry)}
@media(hover:hover){.cw-choice[aria-pressed="false"]:hover .cw-choice-t{color:var(--berry)}.cw-choice[aria-pressed="false"]:hover .cw-dot{border-color:var(--berry)}}

.cw-callback-link{grid-area:cb;margin-top:.9rem}
.cw-board[data-cw-state=callback] .cw-callback-link{display:none}
.cw-textlink,.cw-back{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 0;border:0;background:none;color:var(--teal);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.cw-textlink:hover,.cw-back:hover{color:var(--berry)}
.cw-back{margin-bottom:.6rem}

.cw-panels{grid-area:panels;min-width:0;container:cw / inline-size;padding-left:clamp(1.5rem,3.4vw,3rem);border-left:1px solid var(--cw-rule)}
.cw-panel[hidden]{display:none}
.cw-panel .cform{background:transparent;box-shadow:none;border-radius:0;padding:0;color:var(--ink)}
.cw-panel .cform h3{font-size:clamp(1.5rem,1.15rem + 1.2vw,2.1rem);line-height:1.1;letter-spacing:-.04em;margin-bottom:.55rem;scroll-margin-top:calc(var(--hdr-h) + 12px)}
.cw-panel .cform .fstatus h3{font-size:1.4rem;letter-spacing:-.02em}
.cw-panel .cform .fstep-sub{font-size:1.0625rem;line-height:1.55;margin-bottom:.9rem;max-width:46ch}
.cw-panel .fnote{margin:0 0 1.2rem;font-size:.88rem;color:var(--muted)}
.cw-panel .cform [data-fields]{display:grid;grid-template-columns:minmax(0,1fr);column-gap:1rem}
.cw-panel .cform [data-fields][hidden]{display:none}
.cw-panel .cform button[type=submit]{margin-top:.5rem}
.cw-panel .cform .priv{margin-top:.9rem}
.cw-panel .cform .fradio{display:flex;align-items:center;gap:.85rem;font-size:.97rem;font-weight:500}
@container cw (min-width:31rem){
  .cw-panel .cform [data-fields]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cw-panel .cform [data-fields]>*{grid-column:1/-1}
  .cw-panel .cform [data-fields]>[data-field=sector],.cw-panel .cform [data-fields]>[data-field=organization],.cw-panel .cform [data-fields]>[data-field=role]{grid-column:auto}
  .cw-panel .cform [data-field=need] .fradio-group,.cw-panel .cform [data-field=contactPreference] .fradio-group{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.cw-direct{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--cw-rule);font-size:.95rem;line-height:1.6;color:var(--muted)}
.cw-direct-line{display:block}
.cw-direct a{display:inline-block;padding:.25rem 0;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.cw-direct a:hover{color:var(--berry)}

@media(max-width:899px){
  .cw-board{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:'choices' 'panels' 'cb';border-radius:5px 40px 5px 5px}
  .cw-panels{padding-left:0;border-left:0;margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid var(--cw-rule)}
}
@media(max-width:600px){
  .cw-mark{width:42px}
  .cw-board{padding:1.1rem}
  .cw-choice{padding:1rem .75rem}
}

/* ---- 3. DIRECT CONTACT ---- */
.cw-direct-sec{background:#fff;padding:clamp(2.75rem,5.5vw,4.5rem) 0 clamp(3rem,6vw,5rem)}
.cw-direct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.75rem,5vw,5rem);align-items:center}
.cw-direct-copy h2{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
.cw-direct-copy p{margin-top:.8rem;color:var(--muted);font-size:1.0625rem;line-height:1.55;max-width:34ch}
.cw-links{list-style:none;border-top:1px solid var(--cw-rule)}
.cw-links li{border-bottom:1px solid var(--cw-rule)}
.cw-links a{display:block;padding:1rem 0;font-family:'DM Sans',Arial,sans-serif;font-weight:500;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.25;letter-spacing:-.025em;color:var(--ink);overflow-wrap:anywhere;transition:color .2s}
.cw-links a:hover{color:var(--berry)}
@media(max-width:860px){.cw-direct-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- Headerstand vóór het script (en zonder JavaScript): gelijk aan de bestaande 'past-hero'-stand, zodat de lichte hero
   geen onzichtbare witte navigatie krijgt. Zodra site.js 'past-hero' zet, is deze regelset niet meer actief. ---- */
.t-contact .hwrap:not(.past-hero) header{background:#fff;box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(64,18,52,.18)}
.t-contact .hwrap:not(.past-hero) header .menu a{color:var(--ink)}
.t-contact .hwrap:not(.past-hero) header .menu a::after{background:var(--berry)}
.t-contact .hwrap:not(.past-hero) header .btn-line{border-color:var(--line);color:var(--ink)}
.t-contact .hwrap:not(.past-hero) header .burger span{background:var(--ink)}