/* Kleuren en maten: de tokens uit Paper */
:root{--ivoor:#FAFAF9;--inkt:#0F0E0D;--den:#142B1E;--wit:#FFFFFF;--g100:#F2F1F0;--g200:#E5E5E3;--g300:#CCCAC6;--g500:#8F8B85;--g600:#706D66;--g800:#33312C;
  --r:16px;--r-knop:12px;--r-label:8px;--zij:clamp(24px,6.9445vw,100px)}
/* 6.9445vw is op 1440 net iets meer dan 100 px, zodat de clamp precies 100 geeft (6.944vw gaf 99,99 en liet de kolommen
   een halve pixel verschuiven) */
@property --in{syntax:'<number>';inherits:false;initial-value:1}
*{box-sizing:border-box}
/* overflow-anchor uit: anders schuift de browser de pagina zelf een stukje bij als er in beeld iets in hoogte verandert */
html,body{margin:0;background:var(--ivoor);color:var(--inkt);overflow-anchor:none}
body{font-family:'Inter Tight',system-ui,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ol,ul,figure{margin:0;padding:0;font:inherit}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;margin:0}
[hidden]{display:none !important}
.verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tel-br{display:none}

/* Knop "Laten we praten": dennengroen met ivoren letters en een pijl (Paper: 44 hoog, 20 links, 16 rechts, 15 px) */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;height:44px;padding:0 16px 0 20px;border:0;border-radius:var(--r-knop);background:var(--den);color:var(--ivoor);font-size:15px;line-height:15px;font-weight:500;white-space:nowrap;cursor:pointer;transition:transform .2s ease}
.knop:hover{transform:translateY(-1px)}
.knop svg{display:block;flex-shrink:0}
.knop:focus-visible,.pil:focus-visible,.vraag-knop:focus-visible{outline:2px solid var(--g500);outline-offset:2px}

/* Masker voor koppen die regel voor regel omhoog komen. Onderaan wat ruimte, anders knipt het de staart van de g af
   (Literata); de negatieve marge houdt de hoogte gelijk, en 120 % wegschuiven verbergt de regel nog steeds helemaal */
.lijn-mask,.s2-lijn-mask{padding-bottom:.15em;margin-bottom:-.15em}
.lijn-mask{display:block;overflow:hidden}
.lijn{display:block}

