:root{
  --bio-grond:#1a1b20;
  --bio-grond-diep:#111216;
  --bio-tegel:rgba(255,255,255,.045);
  --bio-tegel-aan:rgba(255,255,255,.09);
  --bio-tekst:#f4efe6;
  --bio-tekst-zacht:#b4ab9c;
  --bio-rand:rgba(255,255,255,.13);
  --bio-sluier:rgba(0,0,0,.55);
  --bio-rand-aan:#a00038;
  --bio-accent:#a00038;
  --bio-accent-diep:#83002e;
  --bio-accent-op:#fffdfa;
  --bio-kop:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --bio-kop-gewicht:800;
  --bio-kop-breedte:normal;
  --bio-kop-spatie:-.02em;
  --bio-schrift:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --bio-hoek:0;
  --bio-breed:27.5rem;
}
/* Link in bio — de pagina achter de link in een Instagram- of TikTokprofiel.

   Dit is de bron voor de kantoren die KMW host. De kleuren en lettertypes
   staan hier NIET in: die komen per kantoor uit bio_data.stijl_van() en
   worden als :root-blok vóór dit bestand ingevoegd. Zo is er één stylesheet
   voor alle kantoren en toch een eigen gezicht per kantoor.

   Een kantoor dat zijn site zelf beheert (Monique) heeft een eigen kopie in
   zijn repo, mét het :root-blok erin. Wijzig je hier iets wezenlijks, loop
   die kopie dan na. */

/* =================================================================== romp */

*{box-sizing:border-box}

html{
  background:var(--bio-grond);
  /* 100% hoogte zodat de voet onderaan blijft op een korte pagina */
  min-height:100%;
}

body{
  margin:0;
  background:var(--bio-grond);
  color:var(--bio-tekst);
  font-family:var(--bio-schrift);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit}

:focus-visible{outline:2px solid var(--bio-accent);outline-offset:3px}

.verborgen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* De iconenvoorraad bovenaan body hoort niet in beeld. */
.iconen{display:none}

/* De gouden haarlijn langs de bovenrand. Hij loopt over de volle breedte,
   ook op een brede telefoon of een desktop. */
body::before{
  content:"";
  display:block;
  height:3px;
  background:linear-gradient(90deg,var(--bio-accent-diep),var(--bio-accent),var(--bio-accent-diep));
}

.bio{
  max-width:var(--bio-breed);
  margin:0 auto;
  padding:0 1.25rem 2rem;
  /* Boven de achtergrondlaag. */
  position:relative;
  z-index:1;
}

/* De achtergrondlaag: een beeld of filmpje dat zacht achter de pagina door
   loopt. Vast in beeld, zodat hij bij het scrollen blijft staan en de lijst
   er overheen schuift.

   De dekking komt per kantoor mee als variabele. Staat hij te hoog, dan
   leest de tekst niet meer — vandaar een lage terugval als er niets is
   meegegeven. */
.bio-achter{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.bio-achter img,
.bio-achter video{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:var(--bio-achter-dekking,.2);
}

/* Wie beweging heeft uitgezet in zijn systeem, hoort hier geen bewegend
   vlak achter de tekst te krijgen. De grond blijft dan gewoon staan; een
   stilstaand beeld mag wel. Dit kan niet in JavaScript, want deze pagina
   draait er niet op. */
@media (prefers-reduced-motion:reduce){
  .bio-achter video{display:none}
}

/* =================================================================== kop */

.bio-kop{
  text-align:center;
  padding:2rem 0 0;
}

/* Begrenzen op bréédte én hoogte, niet op hoogte alleen. Een breed woordmerk
   en een gestapeld merk (icoon bóven de naam) zijn allebei gangbaar, en met
   een vaste hoogte wordt dat tweede een postzegel: bij een bijna vierkant
   logo gaat alle maat zitten in de hoogte die er niet is. Zo vindt elk logo
   zijn eigen formaat en blijft de verhouding intact. */
.bio-logo{
  width:auto;
  height:auto;
  max-width:min(58%,220px);
  max-height:88px;
  margin:0 auto 2rem;
  opacity:.9;
}

/* Het woordmerk als tekst, voor merken zonder logobestand: gespatieerde
   kapitalen in de koplettersoort. Veel makelaarsmerken zijn precies dat. */
.bio-merk{
  margin:0 0 2rem;
  font-family:var(--bio-kop);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bio-tekst);
  opacity:.85;
}

/* Het portret. Vierkant met een gouden rand erbuiten, zodat het bij de
   website past en niet bij de ronde foto's van elk ander bioschermpje. */
.bio-portret-vak{
  width:7.5rem;
  height:7.5rem;
  margin:0 auto 1.4rem;
  padding:5px;
  border:1px solid var(--bio-rand);
  background:var(--bio-tegel);
}
.bio-portret{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  background:var(--bio-tegel);
}

