/* ============================================================
   SKIN: OVER — "DE WOONKAMER"
   Sfeer: warm papier, zachte kleuren, persoonlijk.
   Display-font: Gabarito — vriendelijke schreefloze met ronding.
   Bewust geen serif: die hoek is bezet door de sites van Amber,
   Zadrak en Zanzibar.
   ============================================================ */

body[data-skin="warm"] {
  --pg-bg:   #faf8f5;
  --pg-fg:   #1c1a18;
  --pg-mut:  #6f6a64;
  --pg-lijn: #e6e0d8;
  --display: "Gabarito", "Trebuchet MS", sans-serif;
  --sk: rgba(60, 45, 30, .15);
  --papier:  #fffdfa;
  background: var(--pg-bg);
  color: var(--pg-fg);
}

/* zacht warm licht rechtsboven */
body[data-skin="warm"]::before {
  content: "";
  position: fixed;
  top: -20%; right: -10%;
  width: 60vw; height: 60vw;
  max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(255,210,63,.16) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
body[data-skin="warm"] main,
body[data-skin="warm"] .nav { position: relative; z-index: 1; }

/* ---------- KOP + PORTRET ---------- */
.ov-kop {
  padding: calc(var(--nav-h) + clamp(46px, 7vw, 96px)) var(--pad-x) clamp(46px, 7vw, 90px);
}
.ov-kop-in {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

.ov-kop h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.03;
  letter-spacing: -.025em;
  margin: 22px 0 26px;
}
/* geen cursief: Gabarito heeft geen echte italic */
.ov-kop h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--roze);
}

.ov-lead {
  font-size: var(--t-lead);
  line-height: 1.9;
  color: var(--pg-mut);
  max-width: 50ch;
  margin-bottom: 30px;
}

.ov-foto {
  position: relative;
  border-radius: var(--ronding);
  overflow: hidden;
  background: var(--papier);
  box-shadow: var(--schaduw-3);
  transform: rotate(-1.4deg);
  transition: transform var(--traag);
}
.ov-foto:hover { transform: rotate(0deg) scale(1.012); }
.ov-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}
.ov-foto figcaption {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: var(--ronding);
  background: rgba(255,253,250,.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 3px solid var(--roze);
}
.ov-foto figcaption strong {
  font-family: var(--mono);
  font-size: var(--t-klein);
  font-weight: 700;
  color: var(--ink);
}
.ov-foto figcaption span {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .1em;
  color: var(--pg-mut);
}

/* ---------- HET VERHAAL ---------- */
.ov-verhaal {
  padding: clamp(50px, 7vw, 96px) var(--pad-x);
  border-top: 1px solid var(--pg-lijn);
}
.verhaal-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
.verhaal-kolom h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-l);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--geel);
  display: inline-block;
}
.verhaal-kolom p {
  font-size: var(--t-body);
  line-height: 1.95;
  color: var(--pg-mut);
  margin-bottom: 18px;
  max-width: 54ch;
}
.verhaal-kolom p strong { color: var(--ink); font-weight: 600; }
.verhaal-kolom a {
  color: var(--ink);
  border-bottom: 2px solid var(--roze);
  font-weight: 500;
}
.verhaal-kolom a:hover { color: var(--roze); }

.uitgelicht {
  background: var(--papier);
  border-left: 4px solid var(--roze);
  border-radius: var(--ronding);
  padding: 20px 24px !important;
  font-size: var(--t-lead) !important;
  color: var(--ink) !important;
  box-shadow: var(--schaduw-1);
}

/* ---------- TUSSENFOTO MET QUOTE ---------- */
.ov-tussenfoto {
  padding: clamp(20px, 4vw, 50px) var(--pad-x) clamp(40px, 6vw, 80px);
}
.tf-in {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.tf-beeld {
  border-radius: var(--ronding);
  overflow: hidden;
  background: var(--papier);
  padding: 12px 12px 44px;
  box-shadow: var(--schaduw-3);
  transform: rotate(2.2deg);
  transition: transform var(--traag);
}
.tf-beeld:hover { transform: rotate(0deg) scale(1.02); }
.tf-beeld img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--ronding);
  display: block;
}
.tf-quote p {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
}
.tf-quote cite {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-style: normal;
  font-size: var(--t-xl);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--roze);
  margin-top: 4px;
}

@media (max-width: 780px) {
  .tf-in { grid-template-columns: 1fr; }
  .tf-beeld { max-width: 260px; }
}

/* ---------- WAAR IK IN GELOOF ---------- */
.ov-geloof {
  padding: clamp(50px, 7vw, 96px) var(--pad-x);
  background: var(--ink);
  color: #fff;
}
.ov-geloof .label { color: #8b8b95; }
.ov-geloof h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 18px 0 clamp(32px, 4.4vw, 52px);
}

.geloof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.geloof {
  padding: 28px 26px;
  border-radius: var(--ronding);
  background: #1f1f26;
  border: 1px solid #2c2c35;
  transition: transform var(--snel), border-color var(--snel);
}
.geloof:hover { transform: translateY(-4px); border-color: var(--roze); }
.g-nr {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--geel);
}
.geloof h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-m);
  line-height: 1.2;
  margin: 12px 0 11px;
}
.geloof p {
  font-size: var(--t-body);
  line-height: 1.85;
  color: #a8a8b2;
}

