/* Krul & Co: speels en organisch, bosgroen + mosterd + koraal, blobs en golven */
:root{
  --bg:#f6efe2;--fg:#22332a;--muted:#55665c;--surface:#ebdfc8;--surface-2:#fffbf3;--line:rgba(34,51,42,.16);
  --accent:#2f5d46;--accent-fg:#fff;--mustard:#e8a33d;--coral:#e2725b;--focus:#b04a35;
  --radius:26px;--radius-sm:18px;
  --font-head:"Fredoka","Nunito",system-ui,sans-serif;--font-body:"Nunito",system-ui,sans-serif;
  --shadow:0 6px 0 rgba(34,51,42,.9);
  --header-bg:#f6efe2;--footer-bg:#2f5d46;--footer-fg:#fffbf3;
}
h1,h2,h3{font-weight:600}
.logo{font-weight:600;font-size:1.5rem}
.logo span{color:var(--coral)}
.logo svg{color:var(--accent);animation:kcSpin 10s linear infinite}
@keyframes kcSpin{to{transform:rotate(360deg)}}
.site-header{border-bottom:2px dashed transparent}
.is-scrolled .site-header{border-bottom-color:var(--line);box-shadow:none}
.eyebrow{color:var(--coral);letter-spacing:.08em;text-transform:none;font-size:.95rem;font-family:var(--font-head);font-weight:600}
.eyebrow::before{content:"~ "}
.btn{border:2px solid var(--fg);box-shadow:0 4px 0 var(--fg);font-weight:700}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:0 7px 0 var(--fg)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--fg)}
.btn-ghost{background:var(--mustard);color:var(--fg)}
.btn-ghost:hover{background:var(--mustard);color:var(--fg)}
.nav .btn{box-shadow:0 3px 0 var(--fg)}

