/* over-ons: CSS van de secties op /over-ons/ (docs/prototype/over-ons.html, inline <style>).
   "Gewoon hier in Aalst" gebruikt .visit-* uit styles.css; de afsluiter staat daar ook. */
/* Over ons: paginaspecifieke stijlen. Thema-kleuren komen uit src/site.css. */
/* ---------- hero: teamfoto met handgeschreven aantekeningen ---------- */
.hero-photo{position:relative}
.hand{font-family:var(--font-hand);color:var(--color-accent);line-height:1.15}
.hero-photo .hand{position:absolute;font-size:20px;opacity:0;transform:translateY(6px);transition:opacity .6s var(--d,0s),transform .6s var(--d,0s)}
.hero-photo.in .hand{opacity:1;transform:none}
.hero-photo .hand svg{display:block;overflow:visible}
.hero-photo .hand path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* elke aantekening hangt aan haar portret: de pijl staat midden boven of onder die persoon */
.team-tile .hand{margin:0;font-size:20px;font-weight:400;text-align:left;white-space:nowrap;color:var(--color-accent)}
.hand-t{top:-34px}
.hand-b{bottom:-36px}
.hand-l{left:calc(50% - 7px)}
.hand-r{right:calc(50% - 7px)}
@media (max-width:640px){
.hero-photo .hand{display:none}
}
/* ---------- verhaal: een rail die meekleurt, elk moment een kaart, vandaag als donkere eindkaart ---------- */
.about-story .tl-heading,.about-story .tl-wrap{max-width:820px;margin-inline:auto;width:100%;min-width:0}
.about-story .tl-heading h2{max-width:23ch}
.about-story .tl-heading .lede{max-width:52ch}
.tl-heading::before{content:"";display:block;width:48px;height:3px;background:var(--color-accent);margin-bottom:24px}
.tl-wrap{position:relative;margin-top:56px;--rail:11px}
.tl{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:20px}
/* de rail: grijs als basis, oranje vult aan tot waar je gelezen hebt (--start, --end en --fill komen uit over-ons.js) */
.tl::before,.tl-fill{content:"";position:absolute;left:var(--rail);top:34px;width:2px;border-radius:2px}
.tl::before{bottom:34px;background:var(--color-rule)}
.tl-wrap.has-end .tl::before{top:var(--start);bottom:auto;height:calc(var(--end) - var(--start))}
.tl-fill{display:block;z-index:1;top:var(--start,34px);height:var(--fill,0px);background:var(--color-accent);transition:height .15s linear}
.tl > li{position:relative;padding-left:48px}
.tl-dot{position:absolute;z-index:2;left:calc(var(--rail) - 6px);top:28px;width:14px;height:14px;border-radius:50%;background:var(--color-paper-2);border:2px solid var(--color-ink-3);transition:background-color .3s,border-color .3s,transform .3s}
.tl > li.lit .tl-dot{background:var(--color-accent);border-color:var(--color-accent)}
.tl-card{min-width:0;padding:28px 32px 30px;border-radius:20px;background:var(--color-card);border:1px solid rgb(25 23 20 / .06);box-shadow:0 1px 0 rgb(25 23 20 / .03),0 18px 40px -34px rgb(25 23 20 / .45)}
.tl-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:12px}
.tl-year{margin:0;font-family:var(--font-serif);font-size:30px;font-weight:500;line-height:1.05;letter-spacing:-.03em;color:var(--color-accent-dark,#B8391A)}
.tl-note{margin:0;font-family:var(--font-hand);font-size:19px;line-height:1.2;color:var(--color-ink-3);transform:rotate(-1.5deg);transform-origin:left center}
.tl-head:not(:has(.tl-year)) .tl-note{color:var(--color-accent-dark,#B8391A)}
.tl-card h3{font-size:25px;line-height:1.2;max-width:28ch}
.tl-text{margin-top:10px;max-width:58ch;font-size:16px;line-height:1.65;color:var(--color-ink-2)}
/* vandaag: de lijn eindigt in een donkere kaart en een grotere, oranje punt */
.tl > li.now .tl-dot{width:20px;height:20px;left:calc(var(--rail) - 9px);top:36px;background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 0 6px var(--color-accent-soft)}
.tl > li.now .tl-card{padding:36px 36px 34px;border:0;background:var(--color-ink);box-shadow:0 24px 50px -30px rgb(25 23 20 / .7)}
.tl > li.now .tl-year{font-size:40px;color:var(--color-accent)}
.tl > li.now h3{font-size:30px;color:var(--color-paper)}
.tl > li.now .tl-text{color:#D7D1C6}
.tl > li.now .tl-card a{color:var(--color-paper)}
.tl > li.now .tl-logo-group{border-top-color:rgb(255 255 255 / .12)}
.tl > li.now .tl-logos img{filter:grayscale(1) brightness(0) invert(1);opacity:.75}
@media(min-width:1200px){
.about-story>.site-container{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);align-items:start;gap:72px}
.about-story .tl-heading{position:sticky;top:112px}
.about-story .tl-heading h2{font-size:clamp(36px,3.4vw,48px)}
.about-story .tl-heading .lede{font-size:18px}
.about-story .tl-wrap{margin-top:0}
}
@media(max-width:639px){
.tl-wrap{margin-top:40px;--rail:7px}
.tl{gap:14px}
.tl > li{padding-left:30px}
.tl-dot{top:24px;width:12px;height:12px;left:calc(var(--rail) - 5px)}
.tl > li.now .tl-dot{width:16px;height:16px;left:calc(var(--rail) - 7px);top:30px;box-shadow:0 0 0 4px var(--color-accent-soft)}
.tl-card{padding:22px 20px 24px;border-radius:16px}
.tl-year{font-size:26px}
.tl-note{font-size:17px}
.tl-card h3{font-size:22px}
.tl-text{font-size:15px}
.tl > li.now .tl-card{padding:26px 22px 26px}
.tl > li.now .tl-year{font-size:32px}
.tl > li.now h3{font-size:26px}
}
.tl-logo-group{min-width:0;margin-top:22px;padding-top:18px;border-top:1px solid var(--color-rule)}
.tl-logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px}
.tl-logos li{display:flex;align-items:center;min-width:0;min-height:30px}
.tl-logos img{display:block;width:auto;height:auto;max-width:104px;max-height:28px;object-fit:contain;filter:grayscale(1) brightness(.3);opacity:.8;transition:filter .25s,opacity .25s}
.tl-card:hover .tl-logos img{filter:none;opacity:1}
.tl > li.now .tl-card:hover .tl-logos img{filter:grayscale(1) brightness(0) invert(1);opacity:1}
@media(max-width:479px){
.tl-logos{gap:12px 22px}
.tl-logos img{max-width:84px;max-height:22px}
}
@media(prefers-reduced-motion:reduce){
.tl-fill,.tl-dot,.tl-logos img{transition:none}
}
/* ---------- team: kop met het team als rij portretten ---------- */
.team-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (min-width:640px){
.team-row{grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
}
.team-tile{position:relative}
.team-tile img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;background:var(--color-paper-2);box-shadow:0 18px 36px -24px rgb(25 23 20 / .45);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.team-tile:nth-child(odd) img{rotate:-1.2deg}
.team-tile:nth-child(even) img{rotate:1.2deg;margin-top:14px}
.team-tile:hover img{transform:translateY(-4px)}
.team-tile span{display:block;margin-top:8px;text-align:center;font-size:13px;font-weight:600;color:var(--color-ink-2)}
/* ---------- waarden: prikbord met post-its ---------- */
.board{background:#E9DFCB;background-image:radial-gradient(rgb(120 90 50 / .12) 1px,transparent 1.5px);background-size:14px 14px;border-radius:22px;padding:clamp(20px,4vw,48px)}
.pi{position:relative;background:var(--color-postit);padding:22px 20px 20px;box-shadow:0 14px 24px -12px rgb(25 23 20 / .35);rotate:var(--r,0deg);transition:rotate .3s,translate .3s}
.pi:hover{rotate:0deg;translate:0 -4px}
.pi::before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;border-radius:50%;translate:-50% 0;background:radial-gradient(circle at 35% 35%,#E8735A,#B8391A);box-shadow:0 2px 3px rgb(0 0 0 / .3)}
.pi h3{font-family:var(--font-hand);font-weight:400;font-size:25px;line-height:1.1;letter-spacing:0;color:var(--color-ink)}
.pi p{font-size:15px;color:#3E3A30;margin-top:10px;line-height:1.5}
.pi.blue{background:#DCE6F2}
.pi.pink{background:#F6D9CC}
/* ---------- kantoor: kaart van de streek ---------- */
.map{width:100%;height:auto}
.map .river{fill:none;stroke:#5B7C8F;stroke-width:3}
.map .road{fill:none;stroke:#3A362F;stroke-width:1.5}
.map .town circle{fill:#6B645A}
.map .town text{fill:#B9B1A2;font-size:13px;font-family:var(--font-sans)}
.map .home circle.core{fill:var(--color-accent)}
.map .home text{fill:var(--color-paper);font-weight:700;font-size:16px}
.map .ring{fill:none;stroke:var(--color-accent);stroke-width:1.5;opacity:.6;transform-origin:center;transform-box:fill-box;animation:ring 3s ease-out infinite}
.map .ring:nth-of-type(2){animation-delay:1.5s}
@keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(4.5);opacity:0}}
.tip{position:absolute;z-index:20;width:max-content;max-width:260px;border-radius:12px;background:var(--color-paper);color:var(--color-ink);padding:10px 14px;font-size:13.5px;line-height:1.45;box-shadow:0 12px 30px -10px rgb(0 0 0 / .5)}
#kantoor .lede{color:#CFC7B8}
/* ---------- vacatures: het team met een open plek, daaronder één zin over spontaan solliciteren ---------- */
/* het team op een rij; bij het scrollen zoomt de rij in, splitst ze in het midden en verschijnen daar
   titel, zin en de open plek. De scène blijft sticky staan terwijl je door .jz (280svh) scrolt; het script
   zet de transforms. Zonder script of met minder beweging staat meteen de eindstand. */
.jz{position:relative;height:280svh}
.jz-stage{--w:min(clamp(132px,15vw,280px),calc((100svh - 330px) / 1.5));--h:calc(var(--w) * 1.5);--gap:calc(var(--w) * 1.3);position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:72px}
.jz-head{padding-inline:20px;text-align:center}
.jz-head .lede{max-width:44ch;margin:12px auto 0;text-wrap:balance}
.jz-row{position:relative;flex:none;height:var(--h);margin-top:clamp(28px,5svh,56px);transform-origin:50% 100%}
.jz-side{position:absolute;bottom:0;height:100%;width:max-content;display:flex;align-items:flex-end;list-style:none;margin:0;padding:0}
.jz-l{right:calc(50% + var(--gap) / 2)}
.jz-r{left:calc(50% + var(--gap) / 2)}
.jz-side li{position:relative;isolation:isolate;flex:none;height:100%}
.jz-side li::after{content:"";position:absolute;left:14%;right:14%;bottom:-2px;height:10px;border-radius:50%;background:rgb(25 23 20 / .14);filter:blur(5px);z-index:-1}
.jz-side img{display:block;height:100%;width:auto;transform-origin:50% 100%;transition:translate .25s cubic-bezier(.2,.8,.2,1)}
.jz-side li:hover img{translate:0 -6px}
/* de open plek: een persoon in een zetel, in oranje stippellijn. De omtrek is overgetrokken van een
   uitgeknipt teamportret, gespiegeld (zelfde 480×720-kader), zodat ze even groot zit als de rest. */
.jz-you{position:absolute;left:50%;bottom:0;width:var(--w);height:100%;margin-left:calc(var(--w) / -2);container-type:inline-size}
.jz-you svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:color-mix(in srgb,var(--color-accent) 5%,transparent);stroke:var(--color-accent);stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0 7.5}
.jz-you svg *{vector-effect:non-scaling-stroke}
.jz-you span{position:absolute;left:0;right:0;top:38%;text-align:center;font-family:var(--font-hand);font-weight:700;font-size:clamp(20px,22cqi,44px);color:var(--color-accent);rotate:-4deg}
/* verschijnen: elk portret springt op zodra de rij in beeld komt, van het midden naar buiten */
.jz-row.in .jz-side img{animation:jz-pop .7s cubic-bezier(.34,1.56,.64,1) var(--d,0s) both}
.jz-row:not(.in) .jz-side img{opacity:0}
@keyframes jz-pop{from{opacity:0;transform:translateY(18%) scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.jz{height:auto}
.jz-stage{position:relative;height:auto;padding-block:40px 24px}
.jz-row.in .jz-side img{animation:none}
.jz-row .jz-side img{opacity:1!important}
}
/* staand venster (zie flatCheck in over-ons.js): geen zoom, de eindstand in de flow */
.jz-flat{height:auto}
.jz-flat .jz-stage{position:relative;height:auto;padding-block:clamp(48px,6vw,80px) 8px}
/* één zin onder de rij: spontaan solliciteren */
.jb-none{max-width:560px;margin:clamp(28px,4vw,40px) auto 0;border-top:1px solid var(--color-rule);padding-top:24px;text-align:center;color:var(--color-ink-2)}
.jb-none a{font-weight:600;color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-rule);text-decoration-thickness:2px;text-underline-offset:4px}
.jb-none a:hover{text-decoration-color:var(--color-accent)}
@media (prefers-reduced-motion:reduce){
.jz-side img{transition:none}
}