/* ======================================================================
   Werk · ronde 2 (29-09) · alleen voor werk.html (laadt via pagina="werk")
   1 Kop     = optie C "Twee eigen merken" (Salento.com als tweede merk)
   2 Cases   = optie C "Zaak en scherm", op de gewone beige (--paper)
   3 Studies = optie A "Drie studies, drie eerste zinnen"
   4 Jouw zaak = optie B "Een plek in dit portfolio" (zonder "derde case")
   Alle lichte secties op dezelfde beige als de pagina (regel eigenaar 29-09).
   Beweging: pages/werk.js (Motion); zonder beweging staat alles er meteen.
   ====================================================================== */

/* ---------- 1 · Kop ---------- */
.wk-kop{border-bottom:1px solid var(--line)}
.wk-kop__in{grid-column:2/12;text-align:center;display:flex;flex-direction:column;align-items:center}
.wk-kop .h1{font-size:clamp(2.5rem,1rem + 5.4vw,6.6rem);line-height:.92;text-wrap:balance}
/* 14-10: klein label boven de kop; de kop staat breed op twee regels, op de telefoon mag hij vrij breken */
.wk-kop__kick{margin:0 0 18px;font-size:.85rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--delft)}
@media(min-width:700px){.wk-kop__ln{display:block}}
.page-head .wk-kop__sub{margin:24px auto 0;color:var(--ink-soft);max-width:30em;text-wrap:balance}
.wk-kop__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);width:100%;max-width:960px;margin-top:clamp(48px,6vw,88px)}
.wk-kop__col{margin:0;display:flex;flex-direction:column;align-items:center}
.wk-kop__ph{width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.wk-kop__ph img{width:100%;height:100%;object-fit:cover}
/* beginstand van het openen (alleen met beweging; werk.js zet .wk-still als Motion ontbreekt) */
html.motion:not(.wk-still) .wk-kop__ph{clip-path:inset(6% 6% 6% 6%)}
html.motion:not(.wk-still) .wk-kop__ph img{transform:scale(1.06)}
.wk-kop__cap{width:100%;border-top:1px solid var(--ink);padding-top:22px;margin-top:22px}
.wk-kop__who{display:block;font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.wk-kop__num{display:block;font-family:var(--f-display);font-weight:800;font-stretch:72%;font-size:clamp(3.6rem,2.2rem + 4.4vw,7rem);line-height:.9;letter-spacing:-.01em;margin-top:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.wk-kop__word{text-transform:uppercase}
.wk-kop__cap p{margin:14px auto 0;max-width:19em;color:var(--ink-soft)}
.wk-kop__note{margin-top:clamp(40px,4vw,64px);max-width:34em;font-size:.95rem;color:var(--ink-soft)}
.wk-kop .page-head{padding-top:calc(var(--ritme-kop) + .55vw);padding-bottom:calc(var(--ritme-ruim) / 2)}   /* + .55vw: eigen bovenlucht van de grote h1 (U4) */
.wk-kop__go{margin-bottom:-12px;margin-top:18px;display:inline-flex;align-items:center;gap:8px;min-height:44px}
@media(max-width:699px){
  .wk-kop__in{grid-column:1/-1}
  .wk-kop__pair{grid-template-columns:minmax(0,1fr);row-gap:56px}
  .wk-kop__ph{max-width:420px}
}

/* ---------- 2 · Cases ---------- */
.wk-cases{--r-boven:var(--ritme-ruim);--r-onder:var(--ritme-ruim);overflow-x:clip;scroll-margin-top:72px}
.wk-cases__head{text-align:center;max-width:44rem;margin:0 auto}
.wk-cases__head h2,.wk-cases__head .lead{text-wrap:balance}
.wk-cases__head .lead{margin:22px auto 0;color:var(--ink-soft)}
.wk-cases__rows{display:grid;gap:clamp(72px,8vw,128px);margin-top:clamp(48px,6vw,88px)}
/* 29-09: het paar als mock-up, smaller en gecentreerd: een afgedrukte foto → een slank browservenster, met een pijl ertussen */
.wk-case__two{display:grid;grid-template-columns:minmax(0,1fr) clamp(64px,7vw,112px) minmax(0,1fr);align-items:end;max-width:1040px;margin:0 auto}
.wk-case figure{margin:0}
.wk-case__img{aspect-ratio:4/3;overflow:hidden;background:var(--paper)}
.wk-case__img img{width:100%;height:100%;object-fit:cover}
.wk-case__ph .wk-case__img{padding:clamp(8px,.9vw,12px);background:#FBF7F0;box-shadow:0 1px 2px rgba(22,32,48,.10),0 22px 34px -22px rgba(22,32,48,.42);transform:rotate(-1.2deg)}
.wk-case__win{aspect-ratio:4/3;display:grid;grid-template-rows:26px minmax(0,1fr);border:1px solid rgba(22,32,48,.14);border-radius:9px;overflow:hidden;background:var(--paper);box-shadow:0 1px 2px rgba(22,32,48,.10),0 22px 34px -22px rgba(22,32,48,.42)}
.wk-case__bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-bottom:1px solid rgba(22,32,48,.10);background:rgba(47,74,122,.06)}
.wk-case__bar i{width:7px;height:7px;border-radius:50%;background:rgba(47,74,122,.28)}
.wk-case__bar span{margin:0 auto;padding:3px 12px;margin-right:auto;border-radius:99px;background:var(--paper);font-size:.66rem;line-height:1;color:var(--ink-soft);transform:translateX(-14px)}
.wk-case__win .wk-case__img{aspect-ratio:auto;min-height:0}
.wk-case__win .wk-case__img img{object-position:top}
.wk-case__arr{align-self:center;display:grid;justify-items:center;gap:6px;padding-bottom:34px;color:var(--delft)}
.wk-case__arr span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.wk-case__arr svg{width:clamp(48px,5vw,64px);height:auto;overflow:visible}
.wk-case__arr path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wk-case figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:14px;text-align:center}
.wk-case__cap{text-align:center;max-width:36rem;margin:28px auto 0;display:grid;gap:12px;justify-items:center}
.wk-case__cap h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);line-height:1}
.wk-case__cap p{color:var(--ink-soft)}
.wk-case__cap strong{color:var(--ink);font-weight:600}
.wk-case__cap .tl{display:inline-flex;align-items:center;gap:8px;min-height:44px}
@media(max-width:599px){.wk-case__two{grid-template-columns:minmax(0,1fr);max-width:300px;gap:14px}.wk-case__arr{padding:0}.wk-case__arr svg{width:44px;transform:rotate(90deg);margin:14px 0}}

