/* /contact/: kop (de tafel) en tijdlijn na je aanvraag. Uit docs/prototype/contact.html.
   Het aanvraagformulier heeft een eigen bestand: contact-aanvraag.css. */
/* signatuurvisual: de tafel van bovenaf, klaar voor het gesprek */
.tbl{position:relative;aspect-ratio:5/4;border-radius:26px;overflow:hidden;container-type:inline-size;font-size:clamp(9px,3.2cqw,16px);background-color:#E2CDAE;background-image:repeating-linear-gradient(91deg,rgb(120 80 40 / .07) 0 2px,transparent 2px 23px),repeating-linear-gradient(89deg,rgb(255 255 255 / .1) 0 1px,transparent 1px 41px);box-shadow:var(--shadow-lift)}
.tbl .cup{position:absolute;width:17%;aspect-ratio:1;border-radius:50%;background:#F7F4EE;box-shadow:0 .5em 1.2em rgb(60 40 20 / .25)}
.tbl .cup::before{content:"";position:absolute;inset:14%;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 .25em #EDE7DD}
.tbl .cup i{position:absolute;inset:25%;border-radius:50%;background:radial-gradient(circle at 38% 35%,#8A5A35,#4A2C17 70%)}
.tbl .cup::after{content:"";position:absolute;right:3%;top:44%;width:13%;height:12%;border-radius:40%;background:#fff;box-shadow:0 0 0 .12em #E3DCD0}
.tbl .steam{position:absolute;width:6%;height:12%;border-left:2px solid rgb(255 255 255 / .7);border-radius:50%;filter:blur(1px);animation:steam 3.4s ease-in-out infinite}
@keyframes steam{0%{opacity:0;transform:translateY(0) scaleY(.6)}40%{opacity:.8}100%{opacity:0;transform:translateY(-1.6em) scaleY(1.1)}}
.tbl .nb{position:absolute;left:30%;top:10%;width:56%;height:80%;rotate:-3deg;border-radius:.3em;box-shadow:0 1.2em 2.4em rgb(60 40 20 / .25);background-color:#FDFCF7;background-image:linear-gradient(90deg,transparent 11%,#E9A6A0 11%,#E9A6A0 calc(11% + 1px),transparent 0),repeating-linear-gradient(transparent 0 1.7em,#D7E3EC 1.7em calc(1.7em + 1px));padding:1em 1em 1em 15%;font-family:var(--font-hand);color:#2B3F86}
.tbl .nb b{display:block;font-weight:400;font-size:1.25em;line-height:1.36em;margin-bottom:.34em}
.tbl .nb li{list-style:none;line-height:1.7em;font-size:1.02em;opacity:0;transform:translateX(-.4em);animation:nbIn .5s forwards var(--d)}
.tbl .nb li::before{content:"– ";color:var(--color-accent)}
.tbl .nb li.last{display:inline-block;position:relative}
.tbl .nb .circ{position:absolute;left:-10%;right:-8%;top:-12%;bottom:-6%;width:118%;height:118%;overflow:visible}
.tbl .nb .circ path{fill:none;stroke:#C0392B;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:drawC .9s ease forwards 2.8s}
@keyframes nbIn{to{opacity:1;transform:none}}
@keyframes drawC{to{stroke-dashoffset:0}}
.tbl .pen{position:absolute;left:84%;top:46%;width:2.2%;height:36%;border-radius:1em;background:linear-gradient(90deg,#1F2A44,#3B4E7A);rotate:28deg;box-shadow:.3em .4em .6em rgb(0 0 0 / .2)}
.tbl .postit{position:absolute;left:4%;bottom:7%;width:25%;aspect-ratio:1.05;background:var(--color-postit);padding:.6em;font-family:var(--font-hand);font-size:1.05em;line-height:1.2;box-shadow:0 .6em 1em rgb(60 40 20 / .2);rotate:-7deg}
.tbl .card-biz{position:absolute;right:4%;bottom:6%;width:24%;aspect-ratio:1.7;background:#fff;border-radius:.3em;box-shadow:0 .4em .8em rgb(60 40 20 / .2);rotate:9deg;padding:.5em .6em;font-size:.7em;line-height:1.3}
.tbl .card-biz b{font-family:var(--font-serif);font-size:1.4em}
/* tijdlijn na je aanvraag */
.tl{position:relative;display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}
.tl::before{content:"";position:absolute;left:8%;right:8%;top:58px;height:2px;background:var(--color-rule)}
.tl::after{content:"";position:absolute;left:8%;right:8%;top:58px;height:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.8,.2,1) .2s}
.tl.in::after{transform:scaleX(1)}
.tl-step{position:relative;z-index:1;opacity:0;transform:translateY(14px);transition:opacity .6s var(--d),transform .6s cubic-bezier(.2,.8,.2,1) var(--d)}
.tl.in .tl-step{opacity:1;transform:none}
.tl-ill{height:116px;display:flex;align-items:center;justify-content:center}
.tl-ill svg{height:100%;width:auto;overflow:visible}
.tl-when{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--color-ink-3)}
@media (max-width:767px){
.tl{grid-template-columns:minmax(0,1fr);gap:8px}
.tl::before,.tl::after{left:43px;right:auto;top:30px;bottom:30px;width:2px;height:auto}
.tl::after{transform:scaleY(0);transform-origin:top}
.tl.in::after{transform:scaleY(1)}
.tl-step{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:start}
.tl-ill{height:80px;background:var(--color-paper)}
}
@media (prefers-reduced-motion: reduce){
.tbl .nb li{opacity:1;transform:none}
.tbl .nb .circ path{stroke-dashoffset:0}
.tbl .steam{display:none}
.tl-step{opacity:1;transform:none}
.tl::after{transform:none}
}