@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/libre-franklin-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/libre-franklin-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/libre-franklin-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/source-sans-3-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}

/* Layout: one calm reading column; the four pictograms are the front door and each theme page takes its pictogram's colour */
:root{
  color-scheme:light;
  --bg:#F7F7F5;
  --surface:#FFFFFF;
  --ink:#171516;
  --ink-soft:#55524F;
  --line:#E1E0DC;
  --sun:#FFF200;   --sun-tint:#FFFBCC;
  --heart:#E5322D; --heart-tint:#FBE3E1;
  --house:#FCA73D; --house-tint:#FFEDD6;
  --tie:#86CBEA;   --tie-tint:#E1F2FA;
  --accent:var(--sun); --tint:var(--sun-tint);
  --focus:#1F5FAE;
  --display:"Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --body:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
}
.t-sun{--accent:var(--sun); --tint:var(--sun-tint)}
.t-heart{--accent:var(--heart); --tint:var(--heart-tint)}
.t-house{--accent:var(--house); --tint:var(--house-tint)}
.t-tie{--accent:var(--tie); --tint:var(--tie-tint)}

*,*::before,*::after{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:1.15rem; line-height:1.6;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
a:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--display); font-weight:600; text-wrap:balance; margin:0; letter-spacing:-.01em}
h1:focus{outline:none}
p{margin:0}
.wrap{max-width:68rem; margin-inline:auto}

/* pictograms */
.ic{display:block; flex:none; background:center / contain no-repeat; border-radius:50%}
.ic-sun{background-image:url("img/symbool-isabelle.png")}
.ic-heart{background-image:url("img/symbool-bemiddeling.png")}
.ic-house{background-image:url("img/symbool-stress-en-burn-out.png")}
.ic-tie{background-image:url("img/symbool-loopbaan.png")}

/* site header */
.site{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1.5rem; padding-block:1.25rem; border-bottom:1px solid var(--line)}
.brand{display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; font-family:var(--display); font-weight:600; font-size:1.1rem}
.brand .ic{width:2.1rem; height:2.1rem}
.site-tel{font-size:.95rem; color:var(--ink-soft); text-decoration:none}
.site-tel strong{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}

.eyebrow{font-family:var(--display); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--ink-soft)}

/* home */
.hero{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2.5rem; align-items:center; padding-block:3.5rem 2.75rem}
.hero-text{min-width:0; display:grid; gap:.9rem}
.hero h1{font-size:clamp(2.4rem, 6.5vw, 4.2rem); line-height:1.05; letter-spacing:-.025em}
.tagline{font-family:var(--display); font-weight:500; font-size:clamp(1.25rem, 2.8vw, 1.65rem); line-height:1.3}
.intro{max-width:36em; color:var(--ink-soft); margin-top:.35rem}
.where{list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-wrap:wrap; gap:.55rem}
.where li{display:inline-flex; align-items:center; gap:.55rem; padding:.35rem .95rem .35rem .7rem; background:var(--surface); border:2px solid var(--ink); border-radius:999px; font-weight:600; font-size:.98rem; line-height:1.3}
.where li::before{content:""; width:.7rem; height:.7rem; border-radius:50%; background:var(--sun); border:2px solid var(--ink); flex:none}
.where li + li::before{background:var(--tie)}
.portrait{width:150px; height:150px; flex:none; border-radius:50%; background:var(--sun); border:11px solid var(--ink); display:grid; place-items:center; overflow:hidden; text-align:center; font-family:var(--display); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em}
.portrait img{width:100%; height:100%; object-fit:cover}
.band-logo{width:88px; height:88px; margin-bottom:1rem}
.hero-logo{width:clamp(140px, 24vw, 250px); height:auto; max-width:100%; aspect-ratio:1}

.help-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.25rem 1.5rem; margin-bottom:1.1rem}
.help-head h2{font-size:1.55rem}
.help-head p{color:var(--ink-soft); font-size:1rem}

.tiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem}
.tile{display:flex; flex-direction:column; gap:.75rem; padding:1.5rem 1.3rem 1.3rem; background:var(--surface); border:1px solid var(--line); border-radius:18px; text-decoration:none; color:var(--ink); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
.tile:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 14px 30px -20px rgba(23,21,22,.45)}
.tile:focus-visible{border-radius:18px}
.tile .ic{width:76px; height:76px}
.t-title{font-family:var(--display); font-weight:600; font-size:1.15rem; line-height:1.3; hyphens:auto}
.t-desc{font-size:1rem; line-height:1.45; color:var(--ink-soft)}
.t-more{margin-top:auto; padding-top:.4rem; font-size:.95rem; font-weight:700}

