/* Zelfde grafische taal als silvavillas.com: donkere forest-lijst met het logo,
   Cormorant Garamond voor de koppen, Montserrat voor de rest, messing accenten,
   ruime letterafstand op labels en knoppen.

   Alles waar de bezoeker aan wérkt - formulier, contract, handtekening - staat
   op papier met inkt. Donkergroen op donkergroen leest slecht, en zo voelt het
   ook als een document dat je invult in plaats van een app-scherm. */

@font-face{
  font-family:'Cormorant Garamond';
  src:url('/fonts/cormorant-garamond-var-latin.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('/fonts/montserrat-var-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --forest:#0F1A14;
  --forest-2:#121F18;
  --bone:#EDE5D1;
  --bone-soft:rgba(237,229,209,.78);
  --bone-faint:rgba(237,229,209,.5);
  --brass:#BC9B60;
  --brass-bright:#D8BC85;
  --paper:#F3EDDF;
  --ink:#16241D;
  --ink-soft:rgba(22,36,29,.74);
  --ink-faint:rgba(22,36,29,.55);
  --rule:rgba(22,36,29,.18);
  --rule-soft:rgba(22,36,29,.1);
  --hairline:rgba(237,229,209,.16);
  --font-sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.22,.8,.28,1);
  --gutter:clamp(20px,4.5vw,60px);
}
*{box-sizing:border-box}
/* display:flex op label/section wint anders van het hidden-attribuut */
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--forest);color:var(--bone);
  font-family:var(--font-sans);font-weight:300;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  animation:page-in .9s var(--ease);
}
@keyframes page-in{from{opacity:0}to{opacity:1}}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(188,155,96,.35)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.head{padding:clamp(26px,5vw,40px) var(--gutter) 0;display:flex;align-items:center;gap:clamp(16px,4vw,34px);flex-wrap:wrap}
.head img{width:clamp(150px,34vw,215px);height:auto}
.kicker{
  margin:0;display:flex;align-items:center;gap:14px;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;color:var(--brass-bright);
}
.kicker::before{content:"";width:34px;height:1px;background:var(--brass);flex:0 0 34px}
/* op smalle telefoons past het gespatieerde woord anders niet naast de streep */
@media (max-width:430px){
  .kicker{font-size:9.5px;letter-spacing:.2em;gap:10px}
  .kicker::before{width:22px;flex:0 0 22px}
}

.shell{max-width:780px;margin:0 auto;padding:clamp(28px,5vw,52px) var(--gutter) 80px}

.steps{display:flex;gap:8px;list-style:none;margin:0 0 26px;padding:0;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;flex-wrap:wrap}
.steps li{color:var(--bone-faint);padding:7px 15px;border:1px solid var(--hairline)}
.steps li.is-active{border-color:var(--brass);color:var(--brass-bright)}
.steps li.is-done{color:var(--bone-soft);border-color:var(--hairline)}

.card{background:var(--paper);color:var(--ink);border:1px solid rgba(237,229,209,.1);padding:clamp(26px,5vw,48px)}
h1{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(36px,7vw,54px);line-height:1.05;letter-spacing:0;
  margin:0 0 16px;color:var(--ink);
}
.lead{color:var(--ink-soft);margin:0 0 32px;max-width:56ch;font-size:15px;font-weight:400}

