/* Over-ons: aanvulling op ilko.css, uit de canvas (Over-ons.dc.html). */
/* ===== PAGINA: Over ons ===== */
/* hero: tekst links, de winkelpui rechts */
.pg-over .ov-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;align-items:center;padding-top:40px}
.pg-over .ov-hero-l{grid-column:1 / span 5}
.pg-over .ov-hero-r{grid-column:6 / span 7}
.pg-over .ov-h1{margin:0;font-size:88px;line-height:.92;letter-spacing:-.045em;text-wrap:balance}
.pg-over .ov-lead{margin-top:28px;max-width:470px;text-wrap:pretty}
.pg-over .ov-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.pg-over .ov-cta .btn.s .c{color:var(--paper)}

/* de winkelpui: tekening die meedoet met de echte openingstijden */
.pg-over .sf{background:var(--lila);border-radius:var(--r-l);padding:10px;overflow:hidden}
.pg-over .sf-scene{position:relative;aspect-ratio:640 / 420;margin:-10px -10px 0}
.pg-over .sf-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pg-over .sf-logo{position:absolute;left:50.94%;top:39.3%;width:11.9%;height:auto;display:block;pointer-events:none}
.pg-over .sf-lit{opacity:0;transition:opacity .7s ease}
.pg-over .sf.is-open .sf-lit{opacity:1}
.pg-over .sf-door{transform-box:fill-box;transform-origin:100% 50%;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.pg-over .sf.is-open .sf-door{transform:scaleX(.14)}
.pg-over .sf-s-open{opacity:0;transition:opacity .4s ease}
.pg-over .sf-s-closed{opacity:1;transition:opacity .4s ease}
.pg-over .sf.is-open .sf-s-open{opacity:1}
.pg-over .sf.is-open .sf-s-closed{opacity:0}
.pg-over .sf-hand{transform-box:view-box;transform-origin:364px 103px;transition:transform .9s cubic-bezier(.22,1,.36,1)}

.pg-over .sf-panel{background:var(--paper);border-radius:var(--r-m);padding:24px 26px 20px}
.pg-over .sf-title{display:flex;align-items:center;gap:12px;margin:0;font-size:30px;line-height:1.1;letter-spacing:-.03em}
.pg-over .sf-title .live,.pg-over .sf-title .ringdot{width:10px;height:10px}
.pg-over .sf-line{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2);min-height:1.5em;text-wrap:pretty}
.pg-over .sf-days{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;margin-top:18px;padding:4px;border-radius:999px;background:var(--ground)}
.pg-over .sf-day{height:40px;border:0;border-radius:999px;background:transparent;font-size:15px;font-weight:500;color:var(--ink);transition:background .25s,box-shadow .25s}
.pg-over .sf-day:hover{background:rgba(255,255,255,.7)}
.pg-over .sf-day.on{background:var(--ink);color:var(--paper);font-weight:600}
.pg-over .sf-rail{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));height:48px;margin-top:10px;border-radius:var(--r-s);background:var(--ground)}
.pg-over .sf-band{position:absolute;top:5px;bottom:5px;border-radius:8px;background:var(--lila);box-shadow:inset 0 0 0 1px rgba(17,17,17,.10)}
.pg-over .sf-now{position:absolute;top:2px;bottom:2px;width:2px;margin-left:-1px;border-radius:2px;background:var(--red);z-index:2;pointer-events:none}
.pg-over .sf-h{position:relative;z-index:1;border:0;background:transparent;padding:0;display:grid;place-items:center;font-size:14px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pg-over .sf-h.in{color:var(--ink)}
.pg-over .sf-h span{display:grid;place-items:center;min-width:32px;height:32px;padding:0 4px;border-radius:999px;transition:background .2s,color .2s}
.pg-over .sf-h:hover span{background:rgba(255,255,255,.8)}
.pg-over .sf-h.on span{background:var(--ink);color:var(--paper);font-weight:600}
.pg-over .sf-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;font-size:15px;color:var(--ink-2)}
.pg-over .sf-foot .tl{font-size:15px}

