/* The Way We Walk · eigen pagina
   Beeld: de paarse band uit Niki's lesmateriaal, olifanten die samen lopen, een pad door de les.
   Indeling: afwisselend paars en papier; de les is een wandelpad dat zich tekent tijdens het scrollen. */
:root{
  --tw-paars:#472D4B; --tw-diep:#2F1D33; --tw-papier:#F3ECE3; --tw-pad:#EAE0D3;
  --tw-salie:#A1BFA8; --tw-blad:#6F947A; --tw-blad-tekst:#4F6A57; --tw-lijn:#E1D5C6; --tw-meta:#6E6370;
  --tw-ease:cubic-bezier(.2,.7,.1,1);
}

/* ---------- hero ---------- */
.tw-hero{position:relative;background:var(--tw-paars);color:var(--tw-papier);padding:clamp(130px,18vh,200px) 0 clamp(110px,13vw,190px);overflow:clip}
.tw-hero__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.tw-kicker{margin:0;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--tw-salie)}
.tw-kicker--donker{color:var(--tw-blad-tekst)}
.tw-titel{margin:.25em 0 .2em;font-size:clamp(3.1rem,8.6vw,8.2rem);line-height:.92;font-weight:400;letter-spacing:-.015em;color:var(--tw-papier)}
.tw-ondertitel{margin:0 0 1.2rem;font-size:clamp(1.25rem,2.3vw,1.9rem);line-height:1.25;color:var(--tw-papier);opacity:.92}
.tw-intro{margin:0;max-width:50ch;font-size:1.02rem;line-height:1.7;color:var(--tw-papier);opacity:.8}
.tw-knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.tw-hero__beeld{position:relative;width:100%;max-width:520px;aspect-ratio:4/5;justify-self:center}
.tw-kompas{position:absolute;inset:-7%;width:114%;height:114%;fill:none;stroke:rgba(243,236,227,.2);stroke-width:1}
.tw-kompas__streepjes line{stroke:rgba(243,236,227,.32)}
.tw-kompas__naald{transform-origin:100px 100px;transform-box:view-box}
.tw-kompas__naald path{fill:var(--tw-salie);stroke:none}
.tw-kompas__naald .tw-kompas__zuid{fill:rgba(243,236,227,.28)}
.tw-kompas text{fill:var(--tw-salie);stroke:none;font-size:11px;font-weight:700;letter-spacing:.1em}
.tw-kaart{position:absolute;left:6%;top:3%;width:60%;margin:0;rotate:-5deg;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.65)}
.tw-kaart img,.tw-ovaal img{display:block;width:100%;height:100%;object-fit:cover}
.tw-kaart img{height:auto}
.tw-ovaal{position:absolute;right:0;bottom:1%;width:47%;aspect-ratio:3/4;margin:0;border-radius:999px;overflow:hidden;border:6px solid var(--tw-paars);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.tw-golf{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(40px,6vw,90px);fill:var(--tw-papier)}
@media (max-width:767px){
  .tw-hero{padding-top:120px}
  .tw-hero__in{grid-template-columns:1fr}
  .tw-hero__beeld{max-width:340px;margin-top:1rem}
}

/* ---------- de vraag ---------- */
.tw-vraag{padding:clamp(4.5rem,11vw,10rem) 0 clamp(3rem,7vw,6rem);text-align:center}
.tw-vraag__tekst{margin:0 auto;max-width:24ch;font-size:clamp(1.75rem,4.2vw,3.6rem);line-height:1.16;color:var(--tw-paars);text-wrap:balance}
.tw-vraag__na{margin:1.6rem 0 0;font-size:1rem;letter-spacing:.04em;color:var(--tw-meta)}
.tw-w{display:inline-block}

/* ---------- twee kolommen (waarom, leerdoelen, burgerschap) ---------- */
.tw-waarom,.tw-doelen,.tw-burger{padding:clamp(3.5rem,8vw,7rem) 0}
.tw-twee{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,6vw,6rem)}
.tw-h2{margin:0 0 1.2rem;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.06;font-weight:400;color:var(--tw-paars);text-wrap:balance}
.tw-h2--groot{font-size:clamp(2.2rem,4.6vw,4rem)}
.tw-midden{text-align:center}
.tw-plak{position:sticky;top:120px;align-self:start}
.tw-lees{min-width:0}
.tw-lees .content p,.tw-olifant .content p,.tw-scholen .content p{font-size:1.05rem;line-height:1.75;max-width:62ch}
.tw-pijlers{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0!important;margin:2.2rem 0 0}
.tw-pijlers li{margin:0;padding:.55rem 1.1rem!important;border:1.5px solid var(--tw-salie);border-radius:999px;background:rgba(161,191,168,.14);color:var(--tw-paars);font-size:.95rem;line-height:1.3}
.tw-pijlers li::before,.tw-vragen li::before,.tw-blad li::before,.tw-stappen li::before,.tw-dieren__rij li::before{content:none!important}
@media (max-width:767px){.tw-twee{grid-template-columns:1fr}.tw-plak{position:static}}