/* ============ Navigatie zoals Lassie: twee zwevende groepjes witte knoppen ============ */
.nav{position:fixed;top:12px;left:20px;right:20px;z-index:60;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.nav-zij{display:flex;flex:1 1 0;min-width:0}
.nav-zij.rechts{justify-content:flex-end}
.groep{display:flex;gap:2px;padding:4px;border:1px solid rgba(15,14,13,.08);border-radius:var(--r);background:rgba(255,255,255,.30);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);pointer-events:auto}
.groep.rechts{background:rgba(255,255,255,.58)}
/* Voorbij de hero (witte secties) krijgt het menu een duidelijkere rand en een zachte schaduw (menu.js zet .op-licht) */
.groep{transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.nav.op-licht .groep{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(242,241,240,.94);border-color:rgba(15,14,13,.10);box-shadow:0 1px 2px rgba(15,14,13,.04),0 6px 20px rgba(15,14,13,.07)}
.pil{display:flex;align-items:center;height:44px;padding:0 14px;border:0;border-radius:var(--r-knop);background:#fff;color:var(--den);font-size:14px;line-height:14px;white-space:nowrap;cursor:pointer}
.pil.logo{padding:0 16px;font-family:'Literata',serif;font-size:19px;line-height:20px;letter-spacing:-.01em}
.pil.taal{background:transparent;color:var(--den);cursor:default;padding:0 12px}
.pil.taal.actief{background:#fff;color:var(--den)}
.menu-knop,.menu-paneel,.menu-waas{display:none}

/* ============ 1 Hero: Scherpte (idee 3 uit hero-ideeen.html; Daan, 07-10: "kies hero nummer 3"). De hero staat even vast,
   het landschap wordt wazig en iets donkerder, de kop blijft scherp. ============ */
/* Schermvullend, ook op de telefoon (Daan, 07-10: "DE hero moet sowieso helemaal schermvullend zijn, ook op telefoon"):
   het beeld vult het grote scherm (100lvh: ook als de balken van de browser wegschuiven); de kop en de balk staan onderin
   het kleine scherm (100svh), zodat ze bij het laden niet achter de balk van de browser vallen */
.hero{position:relative;height:100vh;height:100lvh;min-height:560px}
html.beweegt .hero{height:190vh;height:calc(100lvh + 90svh)}
/* Het vaste vlak is ivoor: Safari en Chrome kleuren hun balken mee met een vast vlak tegen de rand van het scherm. Met een
   groen vlak werden de balken groen (Daan, 07-10). Het groen staat daarom alleen op het beeld zelf, zolang het laadt. */
.sticky{position:relative;height:100vh;height:100lvh;min-height:560px;overflow:hidden;background:var(--ivoor)}
html.beweegt .sticky{position:sticky;top:0}
.media{position:absolute;inset:0}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#heroBeeld{background:#6F8C6E}
/* De vooraf wazige kopie (homepage-beelden/vallei-wazig.jpg) en een zwart vlak; beide beginnen onzichtbaar */
.media img.wazig{opacity:0}
.dek{position:absolute;inset:0;background:var(--inkt);opacity:0;pointer-events:none}
html.beweegt .wazig,html.beweegt .dek{will-change:opacity}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,14,13,.22) 0%,rgba(15,14,13,0) 22%,rgba(15,14,13,0) 45%,rgba(15,14,13,.44) 100%)}
.content{position:absolute;top:0;left:0;right:0;height:100%;height:100svh;min-height:560px;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;padding:0 64px 64px}
.hero-tekst{color:var(--ivoor)}
.hero h1{font-family:'Literata',serif;font-weight:300;font-size:clamp(44px,5.6vw,80px);line-height:1.05;letter-spacing:-.0125em}
.hero h1 .line{display:block;white-space:nowrap}
.sub{padding-top:20px;font-size:20px;line-height:28px;color:rgba(250,250,249,.9)}
/* De knop in de hero (Atse, 08-10: alleen "Laten we praten", geen e-mailveld) */
.vraagruimte{display:flex;flex-shrink:0;padding-bottom:6px}
.heroknop{height:52px;padding:0 20px 0 24px;font-size:16px;line-height:16px;opacity:calc(var(--in) * var(--uit,1))}
/* Binnenkomen (zoals index.html): de kop woord voor woord uit een waas omhoog, dan de zin, dan de balk */
html.beweegt #kop:not(.gesplitst){visibility:hidden}
html.beweegt .hw{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
html.beweegt .sub{opacity:0;animation:fadein .9s ease .9s forwards}
html.beweegt .heroknop{animation:balkin .9s cubic-bezier(.2,.8,.2,1) 1.2s both}
@keyframes rise{to{opacity:1;filter:blur(0);transform:none}}
@keyframes fadein{to{opacity:1}}
@keyframes balkin{from{--in:0;translate:0 16px}to{--in:1;translate:0 0}}

/* ============ 2 Het werk dat erbij hoort (sectie-2-v4.html, variant 1, met de labels van 07-10) ============ */
.s2{position:relative;display:flex;flex-direction:column;align-items:center;padding:120px 24px;background:var(--ivoor);overflow-wrap:anywhere}
.s2-kopblok{display:flex;flex-direction:column;gap:20px;width:100%;max-width:500px;text-align:center}
.s2-kop{font-family:'Literata',serif;font-weight:300;font-size:40px;line-height:48px;letter-spacing:-.01em}
.s2-uitleg{font-size:18px;line-height:28px;color:var(--g600)}
.podium{display:flex;align-items:center;justify-content:center;width:100%;margin-top:48px}
.toneel{width:100%;max-width:640px;transform-origin:50% 50%}
.lijst{list-style:none;display:flex;flex-direction:column}
.rij{position:relative;border-bottom:1px solid var(--g200)}
.rij-kop{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:16px;row-gap:4px;align-items:start;padding:24px 20px}
.slot{grid-column:1;grid-row:1;display:grid;place-items:center;width:20px;height:24px}
.slot > *{grid-area:1/1}
.nr{font-size:15px;line-height:24px;color:var(--g600)}
.vink{display:block;width:16px;height:16px;overflow:visible}
/* Een vinkje tekent zich: de lijn is 14,2 lang; streep 15, gat 30, en de verschuiving loopt van 15 naar 0 */
.vink path{fill:none;stroke:var(--den);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15 30;stroke-dashoffset:0}
.titel{grid-column:2;grid-row:1;font-size:18px;line-height:24px;font-weight:500;color:var(--inkt)}
.sub2{grid-column:2/4;grid-row:2;font-size:15px;line-height:22px;color:var(--g600)}
/* Het label staat rechts op de regel van de titel, in het midden van die regel (zoals Beside) */
.label-plek{grid-column:3;grid-row:1;align-self:center;display:flex;margin:-2px 0}
.label{padding:5px 10px;border-radius:var(--r-label);background:var(--g100);color:var(--g800);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap}
.rij4{border-bottom:0;border-radius:var(--r);background-color:var(--g100)}
.rij4 .rij-kop{padding:28px 20px}
.rij4 .label-plek{margin:-3px 0}
.vanjou{padding:6px 12px;border-radius:var(--r-label);background:var(--den);color:var(--ivoor);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap}
/* Eindstand (ook bij minder beweging): rij 1, 2 en 3 afgevinkt; de labels staan er altijd */
.rij:not(.rij4) .nr{opacity:0}
/* Met beweging: de sectie vult het scherm en staat vast zolang het effect loopt. Beginstand: de nummers, nog geen vinkjes */
html.beweegt .s2{height:100vh;height:100svh;padding:clamp(64px,13.3vh,120px) 24px 40px}
html.beweegt .podium{flex:1 1 auto;min-height:0}
html.beweegt .rij:not(.rij4) .nr{opacity:1}
html.beweegt .rij:not(.rij4) .vink path{stroke-dashoffset:15}
/* In elkaar wegvallen: de rijen zijn dicht (ivoor), zodat een rij onder de volgende kan verdwijnen */
html.beweegt .rij{background-color:var(--ivoor)}
html.beweegt .rij[data-rij="1"]{z-index:1}
html.beweegt .rij[data-rij="2"]{z-index:2}
html.beweegt .rij[data-rij="3"]{z-index:3}
html.beweegt .rij.rij4{z-index:4;background-color:var(--g100)}
/* Op de computer verdeling B (Daan, 07-10: "Sectie twee: verdeling B"): de tekst links, in het midden naast de rijen,
   de rijen rechts. Zoals Paper op 1440: 100 opzij, tekst 460, rijen 680. Breder dan 1440 blijft dat blok 1240 breed in
   het midden; vanaf 1200 krimpen alleen de rijen. Smaller dan 1200 staat alles onder elkaar, zoals hierboven. */
@media (min-width:1200px){
  .s2{flex-direction:row;align-items:center;justify-content:space-between;gap:48px;padding:120px max(var(--zij),calc((100% - 1240px) / 2))}
  .s2-kopblok{flex:0 0 460px;width:460px;max-width:none;text-align:left}
  .podium{flex:0 1 680px;width:auto;min-width:0;margin-top:0}
  .toneel{max-width:680px}
  /* Met beweging: even veel ruimte boven als onder, zodat tekst en rijen samen in het midden van het scherm staan. De rijen
     vallen naar dat midden weg; rij 4 met "Van jou" eindigt zo op de hoogte van de tekst. */
  html.beweegt .s2{padding:clamp(64px,13.3vh,120px) max(var(--zij),calc((100% - 1240px) / 2))}
  html.beweegt .podium{flex:0 1 680px;align-self:stretch;min-height:0}
}

/* ============ 3 Je hoofd bij je vak: drie rijen foto en tekst, om en om (zoals AirOps) ============ */
.s3{display:flex;flex-direction:column;align-items:center;gap:96px;padding:120px var(--zij);background:var(--ivoor)}
/* Aan het eind schuift sectie 3 omhoog in de lege ruimte onder "Het werk waar je goed in bent" (Daan, 07-10: "dan zit er
   eigenlijk te veel whitespace in"; eerst op de telefoon, daarna "op desktop ook dezelfde fix"). Het script zet de marge;
   sectie 3 ligt daarom boven sectie 2. */
html.beweegt .s3{position:relative;z-index:1}
/* De plek om de drie rijen: telt alleen mee voor de stapel op de telefoon (met beweging) */
.s3-plek{display:contents}
.s3-kop{font-family:'Literata',serif;font-weight:300;font-size:48px;line-height:56px;letter-spacing:-.0125em;text-align:center}
.s3-kop .r{display:block;white-space:nowrap}
.s3-rij{display:flex;align-items:center;gap:clamp(48px,8.3334vw,120px);width:100%;max-width:1240px}
.s3-rij.r2{flex-direction:row-reverse}
.s3-tekst{display:flex;flex-direction:column;gap:16px;flex:1 1 0;min-width:0;max-width:560px}
.s3-tekst h3{max-width:480px;font-family:'Literata',serif;font-weight:300;font-size:32px;line-height:40px;letter-spacing:-.01em;color:var(--inkt)}
.r1 .s3-tekst h3{text-wrap:balance}
.rij-uitleg{max-width:440px;font-size:18px;line-height:28px;color:var(--g600);text-wrap:pretty}
.foto{position:relative;flex:0 0 560px;width:560px;height:467px;overflow:hidden;border-radius:var(--r);background-color:#1E1C19;background-repeat:no-repeat;background-size:cover;color:var(--ivoor)}
/* De foto's krijgen hun beeld pas met .laad (index.html zet die vlak voordat ze in beeld komen) */
.f-stad{background-position:50% 50%}.f-stad.laad{background-image:url(/img/stad.webp)}
.f-bar{background-position:50% 50%}.f-bar.laad{background-image:url(/img/bar.webp)}
.f-gang{background-position:50% 72%}.f-gang.laad{background-image:url(/img/mannen.webp)}
.verloop{position:absolute;inset:0;pointer-events:none}
.f-stad .verloop{background:linear-gradient(in oklab 90deg,rgba(15,14,13,.58) 0%,rgba(15,14,13,.44) 24%,rgba(15,14,13,.18) 44%,rgba(15,14,13,0) 56%)}
.f-bar .verloop{background:linear-gradient(in oklab 180deg,rgba(15,14,13,0) 40%,rgba(15,14,13,.36) 70%,rgba(15,14,13,.6) 100%)}
/* Rij 1, chatvenster C: de draad met twee punten, de tekst direct op de foto */
.chat{position:absolute;display:flex;flex-direction:column;gap:12px}
.c-draad{left:24px;bottom:156px;width:232px}
.regel{position:relative;display:flex;align-items:flex-start;gap:10px}
.stip-plek{display:flex;flex:0 0 10px;width:10px;height:18px;align-items:center;justify-content:center}
.ring{width:10px;height:10px;border:1.25px solid var(--ivoor);border-radius:5px;background:#1E1C19}
.stip{width:10px;height:10px;border-radius:5px;background:var(--ivoor)}
.draad{position:absolute;left:4.375px;top:9px;width:1.25px;height:50px;border-radius:1px;background:rgba(250,250,249,.45);transform-origin:50% 0}
.jij-tekst{display:flex;flex-direction:column;gap:2px}
.wie,.werkregel,.nieuw,.stand{font-size:12px;line-height:16px;color:rgba(250,250,249,.72)}
.vraag-chat{font-size:14px;line-height:20px;white-space:nowrap}
.antwoord-kolom{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;min-width:0}
.werkregel{display:flex;align-items:center;gap:6px}
.werkregel svg,.stand svg,.stap svg,.icoon svg,.versturen svg{display:block;flex-shrink:0}
.antwoord{font-size:15px;line-height:22px;text-wrap:pretty}
.glas{border:1px solid rgba(250,250,249,.2);background:rgba(15,14,13,.44);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.kaart{display:flex;align-items:center;gap:9px;padding:7px 10px 7px 7px;border-radius:12px}
.icoon{display:flex;flex:0 0 28px;width:28px;height:28px;align-items:center;justify-content:center;border-radius:var(--r-label);background:rgba(250,250,249,.14)}
.wanneer-wie{display:flex;flex:1 1 auto;flex-direction:column}
.wanneer{font-size:13px;line-height:17px;font-weight:500}
.stand{display:flex;flex:0 0 auto;align-items:center;gap:4px}
.lijn-tel{position:absolute;left:260px;top:278px;width:44px;height:16px;overflow:visible;pointer-events:none}
/* Rij 2, invoerbalk E: onze vraag, en haar antwoord wordt getypt */
.c-invoer{left:24px;bottom:24px;width:320px}
.ons-vraag{width:288px;max-width:100%;font-size:15px;line-height:22px;text-wrap:pretty}
.invoer{display:flex;flex-shrink:0;align-items:center;gap:10px;height:44px;padding:0 6px 0 14px;border-radius:var(--r-knop)}
.getypt{display:flex;flex-grow:1;align-items:center;gap:2px}
.haar{font-size:14px;line-height:20px;white-space:pre}
.cursor{flex-shrink:0;width:1.25px;height:17px;border-radius:1px;background:var(--ivoor)}
html.beweegt .cursor{animation:knipper 1s steps(1) infinite}
@keyframes knipper{50%{opacity:0}}
.versturen{display:flex;flex-shrink:0;width:32px;height:32px;align-items:center;justify-content:center;border-radius:var(--r-label);background:rgba(250,250,249,.14)}
/* Rij 3, bericht M: een melding bovenin, met twee afgevinkte stappen */
.bericht{position:absolute;left:94px;top:24px;width:372px;display:flex;flex-direction:column;gap:10px;padding:12px 16px 13px;border-radius:var(--r-knop)}
.bericht p{max-width:300px;font-size:14px;line-height:20px;text-wrap:pretty}
.lijntje{flex-shrink:0;height:1px;background:rgba(250,250,249,.16);transform-origin:0 50%}
.stappen{display:flex;gap:16px}
.stap{display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px}

/* ============ 4 Hoe het werkt (Mora 1, puur), met de stippellijnen ============ */
.s4{background:var(--ivoor);overflow-x:clip}
.s4-boven,.s4-onder,.s4-band{display:flex;justify-content:center;padding:0 var(--zij)}
.s4-kader{display:flex;align-items:flex-start;width:100%;max-width:1240px;padding:120px 32px 96px;border-left:1px dashed var(--g300);border-right:1px dashed var(--g300)}
.s4-onder .s4-kader{height:120px;padding:0}
.s4-kop{flex:0 1 620px;min-width:0;font-family:'Literata',serif;font-weight:300;font-size:56px;line-height:64px;letter-spacing:-.0125em}
.s4-kop .r{display:block;white-space:nowrap}
.s4-kop .r.mat{color:var(--g600)}
.s4-zin-knop{display:flex;flex:0 1 460px;min-width:0;flex-direction:column;align-items:flex-start;gap:24px;padding-top:8px}
.s4-zin{font-size:20px;line-height:28px;color:var(--g600)}
.s4-band{border-top:1px dashed var(--g300);border-bottom:1px dashed var(--g300)}
.fases{display:flex;width:100%;max-width:1240px}
.fase{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:32px;border-left:1px dashed var(--g300)}
.fase:nth-child(1),.fase:nth-child(2){flex:413 1 0}
.fase:nth-child(3){flex:414 1 0;border-right:1px dashed var(--g300)}
.fase-kop{display:flex;align-items:center;gap:16px}
.nummer{display:flex;flex:0 0 32px;width:32px;height:32px;align-items:center;justify-content:center;border:1px solid var(--g300);border-radius:16px;font-size:13px;line-height:16px;color:var(--g600)}
.fase h3{font-size:20px;line-height:28px;font-weight:500;color:var(--inkt)}
.fase p{font-size:16px;line-height:24px;color:var(--g600);text-wrap:pretty}

/* ============ 5 Twijfels: zes vragen, de eerste open; een tik opent of sluit ============ */
.s5{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;max-width:1440px;margin:0 auto;padding:40px var(--zij) 160px}
.s5-kop{flex:0 0 420px;font-family:'Literata',serif;font-weight:300;font-size:56px;line-height:64px;letter-spacing:-.0125em}
.s5-kop .r{display:block}
.vragen{display:flex;flex:0 1 760px;min-width:0;flex-direction:column;gap:8px}
.vraag{padding:0 28px;border-radius:var(--r);background:#fff}
.vraag-knop{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:22px 0;border:0;background:none;text-align:left;font-size:18px;line-height:26px;font-weight:500;color:var(--inkt);cursor:pointer}
.vraag.open .vraag-knop{padding:24px 0 12px}
.plusmin{display:block;flex:0 0 20px}
.plusmin path{fill:none;stroke:var(--inkt);stroke-width:1.5;stroke-linecap:round}
.plusmin .v{transform-box:fill-box;transform-origin:center}
.vraag.open .plusmin .v{transform:scaleY(0)}
.antwoord-wrap{overflow:hidden}
.antwoord-wrap p{max-width:600px;padding-bottom:28px;font-size:16px;line-height:24px;color:var(--g600);text-wrap:pretty}
html.beweegt .vraag-knop{transition:padding .45s cubic-bezier(.65,0,.35,1)}
html.beweegt .antwoord-wrap{transition:height .45s cubic-bezier(.65,0,.35,1)}
html.beweegt .plusmin .v{transition:transform .35s ease}

/* ============ 6 Afsluiter ============ */
.s6{display:flex;justify-content:center;padding:0 24px 24px}
.s6-band{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;width:100%;height:520px;padding:0 24px;border-radius:var(--r);background:linear-gradient(in oklab 180deg,oklab(94.3% -0.008 0.002) 0%,oklab(95.4% 0.002 0.010) 100%)}
.s6-kopzin{display:flex;flex-direction:column;align-items:center;gap:16px}
.slotknop{height:52px;padding:0 20px 0 24px;font-size:16px;line-height:16px}
.s6-kop{font-family:'Literata',serif;font-weight:300;font-size:56px;line-height:64px;letter-spacing:-.0125em;text-align:center}
.s6-kop .r{display:inline}
.s6-zin{font-size:20px;line-height:28px;color:var(--g800);text-align:center}

/* ============ Footer: dennengroen, witte letters ============ */
.footer{overflow:hidden;background:var(--den);color:var(--ivoor)}
.f-inhoud{display:flex;flex-direction:column;gap:72px;max-width:1440px;margin:0 auto;padding:96px var(--zij) 36px}
.f-boven{display:flex;align-items:flex-start;justify-content:space-between;gap:48px}
.f-links{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.f-zin{font-family:'Literata',serif;font-weight:300;font-size:32px;line-height:40px;letter-spacing:-.01em}
.f-zin .r{display:block}
.f-kolommen{display:flex;flex:0 1 660px;gap:24px;min-width:0}
.f-kolom{display:flex;flex:1 1 0;flex-direction:column;gap:12px;min-width:0}
.f-label{padding-bottom:4px;font-size:13px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(250,250,249,.62)}
.f-kolom a{font-size:16px;line-height:24px}
.f-onder{display:flex;align-items:center;justify-content:space-between;padding-top:22px;border-top:1px solid rgba(250,250,249,.18);font-size:14px;line-height:20px;color:rgba(250,250,249,.62)}
.f-groot{display:flex;align-items:flex-start;justify-content:center;height:min(304px,21.112vw);overflow:hidden}
.f-groot .r{display:block;font-family:'Literata',serif;font-weight:300;font-size:min(256px,17.78vw);line-height:1;letter-spacing:-.02em;color:#fff;white-space:nowrap}

/* ============ Tussenmaat (768 tot 1100): wat naast elkaar niet past, komt onder elkaar ============ */
@media (min-width:768px) and (max-width:1099px){
  .content{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:28px;padding:0 48px 56px}
  .vraagruimte{padding-bottom:0}
  .s3-rij,.s3-rij.r2{flex-direction:column;align-items:center;gap:32px;max-width:560px}
  .s3-tekst{flex:none;width:100%}
  .s4-boven .s4-kader{flex-direction:column;gap:24px}
  .s4-kop,.s4-zin-knop{flex:none}
  .s5{flex-direction:column;gap:40px}
  .s5-kop{flex:none}
  .vragen{flex:none;width:100%}
  .f-boven{flex-direction:column;gap:56px}
  .f-kolommen{flex:none;width:100%}
}
/* Fases onder elkaar zodra drie kolommen niet meer passen (tussenmaat en telefoon) */
@media (max-width:1099px){
  .s4-band{border-top:0;border-bottom:0}
  .fases{flex-direction:column}
  .fase,.fase:nth-child(1),.fase:nth-child(2),.fase:nth-child(3){flex:none;border-left:1px dashed var(--g300);border-right:1px dashed var(--g300)}
  /* Een stippellijn over de hele breedte boven elke fase, en onder de laatste */
  .fase::before,.fase:last-child::after{content:"";position:absolute;left:50%;width:100vw;margin-left:-50vw;border-top:1px dashed var(--g300)}
  .fase::before{top:-1px}
  .fase:last-child::after{bottom:-1px}
  /* De lijnen krijgen zelf ruimte, zoals in Paper (elke rij een rand boven, de laatste ook onder) */
  .fase{margin-top:1px}
  .fase:last-child{margin-bottom:1px}
}

/* ============ Telefoon (Paper, 390 breed): onder 768 px ============ */
@media (max-width:767px){
  /* Navigatie: een groepje in het midden, met Menu */
  .nav{left:0;right:0;justify-content:center}
  .nav-zij,.pil.over{display:none}
  .pil.logo{padding:0 14px;font-size:18px}
  .menu-knop{display:flex}
  .menu-waas{position:fixed;inset:0;z-index:55;background:rgba(15,14,13,.42)}
  .menu-paneel{position:fixed;top:76px;left:50%;z-index:58;width:min(420px,calc(100% - 48px));flex-direction:column;padding:20px;border-radius:var(--r);background:#fff;box-shadow:0 20px 50px rgba(15,14,13,.22);transform:translateX(-50%)}
  body.menu-open .menu-paneel{display:flex}
  body.menu-open{overflow:hidden}
  body.menu-open .menu-waas{display:block}
  .menu-paneel .link{font-family:'Literata',serif;font-weight:300;font-size:26px;line-height:40px;letter-spacing:-.01em;color:var(--inkt)}
  .menu-paneel .link.taal{padding-bottom:20px;color:var(--g600)}
  .menu-paneel .link.taal [aria-current]{color:var(--inkt)}
  .menu-paneel .link.taal a{color:var(--g600);text-decoration:underline;text-underline-offset:4px}
  .menu-paneel .knop{width:100%;height:48px;font-size:16px;line-height:16px;padding:0}

  /* Hero als kaart (Daan, 07-10, met AirOps als voorbeeld: "dat je die randen ziet zodat je weet dat er wat onder zit"):
     12 px ivoor opzij en onder; alleen de onderste hoeken rond 16 (Daan: "boveninbeeld geen radius corner alleen onder").
     De onderkant valt op het kleine scherm (100svh), zodat je hem bij het laden ziet */
  .media{top:0;right:12px;bottom:auto;left:12px;height:calc(100vh - 12px);height:calc(100svh - 12px);min-height:548px;border-radius:0 0 var(--r) var(--r);overflow:hidden}
  /* Hero: alles in het midden, de balk onderin */
  .shade{background:linear-gradient(180deg,rgba(15,14,13,.22) 0%,rgba(15,14,13,0) 20%,rgba(15,14,13,0) 32%,rgba(15,14,13,.5) 100%)}
  .content{flex-direction:column;align-items:center;justify-content:flex-end;gap:0;padding:0 24px 86px;text-align:center}
  .hero h1{font-size:39px;line-height:43px}
  /* Engels is langer ("Ours is everything else."): de kop schaalt mee met de breedte, zodat elke regel past */
  html[lang="en"] .hero h1{font-size:min(39px,8.2vw);line-height:1.12}
  .sub{max-width:320px;margin:0 auto;padding:16px 0 24px;font-size:16px;line-height:23px}
  .sub br{display:none}
  .vraagruimte{justify-content:center;width:100%;padding-bottom:0}
  /* Op de telefoon licht, zodat hij afsteekt tegen de donkere foto (Atse, 09-10) */
  .heroknop{width:100%;max-width:342px;background:var(--ivoor);color:var(--den)}

  /* Sectie 2: 24 opzij, het label onder de regels */
  .s2{padding:56px 24px}
  .s2-kopblok{gap:12px;max-width:420px}
  .s2-kop{font-size:30px;line-height:36px}
  .s2-uitleg{font-size:16px;line-height:24px}
  /* De rijen bijna schermbreed (Daan, 07-10: "Dat moet schermvullend zijn, helemaal. Bijna helemaal."): 12 px van de rand */
  .podium{width:calc(100% + 24px);max-width:444px;margin:32px -12px 0}
  .toneel{max-width:none;transform-origin:50% 0}
  .rij-kop{grid-template-columns:20px minmax(0,1fr);column-gap:12px;row-gap:6px;padding:18px 4px}
  .titel{font-size:17px}
  .sub2{grid-column:2}
  .label-plek,.rij4 .label-plek{grid-column:2;grid-row:3;justify-self:start;align-self:start;margin:0}
  .rij4 .rij-kop{padding:20px 16px}
  /* Met beweging staat op de telefoon alleen de lijst vast, 76 px van boven (onder het menu). De kop en de uitleg scrollen
     eerst gewoon mee. Zo past de lijst ook op een laag scherm (Safari: ongeveer 660 px) en hoeft hij niet kleiner. */
  html.beweegt .s2{height:auto;padding:56px 24px}
  html.beweegt .podium{flex:none}

  /* Sectie 3: tekst boven, foto eronder */
  .s3{gap:56px;padding:56px 24px}
  .s3-kop{font-size:30px;line-height:36px}
  html[lang="en"] .s3-kop{font-size:min(30px,7.2vw);line-height:1.2}
  .s3-rij,.s3-rij.r2{flex-direction:column;align-items:stretch;gap:20px;max-width:420px}
  .s3-tekst{flex:none;gap:12px;max-width:none}
  .s3-tekst h3{max-width:none;font-size:24px;line-height:30px;text-wrap:balance}
  .rij-uitleg{max-width:none;font-size:16px;line-height:24px}
  .r2 .rij-uitleg{max-width:262px}
  .foto{flex:none;width:100%;height:428px}
  /* Stapel (Daan, 07-10: "1 stapel"; uit sectie3-ideeen.html, idee 1). De drie rijen liggen als ivoren kaarten op één plek,
     de latere bovenop. Boven de tekst heeft een kaart nog 20 px ivoor, zodat zijn rand niet tegen de kop zit. Zolang hij over
     de vorige schuift, valt er een zachte schaduw van die rand op de vorige (.s3-rand). De kaart eronder wordt kleiner vanaf
     de bovenkant; zijn foto krijgt een laag inkt (.s3-sluier) en zijn tekst verbleekt. Het script zet de plek vast. */
  html.beweegt .s3-plek{display:grid;width:100%;max-width:420px}
  html.beweegt .s3-plek > .s3-rij{grid-area:1/1;align-self:start;position:relative;background:var(--ivoor);will-change:transform}
  /* Soepel op de telefoon (Atse, 09-10: "glitchy"): de rand ligt vast; de schaduw (.s3-rand) en de sluier (.s3-sluier) zijn
     elementjes die het script maakt en waarvan alleen de doorzichtigheid verandert, elk op een eigen laag. Het glas op de
     foto's vervaagt niet live mee (dat kostte het meeste rekenwerk per beeld) maar is iets donkerder, zodat de tekst leesbaar blijft */
  html.beweegt .s3-plek > .s3-rij::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:20px;border-radius:16px 16px 0 0;background:var(--ivoor);pointer-events:none}
  html.beweegt .s3-plek .s3-rand{position:absolute;left:0;right:0;bottom:100%;height:20px;border-radius:16px 16px 0 0;box-shadow:0 -12px 24px -14px rgba(15,14,13,.3);opacity:0;will-change:opacity;pointer-events:none}
  html.beweegt .s3-plek .s3-sluier{position:absolute;inset:0;background:var(--inkt);opacity:0;will-change:opacity;pointer-events:none}
  html.beweegt .s3-plek .s3-tekst{will-change:opacity}
  html.beweegt .s3-plek .glas{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(15,14,13,.66)}
  .f-stad{background-position:89% 50%}
  .f-bar{background-position:53% 50%}
  .f-gang{background-position:50% 60%}
  .f-stad .verloop{background:linear-gradient(in oklab 180deg,rgba(15,14,13,0) 30%,rgba(15,14,13,.45) 58%,rgba(15,14,13,.78) 100%)}
  .f-bar .verloop{background:linear-gradient(in oklab 180deg,rgba(15,14,13,0) 45%,rgba(15,14,13,.36) 70%,rgba(15,14,13,.62) 100%)}
  .c-draad,.c-invoer{left:16px;right:16px;bottom:16px;width:auto}
  .lijn-tel{display:none}
  .ons-vraag{width:292px}
  .bericht{left:16px;right:16px;top:16px;width:auto}
  .bericht p{max-width:none;text-wrap:balance}
  .stappen{flex-direction:column;gap:6px}

  /* Sectie 4 */
  .s4-boven,.s4-onder,.s4-band{padding:0 24px}
  .s4-kader{max-width:420px}
  .s4-boven .s4-kader{flex-direction:column;gap:0;padding:56px 20px 48px}
  .s4-onder .s4-kader{height:112px}
  .fases{max-width:420px}
  .s4-kop{flex:none;font-size:30px;line-height:36px}
  .s4-zin-knop{flex:none;width:300px;max-width:100%;padding-top:16px}
  .s4-zin{font-size:16px;line-height:24px}
  .fase,.fase:nth-child(1),.fase:nth-child(2),.fase:nth-child(3){padding:24px 20px}
  .fase h3{font-size:19px;line-height:26px}

  /* Sectie 5 */
  .s5{flex-direction:column;align-items:center;gap:40px;padding:40px 24px 120px}
  .s5-kop{flex:none;font-size:44px;line-height:52px;text-align:center}
  .vragen{flex:none;width:100%;max-width:420px}
  .vraag{padding:0 20px}
  .vraag-knop{gap:16px;padding:18px 0;font-size:16px;line-height:24px}
  .vraag.open .vraag-knop{padding:20px 0 10px}
  .antwoord-wrap p{max-width:none;padding-bottom:22px;font-size:15px;line-height:22px}

  /* Sectie 6 */
  .s6{padding:0 16px 16px}
  .s6-band{gap:28px;height:440px;padding:0 24px}
  .s6-kopzin{gap:12px}
  .slotknop{width:100%;max-width:310px}
  .s6-kop{font-size:32px;line-height:38px}
  .s6-kop .r{display:block}
  .s6-zin{font-size:16px;line-height:24px;text-wrap:balance}
  .tel-br{display:inline}

  /* Footer */
  .f-inhoud{align-items:center;gap:40px;padding:64px 24px 28px}
  .f-boven{flex-direction:column;align-items:center;gap:40px}
  .f-links{align-items:center;gap:20px}
  .f-zin{font-size:26px;line-height:32px;text-align:center}
  .f-kolommen{flex:none;flex-wrap:wrap;justify-content:space-between;gap:28px 0;width:342px;max-width:100%}
  .f-kolom{flex:none;gap:10px}
  .f-kolom:nth-child(1){width:100%}
  .f-kolom:nth-child(2){width:96px}
  .f-kolom:nth-child(3){width:114px}
  .f-label{padding-bottom:2px;font-size:12px}
  .f-kolom a{font-size:14px;line-height:20px}
  .f-onder{width:342px;max-width:100%;padding-top:18px;font-size:13px;line-height:18px}
  .f-groot{height:112px}
  .f-groot .r{font-size:70px;line-height:70px}
}
@media (max-width:370px){ .hero h1 .line{white-space:normal} }

/* ============ Menu zoals Lassie (Atse, 08-10): in rust een witte pil per knop; zweef je erover, dan wordt het groepje
   beige en schuift een witte pil mee naar de knop onder de muis (menu.js) ============ */
[data-schuif]{position:relative;transition:background-color .25s ease}
[data-schuif]>.schuif-pil{position:absolute;top:0;left:0;z-index:0;border-radius:var(--r-knop);background:#fff;opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(.2,.8,.2,1),width .38s cubic-bezier(.2,.8,.2,1),height .38s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
[data-schuif]>:not(.schuif-pil){position:relative;z-index:1;transition:background-color .2s ease}
[data-schuif].zweeft{background:#EDE9E2}
[data-schuif].zweeft>:not(.schuif-pil){background:transparent}
[data-schuif].zweeft>.schuif-pil{opacity:1}
@media (prefers-reduced-motion:reduce){[data-schuif]>.schuif-pil{transition:opacity .01s}}

/* NL/EN alleen bovenaan (Atse, 09-10): voorbij de hero verdwijnt de taalknop (menu.js zet .voorbij) */
.groep.taalkeuze{transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,opacity .25s ease,visibility 0s linear 0s}
.nav.voorbij .groep.taalkeuze{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s}

/* Taalvoorstel (menu.js): alleen als je browser de andere taal spreekt en je nog niet zelf koos. Scrolt mee weg. */
.taalvoorstel{position:absolute;top:84px;left:50%;z-index:59;display:flex;align-items:center;gap:2px;padding:4px 4px 4px 16px;border-radius:999px;background:rgba(250,250,249,.97);box-shadow:0 8px 24px rgba(15,14,13,.16),0 0 0 1px rgba(15,14,13,.06);color:#142B1E;font:500 14px/20px 'Inter Tight',system-ui,sans-serif;white-space:nowrap;transform:translateX(-50%)}
.taalvoorstel a{padding:6px 4px;color:inherit;text-decoration:none}
.taalvoorstel a:hover{text-decoration:underline}
.taalvoorstel button{width:32px;height:32px;border:0;border-radius:999px;background:transparent;color:#706D66;font:400 20px/1 'Inter Tight',system-ui,sans-serif;cursor:pointer}
.taalvoorstel button:hover{background:rgba(15,14,13,.06)}
.taalvoorstel a:focus-visible,.taalvoorstel button:focus-visible{outline:2px solid #142B1E;outline-offset:2px}
@media (max-width:767px){.taalvoorstel{top:80px}}
/* Hero v2 op de telefoon: de kop staat hoog (104 px); met het taalvoorstel erboven schuift de tekst 48 px omlaag */
@media (max-width:1023px){html.taalvoorstel-aan .hv2-tekst{top:152px}}