/* ---------- 3 · Studies ---------- */
.wk-cases__rows>.wk-case:last-child .wk-case__cap{margin-bottom:-12px}
.wk-studies{--r-onder:var(--ritme-ruim);scroll-margin-top:72px}
.wk-studies__head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:18px;border-bottom:1px solid var(--ink)}
.wk-studies__head p{color:var(--ink-soft);font-size:.9rem;text-align:right}
.wk-studies__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);margin-top:clamp(36px,4vw,60px)}
.wk-studie{scroll-margin-top:96px}
.wk-studie__ph{overflow:hidden;background:var(--paper)}
.wk-studie__ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.wk-studie__nm{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.wk-studie__nm h3{font-family:var(--f-display);font-weight:700;font-size:1.2rem;letter-spacing:-.01em}
.wk-studie__lbl{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--delft)}
.wk-studie__pain{margin-top:18px;font-family:var(--f-display);font-weight:700;font-stretch:90%;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.3rem,1.05rem + .7vw,1.75rem);color:var(--ink);text-wrap:balance}
.wk-studie__idea{margin-top:14px;color:var(--ink-soft);max-width:30em}
.wk-studie__mk{margin-top:16px;font-size:.88rem;color:var(--ink)}
.wk-studies__ft{margin-bottom:-12px;text-align:center;margin-top:clamp(56px,6vw,96px);display:flex;flex-direction:column;align-items:center;gap:8px}
.wk-studies__ft p{color:var(--ink-soft);max-width:34em}
.wk-studies__ft .tl{display:inline-flex;align-items:center;gap:8px;min-height:44px}
@media(max-width:899px){
  .wk-studies__cards{grid-template-columns:minmax(0,1fr);row-gap:56px}
  .wk-studies__head{flex-direction:column;gap:6px}
  .wk-studies__head p{text-align:left}
  .wk-studie__ph img{aspect-ratio:4/3}
}
/* 14-10 mobieltest: tablet (600-899 px) als tussenvorm van de drie kolommen: per studie de foto (4:5, zoals desktop)
   links en de tekst ernaast, in plaats van drie foto's van volle breedte onder elkaar */
