/* CO Koffie — Hero met formulier (voor op werk). Namespace .cohf. */
.cohf{
  --page:#FDFAF4; --espresso:#693F19; --espresso-dark:#4B2D15; --espresso-darker:#321d0f;
  --cream:#D6C6BF; --cream-light:#F4ECE2; --gold:#C79B4E; --gold-deep:#A9772F;
  --display:'Gilmer','Gilroy','Montserrat',ui-sans-serif,system-ui,sans-serif;
  --body:'Montserrat',ui-sans-serif,system-ui,sans-serif;
  width:100%; padding:.75rem; background:var(--page); font-family:var(--body);
}
.cohf *{box-sizing:border-box;}
.cohf__section{position:relative; width:100%; max-width:1536px; margin:0 auto;
  min-height:calc(100vh - 1.5rem); border-radius:1.5rem; overflow:hidden;
  display:flex; flex-direction:column; background:var(--espresso-dark);}
.cohf__bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:62% center;}
.cohf__bg::before{content:""; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(40,24,13,.86) 0%, rgba(40,24,13,.6) 42%, rgba(40,24,13,.5) 100%);}
.cohf__bg::after{content:""; position:absolute; inset:0; background:rgba(50,29,15,.28); mix-blend-mode:multiply;}

.cohf__content{position:relative; z-index:10; flex:1; display:flex; flex-direction:column;}

/* Body / grid */
.cohf__body{flex:1; width:100%; display:flex; align-items:center; justify-content:center; padding:1.25rem 1.5rem 2.5rem;}
.cohf__grid{width:100%; max-width:1360px; display:grid; grid-template-columns:1fr; gap:2.25rem; align-items:center;}

.cohf__left{display:flex; flex-direction:column; align-items:flex-start; text-align:left; max-width:620px;}
.cohf__badge{display:flex; align-items:center; gap:.5rem; padding:.45rem .95rem; border-radius:9999px;
  background:rgba(255,255,255,.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22); margin-bottom:1rem; animation:cohf-fadeUp .6s ease-out both;}
.cohf__badge span{font-size:13px; font-weight:500; color:var(--cream-light);}
.cohf__h1{font-family:var(--display); font-weight:700; font-size:2.3rem; line-height:1.04;
  letter-spacing:-.02em; color:var(--cream-light); margin:0; text-shadow:0 2px 22px rgba(30,16,8,.4);
  animation:cohf-scaleIn .7s ease both; animation-delay:.1s;}
.cohf__p{font-size:.95rem; line-height:1.65; color:var(--cream-light); opacity:.9; max-width:34rem;
  margin:1rem 0 0; text-shadow:0 1px 14px rgba(30,16,8,.3); animation:cohf-fadeIn .7s ease both; animation-delay:.25s;}

.cohf__usps{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.4rem; animation:cohf-fadeUp .7s ease both; animation-delay:.35s;}
.cohf__usp{display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.1);
  border:1px solid rgba(244,236,226,.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:9999px; padding:.5rem .9rem; font-size:.83rem; font-weight:500; color:var(--cream-light);}
.cohf__dot{width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0;}

.cohf__cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem; animation:cohf-fadeUp .8s ease both; animation-delay:.45s;}
.cohf__phone{display:flex; align-items:center; gap:.7rem; background:rgba(255,255,255,.12);
  border:1px solid rgba(244,236,226,.25); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--cream-light); border-radius:9999px; padding:.5rem 1.2rem .5rem .5rem; cursor:pointer; text-decoration:none;
  font-family:var(--body); font-weight:600; font-size:.95rem; transition:background .2s, transform .15s;}
.cohf__phone:hover{background:rgba(255,255,255,.2); transform:translateY(-1px);}
.cohf__phone .ic{width:2rem; height:2rem; border-radius:9999px; background:var(--cream-light);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cohf__pakket{display:flex; align-items:center; gap:.7rem; background:var(--gold); color:var(--espresso-darker);
  border:none; border-radius:9999px; padding:.5rem .5rem .5rem 1.3rem; cursor:pointer; text-decoration:none;
  font-family:var(--body); font-weight:600; font-size:.95rem; transition:background .2s, transform .15s;}
.cohf__pakket:hover{background:var(--gold-deep); transform:translateY(-1px);}
.cohf__pakket .ic{width:2rem; height:2rem; border-radius:9999px; background:rgba(50,29,15,.16);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;}

/* Formulier-slot */
.cohf__slot{width:100%; max-width:470px; justify-self:end; animation:cohf-slideInRight .8s ease both; animation-delay:.2s;}
.cohf__slot .cok-form{max-width:100%;}

/* Hap rechtsonder (lees meer) - alleen brede tweekoloms-layout */
.cohf__corner{display:none; position:absolute; bottom:0; right:0; padding:1.25rem .75rem .75rem 2rem;
  background:var(--page); border-top-left-radius:1.5rem; align-items:center; gap:.75rem; cursor:pointer; z-index:11;
  text-decoration:none; animation:cohf-slideUp .8s ease both; animation-delay:.5s;}
.cohf__mask{position:absolute; width:1.5rem; height:1.5rem; pointer-events:none; color:var(--page);}
.cohf__mask svg{display:block;}
.cohf__mask--top{top:-1.5rem; right:0;}
.cohf__mask--left{bottom:0; left:-1.5rem;}
.cohf__circle{background:rgba(105,63,25,.06); width:2.5rem; height:2.5rem; border-radius:9999px;
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(105,63,25,.14); flex-shrink:0;}
.cohf__info .title{font-family:var(--display); font-size:16px; font-weight:700; color:rgba(75,45,21,.95); transition:color .2s;}
.cohf__corner:hover .cohf__info .title{color:rgba(105,63,25,.7);}
.cohf__circle .arrow-down{animation:cohf-bob 1.8s ease-in-out infinite;}

@keyframes cohf-bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(3px);}}
@keyframes cohf-slideUp{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);}}
@keyframes cohf-fadeUp{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}
@keyframes cohf-scaleIn{from{opacity:0; transform:scale(.97);} to{opacity:1; transform:scale(1);}}
@keyframes cohf-fadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes cohf-slideInRight{from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:translateX(0);}}
@media(prefers-reduced-motion:reduce){
  .cohf__badge,.cohf__h1,.cohf__p,.cohf__usps,.cohf__cta,.cohf__slot,.cohf__corner,.cohf__circle .arrow-down{animation:none;}
}

@media(min-width:560px){ .cohf__h1{font-size:2.8rem;} }
@media(min-width:768px){
  .cohf{padding:1.25rem;}
  .cohf__section{border-radius:3rem; min-height:calc(100vh - 2.5rem);}
  .cohf__h1{font-size:3.3rem;}
  .cohf__p{font-size:1rem;}
}
@media(min-width:992px){
  .cohf__grid{grid-template-columns:1.05fr 470px; gap:3rem;}
  .cohf__h1{font-size:3.6rem;}
  .cohf__corner{display:flex; padding:2rem 1.5rem 1.5rem 3.5rem; border-top-left-radius:3.5rem; gap:1.5rem;}
  .cohf__mask{width:3.5rem; height:3.5rem;} .cohf__mask--top{top:-3.5rem;} .cohf__mask--left{left:-3.5rem;}
  .cohf__circle{width:3.5rem; height:3.5rem;} .cohf__info .title{font-size:20px;}
}