/* ---------- olifanten ---------- */
.tw-olifant{padding:clamp(3.5rem,8vw,7rem) 0;background:var(--tw-pad)}
.tw-olifant__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.tw-olifant__beeld{margin:0;width:100%;max-width:420px;aspect-ratio:3/4;border-radius:999px;overflow:hidden;justify-self:center;box-shadow:0 40px 80px -40px rgba(47,29,51,.5)}
.tw-olifant__beeld img{display:block;width:100%;height:118%;object-fit:cover}
.tw-vragen{list-style:none;padding:0!important;margin:2rem 0}
.tw-vragen li{margin:0;padding:.55rem 0 .55rem 1.6rem!important;position:relative;font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.35;color:var(--tw-paars)}
.tw-vragen li::after{content:"";position:absolute;left:0;top:1.05rem;width:.6rem;height:.6rem;border-radius:50%;border:2px solid var(--tw-blad)}
.tw-kaartcitaat{margin:2.2rem 0 0;padding:1.6rem 1.8rem;background:var(--tw-papier);border-radius:22px;position:relative}
.tw-kaartcitaat::before{content:"\201C";position:absolute;top:-.35em;left:.9rem;font-size:4.5rem;line-height:1;color:var(--tw-salie)}
.tw-kaartcitaat p{margin:0;font-style:italic;font-size:1.05rem;line-height:1.65;color:var(--tw-paars)}
.tw-kaartcitaat cite{display:block;margin-top:.8rem;font-style:normal;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tw-meta)}
@media (max-width:767px){.tw-olifant__in{grid-template-columns:1fr}.tw-olifant__beeld{max-width:300px}}

