/* Beautiful Soul — unified styles */
:root{
  --teal:#008080;
  --gold:#ccb75c;
  --light:#f9f9f4;
  --deep:#533747;
  --ink:#222;
  --muted:#5b5b5b;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--ink);background:var(--light);line-height:1.6}
.container{width:min(1100px,92vw);margin-inline:auto}
.narrow{width:min(820px,92vw);margin-inline:auto}
.center{text-align:center}
h1,h2,h3{line-height:1.2;margin:0 0 .4em}
h1{font-size:clamp(2rem,4vw+.8rem,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,2.2vw+.6rem,2.2rem);font-weight:800}
h3{font-size:1.2rem;font-weight:800}
p{margin:.5em 0 1em}
.lead{font-size:1.125rem;color:var(--deep)}
.accent{color:var(--teal)}
.nav{position:sticky;top:0;z-index:99;background:#fff;border-bottom:1px solid #eee}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;color:var(--deep);text-decoration:none}
.brand-logo{width:24px;height:auto;object-fit:contain;display:block}
@media (max-width:540px){.brand-logo{width:20px}}
.nav__links{display:flex;gap:1rem;align-items:center}
.nav__links a{color:var(--ink);text-decoration:none;font-weight:600}
.nav__toggle{display:none;background:transparent;border:1px solid #eee;border-radius:10px;padding:.3rem .6rem;cursor:pointer}
@media (max-width:860px){
  .nav__toggle{display:block}
  .nav__links{display:none;position:absolute;right:4vw;top:56px;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:var(--shadow);padding:.7rem;flex-direction:column;min-width:220px}
  .nav__links.show{display:flex}
}
.section{padding:68px 0}
.section--tint{background:#fff}
.hero{padding:88px 0;background:var(--light);position:relative}
.grid-1{display:grid;grid-template-columns:1.1fr 0.4fr;gap:28px;align-items:center}
.grid-2{display:grid;grid-template-columns:0.3fr 0.7fr;gap:28px;align-items:center}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}.grid-1{grid-template-columns:1fr}}
.hero__text p{font-size:1.1rem;color:var(--muted)}
.hero__art{display:grid;place-items:center}
.phoenix-mark{width:min(280px,90%);aspect-ratio:1/1;border-radius:50%;background:
  radial-gradient(circle at 30% 30%, rgba(204,183,92,.2), transparent 60%),
  radial-gradient(circle at 70% 60%, rgba(0,128,128,.18), transparent 60%),
  #fff;box-shadow:var(--shadow);position:relative;display:grid;place-items:center;overflow:hidden}
.phoenix-mark::after{content:"";position:absolute;inset:16%;border-radius:50%;border:0px dashed rgba(0,0,0,.06)}
.logo-in-mark{max-width:220px;max-height:220px;width:auto;height:auto;display:block;margin:auto;opacity:.98;border-radius:50%}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
@media (max-width:900px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.features{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.over__photo{
  height: 320px;
  aspect-ratio: 3 / 4;   /* 900×1200 verhouding */
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(0,128,128,.18), rgba(204,183,92,.18)),
    url('/assets/koen_no.jpg') center/cover;
  box-shadow: var(--shadow);
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
@media (max-width:900px){.info-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.info-grid{grid-template-columns:1fr}}
.info-item{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.info-item span{color:#666;font-size:.95rem}
.pricing{margin-top:6px}
.contact-form .row{margin-bottom:12px}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form input[type="number"],
.contact-form textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:12px;background:#fff;font:inherit}
.contact-form .inline{display:flex;gap:12px;align-items:center}
.contact-form label{display:block;font-weight:700;margin-bottom:6px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.alert{border-radius:12px;padding:12px 14px;margin-bottom:14px}
.alert.success{background:#e9f8f6;color:#0c5c57;border:1px solid #b8e6e0}
.alert.error{background:#fdecec;color:#7a1d1d;border:1px solid #f2bcbc}
/* === Beautiful Soul: Slider fix (no crop, responsive) === */
/* === Beautiful Soul: Slider styling === */
.slideshow {
  --img-w: 85%;                 /* aangepast van 70% naar 85% */
  --slide-max-h: min(70vh, 720px);
  background: #F9F9F4;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}


/* Slides */
.slideshow .slide {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 12px;
}
.slideshow .slide.active { display: flex; }

.slideshow .slide img {
  width: var(--img-w);
  max-width: 100%;
  height: auto;
  max-height: var(--slide-max-h);
  object-fit: contain !important;
  object-position: center center;
  display: block;
  margin: 0 auto;
  position: static !important;
}

/* Nav buttons */
.slideshow .ss-nav {
  background: #ffffff;
  border: 2px solid #008080;
  color: #008080;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0; /* we gebruiken SVG, dus geen tekst */
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}
.slideshow .ss-nav:hover {
  background: #008080;
  color: #fff;
  border-color: #008080;
}
.slideshow .ss-nav svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
.slideshow .ss-nav.prev { left: 16px; }
.slideshow .ss-nav.next { right: 16px; }

/* Dots */
.slideshow .dots {
  text-align: center;
  margin-top: 12px;
}
.slideshow .dot {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s ease;
}
.slideshow .dot:hover {
  background: #999;
}
.slideshow .dot.active {
  background: #008080;
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(0,128,128,0.2);
}

/* Responsief */
@media (max-width: 768px) {
  .slideshow { --img-w: 90%; --slide-max-h: 55vh; }
}
@media (max-width: 420px) {
  .slideshow { --img-w: 95%; --slide-max-h: 50vh; }
}

}
.slideshow .ss-nav {
  border-radius: 50%; /* blijft rond */
}
/*

*/


/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
}

/* Primary button: goud */
.btn--primary {
  background: var(--gold);
  color: var(--light);
}
.btn--primary:hover {
  background: var(--teal);
  color: var(--light);
}

/* Gold button: accent variant */
.btn--gold {
  background: var(--teal);
  color: var(--light);
}
.btn--gold:hover {
  background: var(--gold);
  color: var(--light);
}
.container {
  width: min(1100px, 92vw);
  margin-inline: auto;
}
 @media (max-width: 1024px){
      .teachings-cards > div{ grid-template-columns: repeat(2,1fr) !important; }
    }
    @media (max-width: 600px){
      .teachings-cards > div{ grid-template-columns: 1fr !important; }
    }
    .teachings-cards h3{ font-weight:700; letter-spacing:.2px; }