/* wie we zijn */
.pg-over .ov-who{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;align-items:start;padding-top:120px}
.pg-over .ov-photo{grid-column:1 / span 5;margin:0;position:sticky;top:110px}
.pg-over .ov-who-r{grid-column:7 / span 6}
.pg-over .ph-box{aspect-ratio:1 / 1;border-radius:var(--r-l);background:repeating-linear-gradient(135deg,#E7E7F8 0 16px,#EEEEFB 16px 32px);box-shadow:inset 0 0 0 1px rgba(17,17,17,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.pg-over .ph-ic{width:64px;height:64px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--ink)}
.pg-over .ph-l{font-size:16px;font-weight:600;color:var(--ink)}
.pg-over .ph-cap{margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.pg-over .ph-t{display:inline-block;padding:0 6px;border-radius:6px;background:var(--lila);box-shadow:inset 0 0 0 1px rgba(17,17,17,.14);color:var(--ink);font-weight:600;line-height:1.5}
.pg-over .ov-p{margin:24px 0 0;font-size:19px;line-height:1.6;color:var(--ink);max-width:560px;text-wrap:pretty}
.pg-over .ov-p + .ov-p{margin-top:16px;color:var(--ink-2)}
.pg-over .ov-do{list-style:none;margin:48px 0 0;padding:0}
.pg-over .ov-do li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;padding:28px 0;border-top:1px solid rgba(17,17,17,.10)}
.pg-over .ov-do li:last-child{border-bottom:1px solid rgba(17,17,17,.10)}
.pg-over .ov-do-t{margin:6px 0 0;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.pg-over .ov-do-p{margin:8px 0 14px;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:480px;text-wrap:pretty}

/* zo werken we: het donkere vlak */
.pg-over .ov-how{padding-top:120px}
.pg-over .ov-how-in{background:var(--lila);color:var(--ink);border-radius:var(--r-l);padding:80px 64px 72px}
.pg-over .ov-how-head .lead{max-width:60ch}
.pg-over .ov-vals{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.pg-over .ov-vals li{border-top:1px solid rgba(17,17,17,.14);padding-top:28px}
.pg-over .ov-v{margin:0;font-size:60px;line-height:.95;letter-spacing:-.05em;color:var(--ink);white-space:nowrap}
.pg-over .ov-u{font-family:'Geist',ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:18px;letter-spacing:0;color:var(--ink-2);margin-left:8px}
.pg-over .ov-vt{margin:20px 0 0;font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.pg-over .ov-vp{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:30ch;text-wrap:pretty}
.pg-over .ov-how-cta{display:flex;gap:16px 28px;align-items:center;flex-wrap:wrap;margin-top:56px}
.pg-over .ov-how-cta .btn .c{color:var(--paper)}

/* winkel: echte kaart */
.pg-over .ov-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pg-over .ov-pin{position:absolute;left:50%;top:50%;width:56px;height:84px;margin:-80px 0 0 -28px;display:block;pointer-events:none}
.pg-over .ov-osm{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:999px;background:var(--paper-2);font-size:13px;color:var(--ink-2)}
.pg-over #winkel .btn .c{color:var(--paper)}

@media (max-width:1180px){
.pg-over .ov-hero-l,.pg-over .ov-hero-r{grid-column:1 / -1}
.pg-over .ov-hero-l{max-width:720px}
.pg-over .ov-h1{font-size:76px}
.pg-over .ov-who{padding-top:96px}
.pg-over .ov-photo{grid-column:1 / span 5}
.pg-over .ov-who-r{grid-column:6 / span 7}
.pg-over .ov-how{padding-top:96px}
.pg-over .ov-how-in{padding:64px 40px 56px}
.pg-over .ov-vals{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
}
@media (max-width:900px){
.pg-over .ov-photo{grid-column:1 / -1;position:static;order:2}
.pg-over .ov-who-r{grid-column:1 / -1}
.pg-over .ph-box{aspect-ratio:16 / 10}
}
@media (max-width:760px){
.pg-over .ov-hero{padding-top:24px;row-gap:32px}
.pg-over .ov-h1{font-size:48px}
.pg-over .ov-lead{margin-top:18px;font-size:17px}
.pg-over .ov-cta{margin-top:24px}
.pg-over .ov-cta .btn{flex:1 1 100%;justify-content:space-between}
.pg-over .sf{padding:6px}
.pg-over .sf-scene{margin:-6px -6px 0}
.pg-over .sf-panel{padding:18px 14px 16px}
.pg-over .sf-title{font-size:24px}
.pg-over .sf-line{font-size:15px;min-height:4.5em}
.pg-over .sf-day{height:36px;font-size:14px}
.pg-over .sf-rail{height:44px}
.pg-over .sf-h{font-size:13px}
.pg-over .sf-h span{min-width:24px;height:28px;padding:0 2px}
.pg-over .ov-who{padding-top:72px}
.pg-over .ph-box{aspect-ratio:4 / 3}
.pg-over .ov-p{font-size:17px}
.pg-over .ov-do{margin-top:32px}
.pg-over .ov-do li{grid-template-columns:40px minmax(0,1fr);gap:16px;padding:22px 0}
.pg-over .ov-do-t{font-size:21px;margin-top:4px}
.pg-over .ov-how{padding-top:72px}
.pg-over .ov-how-in{padding:40px 20px 32px}
.pg-over .ov-vals{grid-template-columns:1fr;gap:0;margin-top:36px}
.pg-over .ov-vals li{padding:22px 0 24px}
.pg-over .ov-v{font-size:48px}
.pg-over .ov-vt{margin-top:12px}
.pg-over .ov-how-cta{margin-top:24px}
.pg-over .ov-how-cta .btn{flex:1 1 100%;justify-content:space-between}
}