/* CO Koffie — Contact "Premium" (Webflow-stijl). Namespace .cocx. */
.cok-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}

.cocx{
  --bg:#FDFAF4; --ink:#2C1B0E; --soft:#8C7660; --espresso:#231509; --cream:#F4EADB;
  --gold:#CDA255; --gold-deep:#B07F33; --line:rgba(44,27,14,.12);
  --head:'Gilmer','Montserrat',system-ui,sans-serif;
  position:relative; overflow:hidden;
  font-family:'Montserrat',system-ui,sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(205,162,85,.12), transparent 60%),
    radial-gradient(760px 540px at 100% 10%, rgba(176,124,60,.1), transparent 60%),
    var(--bg);
}
.cocx *{box-sizing:border-box;}
.cocx__wrap{position:relative; max-width:1180px; margin:0 auto; padding-inline:clamp(20px,5vw,48px);}

/* cursor-gloed */
.cocx__glow{position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(205,162,85,.16), transparent 62%); transform:translate(-50%,-50%); transition:opacity .5s;}
.cocx.is-glow .cocx__glow{opacity:1;}

/* reveal */
.cocx [data-rv]{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);}
.cocx [data-rv].in{opacity:1; transform:none;}

/* HERO */
.cocx__hero{padding-top:clamp(56px,8vw,104px); max-width:880px;}
.cocx__eyebrow{display:inline-block; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--gold-deep); margin-bottom:18px;}
.cocx__title{font-family:var(--head); font-weight:900; color:var(--espresso); letter-spacing:-.03em; line-height:1.05;
  font-size:min(5rem,8.2vw); margin:0 0 22px; white-space:nowrap;}
.cocx__title .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em;}
.cocx__title .w i{display:inline-block; font-style:normal; transform:translateY(112%); transition:transform .9s cubic-bezier(.22,1,.36,1);}
.cocx__title.in .w i{transform:none;}
.cocx__lead{font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.65; color:var(--soft); margin:0 0 clamp(34px,5vw,56px); max-width:56ch;}

