/* Kleuren & maat (pas aan je thema aan) */
:root{
  --ks-accent: #DDECE8;      /* lichtblauw uit je site */
  --ks-bg:     #F5F0EB;      /* zelfde als “special background” */
  --ks-size:   clamp(170px, 48vw, 320px);
}

#ks-intro{ background: var(--ks-bg); }
#ks-logo{ color: var(--ks-accent); }

#ks-logo.ks-ring{
  width: var(--ks-size);
  height: auto;
  display: block;
}

/* Progressring start boven */
#ks-logo .ring-progress{
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Foto en arc-tekst starten subtiel off (voor animatie) */
#ks-photo{
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(.94) rotate(0.001deg);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.08));
  image-rendering: -webkit-optimize-contrast; /* lichte kwaliteitsboost */	
}

#ks-arc-text{
  font: 700 18px/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .06em;
  opacity: 0;
  transform: translateY(-4px);
	color:#222
		  font-family: "Playfair Display", serif;
  font-weight: 600;       /* mooi halfbold */
  font-size: 20px;        /* iets groter dan 18px */
  fill: #8EC5C8;          /* zachte turquoise (past bij progress bar) */
  letter-spacing: 1px;    /* optioneel, maakt het luchtiger */
	stroke: black;          /* zwarte rand */
  stroke-width: 0.5;      /* dunne outline */
  paint-order: stroke;    /* eerst stroke tekenen */
		
}

#ks-progress {
  stroke: #8EC5C8;   /* turquoise */
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px black); /* subtiel zwart randje */
}