/* Over-pagina: de studiotekst en het teamrooster.

   Het gedeelde .block-onderdeel legt naam en functie over het beeld en toont ze
   pas bij hover. Bij de figuren van Jim en An valt die tekst precies over de
   handen en de witte schoenen, waar ze niet leesbaar is — en wie niet met de
   muis over het beeld gaat, ziet ze helemaal niet. Hier staat de tekst daarom
   onder het beeld en altijd in beeld. Alleen dit rooster verandert; de blokken
   in het portfolio blijven werken zoals ze werkten. */

.c-grid--team .block{padding-bottom:0;height:auto}
.c-grid--team .block__visual{position:relative;height:auto;width:100%;aspect-ratio:2/3}
.c-grid--team .block__visual picture{display:block;height:100%;width:100%}

/* tekst uit de overlay halen en laten staan */
.c-grid--team .block__content{position:static;height:auto;padding:16px 0 0;background:none}
.c-grid--team .block__visual+.block__content *{opacity:1;transform:none;transition:none}
.c-grid--team .block:focus .block__content,
.c-grid--team .block:hover .block__content{background-color:transparent}

.c-grid--team .block__content h3{font-size:1.125rem;line-height:1.3}
.c-grid--team .block__content p{margin-top:4px;font-size:1rem;opacity:.62}

@media (max-width:767px){
  .c-grid--team .block__content{padding-top:12px}
}

/* De slotregel is in het Word-document vet gezet, maar dit thema kent maar
   een tekstgewicht (500) — <strong> levert er niets op. De nadruk komt hier
   van extra lucht erboven in plaats van van een zwaarder gewicht. */
.rt--large p.slot{margin-top:1.1em}

/* ---------- studiopagina: het openingsstatement ---------- */

/* Groot, links, op de zwarte achtergrond. Geen kader, geen kleuraccent: de
   beweging van de cursor is het enige wat er gebeurt. */
.studio-kop{padding-top:clamp(84px,17vh,190px);padding-bottom:clamp(44px,8vh,104px)}
.wij{
  font-size:clamp(2.5rem,8.2vw,7.5rem);
  line-height:1;
  letter-spacing:-.025em;
  font-weight:500;
  color:#fff;
  margin:0;
}
.wij__rol{white-space:nowrap}
/* De cursor is een streep ter hoogte van de kapitaal, niet van de hele regel. */
.wij__caret{
  display:inline-block;
  width:.055em;
  height:.74em;
  margin-left:.05em;
  background:currentColor;
  transform:translateY(.02em);
}
/* Knippert alleen als er niets getypt wordt — zoals een echte tekstcursor. */
.wij--wacht .wij__caret{animation:wijKnipper 1.05s steps(1,end) infinite}
@keyframes wijKnipper{0%,49%{opacity:1}50%,100%{opacity:0}}
.wij--stil .wij__caret{display:none}

@media (max-width:767px){
  .studio-kop{padding-top:clamp(64px,12vh,120px)}
  .wij{letter-spacing:-.02em}
}
@media (prefers-reduced-motion:reduce){
  .wij__caret{display:none}
}