/* site.css — losse pagina's sabinekloos.nl. Tokens komen uit ../styles.css */
html { scroll-behavior: smooth; }
body { background: var(--col-krijt); margin: 0; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px,5vw,72px); box-sizing: border-box; }
h1, h2, h3 { margin: 0; font-weight: 400; font-family: var(--font-display); letter-spacing: -.035em; line-height: 1; }
p { margin: 0; }
img { display: block; }
a { color: var(--col-dijk); }
a:hover { color: var(--col-diep); }

/* kobalt kop: op elke pagina het enige volle kobalt vlak */
.kop { background: var(--col-dijk); color: #fff; display: flex; flex-direction: column; }
.kop a { color: rgba(255,255,255,.76); }
.kop a:hover { color: #fff; }
.nav-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding-top: 26px; padding-bottom: 18px; flex-wrap: wrap; }
.wm { border-bottom: 0; font-family: var(--font-display); font-size: 25px; letter-spacing: -.015em; color: #fff; text-decoration: none; }
.nav-l { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }
.nav-l a { border-bottom: 0; font-family: var(--font-ui); font-size: 14px; text-decoration: none; }
.nav-l a[aria-current] { color: #fff; }
.nav-x { display: flex; align-items: center; gap: 22px; }
.taal { font-family: var(--font-ui); font-size: 13px; letter-spacing: .12em; }
.r3 { border: 0; display: block; line-height: 0; opacity: .88; transition: opacity .24s cubic-bezier(.22,.61,.36,1); }
.r3:hover { opacity: 1; }
.r3 img { width: 34px; height: 34px; }

.body { font-family: var(--font-ui); font-size: 17px; line-height: 1.62; color: var(--text-2); max-width: 52ch; }
.lead { font-family: var(--font-display); font-size: clamp(22px,2.4vw,30px); line-height: 1.24; letter-spacing: -.025em; color: var(--col-diep); max-width: 30ch; }
.lab { font-family: var(--font-ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.link { font-family: var(--font-ui); font-size: 16px; font-weight: 500; color: var(--col-dijk); text-decoration: none; border-bottom: 1px solid var(--col-dijk); padding-bottom: 3px; display: inline-flex; gap: 10px; align-items: baseline; transition: color .24s cubic-bezier(.22,.61,.36,1), border-color .24s cubic-bezier(.22,.61,.36,1); }
.link:hover { color: var(--col-diep); border-bottom-color: var(--col-diep); }
.link.licht { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.link.licht:hover { border-bottom-color: #fff; }

/* kennismakingsblok: vol vlak, witte kop, echte knop */
.cta { background: var(--col-dijk); color: #fff; padding: clamp(64px,7vw,104px) 0 clamp(68px,7.5vw,112px); }
.cta h2 { color: #fff; }
.cta .body { color: rgba(255,255,255,.9); }
.cta.diep { background: var(--col-diep); }
.knop { display: inline-block; font-family: var(--font-ui); font-size: 16px; font-weight: 500; background: #fff; color: var(--col-dijk); text-decoration: none; padding: 17px 30px; border: 1px solid #fff; transition: background .24s cubic-bezier(.22,.61,.36,1), color .24s cubic-bezier(.22,.61,.36,1); }
.knop:hover { background: transparent; color: #fff; }
.kop .knop { color: var(--col-dijk); }
.kop .knop:hover { color: #fff; }
.cta.diep .knop { color: var(--col-diep); }
.cta.diep .knop:hover { color: #fff; }
.knop-vol { display: inline-block; font-family: var(--font-ui); font-size: 16px; font-weight: 500; background: var(--col-dijk); color: #fff; text-decoration: none; padding: 17px 30px; border: 1px solid var(--col-dijk); cursor: pointer; transition: background .24s cubic-bezier(.22,.61,.36,1), color .24s cubic-bezier(.22,.61,.36,1); }
.knop-vol:hover { background: transparent; color: var(--col-dijk); }

/* formulier en rijen op kobalt */
.cta .lab { color: rgba(255,255,255,.72); }
.cta .veld { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
.cta .veld:focus { border-bottom-color: #fff; }
.cta .veld::placeholder { color: rgba(255,255,255,.55); }
.cta .rijen { border-top-color: rgba(255,255,255,.28); }
.cta .rij { border-bottom-color: rgba(255,255,255,.28); }
.cta .rij dd, .cta .rij dd a { color: #fff; }
button.knop { cursor: pointer; }

/* smalle horizontale rijen */
.rijen { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--lijn-hair); max-width: 60ch; }
.rij { display: flex; gap: 24px; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--lijn-hair); padding: 11px 0; }
.rij dd, .rij .w { margin: 0; font-family: var(--font-ui); font-size: 15px; color: var(--text-2); text-align: right; }

.veld { font-family: var(--font-ui); font-size: 17px; background: transparent; border: 0; border-bottom: 1px solid var(--col-steen-200); padding: 12px 0; width: 100%; box-sizing: border-box; color: var(--col-diep); }
.veld:focus { outline: none; border-bottom-color: var(--col-dijk); }

.band { height: clamp(88px,10vw,132px); background-size: cover; background-position: center; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr !important; }
  .uit { margin-left: 0 !important; }
  .nav-l { gap: 8px 20px; }
  .nav-in { padding-top: 22px; }
  .nav-x { position: absolute; top: 18px; right: clamp(20px,5vw,72px); gap: 18px; }
  .r3 img { width: 30px; height: 30px; }
  .zij { padding-left: clamp(20px,5vw,72px); padding-right: clamp(20px,5vw,72px) !important; }
  .na-kop { padding-top: 48px !important; }
  .krap { padding-bottom: 36px !important; }
  .voet { flex-direction: column; gap: 14px !important; }
  .voet > div { gap: 10px 24px !important; }
}

/* uitklapbare vragen */
.vraag { border-bottom: 1px solid var(--lijn-hair); }
.vraag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; font-family: var(--font-display); font-size: clamp(20px,2.2vw,27px); letter-spacing: -.02em; color: var(--col-diep); }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: "+"; font-family: var(--font-ui); font-size: 20px; color: var(--col-dijk); line-height: 1; }
.vraag[open] summary::after { content: "–"; }
.vraag .antwoord { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 30px; max-width: 58ch; }