/* ---------- WAT IK KAN ----------
   Ritme van Over mij: de tekst begint links, maar deze sectie
   kantelt naar rechts. Nog een pagina met een eigen slinger. */
.ov-kunde {
  padding: clamp(50px, 7vw, 96px) var(--pad-x);
}
.ov-kunde .kunde-txt { text-align: right; }
.ov-kunde .kunde-txt .label { flex-direction: row-reverse; }
.ov-kunde .kunde-txt p { margin-left: auto; }
.kunde-in {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.kunde-txt h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-l);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 18px 0 16px;
}
.kunde-txt p {
  font-size: var(--t-body);
  line-height: 1.9;
  color: var(--pg-mut);
  max-width: 42ch;
}

.kunde-lijst {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.kunde-lijst li {
  background: var(--papier);
  border: 1px solid var(--pg-lijn);
  border-radius: var(--ronding);
  padding: 15px 18px;
  font-family: var(--mono);
  font-size: var(--t-klein);
  line-height: 1.5;
  color: #3d3833;
  position: relative;
  padding-left: 38px;
  transition: border-color var(--snel), transform var(--snel);
}
.kunde-lijst li::before {
  content: "→";
  position: absolute;
  left: 17px;
  color: var(--roze);
  font-weight: 700;
}
.kunde-lijst li:hover { border-color: var(--roze); transform: translateX(3px); }

/* ---------- CTA ---------- */
.ov-cta {
  padding: 0 var(--pad-x) clamp(64px, 9vw, 120px);
}
.ovc-in {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
  background: var(--papier);
  border: 1px solid var(--pg-lijn);
  border-radius: var(--ronding);
  padding: clamp(32px, 5vw, 60px);
  box-shadow: var(--schaduw-3);
  position: relative;
  overflow: hidden;
}
.ovc-in::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--roze) 64%, var(--geel) 64%);
}
.ov-cta h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-l);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.ov-cta p {
  font-size: var(--t-body);
  line-height: 1.9;
  color: var(--pg-mut);
  max-width: 48ch;
}
.ovc-fijn {
  margin-top: 12px;
  font-size: var(--t-body) !important;
  color: var(--ink) !important;
  font-weight: 500;
}
.ovc-acties {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ovc-acties .btn { width: 100%; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 940px) {
  .ov-kop-in   { grid-template-columns: 1fr; }
  .ov-foto     { max-width: 400px; order: -1; }
  .verhaal-in  { grid-template-columns: 1fr; }
  .geloof-grid { grid-template-columns: 1fr; }
  .kunde-in    { grid-template-columns: 1fr; }
  .ovc-in      { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .kunde-lijst { grid-template-columns: 1fr; }
}

/* ============================================================
   GRAFISCH ACCENT: SCRIBBLE
   De over-pagina krijgt handgetekende accenten: een golvende
   streep onder woorden, een cirkel om iets heen, een pijltje.
   Allemaal getekende SVG, dus scherp op elk scherm.
   ============================================================ */

/* golvende onderstreping onder het uitgelichte woord in de kop */
.ov-kop h1 em {
  position: relative;
  display: inline-block;
}
.ov-kop h1 em::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -.12em;
  height: .18em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 60 4, 96 20, 150 11 S 250 3, 297 13' fill='none' stroke='%23ff4f8b' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* de kop van elke verhaalkolom krijgt een geschetste streep,
   in plaats van de strakke gele lijn */
.verhaal-kolom h2 {
  border-bottom: 0;
  padding-bottom: 18px;
  position: relative;
}
.verhaal-kolom h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 108%;
  height: 12px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 50 2, 90 11, 140 6 S 210 2, 238 7' fill='none' stroke='%23ffd23f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* het uitgelichte blok krijgt een met de hand getrokken kader */
.uitgelicht {
  border-left: 0;
  position: relative;
  background: transparent;
  box-shadow: none;
  padding: 24px 26px !important;
}
.uitgelicht::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140' preserveAspectRatio='none'%3E%3Cpath d='M8 12 C 120 4, 280 9, 392 7 C 396 45, 393 100, 391 132 C 270 137, 130 130, 9 134 C 5 96, 7 50, 8 12 Z' fill='none' stroke='%23ff4f8b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* een pijltje dat naar de quote wijst */
.tf-quote { position: relative; }
.tf-quote::before {
  content: "";
  position: absolute;
  left: -58px;
  top: 6px;
  width: 46px;
  height: 46px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M4 8 C 22 14, 36 26, 48 46' fill='none' stroke='%23ffd23f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M50 30 L 50 48 L 33 46' fill='none' stroke='%23ffd23f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* de vaardighedenlijst krijgt losse, met de hand gezette kaartjes */
.kunde-lijst li {
  transform: rotate(-.5deg);
  transition: transform var(--snel), border-color var(--snel);
}
.kunde-lijst li:nth-child(even) { transform: rotate(.6deg); }
.kunde-lijst li:hover { transform: rotate(0deg) translateX(3px); }

@media (max-width: 780px) {
  .tf-quote::before { display: none; }
}