/* ---------- de les: een pad ---------- */
.tw-les{padding:clamp(4rem,9vw,8rem) 0 clamp(4rem,9vw,8rem);background:var(--tw-papier)}
.tw-les__kop{max-width:780px;margin:0 auto clamp(3rem,7vw,6rem);text-align:center}
.tw-les__doel{margin:0 auto;max-width:62ch;font-size:1.05rem;line-height:1.75}
.tw-feiten{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:2.2rem 0 0;padding:0}
.tw-feiten div{padding:.75rem 1.15rem;border-radius:14px;background:var(--tw-pad);text-align:left}
.tw-feiten dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tw-blad-tekst)}
.tw-feiten dd{margin:.15rem 0 0;font-size:.98rem;color:var(--tw-paars)}
.tw-pad{position:relative;padding:40px 0 60px}
.tw-pad__svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tw-pad__grond{fill:none;stroke:rgba(71,45,75,.2);stroke-width:2.5;stroke-dasharray:1 11;stroke-linecap:round}
.tw-pad__lijn{fill:none;stroke:var(--tw-blad);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.tw-pad__loper{position:absolute;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--tw-paars);box-shadow:0 0 0 7px rgba(161,191,168,.5);z-index:3;opacity:0;will-change:transform}
.tw-stappen{list-style:none;margin:0;padding:0!important;display:flex;flex-direction:column;gap:clamp(3rem,8vw,6.5rem);position:relative;z-index:2}
.tw-stap{display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;margin:0;padding:0!important}
.tw-stap__kaart{max-width:440px;padding:1.6rem 1.8rem;background:#fff;border-radius:22px;box-shadow:0 24px 50px -32px rgba(47,29,51,.45)}
.tw-stap:nth-child(odd) .tw-stap__kaart{grid-column:1;justify-self:end;margin-right:clamp(3rem,7vw,6rem)}
.tw-stap:nth-child(even) .tw-stap__kaart{grid-column:2;margin-left:clamp(3rem,7vw,6rem)}
.tw-stap__kaart h3{margin:0 0 .5rem;font-size:1.3rem;line-height:1.2;font-weight:600;color:var(--tw-paars)}
.tw-stap__kaart p{margin:0;font-size:.98rem;line-height:1.65}
.tw-stap__kaart blockquote{margin:1rem 0 0;padding:0;font-style:italic;font-size:.98rem;line-height:1.55;color:var(--tw-blad-tekst)}
.tw-stap__kaart blockquote::before{content:"\201C"}
.tw-stap__kaart blockquote::after{content:"\201D"}
.tw-stap__punt{position:absolute;left:50%;top:50%;translate:-50% -50%;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--tw-papier);border:2px solid rgba(71,45,75,.22);color:var(--tw-paars);font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums;transition:background .5s var(--tw-ease),color .5s var(--tw-ease),border-color .5s var(--tw-ease),scale .5s var(--tw-ease);z-index:2}
.tw-stap.is-bereikt .tw-stap__punt{background:var(--tw-paars);border-color:var(--tw-paars);color:var(--tw-papier);scale:1.08}
/* stappen staan al zacht in beeld en lichten op zodra het pad ze bereikt */
html.tw-beweegt .tw-stap__kaart{opacity:.38;translate:0 14px;transition:opacity .8s var(--tw-ease),translate .8s var(--tw-ease),box-shadow .8s var(--tw-ease)}
html.tw-beweegt .tw-stap:not(.is-bereikt) .tw-stap__kaart{box-shadow:none}
html.tw-beweegt .tw-stap.is-bereikt .tw-stap__kaart{opacity:1;translate:0 0}
@media (max-width:767px){
  .tw-stap{grid-template-columns:1fr}
  .tw-stap:nth-child(odd) .tw-stap__kaart,.tw-stap:nth-child(even) .tw-stap__kaart{grid-column:1;justify-self:stretch;margin:0 0 0 58px;max-width:none}
  .tw-stap__punt{left:22px;width:44px;height:44px;font-size:.8rem}
}

/* ---------- drie dieren ---------- */
.tw-dieren{padding:clamp(4rem,9vw,8rem) 0;background:var(--tw-paars);color:var(--tw-papier)}
.tw-dieren .tw-h2{color:var(--tw-papier)}
.tw-dieren__rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.5rem);list-style:none;padding:0!important;max-width:980px;margin:2.6rem auto 0}
.tw-dieren__rij li{margin:0;padding:0!important}
.tw-dier{display:block;text-align:center;color:inherit;text-decoration:none}
.tw-dier img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);transition:translate .5s var(--tw-ease),rotate .5s var(--tw-ease)}
.tw-dier span{display:block;margin-top:1.2rem;font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.2}
@media (hover:hover){.tw-dier:hover img,.tw-dier:focus-visible img{translate:0 -8px;rotate:-1.5deg}}
@media (max-width:767px){.tw-dieren__rij{grid-template-columns:1fr;max-width:280px}}