/* Hero */
.kc-hero{padding:clamp(2rem,6vw,4.5rem) 0 clamp(2.5rem,6vw,4rem)}
.kc-grid{display:grid;gap:1.5rem;align-items:center}
@media (min-width:900px){.kc-grid{grid-template-columns:1.1fr .9fr}}
.kc-hero h1{font-size:clamp(2.8rem,9vw,5.4rem);line-height:1}
.hl{position:relative;display:inline-block;color:var(--accent);z-index:0}
.hl::after{content:"";position:absolute;left:-4%;right:-4%;bottom:.08em;height:.32em;background:var(--mustard);border-radius:40px;z-index:-1;transform:scaleX(0);transform-origin:left;animation:kcMark .8s .9s var(--ease) forwards}
@keyframes kcMark{to{transform:scaleX(1)}}
.kc-art{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin:0 auto}
.kc-blob{position:absolute;inset:6%;background:linear-gradient(140deg,var(--coral),#f0a080 55%,var(--mustard));border-radius:42% 58% 63% 37%/45% 41% 59% 55%;animation:kcMorph 12s ease-in-out infinite alternate;box-shadow:inset -20px -20px 0 rgba(0,0,0,.06)}
@keyframes kcMorph{
  0%{border-radius:42% 58% 63% 37%/45% 41% 59% 55%;transform:rotate(0)}
  50%{border-radius:61% 39% 44% 56%/56% 61% 39% 44%;transform:rotate(8deg)}
  100%{border-radius:35% 65% 52% 48%/38% 49% 51% 62%;transform:rotate(-6deg)}}
.kc-curls{position:absolute;inset:0;width:100%;height:100%}
.kc-curls path{stroke:var(--fg);stroke-width:7;stroke-dasharray:600;stroke-dashoffset:600;animation:kcDraw 2.4s var(--ease) forwards}
.kc-curls .c2{stroke:#fffbf3;animation-delay:.4s}
.kc-curls .c3{stroke:var(--accent);stroke-width:5;animation-delay:.8s}
.kc-curls .c4{stroke:#fffbf3;stroke-width:5;animation-delay:1.1s}
@keyframes kcDraw{to{stroke-dashoffset:0}}
.sticker{position:absolute;padding:.45em 1em;border-radius:999px;border:2px solid var(--fg);font:600 clamp(.8rem,2.4vw,1rem) var(--font-head);background:var(--surface-2);box-shadow:0 3px 0 var(--fg);animation:kcBob 4s ease-in-out infinite alternate;white-space:nowrap}
.sticker.s1{top:4%;left:0;transform:rotate(-8deg);background:var(--mustard)}
.sticker.s2{top:44%;right:-2%;rotate:6deg;animation-delay:-1s}
.sticker.s3{bottom:6%;left:12%;rotate:-3deg;background:#cfe3d4;animation-delay:-2s}
@keyframes kcBob{from{translate:0 0}to{translate:0 -10px}}
.kc-band{background:var(--accent);color:#fffbf3;overflow:hidden;white-space:nowrap;transform:rotate(-1.5deg);margin:1rem -2vw 0;border-block:2px solid var(--fg)}
.kc-band-track{display:inline-flex;animation:kcTick 30s linear infinite}
.kc-band span{font:600 1.3rem/1 var(--font-head);padding:.8rem 0}
@keyframes kcTick{to{transform:translateX(-50%)}}

/* Secties met golfranden */
.sec-alt,.sec-book{background:var(--surface)}
.sec-alt::before,.sec-book::before{content:"";position:absolute;left:0;right:0;top:-23px;height:24px;background:radial-gradient(circle at 24px 24px,var(--surface) 23px,transparent 24px) 0 0/48px 24px repeat-x}
.sec-team + .sec-info{position:relative}
.svc{border:2px solid var(--fg);box-shadow:var(--shadow)}
.svc:nth-child(1){background:#fde7c4}.svc:nth-child(2){background:#f9d3c9}.svc:nth-child(3){background:#d9eadf}.svc:nth-child(4){background:#fffbf3}
.svc:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 10px 0 var(--fg)}
.svc:nth-child(even):hover{transform:translateY(-6px) rotate(1deg)}
.svc p{color:#3d4d44}
.svc .ico{color:var(--fg)}
.svc:hover .ico{animation:kcWiggle .6s ease}
@keyframes kcWiggle{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.prices-head{margin:clamp(3rem,7vw,5rem) 0 0}
.h-prices{font-size:clamp(1.9rem,4.5vw,2.8rem)}
.price-group{background:var(--surface-2);border:2px solid var(--fg);border-radius:var(--radius);padding:clamp(1rem,3vw,1.75rem);box-shadow:var(--shadow)}
.ptable caption{font-weight:600}
.ptable thead th{color:var(--coral)}
.ptable td{font-weight:700}

/* Team */
.member{border:2px solid var(--fg);box-shadow:var(--shadow)}
.member:nth-child(2){rotate:1deg}.member:nth-child(1){rotate:-1deg}
.member:hover{transform:translateY(-6px);box-shadow:0 10px 0 var(--fg)}
.avatar{width:104px;height:104px}
.avatar clipPath rect{rx:36px}
.member .role{color:var(--coral)}
.tags li{border:2px solid var(--fg);color:var(--fg);font-weight:700}

/* Info */
.hours th{font-family:var(--font-head);font-weight:500}
.hours tr.is-today th,.hours tr.is-today td{color:var(--coral)}
.map{border:2px solid var(--fg);box-shadow:var(--shadow);border-radius:var(--radius)}
.m-bg{fill:#f3e6cc}.m-blk rect{fill:#e6d4b1}.m-park{fill:#bcd6c3}.m-road path{stroke:#fffbf3;stroke-width:14;fill:none}
.m-txt{font:600 13px var(--font-head);fill:var(--fg)}.m-pin path{fill:var(--coral);stroke:var(--fg);stroke-width:2}.m-dot{fill:#fffbf3}
.m-pin{transform-origin:223px 142px;animation:kcPin 1.8s ease-in-out infinite}
@keyframes kcPin{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* Booking */
.bk{border:2px solid var(--fg);box-shadow:0 8px 0 var(--fg)}
.bk-progress li::before{height:8px;border:2px solid var(--fg);background:var(--surface-2)}
.bk-progress li.is-done::before,.bk-progress li[aria-current]::before{background:var(--mustard)}
.bk-opt{border:2px solid var(--fg)}
.bk-opt:has(input:checked){background:#fde7c4;border-color:var(--fg)}
.chip{border:2px solid var(--fg);border-radius:16px}
.chip:has(input:checked){background:var(--accent);color:#fff;border-color:var(--fg);box-shadow:0 3px 0 var(--fg)}
.field input,.field select,.field textarea{border:2px solid var(--fg)}
.bk-summary{background:#d9eadf;border:2px dashed var(--fg)}
.bk-done .tick{color:var(--coral)}

.contact-form{border:2px solid var(--fg);box-shadow:var(--shadow)}
.contact-list svg{color:var(--coral)}
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-23px;height:24px;background:radial-gradient(circle at 24px 24px,#2f5d46 23px,transparent 24px) 0 0/48px 24px repeat-x}
.site-footer .btn{background:var(--mustard);color:var(--fg)}