/* valmera.nl: Boxy-vorm in de huisstijl van Valmera (Poppins, Source Sans 3, blauw) */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sourcesans3-400.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/sourcesans3-600.woff2) format("woff2")}

:root{
  --blauw:#2596be;
  --donker:#19637e;
  --diep:#124a5f;
  --teal:#1db4a3;
  --licht:#bde4f2;
  --tint:#eaf6fb;
  --inkt:#13262e;
  --inkt-zacht:#3f5561;
  --wit:#fff;
  --kop:"Poppins",system-ui,sans-serif;
  --tekst:"Source Sans 3",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,4vw,48px);
  --r:20px;
  --band:clamp(64px,8vw,112px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--donker) var(--tint)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--tekst);font-size:18px;line-height:1.55;color:var(--inkt);background:var(--wit);font-variant-numeric:tabular-nums}
::selection{background:var(--licht);color:var(--inkt)}
:focus-visible{outline:3px solid var(--donker);outline-offset:3px;border-radius:6px}
.statement :focus-visible,.contact :focus-visible,.doos-donker :focus-visible{outline-color:var(--licht)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--tint)}
::-webkit-scrollbar-thumb{background:var(--donker);border:3px solid var(--tint);border-radius:8px}
img{max-width:100%;height:auto;display:block}
.beeld{width:100%}
a{color:var(--donker);text-decoration-thickness:1.5px;text-underline-offset:.18em}
a:hover{color:var(--diep)}
h1,h2,h3{font-family:var(--kop);margin:0;text-wrap:balance}
h1,.groot,.doos-wit h2,.contact h2{font-weight:300;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(2.1rem,.9rem + 3.6vw,4.4rem);color:var(--blauw)}
.groot{font-size:clamp(1.9rem,1rem + 2.6vw,3.4rem);color:var(--diep)}
.doos-wit h2{font-size:clamp(1.9rem,1.2rem + 2vw,2.75rem);color:var(--donker)}
h3{font-weight:500;font-size:1.4rem;line-height:1.2;color:var(--diep);letter-spacing:-.01em}
p{margin:0}
p+p{margin-top:1em}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--wit);color:var(--donker);padding:8px 12px;z-index:100;border-radius:999px}
.skip:focus{left:8px}
section{scroll-margin-top:96px}