/* contact band */
.band{background:var(--tint); border-radius:20px; padding:2rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:1.5rem 2.5rem; margin-block:3rem}
.band h2{font-size:1.55rem; margin-bottom:.6rem}
.facts{display:grid; gap:1rem; margin:0}
.facts div{display:grid; gap:.1rem}
.facts dt{font-family:var(--display); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--ink-soft)}
.facts dd{margin:0; font-size:1.15rem; overflow-wrap:anywhere}
.facts dd a{text-decoration-thickness:1px; text-underline-offset:3px}
.num{font-variant-numeric:tabular-nums}

/* theme pages */
.back{display:inline-flex; gap:.4rem; align-items:center; margin-top:1.6rem; font-size:1rem; font-weight:700; text-decoration:none; color:var(--ink-soft)}
.back:hover{color:var(--ink)}
.page-head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.6rem; align-items:center; padding-block:1.6rem 2.2rem; border-bottom:1px solid var(--line)}
.page-head .ic{width:108px; height:108px}
.page-head .eyebrow{margin-bottom:.4rem}
.page-head h1{font-size:clamp(2rem, 4.8vw, 3rem); line-height:1.1; letter-spacing:-.02em}
.lead{font-size:1.28rem; line-height:1.5; color:var(--ink-soft); margin-top:.6rem; max-width:34em}

.prose{max-width:42rem; padding-block:.5rem 1rem}
.prose h2{font-size:1.45rem; margin:2.4rem 0 .8rem}
.prose p + p{margin-top:1rem}
.prose p + ul, .prose ul + p{margin-top:1rem}

.dots{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
.dots li{position:relative; padding-left:1.7rem}
.dots li::before{content:""; position:absolute; left:.1rem; top:.5em; width:.75rem; height:.75rem; border-radius:50%; background:var(--accent); border:2px solid var(--ink)}

.steps{list-style:none; padding:0; margin:0; display:grid; gap:1.2rem; counter-reset:step}
.steps li{display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:1rem; counter-increment:step}
.steps li::before{content:counter(step); width:2.6rem; height:2.6rem; border-radius:50%; background:var(--accent); border:3px solid var(--ink); color:var(--ink); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1.05rem; font-variant-numeric:tabular-nums}
.steps h3{font-size:1.15rem; margin-bottom:.2rem}
.steps p{color:var(--ink-soft)}

.values{margin:0; display:grid; gap:1.1rem}
.values dt{font-family:var(--display); font-weight:600}
.values dd{margin:.15rem 0 0; color:var(--ink-soft)}

.quotes{list-style:none; padding:0; margin:0; display:grid; gap:.6rem}
.quotes li{font-family:var(--display); font-weight:500; font-size:1.12rem; line-height:1.4}
.quotes li::before{content:"\201E"}
.quotes li::after{content:"\201D"}

.note{margin-top:2rem; padding:1.2rem 1.4rem; background:var(--surface); border:1px solid var(--line); border-radius:14px}
.note h3{font-size:1.08rem; margin-bottom:.35rem}
.note p{color:var(--ink-soft); font-size:1.05rem}
.inline-link{font-weight:700; text-underline-offset:3px}

.others{padding-block:1rem 0}
.others h2{font-size:1.2rem; margin-bottom:.9rem}
.others ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.8rem}
.others a{display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; text-decoration:none; line-height:1.3; font-weight:600; transition:border-color .2s ease}
.others a:hover{border-color:var(--ink-soft)}
.others .ic{width:46px; height:46px}

/* footer */
.foot{border-top:1px solid var(--line); margin-top:3rem; padding-block:1.6rem 2.2rem; display:flex; flex-wrap:wrap; gap:.4rem 2rem; font-size:.95rem; color:var(--ink-soft)}
.foot strong{color:var(--ink); font-weight:700}

@media (max-width: 900px){
  .tiles{grid-template-columns:repeat(2, minmax(0,1fr))}
  .band{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 640px){
  body{font-size:1.08rem}
  .hero{grid-template-columns:minmax(0,1fr); gap:1.4rem; padding-block:2.2rem 2rem}
  .hero-logo{width:92px; order:-1}
  .tiles{gap:.75rem}
  .tile{padding:1.1rem 1rem 1rem; border-radius:16px}
  .tile .ic{width:58px; height:58px}
  .t-title{font-size:1.02rem}
  .t-desc{font-size:.93rem}
  .band{padding:1.5rem; border-radius:16px}
  .page-head{grid-template-columns:minmax(0,1fr); gap:1rem}
  .page-head .ic{width:72px; height:72px}
  .portrait{width:112px; height:112px; border-width:8px; font-size:.7rem}
  .band-logo{width:72px; height:72px}
  .others ul{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}