/* ============================================================
   Tuinen Desoete — Botanical Heritage
   Gedeelde base CSS voor alle pagina's
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;padding:0;background:#fcf9f4;color:#1c1c19;font-family:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p{margin:0;text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
ul,ol{margin:0;padding:0}
::selection{background:#fdc394;color:#061b0e}

/* ── Scrollbar ────────────────────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:#6a8472 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#6a8472;border-radius:999px;border:3px solid #fcf9f4}

/* ── Skip link (WCAG 2.4.1) ──────────────────────────────── */
.skip-link{position:absolute;top:-100%;left:8px;z-index:9999;background:#1b3022;color:#fff;padding:10px 18px;border-radius:4px;font-size:14px;font-weight:700;text-decoration:none;transition:top .2s}
.skip-link:focus{top:8px}

/* ── Focus ring (WCAG 2.4.7, 1.4.11) ─────────────────────────
   Two-tone ring so the indicator keeps >=3:1 contrast against both
   the light paper background and the dark green sections (hero
   overlays, footer, dark CTA blocks): the light band shows on dark
   backgrounds, the dark band shows on light backgrounds. */
:focus-visible{outline:3px solid #0b2013;outline-offset:3px;border-radius:4px;box-shadow:0 0 0 3px #fcf9f4}

/* ── Hero stagger ────────────────────────────────────────── */
@keyframes riseIn{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
.hero-line{display:block;padding-bottom:.04em}
.hero-line > span{display:inline-block;animation:riseIn 1s cubic-bezier(.16,1,.3,1) both}

/* ── Reveal (GSAP) ───────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px)}

/* ── Marquee ─────────────────────────────────────────────── */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee-wrap:hover .marquee-track,.marquee-wrap:focus-within .marquee-track{animation-play-state:paused}

/* ── Underline hover ─────────────────────────────────────── */
.ul-link{position:relative}
.ul-link::after{content:'';position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ul-link:hover::after,.ul-link:focus::after{transform:scaleX(1);transform-origin:left}

/* ── Dropdown ────────────────────────────────────────────── */
.nav-dropdown{opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;pointer-events:auto;transform:translateY(0)}

/* ── Card zoom ───────────────────────────────────────────── */
.card-img-zoom{overflow:hidden}
.card-img-zoom img{transition:transform 800ms cubic-bezier(.16,1,.3,1)}
.card-hover:hover .card-img-zoom img,.card-hover:focus-within .card-img-zoom img{transform:scale(1.06)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;font-family:inherit;font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;line-height:1;border-radius:4px;cursor:pointer;transition:background .22s,transform .22s,box-shadow .22s;text-decoration:none;border:none}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#E2E3C1;color:#2F261A;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.btn-primary:hover{background:#D2D3AD}
.btn-secondary{background:transparent;color:#1b3022;border:1px solid #1b3022}
.btn-secondary:hover{background:#f1f6f2}
.btn-light{background:#fff;color:#0b2013;box-shadow:0 1px 3px rgba(28,28,25,.10)}
.btn-light:hover{background:#fcf9f4}
.btn-sm{padding:9px 16px;font-size:12px;gap:8px}
.btn-lg{padding:18px 34px;font-size:14px;gap:12px}

/* ── Section label ───────────────────────────────────────── */
.section-label{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.section-label span:first-child{width:28px;height:1.5px;background:#675235;flex-shrink:0}
.section-label span:last-child{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#80552f;white-space:nowrap}
.section-label.light span:last-child{color:#E2E3C1}

/* ── Container ───────────────────────────────────────────── */
.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px);box-sizing:border-box}

/* ── No scroll ───────────────────────────────────────────── */
.no-scroll{overflow:hidden}

/* ── Sub-hero ────────────────────────────────────────────── */
.sub-hero{position:relative;overflow:hidden}
.sub-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sub-hero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,27,14,.86),rgba(6,27,14,.42) 70%,rgba(6,27,14,.55))}
.sub-hero .content{position:relative;padding-top:clamp(140px,16vw,188px);padding-bottom:clamp(52px,7vw,92px)}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:22px;font-size:13px;color:#b4cdb8}
.breadcrumb a{color:#b4cdb8}
.breadcrumb a:hover{color:#fff}

/* ── Accordion ───────────────────────────────────────────── */
.accordion-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;padding:22px 0;font-size:18px;font-weight:600;color:#1c1c19;cursor:pointer;text-align:left;gap:16px}
.accordion-btn i{flex-shrink:0;transition:transform .3s}
.accordion-btn[aria-expanded="true"] i{transform:rotate(180deg)}
.accordion-body{overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.16,1,.3,1)}
.accordion-body.open{max-height:400px}
.accordion-item{border-bottom:1px solid rgba(28,28,25,.12)}

/* ── Pagination ──────────────────────────────────────────── */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:56px}
.page-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:4px;font-size:14px;font-weight:600;transition:all .22s;border:1px solid rgba(28,28,25,.5);color:#434843;background:#fcf9f4}
.page-btn:hover,.page-btn.active{background:#1b3022;color:#fff;border-color:#1b3022}
.page-btn.arrow{width:auto;padding:0 16px;gap:8px}

/* ── Gallery grid ────────────────────────────────────────── */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}

/* ── Form ────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:9px}
.form-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#434843}
.form-input,.form-textarea{width:100%;font-family:inherit;font-size:16px;color:#1c1c19;background:#fff;border:1px solid #737973;border-radius:4px;padding:14px 15px;outline:none;transition:border-color .22s,box-shadow .22s;box-sizing:border-box}
.form-input:focus,.form-textarea:focus{border-color:#675235;box-shadow:0 0 0 3px rgba(103,82,53,.15)}
.form-textarea{resize:vertical;line-height:1.6}

/* ── Reduced motion ──────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .img-wrap img{transition:none!important;opacity:1!important;transform:none!important}
  .hero-line > span{animation:none}
  .marquee-track{animation:none}
  html{scroll-behavior:auto}
}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1080px){.desktop-nav{display:none!important}.mobile-toggle{display:inline-flex!important}}
@media(max-width:920px){
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:36px!important}
  .gallery-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:760px){
  body{font-size:16px}
  .two-col,.three-col,.proc-grid{grid-template-columns:1fr!important}
  .footer-grid{grid-template-columns:1fr!important}
  .footer-bottom{flex-direction:column;align-items:flex-start!important}
  .stat-row{gap:28px!important;flex-wrap:wrap}
  .proc-line{display:none!important}
  .sub-grid{grid-template-columns:1fr!important}
  .sub-grid aside{position:static!important}
}
@media(max-width:600px){
  .three-col,.portfolio-grid,.news-grid{grid-template-columns:1fr!important}
  .gallery-grid{grid-template-columns:1fr!important}
  .faq-grid{grid-template-columns:1fr!important}
  .faq-grid aside{position:static!important}
}