/* CO Koffie — "Ervaar CO Koffie" (editorial, licht). Namespace .co-xp. */
.co-xp{
  --brown:#693F19; --brown-dark:#4B2D15; --cream:#D6C6BF; --gold:#C79B4E; --gold-deep:#A9772F;
  --gold-grad:linear-gradient(135deg,#E3C88D 0%,#C79B4E 55%,#A9772F 100%);
  --brown-grad:linear-gradient(135deg,#693F19 0%,#4B2D15 100%);
  --ink:#1c130b; --radius:16px;
  --head:'Montserrat',ui-sans-serif,system-ui,sans-serif;
  --body:'Montserrat',ui-sans-serif,system-ui,sans-serif;
  max-width:1350px; margin:0 auto; font-family:var(--body); box-sizing:border-box;
}
.co-xp *,.co-xp *::before,.co-xp *::after{box-sizing:border-box;}

.co-xp__panel{position:relative; padding:0; background:transparent; border:0;}
.co-xp__panel>*{position:relative; z-index:1;}

.co-xp__kicker{display:inline-block; font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  margin:0 0 16px; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.co-xp__title{font-family:var(--head); font-size:clamp(30px,5vw,52px); font-weight:800; letter-spacing:.5px;
  line-height:1.02; margin:0; color:var(--brown-dark);}
.co-xp__tagline{font-family:var(--body); font-weight:400; font-size:clamp(15px,1.6vw,18px); line-height:1.6;
  color:#6b554a; max-width:540px; margin:16px 0 0;}

.co-xp__grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:clamp(30px,4vw,48px);}

.co-xp__card{position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid rgba(105,63,25,.08); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 14px 34px rgba(75,45,21,.08); opacity:0; transform:translateY(26px);
  animation:coxpUp .7s cubic-bezier(.22,.61,.36,1) forwards;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;}
.co-xp__card:nth-child(1){animation-delay:.08s;}
.co-xp__card:nth-child(2){animation-delay:.20s;}
.co-xp__card:nth-child(3){animation-delay:.32s;}
.co-xp__card:nth-child(4){animation-delay:.44s;}
.co-xp__card:hover{transform:translateY(-6px); border-color:rgba(199,155,78,.55); box-shadow:0 28px 60px rgba(75,45,21,.18);}
@keyframes coxpUp{to{opacity:1; transform:translateY(0);}}

.co-xp__media{position:relative; aspect-ratio:16/8; overflow:hidden; background:var(--ink);}
.co-xp__media img{width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.co-xp__card:hover .co-xp__media img{transform:scale(1.08);}
.co-xp__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,13,7,.70) 0%, rgba(20,13,7,.05) 45%, rgba(20,13,7,.18) 100%);}
.co-xp__index{position:absolute; top:14px; right:18px; z-index:2; font-family:var(--head);
  font-size:clamp(40px,6vw,64px); font-weight:800; line-height:1; color:transparent;
  -webkit-text-stroke:1.4px rgba(243,224,176,.75); letter-spacing:1px;}
.co-xp__badge{position:absolute; left:18px; bottom:16px; z-index:2; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6);}
.co-xp__badge-city{font-family:var(--head); font-size:19px; font-weight:700; line-height:1.2;}
.co-xp__badge-addr{font-size:13px; opacity:.92; display:flex; align-items:center; gap:5px;}
.co-xp__badge-addr svg{width:13px; height:13px; flex:0 0 13px;}

.co-xp__body{padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; flex:1;}
.co-xp__label{font-size:11px; letter-spacing:2.5px; font-weight:700; text-transform:uppercase; color:var(--gold-deep); margin:0 0 10px;}
.co-xp__cardtitle{font-family:var(--head); font-size:clamp(21px,2.6vw,28px); font-weight:700; line-height:1.15; margin:0 0 12px; color:var(--brown-dark); transition:color .25s ease;}
.co-xp__text{font-size:15px; line-height:1.65; color:#6b554a; margin:0 0 22px;}

.co-xp__list{list-style:none; margin:0 0 26px; padding:0;}
.co-xp__list li{display:flex; align-items:center; gap:12px; font-size:14.5px; color:#2c2018; padding:7px 0; border-bottom:1px solid rgba(105,63,25,.08);}
.co-xp__list li:last-child{border-bottom:0;}
.co-xp__check{flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:var(--gold-grad); display:flex; align-items:center; justify-content:center;}
.co-xp__check svg{width:12px; height:12px; stroke:#fff;}

.co-xp__btn{margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  font-family:var(--body); font-size:15px; font-weight:700; padding:15px 22px; border-radius:10px; text-decoration:none;
  color:#fff; background:var(--brown-grad); box-shadow:0 10px 26px rgba(75,45,21,.22);
  transition:transform .25s ease, box-shadow .25s ease;}
.co-xp__btn svg{width:16px; height:16px; transition:transform .25s ease;}
.co-xp__btn:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(75,45,21,.32);}
.co-xp__btn:hover .co-arrow{transform:translateX(4px);}

@media(prefers-reduced-motion:reduce){
  .co-xp__card{animation:none; opacity:1; transform:none;}
  .co-xp__media img,.co-xp__btn,.co-xp__btn svg{transition:none;}
}
@media(max-width:768px){ .co-xp__grid{grid-template-columns:1fr; gap:22px;} }