/* MARQUEE */
.cocx__marquee{border-block:1px solid var(--line); padding:16px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.cocx__mtrack{display:flex; align-items:center; gap:34px; width:max-content; animation:cocx-mq 30s linear infinite;}
.cocx__marquee:hover .cocx__mtrack{animation-play-state:paused;}
.cocx__mtrack span{font-family:var(--head); font-weight:700; font-size:1.02rem; color:var(--espresso); white-space:nowrap;}
.cocx__mtrack i{color:var(--gold-deep); font-style:normal; font-size:.9rem;}
@keyframes cocx-mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* GRID */
.cocx__grid{display:flex; flex-direction:column; gap:clamp(18px,2.4vw,26px); padding-block:clamp(38px,6vw,72px);}

/* PANEEL */
.cocx__panel{background:radial-gradient(120% 160% at 90% -20%, #3A2310 0%, #2C1A0B 55%, #231509 100%);
  color:var(--cream); border-radius:26px; padding:clamp(28px,3.4vw,42px); border:1px solid rgba(205,162,85,.28);
  box-shadow:0 40px 90px -50px rgba(35,21,9,.75);
  display:grid; grid-template-columns:minmax(220px,.85fr) 1.15fr; gap:clamp(28px,4vw,56px); align-items:center;}
.cocx__panelintro{display:flex; flex-direction:column;}
.cocx__panelcontact{min-width:0;}
.cocx__person{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.cocx__avatarwrap{flex:0 0 auto;}
.cocx__avatar{width:62px; height:62px; border-radius:50% !important; object-fit:cover; display:block; border:2px solid rgba(205,162,85,.6);}
.cocx__pmeta b{display:block; color:#fff; font-size:1.05rem; font-weight:700;}
.cocx__pmeta span{font-size:.84rem; color:#D7C5AE;}
.cocx__status{display:inline-flex; align-items:center; gap:10px; font-size:.82rem; color:#D7C5AE;
  padding:9px 14px; border-radius:99px; background:rgba(63,191,111,.1); border:1px solid rgba(63,191,111,.25); width:fit-content;}
.cocx__pulse{position:relative; width:9px; height:9px; border-radius:50%; background:#3FBF6F; flex:0 0 auto;}
.cocx__pulse::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(63,191,111,.5); animation:cocx-pulse 1.8s ease-out infinite;}
@keyframes cocx-pulse{0%{transform:scale(.5); opacity:1;}100%{transform:scale(1.4); opacity:0;}}

.cocx__rows{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.cocx__rowlink{display:flex; flex-direction:column; gap:4px; text-decoration:none;
  padding:12px 14px; border-radius:14px; border:1px solid rgba(244,234,219,.1); background:rgba(244,234,219,.04); transition:background .25s, border-color .25s, transform .25s;}
.cocx__rows li:last-child{grid-column:1 / -1;}
.cocx__rows li.cocx__row--full{grid-column:1 / -1;}
.cocx__rowval .cocx__waicon{display:inline-block; vertical-align:-3px; margin-right:6px; color:#3FBF6F;}
a.cocx__rowlink--wa:hover{background:rgba(63,191,111,.12); border-color:rgba(63,191,111,.35);}
a.cocx__rowlink--wa:hover .cocx__rowlbl{color:#5fe39a;}
a.cocx__rowlink:hover{background:rgba(205,162,85,.12); border-color:rgba(205,162,85,.3); transform:translateY(-2px);}
.cocx__rowlbl{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--gold);}
.cocx__rowval{font-size:.95rem; color:#fff; line-height:1.4; min-width:0;}
.cocx__rowarr{display:none;}
a.cocx__rowlink:hover .cocx__rowarr{transform:none; opacity:1;}
.cocx__hours{margin:14px 0 0; font-size:.8rem; color:#B49B7E;}

/* FORMULIER */
.cocx__formcard{position:relative; background:#fff; border:1px solid var(--line); border-radius:26px; padding:clamp(26px,3.2vw,40px);
  box-shadow:0 36px 84px -50px rgba(44,27,14,.55);}
.cocx__form{display:flex; flex-direction:column; gap:16px;}

.cocx__chips{border:0; margin:0 0 4px; padding:0; display:flex; flex-wrap:wrap; gap:9px; justify-content:flex-start;}
.cocx__chips label{cursor:pointer;}
.cocx__chips input{position:absolute; opacity:0; pointer-events:none;}
.cocx__chips span{display:inline-block; padding:9px 16px; border-radius:99px; font-size:.84rem; font-weight:600; color:var(--soft);
  border:1.5px solid var(--line); background:#FDFBF7; transition:all .25s;}
.cocx__chips input:checked+span{color:#241608; border-color:transparent; background:linear-gradient(120deg,#EFD3A0,#CDA255);}
.cocx__chips input:focus-visible+span{outline:2px solid var(--gold-deep); outline-offset:2px;}

.cocx__row{display:flex; gap:14px;}
.cocx__row .cocx__field{flex:1 1 0; min-width:0;}
.cocx__field{position:relative;}
.cocx__field input,.cocx__field textarea{width:100%; padding:24px 16px 11px; border-radius:14px; border:1.5px solid var(--line);
  background:#FDFBF7; font-family:inherit; font-size:.96rem; color:var(--ink); transition:border-color .25s, box-shadow .25s, background .25s;}
.cocx__field textarea{resize:vertical; min-height:130px;}
.cocx__field label{position:absolute; left:17px; top:18px; font-size:.95rem; color:#A8957D; pointer-events:none;
  transition:top .22s, font-size .22s, color .22s;}
.cocx__field input:focus,.cocx__field textarea:focus{outline:none; background:#fff; border-color:var(--gold); box-shadow:0 0 0 4px rgba(205,162,85,.15);}
.cocx__field input:focus+label,.cocx__field input:not(:placeholder-shown)+label,
.cocx__field textarea:focus+label,.cocx__field textarea:not(:placeholder-shown)+label{top:8px; font-size:.68rem; color:var(--gold-deep); font-weight:700; letter-spacing:.04em;}

/* formulierkop */
.cocx__formhead{margin-bottom:22px;}
.cocx__formtitle{font-family:var(--head); font-weight:900; color:var(--espresso); font-size:clamp(1.4rem,2.2vw,1.8rem); letter-spacing:-.01em; margin:0 0 7px;}
.cocx__formsub{font-size:.95rem; line-height:1.55; color:var(--soft); margin:0; max-width:46ch;}
.cocx__chiplbl{display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--gold-deep); margin-bottom:-4px;}
.cocx__foot{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:8px;}
.cocx__reassure{display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--soft); line-height:1.4;}
.cocx__reassure svg{color:var(--gold-deep); flex:0 0 auto;}
.cocx__btn{cursor:pointer; border:0; display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:99px; font-family:inherit; font-weight:700; font-size:.98rem; color:#241608;
  background:linear-gradient(120deg,#EFD3A0,#CDA255); box-shadow:0 16px 36px -16px rgba(205,162,85,.75);
  transition:box-shadow .3s; will-change:transform;}
.cocx__btn i{display:inline-flex; transition:transform .3s;}
.cocx__btn i svg{width:18px; height:18px;}
.cocx__btn:hover{box-shadow:0 22px 44px -16px rgba(205,162,85,.85);}
.cocx__btn:hover i{transform:translateX(4px);}
.cocx__btn:focus-visible{outline:3px solid var(--gold-deep); outline-offset:3px;}
.cocx__btn[disabled]{opacity:.7; cursor:progress;}

/* succes */
.cocx__success{text-align:center; padding:34px 10px 18px; color:var(--espresso);}
.cocx__check{width:64px; height:64px; color:var(--gold-deep); margin-bottom:14px;}
.cocx__check circle{stroke-dasharray:176; stroke-dashoffset:176; animation:cocx-draw .8s ease forwards;}
.cocx__check path{stroke-dasharray:48; stroke-dashoffset:48; animation:cocx-draw .5s .55s ease forwards;}
@keyframes cocx-draw{to{stroke-dashoffset:0;}}
.cocx__success h3{font-family:var(--head); font-weight:900; font-size:1.4rem; margin:0 0 8px;}
.cocx__success p{margin:0; color:var(--soft); font-size:.96rem;}

/* GROTE MAIL */
.cocx__bigmail{display:flex; align-items:baseline; justify-content:space-between; gap:18px; text-decoration:none;
  border-top:1px solid var(--line); margin-top:clamp(10px,2vw,20px); padding:clamp(28px,4vw,44px) 0 clamp(48px,6vw,72px);}
.cocx__bigmail span{position:relative; font-family:var(--head); font-weight:900; letter-spacing:-.02em; color:var(--espresso);
  font-size:clamp(1.7rem,5.6vw,4rem); line-height:1.05;}
.cocx__bigmail span::after{content:""; position:absolute; left:0; bottom:-6px; height:4px; width:100%; border-radius:4px;
  background:linear-gradient(90deg,#DBB46A,#B07F33); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.22,1,.36,1);}
.cocx__bigmail:hover span::after{transform:scaleX(1);}
.cocx__bigmail em{display:inline-flex; color:var(--gold-deep); transition:transform .35s;}
.cocx__bigmail em svg{width:clamp(28px,4vw,44px); height:clamp(28px,4vw,44px);}
.cocx__bigmail:hover em{transform:translate(6px,-6px);}

@media(max-width:860px){
  .cocx__grid{grid-template-columns:1fr;}
  .cocx__panel{grid-template-columns:1fr; gap:24px;}
  .cocx__rows{grid-template-columns:1fr;}
  .cocx__rows li:last-child{grid-column:auto;}
  .cocx__row{flex-direction:column;}
  .cocx__foot{flex-direction:column; align-items:stretch;}
  .cocx__btn{justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  .cocx [data-rv]{opacity:1; transform:none; transition:none;}
  .cocx__title .w i{transform:none; transition:none;}
  .cocx__mtrack{animation:none; flex-wrap:wrap; width:auto;}
  .cocx__marquee{mask-image:none; -webkit-mask-image:none;}
  .cocx__pulse::after{animation:none; display:none;}
  .cocx__glow{display:none;}
  .cocx__check circle,.cocx__check path{animation:none; stroke-dashoffset:0;}
}