@media(min-width:600px) and (max-width:899px){
  .wk-studies__cards{row-gap:48px}
  .wk-studie{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:28px;align-items:start}
  .wk-studie__ph img{aspect-ratio:4/5}
  .wk-studie__nm{margin-top:0}
}

/* ---------- 4 · Jouw zaak ---------- */
.wk-zaak>.sec{padding-top:calc(var(--ritme-ruim) / 2);padding-bottom:0}
.wk-zaak__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--ink);padding-top:22px}
.wk-zaak__head h2{font-family:var(--f-display);font-weight:800;font-stretch:88%;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.3rem,1.1rem + .6vw,1.8rem)}
.wk-zaak__row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,4vw,72px);margin-top:clamp(28px,3vw,44px);align-items:center}
.wk-zaak__frame{position:relative;margin:0;aspect-ratio:4/3;padding:clamp(14px,1.6vw,22px)}
.wk-zaak__frame>i{position:absolute;background:var(--ink-soft);opacity:.55}
.wk-zaak__t,.wk-zaak__b{left:0;right:0;height:1px}
.wk-zaak__t{top:0;transform-origin:left}
.wk-zaak__b{bottom:0;transform-origin:right}
.wk-zaak__l,.wk-zaak__r{top:0;bottom:0;width:1px}
.wk-zaak__l{left:0;transform-origin:bottom}
.wk-zaak__r{right:0;transform-origin:top}
.wk-zaak__win{height:100%;overflow:hidden;background:var(--paper)}
.wk-zaak__win img{width:100%;height:100%;object-fit:cover}
.wk-zaak__label{position:absolute;left:0;right:0;bottom:clamp(28px,3.4vw,48px);margin-inline:auto;width:fit-content;min-width:min(78%,320px);max-width:calc(100% - 48px);padding:16px 22px 14px;background:var(--paper);text-align:center}
.wk-zaak__label b{display:block;font-family:var(--f-display);font-weight:800;font-stretch:88%;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.3rem,1rem + 1.2vw,2.2rem);line-height:1.1;color:var(--ink)}
.wk-zaak__label span{display:block;margin-top:4px;color:var(--ink-soft);font-size:.9rem}
.wk-zaak__frame figcaption{position:absolute;right:0;bottom:-26px;font-size:.75rem;color:var(--ink-soft)}
.wk-zaak__q{font-family:var(--f-display);font-weight:700;font-stretch:90%;letter-spacing:-.02em;font-size:clamp(1.8rem,1.2rem + 1.8vw,3rem);line-height:1.06;text-wrap:balance}
.wk-zaak__txt>p{margin-top:16px;font-size:1.06rem;line-height:1.6;color:var(--ink-soft);max-width:30em}
.wk-zaak__txt dl{margin:26px 0 0;border-top:1px solid var(--line)}
.wk-zaak__txt dl div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.wk-zaak__txt dt{color:var(--ink-soft)}
.wk-zaak__txt dd{margin:0;color:var(--ink)}
.wk-zaak__txt .btn{margin-top:30px}
@media(max-width:899px){
  .wk-zaak__row{grid-template-columns:minmax(0,1fr)}
  .wk-zaak__txt{margin-top:48px}
  .wk-zaak__head .muted{display:none}
}
@media(max-width:599px){
  .wk-zaak__label{bottom:22px;padding:10px 16px 8px}
  .wk-zaak__label span{display:none}
}

/* ritme (29-09, B2 #4): het onderschrift steekt 24 px onder het kader uit */
@media(min-width:900px){.wk-zaak__frame{margin-bottom:24px}}
/* 14-10 ronde 2: de drie Salento-stories staan in een 16:9-beeld; in 4:3 vielen de buitenste half weg */
.wk-case__img.wk-case__img--169{aspect-ratio:16/9}
/* 14-10 ronde 2: de Rouchelli-site stopt onder de hero (geen halve kop meer); hij past in de breedte, eronder loopt het beige van de site door */
.wk-case__win .wk-case__img--kop{background:#FCF6EF}
.wk-case__win .wk-case__img--kop img{object-fit:contain;object-position:top}

/* 20-10 mobieltest: de schermafbeelding vult het browservenster helemaal (onder de Rouchelli-site bleef een lege strook) */
@media(max-width:599px){.wk-case__win .wk-case__img--kop img{object-fit:cover}}