.toggle{display:flex;gap:10px;margin:0 0 28px;flex-wrap:wrap}
.seg{
  font:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  background:transparent;color:var(--ink-faint);
  border:1px solid var(--rule);padding:13px 20px;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.seg:hover{color:var(--ink);border-color:var(--ink-faint)}
.seg.is-on{background:var(--forest);border-color:var(--forest);color:var(--bone)}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:34px}
.grid .span-2{grid-column:1/-1}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:9px}
label>.t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-faint)}
label>.t i{font-style:normal;color:#A8763B}
input{
  /* 16px: kleiner en iOS Safari zoomt in zodra een veld focus krijgt */
  font:inherit;font-size:16px;font-weight:400;color:var(--ink);
  background:#FBF8F1;
  border:1px solid var(--rule);border-radius:0;
  padding:13px 14px;width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
  -webkit-appearance:none;appearance:none;
}
input::placeholder{color:rgba(22,36,29,.42)}
input:focus{outline:none;border-color:#A8763B;box-shadow:0 0 0 3px rgba(188,155,96,.22)}
input[aria-invalid="true"]{border-color:#A8432A}

.doc{
  background:#FBF8F1;color:var(--ink);border:1px solid var(--rule-soft);
  padding:clamp(20px,4vw,30px);
  max-height:46vh;overflow-y:auto;
  font-size:13.5px;line-height:1.7;font-weight:400;
  margin-bottom:26px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.doc p{margin:0 0 13px}
.doc .clause b{display:block;margin-bottom:3px;font-weight:600}
.doc .party{border-left:2px solid var(--brass);padding-left:14px}

.check{flex-direction:row;align-items:flex-start;gap:14px;font-size:14.5px;color:var(--ink-soft);margin-bottom:30px;cursor:pointer}
/* het vinkje zelf tekenen: de algemene input-regel zet appearance op none,
   waardoor een aangevinkt vakje er anders precies hetzelfde uitziet */
.check input{
  position:relative;width:24px;height:24px;flex:0 0 24px;
  padding:0;margin-top:1px;border:1px solid var(--rule);background:#FBF8F1;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.check input:hover{border-color:var(--ink-faint)}
.check input:checked{background:var(--forest);border-color:var(--forest)}
.check input::after{
  content:"";position:absolute;left:8px;top:3.5px;width:6px;height:12px;
  border:solid var(--bone);border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);transform-origin:center;
  transition:transform .18s var(--ease);
}
.check input:checked::after{transform:rotate(45deg) scale(1)}
.check input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.check strong{color:var(--ink);font-weight:600}

.pad{position:relative;background:#FBF8F1;border:1px solid var(--rule);margin-bottom:26px}
#pad{display:block;width:100%;height:auto;aspect-ratio:1200/440;touch-action:none;cursor:crosshair}
.clear{
  position:absolute;top:12px;right:12px;
  font:inherit;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  background:transparent;color:rgba(22,36,29,.55);
  border:1px solid rgba(22,36,29,.2);padding:8px 14px;cursor:pointer;
}
.clear:hover{color:var(--ink);border-color:rgba(22,36,29,.45)}

.summary{display:grid;grid-template-columns:auto 1fr;gap:9px 22px;font-size:14.5px;margin:0 0 32px;color:var(--ink);border-top:1px solid var(--rule-soft);padding-top:22px}
.summary dt{color:var(--ink-faint);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;align-self:center}
.summary dd{margin:0;font-weight:400}

.actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
/* knop van de site: messing die vanaf links binnenschuift */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  font:inherit;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  background:var(--forest);color:var(--bone);border:1px solid var(--forest);
  padding:17px 32px;cursor:pointer;transition:color .5s var(--ease);
}
/* zelfde beweging als de knoppen op de site: messing schuift vanaf links in */
.btn::before{
  content:"";position:absolute;inset:0;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:-1;
}
.btn:hover{color:var(--forest)}
.btn:hover::before{transform:scaleX(1)}
.btn.ghost{
  background:transparent;border:none;border-bottom:1px solid var(--rule);padding:6px 0;
  color:var(--ink-faint);letter-spacing:.18em;
}
.btn.ghost::before{display:none}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:progress}

.code-field{max-width:280px;margin-bottom:30px}
#code{
  font-family:var(--font-serif);font-size:34px;font-weight:500;letter-spacing:.28em;
  text-align:center;padding:12px 0 8px;color:var(--ink);
}
#code::placeholder{color:rgba(22,36,29,.25)}

.done{text-align:center}
.seal{
  width:64px;height:64px;margin:0 auto 24px;border-radius:50%;
  display:grid;place-items:center;font-size:24px;
  color:#A8763B;border:1px solid rgba(188,155,96,.85);
}
.done .lead{margin-inline:auto}
.ref{font-size:11px;letter-spacing:.24em;color:#A8763B;font-weight:600}
.fineprint{font-size:11.5px;letter-spacing:.02em;color:var(--ink-faint);margin-top:34px;line-height:1.9}
.fineprint a{color:var(--ink-faint);border-bottom:1px solid var(--rule);text-decoration:none}
.fineprint a:hover{color:var(--ink)}

.error{
  margin-top:22px;padding:16px 18px;
  background:rgba(168,67,42,.07);border-left:2px solid #A8432A;color:#8E3822;font-size:14px;
}
.error.is-notice{background:rgba(188,155,96,.14);border-left-color:var(--brass);color:#6B4A16}