/* iconen: één lijndikte */
.ico{width:1.1em;height:1.1em;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icoon{width:72px;height:72px;stroke:var(--diep);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 22px}

/* pilknoppen */
.pil{display:inline-flex;align-items:center;justify-content:center;gap:.6em;white-space:nowrap;font-family:var(--kop);font-weight:500;font-size:1.05rem;line-height:1;padding:19px 30px;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.pil:active{transform:translateY(1px)}
.pil-donker{background:var(--donker);color:var(--wit)}
.pil-donker:hover{background:var(--diep);color:var(--wit)}
.pil-wit{background:var(--wit);color:var(--diep)}
.pil-wit:hover{background:var(--licht);color:var(--diep)}
.pil-omlijnd{border-color:rgba(189,228,242,.6);color:var(--wit)}
.pil-omlijnd:hover{border-color:var(--wit);background:rgba(255,255,255,.08);color:var(--wit)}
.tekstlink{font-family:var(--kop);font-weight:500;font-size:1.05rem;color:var(--donker);text-decoration-color:var(--licht)}
.tekstlink:hover{text-decoration-color:var(--donker)}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:40px}

/* header */
.kop{position:sticky;top:0;z-index:50;background:var(--wit);transition:box-shadow .3s var(--ease)}
.kop.is-gescrold{box-shadow:0 10px 30px -14px rgba(18,74,95,.28)}
.kop .wrap{display:flex;align-items:center;gap:16px;min-height:88px}
.merk{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--donker);font-family:var(--kop);font-weight:600;font-size:1.3rem;margin-right:auto;line-height:1}
.merk img{width:48px;height:48px}
.nav{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.nav a{display:block;white-space:nowrap;padding:10px 14px;font-family:var(--kop);font-weight:500;font-size:1.02rem;color:var(--donker);text-decoration:none;border-radius:999px;position:relative;transition:background-color .2s var(--ease)}
.nav a:hover{background:var(--tint);color:var(--diep)}
.nav a[aria-current="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:var(--teal);border-radius:2px}
.menu-knop{display:none}

/* hero: wit */
.hero{padding:clamp(40px,5vw,64px) 0 clamp(64px,7vw,96px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,12fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero p{font-size:clamp(1.1rem,1rem + .4vw,1.2rem);max-width:30em;margin-top:28px;color:var(--inkt)}
.hero .beeld{max-width:640px;width:calc(100% + var(--gutter));justify-self:end;margin-right:calc(-1 * var(--gutter))}

/* statement: diep */
.statement{background:var(--diep);color:var(--licht);padding:clamp(72px,9vw,128px) 0 calc(var(--band) + 120px);text-align:center}
.statement p{font-family:var(--kop);font-weight:300;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.8rem,1rem + 2.6vw,3.4rem);max-width:21ch;margin:0 auto;text-wrap:balance}

/* dag: blauw, met de witte doos over de naad */
.dag{background:var(--blauw);color:var(--wit);padding:0 0 var(--band);display:flow-root}
.dag .wrap{display:flow-root}
.doos{border-radius:var(--r)}
.doos-wit{background:var(--wit);color:var(--inkt);padding:clamp(28px,4vw,56px)}
.dag .doos-wit{margin-top:-120px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,56px);align-items:center}
.doos-wit p{color:var(--inkt)}
.doos-wit h2+p{margin-top:20px}
.feiten{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:28px 0 0;padding-top:24px;border-top:1px solid var(--licht)}
.feiten>div{display:contents}
.feiten dt{font-family:var(--kop);font-weight:500;color:var(--donker)}
.feiten dd{margin:0;color:var(--inkt-zacht)}
.dag .groot{color:var(--wit);text-align:center;margin:var(--band) auto 0}
.kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(40px,5vw,64px)}
.kaart{background:var(--wit);color:var(--inkt);border-radius:var(--r);padding:clamp(28px,3vw,40px) clamp(22px,2.5vw,32px) clamp(28px,3vw,36px);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.kaart h3{margin-bottom:12px}
.kaart p{color:var(--inkt-zacht);font-size:1rem;line-height:1.5;max-width:30em}
.dag-slot{font-family:var(--kop);font-weight:500;font-size:clamp(1.5rem,1rem + 1vw,1.75rem);line-height:1.3;text-align:center;max-width:32ch;margin:clamp(56px,7vw,96px) auto 0;color:var(--wit);text-wrap:balance}

/* logeerweekenden: wit */
.logeer{padding:var(--band) 0;text-align:center}
.logeer .groot{max-width:18ch;margin:0 auto}
.logeer .intro{font-size:1.2rem;color:var(--inkt-zacht);max-width:36em;margin:24px auto 0;text-wrap:pretty}
.logeer .beeld{width:min(100%,460px);margin:clamp(32px,4vw,48px) auto 0}
.dozen{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:left}
.dozen li{display:flex;flex-direction:column;align-items:center;gap:18px}
.doos-donker{background:var(--diep);color:var(--licht);padding:28px 26px;width:100%;flex:1;font-size:1.02rem;line-height:1.5}
.dozen strong{font-family:var(--kop);font-weight:500;color:var(--diep);font-size:1.05rem}

/* over: tint met witte doos */
.over{background:var(--tint);padding:var(--band) 0}
.over .doos-wit{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:center}
.over .beeld{width:100%}
.stappen{grid-column:1/-1;counter-reset:stap;list-style:none;margin:clamp(16px,2vw,24px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.stappen li{counter-increment:stap;border-top:2px solid var(--teal);padding-top:18px}
.stappen h3{font-size:1.25rem;display:flex;align-items:baseline;gap:12px}
.stappen h3::before{content:counter(stap);font-weight:300;font-size:1.6rem;color:var(--donker);letter-spacing:-.02em}
.stappen p{color:var(--inkt-zacht);font-size:1rem;line-height:1.5;margin-top:8px}

/* contact: diep */
.contact{background:var(--diep);color:var(--licht);padding:var(--band) 0}
.contact .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.contact h2{font-size:clamp(1.8rem,1rem + 2.4vw,3rem);color:var(--licht)}
.contact p{font-size:1.15rem;margin-top:20px;max-width:30em}
.contact .acties{gap:14px}
.contact address{font-style:normal;display:flex;gap:12px;align-items:flex-start;margin-top:36px;color:var(--licht);line-height:1.4}
.contact address .ico{width:1.3em;height:1.3em;margin-top:.1em}
.contact .beeld{width:min(100%,460px);justify-self:end}

/* voet */
.voet{padding:32px 0;font-size:.95rem;color:var(--inkt-zacht)}
.voet .wrap{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;align-items:center}
.voet strong{font-family:var(--kop);font-weight:600;color:var(--donker)}

/* binnenkomst: één moment */
@media (prefers-reduced-motion:no-preference){
  .hero .tekst>*{animation:op .9s var(--ease) both}
  .hero .tekst>*:nth-child(2){animation-delay:.08s}
  .hero .tekst>*:nth-child(3){animation-delay:.16s}
  .hero .beeld{animation:op 1s .2s var(--ease) both}
  @keyframes op{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* responsive */
@media (max-width:1100px){
  .nav a{padding:10px 10px;font-size:.95rem}
  .kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dozen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:880px){
  .kop .wrap{min-height:72px;gap:12px}
  .merk img{width:42px;height:42px}
  .merk{font-size:1.2rem}
  .menu-knop{display:inline-flex;align-items:center;gap:8px;font-family:var(--kop);font-weight:500;font-size:1rem;color:var(--donker);background:var(--tint);border:0;border-radius:999px;padding:11px 16px;cursor:pointer}
  .menu-knop .ico{width:1.2em;height:1.2em}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--wit);flex-direction:column;gap:2px;padding:8px var(--gutter) 16px;box-shadow:0 16px 32px -16px rgba(18,74,95,.3)}
  .nav.is-open{display:flex}
  .nav a{padding:13px 14px;font-size:1.05rem;border-radius:12px}
  .nav a[aria-current="true"]::after{display:none}
  .nav a[aria-current="true"]{background:var(--tint)}
  .hero .wrap,.dag .doos-wit,.over .doos-wit,.contact .wrap{grid-template-columns:1fr}
  .hero .beeld{justify-self:center;max-width:min(100%,520px);width:100%;margin-right:0}
  .dag .doos-wit{margin-top:-96px}
  .dag .doos-wit .beeld{max-width:min(100%,420px);margin:0 auto}
  .over .beeld{max-width:min(100%,460px);margin:0 auto;order:-1}
  .stappen{grid-template-columns:1fr}
  .contact .beeld{justify-self:center;order:-1}
  section{scroll-margin-top:72px}
}
@media (max-width:560px){
  body{font-size:17px}
  .hero .acties .pil,.contact .acties .pil{width:100%}
  .kaarten,.dozen{grid-template-columns:1fr}
  .feiten{grid-template-columns:1fr;gap:4px 0}
  .feiten dd{margin-bottom:10px}
  .statement{padding-bottom:calc(var(--band) + 88px)}
  .dag .doos-wit{margin-top:-72px}
  .contact .acties{flex-direction:column;align-items:stretch}
}