/* Haarwerk Zuid: warm minimal, terracotta en zand, bogen */
:root{
  --bg:#f7f1e8;--fg:#2b211c;--muted:#6b5a50;--surface:#efe5d6;--surface-2:#fffaf3;--line:rgba(43,33,28,.14);
  --accent:#a8481f;--accent-fg:#fff;--accent-2:#d9a066;--focus:#1f5f8b;
  --radius:22px;--radius-sm:14px;
  --font-head:"DM Serif Display",Georgia,serif;--font-body:"DM Sans",system-ui,sans-serif;
  --shadow:0 18px 40px -18px rgba(90,50,25,.35);
  --header-bg:rgba(247,241,232,.92);--footer-bg:#2b211c;--footer-fg:#f7f1e8;
}
.site-header{backdrop-filter:saturate(1.4) blur(10px)}
.logo{font-weight:400;font-size:1.4rem}
.logo em{color:var(--accent)}
.logo svg{color:var(--accent)}
h1,h2,h3{font-weight:400}
h1 em,h2 em{color:var(--accent)}

/* Hero */
.hz-hero{padding:clamp(2.5rem,7vw,5rem) 0 clamp(3rem,8vw,6rem)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:4rem}}
.hz-hero h1{font-size:clamp(2.8rem,9vw,5.6rem);line-height:1}
.hz-hero h1 em{font-style:italic}
.hero-art{position:relative;max-width:420px;width:100%;margin:0 auto;aspect-ratio:4/5}
.arch{position:absolute;inset:0;border-radius:999px 999px 26px 26px;overflow:hidden;background:linear-gradient(170deg,#e4b48a 0%,#c8774b 55%,#9c4320 100%);box-shadow:var(--shadow)}
.arch::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 0,rgba(255,255,255,.35),transparent 60%)}
.strands{position:absolute;inset:0;width:100%;height:100%}
.strands path{stroke:#fff6ea;stroke-width:2.2;stroke-opacity:.75;stroke-dasharray:700;stroke-dashoffset:700;animation:hzDraw 2.6s var(--ease) forwards,hzSway 7s ease-in-out infinite alternate;animation-delay:calc(var(--s) * 110ms + .4s),calc(var(--s) * 200ms + 3s);transform-origin:50% 0}
.strands path:nth-child(odd){stroke:#f4d3b0;stroke-width:3}
@keyframes hzDraw{to{stroke-dashoffset:0}}
@keyframes hzSway{from{transform:skewX(0)}to{transform:skewX(4deg)}}
.sun{position:absolute;width:28%;aspect-ratio:1;border-radius:50%;background:var(--accent-2);top:6%;right:-8%;mix-blend-mode:multiply;animation:hzFloat 8s ease-in-out infinite alternate}
.arch-sm{position:absolute;width:34%;aspect-ratio:3/4;left:-10%;bottom:-6%;border-radius:999px 999px 14px 14px;border:2px solid var(--accent);animation:hzFloat 9s ease-in-out infinite alternate-reverse}
@keyframes hzFloat{from{transform:translateY(0)}to{transform:translateY(-16px)}}

/* Diensten */
.svc{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:1.5rem 0 0}
.svc:hover{transform:none;box-shadow:none}
.svc .ico{width:46px;height:46px;padding:10px;border-radius:50%;background:var(--surface);transition:background .3s,color .3s,transform .4s var(--ease)}
.svc:hover .ico{background:var(--accent);color:#fff;transform:rotate(-12deg)}
.prices-head{margin:clamp(3rem,7vw,5rem) 0 0}
.h-prices{font-size:clamp(1.8rem,4vw,2.6rem)}
.price-group{background:var(--surface-2);border-radius:var(--radius);padding:clamp(1.1rem,3vw,1.75rem)}
.ptable caption{font-weight:400}

/* Team */
.sec-alt{background:var(--surface);border-radius:clamp(28px,6vw,64px) clamp(28px,6vw,64px) 0 0}
.member{text-align:center;background:var(--surface-2)}
.member .avatar{margin:0 auto 1rem;width:112px;height:112px}
.member .tags{justify-content:center}
.sec-team + .sec-info{background:var(--surface)}
.sec-info{border-radius:0 0 clamp(28px,6vw,64px) clamp(28px,6vw,64px)}

/* Kaart */
.m-bg{fill:#f2e7d8}.m-blk rect{fill:#e6d6c1}.m-park{fill:#d8dcbf}.m-road path{stroke:#fffaf3;stroke-width:14;fill:none}
.m-txt{font:600 11px var(--font-body);fill:#6b5a50}.m-pin path{fill:var(--accent)}.m-dot{fill:#fff}
.m-pin{animation:hzPin 2.4s ease-in-out infinite;transform-origin:223px 142px}
@keyframes hzPin{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.sec-book{background:linear-gradient(180deg,var(--bg),#f1e4d2)}
.bk{border:0}
.bk-progress li::before{height:3px}
.site-footer{border-radius:clamp(28px,6vw,64px) clamp(28px,6vw,64px) 0 0}
.site-footer .btn{background:var(--accent-2);border-color:var(--accent-2);color:#2b211c;margin-top:.5rem}
