/* OVER ONS (/over-ons/): alle regels zijn gescoped op .os-page of staan in een eigen os-klasse.
   Header, topbar, mobiel menu en footer houden hun eigen CSS (base.css). De hero heet .hero omdat site.js de
   transparante header daarop laat reageren. Vormtaal, kleuren en typografie volgen de vernieuwde sectorpagina's
   (ggz.css): DM Sans 400/500 voor koppen, hairlines, de afronding 5px 82px 5px 5px, teal als accent in de hero,
   een volle berry afsluiting en het pictogram (/logo.png) klein en zonder houder. */

@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')}

.os-page{--os-pad:clamp(76px,7.3vw,108px);--os-h2:clamp(2.25rem,4.6vw,4rem);--os-rule:#dacbd5;--os-turq:#2ba2b1;color:var(--ink)}
.os-page :where(h1,h2,h3){font-family:'DM Sans',Arial,sans-serif;font-weight:500}
.os-wrap{width:100%;max-width:1216px;margin:0 auto;padding:0 clamp(24px,4vw,48px)}
.os-page section[id]{scroll-margin-top:calc(var(--hdr-h) + 12px)}
.os-h2{font-size:var(--os-h2);line-height:1.04;letter-spacing:-.055em;color:var(--ink);text-wrap:balance}
.os-sec{padding:var(--os-pad) 0}
.os-page :where(a,.btn):focus-visible{outline-offset:4px}

/* ---- 1. HERO: het bestaande Over ons-beeld achter de transparante header, met afzonderlijke uitsnedes en contrast op ieder scherm ---- */
.os-hero{position:relative;background:#081a1d;color:#fff;display:flex;align-items:flex-end;min-height:calc(clamp(560px,80vh,780px) - var(--hdr-h));padding:clamp(3rem,7vw,6rem) 0 clamp(2.25rem,4vw,3.5rem);overflow:hidden;isolation:isolate}
.os-hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 28%;filter:saturate(.9) brightness(.92);pointer-events:none}
.os-hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(5,22,25,.94) 0%,rgba(5,22,25,.86) 43%,rgba(5,22,25,.48) 74%,rgba(5,22,25,.3) 100%),linear-gradient(180deg,rgba(5,22,25,.48),transparent 34%,rgba(5,22,25,.46))}
.os-hero>.wide{width:100%}
.os-hero h1{font-size:clamp(1.95rem,1.1rem + 4.2vw,5.25rem);line-height:1.02;letter-spacing:-.05em;color:#fff;max-width:15.5em}
.os-h1-a,.os-h1-b{display:block;text-wrap:balance}
.os-h1-b{color:var(--os-turq)}
.os-hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem clamp(2rem,6vw,5rem);align-items:end;margin-top:clamp(2rem,4.5vw,3.75rem);padding-top:clamp(1.25rem,2.4vw,1.9rem);border-top:1px solid rgba(255,255,255,.24)}
.os-lead{font-size:clamp(1.05rem,.95rem + .45vw,1.2rem);line-height:1.55;color:#fff;max-width:54ch}
.os-hero .btn:focus-visible{outline-color:#fff}
@media(max-width:900px) and (min-width:701px){.os-hero-img{object-position:55% 25%}.os-hero-scrim{background:linear-gradient(90deg,rgba(5,22,25,.92),rgba(5,22,25,.74) 55%,rgba(5,22,25,.4)),linear-gradient(180deg,rgba(5,22,25,.45),transparent 36%,rgba(5,22,25,.56))}}
@media(max-width:700px){
  .os-hero{min-height:calc(690px - var(--hdr-h));display:block;padding:clamp(10rem,44vw,14rem) 0 2rem}
  .os-hero-img{object-position:52% 18%}
  .os-hero-scrim{background:linear-gradient(180deg,rgba(5,22,25,.62) 0%,rgba(5,22,25,.14) 27%,rgba(5,22,25,.76) 48%,rgba(5,22,25,.95) 76%,rgba(5,22,25,.97) 100%)}
  .os-hero-foot{grid-template-columns:minmax(0,1fr)}
}

/* ---- 2. WAAROM WE BEGONNEN: kop links, lopende tekst rechts ---- */
.os-why-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,7vw,7rem);align-items:start}
.os-prose{max-width:36rem}
.os-prose p{font-size:1.125rem;line-height:1.6;color:var(--muted)}
.os-prose .os-prose-lead{font-family:'DM Sans',Arial,sans-serif;font-weight:400;font-size:clamp(1.4rem,1.15rem + 1vw,1.85rem);line-height:1.32;letter-spacing:-.025em;color:var(--ink);margin-bottom:1.75rem}
@media(max-width:760px){.os-why-grid{grid-template-columns:minmax(0,1fr);gap:1.6rem}}

