:root{
	--c-slate: #4a5a63;
	--c-slate-dark: #333f45;
	--c-ochre: #c47a47;
	--c-ochre-dark: #a3612f;
	--c-ivory: #f7f4ee;
	--c-ivory-2: #eef2ec;
	--c-ink: #2b2b28;
	--c-stone: #8a8a7f;

	--font-display: 'Fraunces', serif;
	--font-body: 'Work Sans', sans-serif;

	--radius: 6px;
	--max-width: 1200px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
	margin: 0; background: var(--c-ivory); color: var(--c-ink);
	font-family: var(--font-body); line-height: 1.65; overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: var(--c-ochre-dark); text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; color: var(--c-slate-dark); }
h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; }
h2{ font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
p{ color: #4d4d47; }
.eyebrow{ text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--c-ochre-dark); font-weight: 600; }

.btn{
	display: inline-block; padding: 0.85em 1.8em; font-family: var(--font-body); font-weight: 600;
	border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
}
.btn--primary{ background: var(--c-ochre); color: #fff; }
.btn--primary:hover{ background: var(--c-ochre-dark); transform: translateY(-2px); }
.btn--secondary{ background: transparent; border-color: var(--c-slate); color: var(--c-slate-dark); }
.btn--secondary:hover{ border-color: var(--c-ochre); color: var(--c-ochre-dark); }
.btn--small{ padding: 0.5em 1.2em; font-size: 0.85rem; }

section{ padding: 5rem 1.5rem; max-width: var(--max-width); margin: 0 auto; }
.content-block--narrow{ max-width: 760px; }

/* Header */
.site-header{ position: sticky; top: 0; z-index: 100; background: rgba(247,244,238,0.94); backdrop-filter: blur(6px); border-bottom: 1px solid #e3ddd0; }
.site-header__inner{ max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; }
.site-header__logo{ display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--c-slate-dark); }
.site-header__mark{ width: 30px; height: 30px; border-radius: 50%; }
.site-header__menu{ display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.site-header__menu a{ color: var(--c-slate-dark); font-weight: 500; }
.site-header__menu a:hover{ color: var(--c-ochre-dark); }
.site-header__nav{ display: flex; align-items: center; gap: 2rem; }
.site-header__toggle{ display: none; background: none; border: none; cursor: pointer; }
.site-header__toggle span{ display: block; width: 24px; height: 2px; background: var(--c-slate-dark); margin: 5px 0; }
@media (max-width: 860px){
	.site-header__toggle{ display: block; }
	.site-header__nav{ position: fixed; top: 0; right: -100%; height: 100vh; width: 280px; background: var(--c-ivory); flex-direction: column; align-items: flex-start; padding: 5rem 2rem; transition: right 0.25s ease; z-index: 99; box-shadow: -4px 0 20px rgba(0,0,0,0.08); }
	.site-header__nav.is-open{ right: 0; }
	.site-header__menu{ flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}

/* Cookie bar */
.cookie-bar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--c-slate-dark); color: #fff; padding: 1rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.cookie-bar p{ color: #e7e3d8; margin: 0; font-size: 0.9rem; max-width: 700px; }
.cookie-bar a{ color: #fff; text-decoration: underline; }

/* Hero */
.hero--home{ min-height: 80vh; display: flex; align-items: center; background-size: cover; background-position: center; position: relative; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); padding-left: max(1.5rem, calc(50vw - 600px + 1.5rem)); padding-right: 1.5rem; box-sizing: border-box; }
.hero--home .hero__overlay{ position: absolute; inset: 0; background: linear-gradient(100deg, rgba(247,244,238,0.96) 0%, rgba(247,244,238,0.75) 45%, rgba(247,244,238,0.25) 100%); }
.hero--home .hero__content{ position: relative; z-index: 1; }
.hero__content{ max-width: 680px; }
.hero__content h1{ margin-top: 0.3em; }
.hero__actions{ display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.page-hero{ text-align: center; padding-top: 6rem; }

/* Intro split */
.intro-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.intro-split__visual{ background: var(--c-ivory-2); border-radius: var(--radius); padding: 2rem; display: flex; align-items: center; justify-content: center; }
.intro-split__visual img{ width: 140px; }
.intro-split__visual--photo{ padding: 0; overflow: hidden; }
.intro-split__visual--photo img{ width: 100%; height: 100%; object-fit: cover; }
.content-photo{ margin: 2.5rem 0; border-radius: var(--radius); overflow: hidden; }
.content-photo img{ width: 100%; max-height: 420px; object-fit: cover; }
.content-photo--wide img{ max-height: 360px; }
@media (max-width: 760px){ .intro-split{ grid-template-columns: 1fr; } }

/* Voor & Na widget */
.voor-na{ text-align: center; }
.voor-na__frame{ position: relative; max-width: 600px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); user-select: none; }
.voor-na__after{ width: 100%; display: block; }
.voor-na__before-wrap{ position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; border-right: 2px solid #fff; }
.voor-na__before{ width: 600px; max-width: none; height: 100%; object-fit: cover; }
.voor-na__handle{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; cursor: ew-resize; font-size: 1.1rem; color: var(--c-slate-dark); }
.voor-na__caption{ margin-top: 1rem; color: var(--c-stone); font-style: italic; }

/* Services grid */
.services-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.services-grid__item{ background: #fff; border-radius: var(--radius); padding: 1.8rem; border: 1px solid #eee6d8; text-align: center; }
.services-grid__item img{ width: 56px; margin: 0 auto 1rem; }
.services-grid__item img.services-grid__photo{ width: 100%; height: 130px; object-fit: cover; border-radius: var(--radius); }

.page-hero--photo{ position: relative; min-height: 40vh; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.page-hero--photo .hero__overlay{ position: absolute; inset: 0; background: rgba(43,43,40,0.55); }
.page-hero--photo .page-hero__content{ position: relative; z-index: 1; }
.page-hero--photo h1, .page-hero--photo p{ color: #fff; }

/* Service detail rows (Diensten page) */
.service-detail{ display: grid; grid-template-columns: 90px 1fr; gap: 1.5rem; align-items: start; margin-bottom: 2.5rem; }
.service-detail img{ width: 70px; }
.service-detail img.service-detail__photo{ width: 90px; height: 90px; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 600px){ .service-detail{ grid-template-columns: 1fr; } .service-detail img{ width: 56px; } .service-detail img.service-detail__photo{ width: 100%; height: 160px; } }

.steps-list{ padding-left: 1.2rem; }
.steps-list li{ margin-bottom: 0.8rem; color: #4d4d47; }

.section-divider{ width: 100%; margin: 1rem 0; }

/* Seasons */
.seasons__intro{ max-width: 640px; }
.seasons__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.seasons__item{ background: var(--c-ivory-2); border-radius: var(--radius); padding: 1.5rem; border-top: 3px solid var(--c-ochre); }
.seasons__item span{ font-family: var(--font-display); font-weight: 700; color: var(--c-slate-dark); display: block; margin-bottom: 0.4rem; }

/* Projects grid */
.projects-grid, .projects-grid-full{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 2rem auto; }
.project-card{ background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid #eee6d8; }
.project-card img{ width: 100%; }
.project-card h3, .project-card p{ padding: 0 1.2rem; }
.project-card h3{ margin-top: 1rem; }
.project-card__meta{ color: var(--c-ochre-dark); font-size: 0.85rem; font-weight: 600; margin-top: 0.2rem; }
.project-card p:last-child{ padding-bottom: 1.2rem; }

/* Values grid (Over ons) */
.values-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.values-grid__item{ background: #fff; border-radius: var(--radius); padding: 1.8rem; border: 1px solid #eee6d8; }

/* Plant-tag review cards */
.reviews-strip__scroll{ display: flex; gap: 1.5rem; overflow-x: auto; padding: 1rem 0 1.5rem; }
.reviews-full-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.plant-tag-card{ position: relative; min-width: 260px; flex: 0 0 auto; background: #fdfbf6; border: 1px solid #e3ddd0; border-radius: var(--radius); padding: 1.8rem 1.4rem 1.4rem; }
.plant-tag-card__pin{ position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--c-ochre); }
.plant-tag-card__stars{ color: var(--c-stone); margin-bottom: 0.6rem; }
.plant-tag-card__stars .star.is-filled{ color: var(--c-ochre); }
.plant-tag-card__text{ font-style: italic; }
.plant-tag-card__meta{ color: var(--c-slate-dark); font-size: 0.9rem; }
.plant-tag-card__meta span{ color: var(--c-stone); font-weight: 400; }

/* CTA */
.cta-final{ text-align: center; }
.cta-final p{ max-width: 520px; margin: 0.5rem auto 1.5rem; }

/* Contact */
.contact-layout{ display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; }
@media (max-width: 760px){ .contact-layout{ grid-template-columns: 1fr; } }
.midgardin-address{ font-style: normal; }
.midgardin-address__name{ font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--c-slate-dark); }
.contact-layout__note{ margin-top: 1.5rem; color: var(--c-stone); font-size: 0.9rem; }

.contact-form{ display: flex; flex-direction: column; gap: 0.9rem; }
.contact-form label{ font-size: 0.85rem; font-weight: 600; color: var(--c-slate-dark); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea{
	width: 100%; padding: 0.8em; background: #fff; border: 1px solid #ddd5c3; border-radius: var(--radius); font-family: var(--font-body);
}
.checkbox-label{ display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; font-weight: 400; }
.checkbox-label input{ margin-top: 0.3rem; }
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-notice{ padding: 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.form-notice.is-success{ background: #e4f0dd; color: #3c5c2c; }
.form-notice.is-error{ background: #f7e2df; color: #8a3226; }

.legal-content h2{ margin-top: 2rem; font-size: 1.25rem; }
.legal-disclaimer{ max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem; color: var(--c-stone); }

/* Footer */
.site-footer{ background: var(--c-slate-dark); color: #e7e3d8; margin-top: 4rem; }
.site-footer__divider{ width: 100%; height: 30px; filter: invert(1) brightness(1.4); opacity: 0.4; }
.site-footer__inner{ max-width: var(--max-width); margin: 0 auto; padding: 3rem 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.site-footer__logo{ font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: #fff; }
.site-footer h4{ font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: #b9b3a0; margin-bottom: 1rem; }
.site-footer__menu, .site-footer__legal{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__menu a, .site-footer__legal a{ color: #e7e3d8; }
.site-footer__menu a:hover, .site-footer__legal a:hover{ color: var(--c-ochre); }
.midgardin-address a{ color: var(--c-slate-dark); font-weight: 600; text-decoration: underline; }
.site-footer .midgardin-address a{ color: #ffffff; }
.contact-layout__info .midgardin-address a{ color: var(--c-ochre-dark); }
.site-footer__bottom{ text-align: center; padding: 1.2rem; border-top: 1px solid #5a6a72; color: #b9b3a0; font-size: 0.85rem; }
@media (max-width: 760px){ .site-footer__inner{ grid-template-columns: 1fr 1fr; } }