/* Animoves v6 — main.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ── Tokens ── */
:root {
  --bg:       hsl(40,33%,97%);
  --fg:       hsl(30,15%,20%);
  --card:     hsl(40,25%,95%);
  --primary:  hsl(133,15%,35%);   /* diepe bosgroen */
  --prim-fg:  hsl(40,33%,97%);
  --sec:      hsl(25,35%,60%);    /* terracotta */
  --sec-fg:   #fff;
  --muted:    hsl(35,20%,90%);
  --muted-fg: hsl(30,10%,45%);
  --border:   hsl(35,20%,85%);
  --font:     'DM Sans', system-ui, sans-serif;
  --r:        1rem;               /* border-radius */
  --max:      1180px;
  --ease:     0.3s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--font); background: var(--bg); color: var(--fg);
        line-height: 1.8; letter-spacing: .015em; overflow-x: hidden; }
img   { max-width: 100%; display: block; }
a     { color: inherit; text-decoration: none; }
p     { max-width: 65ch; }
ul    { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Typography ── */
h1,h2,h3,h4 { font-family: var(--font); font-weight: 700; line-height: 1.25;
               letter-spacing: -.02em; color: var(--primary); }
h1 { font-size: clamp(2rem,   5vw,  3.75rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2vw,   1.4rem); }

/* ── Layout ── */
.container  { max-width: var(--max); margin: 0 auto;
              padding: 0 clamp(1rem,4vw,2rem); }
.section    { padding: clamp(4rem,8vw,6rem) 0; }
.section-muted { background: var(--muted);
                 border-top: 1px solid var(--border);
                 border-bottom: 1px solid var(--border); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: .5rem;
       padding: 0 1.75rem; height: 3.25rem; border-radius: 9999px;
       font-size: .9375rem; font-weight: 500; transition: all var(--ease);
       white-space: nowrap; border: 1.5px solid transparent; }
.btn-primary { background: var(--primary); color: var(--prim-fg); border-color: var(--primary); }
.btn-primary:hover { background: hsl(133,15%,28%); border-color: hsl(133,15%,28%);
                     transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.btn-secondary { background: var(--sec); color: var(--sec-fg); border-color: var(--sec); }
.btn-secondary:hover { background: hsl(25,35%,52%); border-color: hsl(25,35%,52%);
                       transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { background: var(--muted); }
.btn-outline-primary { background: transparent; color: var(--primary);
                       border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color: var(--prim-fg); }

/* ── NAV ── */
.site-nav { position: sticky; top: 0; z-index: 100;
            background: rgba(252,250,246,.93); backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between;
             height: 4.5rem; gap: .75rem; }
.nav-logo   { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.nav-logo img { width: 40px; height: 40px; object-fit: contain; }
.nav-sitename { font-size: 1rem; font-weight: 700; color: var(--primary);
                letter-spacing: -.01em; }
.nav-links { display: flex; align-items: center; gap: 1.25rem; flex-wrap: nowrap; }
.nav-links a { font-size: .8125rem; font-weight: 500; color: var(--muted-fg);
               transition: color var(--ease); position: relative; white-space: nowrap; }
.nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
                      height: 2px; background: var(--primary); border-radius: 2px;
                      transform: scaleX(0); transition: transform var(--ease); }
.nav-links a:hover,
.nav-links a.active { color: var(--primary); }
.nav-links a.active::after,
.nav-links a:hover::after { transform: scaleX(1); }
.nav-wa-btn { flex-shrink: 0; }
.nav-wa-btn span { display: none; }
@media (min-width: 1100px) { .nav-wa-btn span { display: inline; } }
.nav-toggle { display: none; padding: .4rem; color: var(--primary); }

/* Mobile menu */
.mobile-menu { position: fixed; inset: 0; background: var(--bg); z-index: 200;
               display: flex; flex-direction: column; padding: 5rem 2rem 2rem;
               gap: 1.5rem; transform: translateX(100%); transition: transform .3s ease; }
.mobile-menu:not([hidden]) { transform: translateX(0); }
.mobile-menu nav { display: flex; flex-direction: column; gap: 1.25rem; }
.mobile-menu a { font-size: 1.2rem; font-weight: 500; color: var(--fg);
                 transition: color var(--ease); }
.mobile-menu a:hover { color: var(--primary); }
.mobile-close { position: absolute; top: 1.25rem; right: 1.25rem;
                color: var(--primary); padding: .5rem; }

/* ── HERO ── */
.hero { position: relative; min-height: 90dvh; display: flex;
        align-items: center; justify-content: center;
        overflow: hidden; background: var(--muted); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover;
               opacity: .4; mix-blend-mode: multiply; }
.hero-overlay { position: absolute; inset: 0;
                background: linear-gradient(to bottom,
                  rgba(252,250,246,.4) 0%,
                  rgba(252,250,246,.15) 50%,
                  var(--bg) 100%); }
.hero-content { position: relative; z-index: 1; text-align: center;
                max-width: 820px; padding: clamp(5rem,10vw,8rem) 1rem; }
.hero-badge { display: inline-block; padding: .25rem .875rem; border-radius: 9999px;
              background: hsl(25,35%,60%,.12); color: var(--sec);
              font-weight: 500; font-size: .875rem; letter-spacing: .05em;
              margin-bottom: 1.5rem; }
.hero h1 { margin-bottom: 1.5rem; }
.hero-desc { font-size: clamp(1rem,2vw,1.2rem); color: hsl(30,15%,35%);
             line-height: 1.8; margin: 0 auto 2.5rem; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 1rem;
             justify-content: center; align-items: center; }

/* ── PAGE HERO ── */
.page-hero { padding: clamp(4rem,8vw,6rem) 0 clamp(2.5rem,4vw,3.5rem);
             background: var(--muted); border-bottom: 1px solid var(--border);
             text-align: center; }
.page-hero h1 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); white-space: nowrap; }
.page-hero p  { font-size: 1.1rem; color: var(--sec); font-weight: 500;
                margin: .6rem auto 0; }

/* ── SECTION HELPERS ── */
.section-intro { text-align: center; max-width: 640px;
                 margin: 0 auto clamp(2.5rem,5vw,4rem); }
.section-intro h2 { margin-bottom: 1rem; }
.section-intro p  { font-size: 1.0625rem; line-height: 1.85; }
.section-cta { text-align: center; max-width: 560px; margin: 0 auto;
               display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.section-cta h2 { margin-bottom: 0; }
.section-cta p  { font-size: 1.0625rem; }

/* ── CARDS ── */
.card { background: var(--card); border: 1px solid var(--border);
        border-radius: calc(var(--r)*1.5); padding: 2rem 2.25rem;
        box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.card-icon { margin-bottom: 1.25rem; color: var(--sec); }
.two-cards  { display: grid; grid-template-columns: 1fr 1fr;
              gap: 1.5rem; margin-top: 3rem; }
.four-cards { display: grid; grid-template-columns: 1fr 1fr;
              gap: 1.25rem; }

/* ── VIDEO ── */
.video-wrap-outer { max-width: 860px; margin: 0 auto; }
.vimeo-box  { position: relative; width: 100%; aspect-ratio: 16/9;
              border-radius: calc(var(--r)*1.5); overflow: hidden;
              background: var(--card); border: 1px solid var(--border);
              box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.vimeo-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vimeo-empty { position: absolute; inset: 0; display: flex; flex-direction: column;
               align-items: center; justify-content: center; gap: 1rem;
               color: var(--muted-fg); text-align: center; padding: 2rem; }
.vimeo-empty svg { opacity: .35; }
.vimeo-empty p { font-size: .9rem; }

/* ── REVIEWS ── */
.reviews-grid { display: grid; gap: 1.5rem;
                grid-template-columns: repeat(auto-fill, minmax(min(100%,300px),1fr));
                margin-top: 3rem; }
.reviews-count-1 { grid-template-columns: minmax(0,560px); justify-content: center; }
.reviews-count-2 { grid-template-columns: repeat(2,1fr); }
.review-card { background: var(--card); border: 1px solid var(--border);
               border-radius: calc(var(--r)*1.5); padding: 2rem;
               display: flex; flex-direction: column; position: relative; }
.review-quote { position: absolute; top: 1.25rem; right: 1.25rem;
                color: hsl(25,35%,60%,.12); }
.review-stars { color: hsl(45,80%,55%); font-size: 1rem;
                letter-spacing: .1em; margin-bottom: 1.25rem; }
.review-text  { font-style: italic; color: hsl(30,15%,35%); line-height: 1.8;
                margin-bottom: 1.5rem; flex: 1; }
.review-text .review-read-more { display: inline-block; margin-top: .5rem; font-size: .85rem;
                    font-style: normal; font-weight: 600; color: hsl(25,35%,60%);
                    background: none; border: none; padding: 0; cursor: pointer;
                    text-decoration: underline; text-underline-offset: 3px; }
.review-footer{ border-top: 1px solid var(--border); padding-top: 1rem; margin-top: auto; }
.review-name  { font-weight: 600; color: var(--primary); margin-bottom: .15rem; }
.review-date  { font-size: .875rem; color: var(--muted-fg); }
.reviews-cta  { text-align: center; margin-top: 2.5rem; }
.reviews-google-link { display: inline-flex; align-items: center; gap: .6rem;
                       font-size: .875rem; font-weight: 500; color: var(--fg);
                       border: 1.5px solid var(--border); padding: .65rem 1.5rem;
                       border-radius: 9999px; transition: all var(--ease); }
.reviews-google-link:hover { border-color: var(--sec); color: var(--sec); }

/* ── ABOUT ── */
.about-grid  { display: grid; grid-template-columns: 5fr 7fr;
               gap: clamp(2rem,5vw,5rem); align-items: start; }
.about-photo { border-radius: calc(var(--r)*1.5); overflow: hidden;
               border: 1px solid var(--border);
               box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-quote { background: var(--card); border: 1px solid var(--border);
               border-radius: var(--r); padding: 1.75rem 2rem; margin: 2rem 0; }
.about-quote p { font-style: italic; font-weight: 500; font-size: 1.1rem;
                 color: var(--primary); line-height: 1.65; margin: 0; max-width: none; }
.expertise-tags { display: flex; flex-wrap: wrap; gap: .6rem;
                  justify-content: center; margin-top: 2.5rem; }
.tag { padding: .4rem 1.1rem; background: var(--bg); border: 1px solid var(--border);
       border-radius: 9999px; font-size: .875rem; color: hsl(30,15%,35%); }

/* ── PROSE ── */
.prose p { color: hsl(30,15%,35%); line-height: 1.9; margin-bottom: 1.25em; }
.prose p:last-child { margin-bottom: 0; }

/* ── DISCLAIMER ── */
.disclaimer { background: var(--bg); border: 1px solid var(--border);
              border-radius: calc(var(--r)*1.5); padding: 2.25rem;
              display: flex; gap: 1.5rem; align-items: flex-start;
              box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.disclaimer-icon { flex-shrink: 0; background: hsl(25,35%,60%,.1);
                   padding: .75rem; border-radius: var(--r); color: var(--sec); }
.disclaimer h3 { margin-bottom: .5rem; font-size: 1rem; }
.disclaimer p  { font-size: .9375rem; max-width: none; }

/* ── GALLERY ── */
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }
.gallery-item { border-radius: var(--r); overflow: hidden; aspect-ratio: 1;
                cursor: pointer; position: relative; background: var(--muted); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block;
                    transition: transform .45s ease; }
.gallery-item:hover img  { transform: scale(1.05); }
.gallery-hover { position: absolute; inset: 0;
                 background: rgba(0,0,0,0); transition: background var(--ease);
                 display: flex; align-items: center; justify-content: center; }
.gallery-hover span { color: #fff; font-size: 2rem; opacity: 0;
                      transition: opacity var(--ease); }
.gallery-item:hover .gallery-hover { background: rgba(0,0,0,.3); }
.gallery-item:hover .gallery-hover span { opacity: 1; }
.gallery-empty { padding: 4rem 2rem; background: var(--muted);
                 border: 1.5px dashed var(--border); border-radius: var(--r);
                 display: flex; align-items: center; justify-content: center;
                 gap: 2rem; flex-wrap: wrap; color: var(--muted-fg); }
.gallery-empty svg { opacity: .3; flex-shrink: 0; }
.gallery-empty ol { font-size: .9rem; color: hsl(30,15%,35%); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 500;
            display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lb-close { position: absolute; top: 1.25rem; right: 1.5rem; color: #fff;
            font-size: 2.25rem; opacity: .6; transition: opacity var(--ease);
            line-height: 1; }
.lb-close:hover { opacity: 1; }
#lb-img { max-width: 90vw; max-height: 90vh; border-radius: var(--r); }

/* ── CONTACT ── */
.contact-center { max-width: 520px; margin: 0 auto; text-align: center;
                  display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.btn-wa-big { display: inline-flex; align-items: center; gap: .75rem;
              background: #25D366; color: #fff; font-size: 1.05rem; font-weight: 600;
              padding: 1rem 2.25rem; border-radius: 9999px; transition: all var(--ease);
              box-shadow: 0 4px 16px rgba(37,211,102,.28); }
.btn-wa-big:hover { background: #1db954; transform: translateY(-2px);
                    box-shadow: 0 8px 24px rgba(37,211,102,.35); }
.contact-list { display: flex; flex-direction: column; gap: .75rem;
                align-items: center; }
.contact-row { display: flex; align-items: center; gap: .75rem;
               font-size: .9375rem; color: hsl(30,15%,35%); transition: color var(--ease); }
.contact-row:hover { color: var(--primary); }
.contact-disclaimer { font-size: .82rem; color: var(--muted-fg); line-height: 1.6;
                      max-width: 42ch; text-align: center; }

/* ── FOOTER ── */
.site-footer  { background: var(--muted); border-top: 1px solid var(--border);
                padding: clamp(3rem,6vw,4.5rem) 0 0; }
.footer-grid  { display: grid; grid-template-columns: 2fr 1fr 1fr;
                gap: 2.5rem; padding-bottom: 3rem; }
.footer-brand-name { font-size: 1.4rem; font-weight: 700; color: var(--primary);
                     margin-bottom: .65rem; }
.footer-brand p { font-size: .875rem; color: var(--muted-fg); line-height: 1.7;
                  max-width: 30ch; }
.footer-heart { display: inline-flex; align-items: center; gap: .4rem;
                font-size: .8rem; color: var(--sec); margin-top: .9rem; }
.footer-col-title { font-size: .875rem; font-weight: 600; color: var(--primary);
                    margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: .55rem; }
.footer-links a { font-size: .875rem; color: var(--muted-fg); transition: color var(--ease); }
.footer-links a:hover { color: var(--primary); }
.footer-contact-item { display: flex; align-items: center; gap: .65rem;
                       font-size: .875rem; color: var(--muted-fg);
                       transition: color var(--ease); margin-bottom: .6rem; }
.footer-contact-item:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border); padding: 1.5rem 0;
                 display: flex; align-items: center; justify-content: space-between;
                 flex-wrap: wrap; gap: .75rem; font-size: .8rem; color: var(--muted-fg); }

/* ── ANIMATIONS ── */
.fade-up { opacity: 0; transform: translateY(22px);
           transition: opacity .65s ease, transform .65s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up-d1 { transition-delay: .1s; }
.fade-up-d2 { transition-delay: .2s; }
.fade-up-d3 { transition-delay: .3s; }

/* Hero animates immediately on load */
.hero .fade-up { animation: heroFadeUp .8s ease both; }
.hero .fade-up:nth-child(1) { animation-delay: .05s; }
.hero .fade-up:nth-child(2) { animation-delay: .15s; }
.hero .fade-up:nth-child(3) { animation-delay: .25s; }
.hero .fade-up:nth-child(4) { animation-delay: .35s; }
.hero .fade-up:nth-child(5) { animation-delay: .45s; }
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Hero children individually */
.hero-content > * { animation: heroFadeUp .8s ease both; }
.hero-content > *:nth-child(1) { animation-delay: .05s; }
.hero-content > *:nth-child(2) { animation-delay: .2s; }
.hero-content > *:nth-child(3) { animation-delay: .35s; }
.hero-content > *:nth-child(4) { animation-delay: .5s; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .four-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .about-grid  { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .two-cards   { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .reviews-count-2 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-links, .nav-wa-btn { display: none; }
  .nav-toggle { display: block; }
  .footer-grid  { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn { justify-content: center; }
  .four-cards { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .disclaimer { flex-direction: column; }
  .gallery-empty { flex-direction: column; text-align: center; }
}