/* ---- 3. WAT JE DAARVAN MERKT: kop rechts, afwisselende tekstregels links ---- */
.os-asks{background:var(--soft)}
.os-asks-grid{display:grid;gap:clamp(2rem,5vw,3rem)}
.os-asks-intro{font-size:1.125rem;line-height:1.55;color:var(--muted);margin-top:1.4rem;max-width:30ch}
.os-ask{padding:clamp(1.6rem,3vw,2.3rem) 0;border-top:1px solid var(--os-rule)}
.os-ask:last-child{border-bottom:1px solid var(--os-rule)}
.os-ask h3{font-size:clamp(1.45rem,1.1rem + 1.3vw,2.1rem);line-height:1.15;letter-spacing:-.04em;color:var(--ink);margin-bottom:.65rem;transition:color .2s}
.os-ask p{font-size:1.0625rem;line-height:1.6;color:var(--muted);max-width:42ch}
@media(hover:hover){.os-ask:hover h3{color:var(--berry)}}
@media(min-width:900px){
  .os-asks-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:'list head';gap:clamp(3rem,7vw,7rem);align-items:start}
  .os-asks-head{grid-area:head;text-align:right}
  .os-asks-head .os-asks-intro{margin-left:auto}
  .os-asks-list{grid-area:list;padding-top:.5rem}
  .os-ask:nth-child(2){padding-left:clamp(2rem,6vw,5.5rem)}
}

/* ---- 4. DE NAAM SAMENSTERK: één teal merkvlak met de afronding van de sectorpagina's; het pictogram staat klein (zoals op de sectorpagina's, 32 tot 36 px) en zonder houder rechtsonder naast het vlak ---- */
.os-name-sec{padding:var(--os-pad) 0 clamp(2.5rem,5vw,4rem)}
.os-name{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1rem,3vw,2rem);align-items:end}
.os-name-panel{background:var(--teal);color:#fff;border-radius:5px 96px 5px 5px;padding:clamp(2.5rem,6vw,5.5rem) clamp(1.75rem,6vw,5.5rem)}
.os-name-panel .os-h2{color:#fff;margin-bottom:clamp(1.1rem,2vw,1.6rem);max-width:12em}
.os-name-panel p{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.55;color:#fff;max-width:34em}
@media(min-width:1101px){
  .os-name-panel{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .os-name-panel .os-h2{margin-bottom:0;max-width:none;font-size:clamp(2.25rem,3.7vw,3.4rem)}
  .os-name-panel p{margin-top:.55rem}
}
.os-name-mark{width:40px;height:auto;margin-bottom:.4rem}
@media(max-width:860px){
  .os-name{grid-template-columns:minmax(0,1fr);gap:1rem}
  .os-name-panel{border-radius:5px 64px 5px 5px}
  .os-name-mark{width:34px;justify-self:end;margin:0}
}

/* ---- 5. SAMENSTERK VANDAAG: compact, hairline erboven ---- */
.os-today{padding:0 0 clamp(2.5rem,5vw,4rem)}
.os-today-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(1.25rem,4vw,3rem);align-items:center}
.os-today-grid{padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--os-rule)}
.os-today h2{font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);line-height:1.15;letter-spacing:-.04em;color:var(--ink);margin-bottom:.35rem}
.os-today-copy p{color:var(--muted);font-size:1.0625rem;line-height:1.55;max-width:34ch}
.os-sectors{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem}
.os-sectors a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.05rem;border:1px solid var(--teal);border-radius:24px;background:#fff;font-family:'DM Sans',Arial,sans-serif;font-weight:500;font-size:.97rem;line-height:1.2;color:var(--teal);transition:background-color .18s,color .18s}
.os-sectors a:hover{background:var(--teal);color:#fff}
@media(min-width:1101px){.os-sectors{justify-content:flex-end}}
@media(max-width:1100px){.os-today-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- 6. AFSLUITING: volle berry band, kop rechts (zoals de sectorpagina's) ---- */
.os-close{background:var(--berry);color:#fff;padding:var(--os-pad) 0}
.os-close-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);grid-template-areas:'actions copy';gap:clamp(2rem,6vw,4.5rem);align-items:end}
.os-close-copy{grid-area:copy;text-align:right}
.os-close-actions{grid-area:actions}
.os-close .os-h2{color:#fff;max-width:11em;margin-left:auto}
.os-close-copy p{font-size:clamp(1.1rem,1rem + .5vw,1.2rem);line-height:1.55;color:#fff;max-width:26em;margin:1.4rem 0 0 auto}
.os-close .btn:focus-visible{outline-color:#fff}
@media(max-width:860px){
  .os-close-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:'copy' 'actions';gap:1.75rem}
  .os-close-copy{text-align:left}
  .os-close .os-h2,.os-close-copy p{margin-left:0}
}