/* ---------- leerdoelen ---------- */
.tw-doelen__intro{margin:0 0 .8rem;color:var(--tw-meta)}
.tw-blad{list-style:none;margin:0;padding:0!important}
.tw-blad li{position:relative;margin:0;padding:.95rem 0 .95rem 2.4rem!important;border-bottom:1px solid var(--tw-lijn);font-size:1.05rem;line-height:1.5;color:var(--tw-paars)}
.tw-blad li::after{content:"";position:absolute;left:0;top:1.05rem;width:1.25rem;height:1.25rem;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 10 10 4 21 3c-1 11-7 17-17 17Z' fill='%23A1BFA8'/%3E%3Cpath d='M4 20 15 9' stroke='%236F947A' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")}

/* ---------- het bos ---------- */
.tw-bos{position:relative;display:grid;place-items:center;min-height:clamp(420px,80vh,760px);padding:6rem 0;color:var(--tw-papier);overflow:clip;text-align:center}
.tw-bos__beeld{position:absolute;inset:-12% 0;z-index:0}
.tw-bos__beeld img{display:block;width:100%;height:100%;object-fit:cover}
.tw-bos::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(47,29,51,.55),rgba(47,29,51,.72))}
.tw-bos .container{position:relative;z-index:2}
.tw-bos__citaat{margin:0 auto;max-width:22ch;font-size:clamp(1.8rem,4.4vw,3.8rem);line-height:1.15;text-wrap:balance}

/* ---------- voor scholen ---------- */
.tw-scholen{padding:clamp(3.5rem,8vw,7rem) 0 clamp(4.5rem,10vw,9rem)}
.tw-scholen__kaart{position:relative;max-width:980px;margin:0 auto;padding:clamp(2rem,5vw,4.5rem);border-radius:32px;background:var(--tw-paars);color:var(--tw-papier);overflow:hidden}
.tw-scholen__kaart .tw-h2{color:var(--tw-papier)}
.tw-scholen__kaart .content p{color:var(--tw-papier);opacity:.9}
.tw-open{margin:1.4rem 0 0;padding:1rem 1.2rem;border-radius:16px;background:rgba(161,191,168,.16);color:var(--tw-papier);font-size:1rem;line-height:1.6}
.tw-feiten--licht{justify-content:flex-start}
.tw-feiten--licht div{background:rgba(243,236,227,.1)}
.tw-feiten--licht dt{color:var(--tw-salie)}
.tw-feiten--licht dd{color:var(--tw-papier)}
.tw-direct{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:1.6rem 0 0}
.tw-direct a{color:var(--tw-papier);text-decoration:underline;text-decoration-color:var(--tw-salie);text-underline-offset:4px}
.tw-slot{margin:clamp(3rem,7vw,6rem) auto 0;max-width:26ch;text-align:center;font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.22;color:var(--tw-paars);text-wrap:balance}

/* het thema geeft main 170px (90px mobiel) ruimte voor de header; deze pagina begint met een eigen hero onder de header door */
.page-template-page-the-way-we-walk main{margin-top:0!important}

/* ronde 2 na zelf doorscrollen */
.tw-burger .tw-lees p,.tw-burger .content p{font-size:1.05rem;line-height:1.75;max-width:62ch}
.tw-hero .button,.tw-scholen .button{min-height:52px;padding:0 2rem;font-size:1rem}
.tw-scholen__kaart .tw-h2{font-size:clamp(2rem,4vw,3.4rem)}
@media (max-width:767px){
  .tw-dieren__rij{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:none;margin-top:2rem}
  .tw-dieren__rij li:nth-child(1) .tw-dier img{rotate:-6deg;translate:6px 8px}
  .tw-dieren__rij li:nth-child(3) .tw-dier img{rotate:6deg;translate:-6px 8px}
  .tw-dier span{margin-top:1rem;font-size:.95rem;line-height:1.25}
}
/* loper loopt onder de genummerde punten door, zodat het nummer leesbaar blijft */
.tw-pad__loper{z-index:1}