/* De band: het portret paginabreed, met het merk eroverheen. Voor kantoren
   waarvan de eigen site ook met een groot beeld opent — daar zou een pasfoto
   een stap terug zijn. De foto loopt onderaan weg in de paginagrond, zodat
   er geen harde rand tussen beeld en tekst staat, en het merk krijgt een
   eigen sluier mee: een wit woordmerk op een lichte lucht is anders niet te
   lezen, en wélke foto een kantoor aanlevert weten we hier niet. */
.bio-kop.metband{padding-top:0}

.bio-band{
  position:relative;
  /* Buiten de zijpadding van .bio om, zodat hij de volle breedte haalt. */
  margin:0 -1.25rem .4rem;
  aspect-ratio:4/5;
  overflow:hidden;
}
.bio-band .bio-portret{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
}
.bio-band::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:38%;
  background:linear-gradient(to bottom,transparent,var(--bio-grond));
  pointer-events:none;
}
.bio-bandmerk{
  position:absolute;
  inset:0 0 auto 0;
  padding:1.6rem 1.25rem 2.6rem;
  /* De sluier wisselt met het schema mee: donker onder een licht merk, licht
     onder een donker merk. Zonder dat kreeg een kantoor met een lichte
     pagina een donkere rand bovenaan de band, terwijl de onderkant juist
     wegliep in de grond — de band hoort aan beide einden in de pagina te
     verdwijnen, niet aan één. */
  background:linear-gradient(to bottom,var(--bio-sluier,rgba(0,0,0,.55)),transparent);
}
.bio-bandmerk .bio-logo,
.bio-bandmerk .bio-merk{margin-bottom:0;opacity:1}

@media (max-width:22rem){
  .bio-band{aspect-ratio:1/1}
}

.bio-naam{
  font-family:var(--bio-kop);
  font-weight:var(--bio-kop-gewicht,700);
  font-stretch:var(--bio-kop-breedte,normal);
  font-size:clamp(1.75rem,8vw,2.3rem);
  line-height:1.06;
  letter-spacing:var(--bio-kop-spatie,-.01em);
  text-wrap:balance;
  margin:0 0 .6rem;
}

/* Eén woord in de schreefletter, groter en in de accentkleur. Dat is de
   handtekening van het merk; de kop blijft verder gewoon de kop. De lage
   regelhoogte houdt de regelafstand gelijk, en de extra onderruimte vangt
   op dat staartletters anders onder de regel uitsteken. */
.bio-naam .bio-serif{
  font-family:var(--bio-schrift);
  font-weight:500;
  font-size:1.16em;
  font-stretch:normal;
  letter-spacing:-.015em;
  line-height:.78;
  color:var(--bio-accent);
}
.bio-naam:has(.bio-serif){padding-bottom:.14em}

/* Functie en werkgebied, in kleinkapitaal met het accent ertussen. */
/* Het oogje: gespatieerde kapitalen in de accentkleur, met een streepje
   ervoor. Op een gecentreerde pagina staat dat streepje aan beide kanten,
   anders hangt de regel scheef. */
.bio-rol{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  font-family:var(--bio-kop);
  font-size:.7rem;
  font-weight:700;
  font-stretch:normal;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bio-accent);
}
/* Boven de kop hoort lucht eronder, onder de kop juist erboven. */
.bio-rol:has(+ .bio-naam){margin-bottom:1rem}
.bio-naam + .bio-rol{margin-top:.1rem}

.bio-rol::before,.bio-rol::after{
  content:"";
  width:22px;height:1px;
  background:currentColor;
  flex:none;
  opacity:.7;
}
.bio-rol .deel + .deel::before{
  content:"";
  display:inline-block;
  width:3px;height:3px;
  margin:0 .6rem .15rem;
  background:currentColor;
  vertical-align:middle;
}
.bio-rol .deel:empty{display:none}

.bio-intro{
  margin:1.25rem auto 0;
  max-width:24rem;
  font-size:.95rem;
  color:var(--bio-tekst-zacht);
}
.bio-intro:empty{display:none}

/* ============================================================ hoofdknop */

.bio-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  margin:1.9rem 0 1.5rem;
  padding:1.05rem 1.25rem;
  border:1px solid var(--bio-accent);
  border-radius:var(--bio-hoek);
  background:var(--bio-accent);
  color:var(--bio-accent-op);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background .25s ease,border-color .25s ease,transform .15s ease;
}
.bio-cta:hover{background:var(--bio-accent-diep);border-color:var(--bio-accent-diep)}
.bio-cta:active{transform:translateY(1px)}
.bio-cta svg{width:17px;height:17px;flex:none}
.bio-cta[hidden]{display:none}

/* =============================================================== knoppen */

.bio-lijst{display:flex;flex-direction:column;gap:.6rem}

.bio-link{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.95rem 1.1rem;
  border:1px solid var(--bio-rand);
  border-radius:var(--bio-hoek);
  background:var(--bio-tegel);
  color:var(--bio-tekst);
  text-decoration:none;
  transition:border-color .25s ease,background .25s ease,transform .15s ease;
}
.bio-link:hover{
  border-color:var(--bio-rand-aan);
  background:var(--bio-tegel-aan);
}
.bio-link:active{transform:translateY(1px)}

/* Het icoontje links. Vast vierkant, zodat alle titels op één lijn
   beginnen, ook als het ene icoon breder tekent dan het andere. */
.bio-link .icoon{
  width:1.4rem;height:1.4rem;flex:none;
  color:var(--bio-accent);
}
/* Of het icoon een lijntekening of een vlak is, staat op het symbool zelf
   in bio.html. Hier alleen de maat; de kleur erft het via color hierboven. */
.bio-link .icoon svg{width:100%;height:100%;display:block}

.bio-link .tekst{flex:1 1 auto;min-width:0}
.bio-link .titel{
  display:block;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
}
.bio-link .onder{
  display:block;
  font-size:.8rem;
  line-height:1.45;
  color:var(--bio-tekst-zacht);
  margin-top:.1rem;
}
.bio-link .onder:empty{display:none}

/* Het pijltje rechts schuift mee bij hover. */
.bio-link .pijl{
  width:1rem;height:1rem;flex:none;
  color:var(--bio-tekst-zacht);
  transition:transform .25s ease,color .25s ease;
}
.bio-link:hover .pijl{transform:translateX(3px);color:var(--bio-accent)}

/* Zolang de pagina laadt of als er niets in de database staat. */
.bio-leeg{
  padding:1.5rem 1.1rem;
  border:1px dashed var(--bio-rand);
  color:var(--bio-tekst-zacht);
  font-size:.9rem;
  text-align:center;
}

/* ========================================================= snelle rij */

/* Bellen, WhatsApp en mail naast elkaar. Dit zijn de drie dingen waarvoor
   iemand vanaf Instagram op een bioknop drukt, dus ze staan apart. */
.bio-snel{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.6rem;
  margin-top:1.5rem;
}
.bio-snel:empty{display:none}

.bio-snel a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
  padding:.9rem .4rem;
  border:1px solid var(--bio-rand);
  border-radius:var(--bio-hoek);
  background:var(--bio-tegel);
  color:var(--bio-tekst);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color .25s ease,background .25s ease;
}
.bio-snel a:hover{border-color:var(--bio-rand-aan);background:var(--bio-tegel-aan)}
.bio-snel a svg{width:1.25rem;height:1.25rem;color:var(--bio-accent)}

/* ================================================================= voet */

.bio-voet{
  margin:2.5rem -1.25rem -2rem;
  padding:1.75rem 1.25rem 2rem;
  background:var(--bio-grond-diep);
  border-top:1px solid var(--bio-rand);
  text-align:center;
}

.bio-keurmerken{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  flex-wrap:wrap;
  margin:0 0 1.25rem;
}
/* De keurmerken staan er in hun eigen kleuren. Ze grijs maken of door een
   filter halen werkt niet: het zijn volvlakse logo's met een eigen
   achtergrond, en die worden daar onleesbare blokjes van. Klein en met een
   beetje demping blijven ze een keurmerk en nemen ze de pagina niet over. */
.bio-keurmerken img{
  height:26px;width:auto;
  opacity:.8;
  transition:opacity .25s ease;
}
.bio-keurmerken img:hover{opacity:1}

.bio-voet-link{
  font-size:.82rem;
  color:var(--bio-tekst-zacht);
  text-decoration:none;
  border-bottom:1px solid var(--bio-rand);
  padding-bottom:2px;
  transition:color .25s ease,border-color .25s ease;
}
.bio-voet-link:hover{color:var(--bio-accent);border-bottom-color:var(--bio-accent)}

/* ============================================================== beweging */

/* De knoppen komen één voor één binnen. Puur sier: zonder JavaScript en met
   een uitgezette voorkeur voor beweging staat alles er meteen. Dezelfde twee
   klassenamen als op de rest van de site. */
@media (prefers-reduced-motion:no-preference){
  .js .komop{opacity:0;transform:translateY(10px)}
  .js .komop.zichtbaar{opacity:1;transform:none;
    transition:opacity .5s ease,transform .5s ease}
}

/* ================================================================ breed */

/* Op een desktop blijft het één kolom in het midden; dit is een
   telefoonpagina die iemand per ongeluk op een laptop opent. */
@media (min-width:40rem){
  .bio{padding-top:1rem;padding-bottom:3rem}
  .bio-kop{padding-top:3rem}
}