:root {
    --gold: #BEA265;
    --gold-light: #CCAF73;
    --dark: #1a1a1a;
    --darker: #111;
    --white: #fff;
    --gray: #555;
    --light-bg: #f7f4f0;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Montserrat',sans-serif; color:var(--dark); background:var(--light-bg); overflow-x:hidden; }

/* TOPBAR */
.topbar { background:var(--darker); padding:10px 5%; display:flex; justify-content:space-between; align-items:center; }
.topbar-left { display:flex; align-items:center; gap:8px; color:var(--white); font-size:0.85rem; font-weight:500; }
.topbar-left i { color:var(--gold); }
.topbar-left a { color:var(--white); text-decoration:none; }
.topbar-right { display:flex; gap:2rem; }
.topbar-right a { color:rgba(255,255,255,0.6); text-decoration:none; font-size:0.78rem; letter-spacing:0.5px; transition:color 0.3s; }
.topbar-right a:hover { color:var(--gold); }
.topbar-social { display:flex; gap:12px; align-items:center; }
.topbar-social a { color:rgba(255,255,255,0.6); font-size:0.82rem; transition:color 0.3s; }
.topbar-social a:hover { color:var(--gold); }

/* NAVBAR — 3-zone layout: logo left, nav perfectly centered, CTA right */
.navbar { background:var(--white); padding:0 5%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:110px; border-bottom:1px solid rgba(0,0,0,0.06); position:sticky; top:0; z-index:100; transition:box-shadow 0.3s; }
.navbar.scrolled { box-shadow:0 2px 20px rgba(0,0,0,0.06); }
.logo { text-decoration:none; justify-self:start; }
.logo img { height:80px; width:auto; display:block; }
.nav-links { list-style:none; display:flex; gap:0; align-items:center; height:100%; justify-self:center; }
.nav-links li { height:100%; }
.nav-links li a { text-decoration:none; color:var(--dark); font-size:0.88rem; font-weight:600; padding:0 20px; height:100%; display:flex; align-items:center; letter-spacing:1px; text-transform:uppercase; transition:color 0.3s; position:relative; }
.nav-links li a:hover, .nav-links li a.active { color:var(--gold); }
.nav-cta { display:inline-flex; align-items:center; padding:12px 26px; background:var(--gold); color:var(--dark); text-decoration:none; font-size:0.78rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; transition:background 0.3s, color 0.3s; justify-self:end; }
.nav-cta:hover { background:var(--dark); color:var(--white); }
.hamburger { display:none; cursor:pointer; font-size:1.5rem; color:var(--dark); justify-self:end; background:none; border:none; padding:0; outline:none; font-family:inherit; }
.hamburger:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* DROPDOWN — desktop only (mobile uses its own clean rules below) */
.nav-dropdown { position:relative; height:100%; }
.nav-dropdown > a { display:flex; align-items:center; gap:6px; }
.nav-arrow { font-size:0.5rem; opacity:0.6; transition:transform 0.3s, opacity 0.3s; }
.nav-dropdown:hover .nav-arrow, .nav-dropdown.active .nav-arrow { transform:rotate(180deg); opacity:1; }
.dropdown-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%); background:var(--white); min-width:220px; box-shadow:0 10px 30px rgba(0,0,0,0.1); list-style:none; padding:8px 0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.2s ease, visibility 0.2s; z-index:200; border-top:2px solid var(--gold); }
.nav-dropdown.active .dropdown-menu { opacity:1; visibility:visible; pointer-events:auto; }
.dropdown-menu li { height:auto; }
.dropdown-menu li a { display:block; padding:10px 22px; font-size:0.8rem; font-weight:500; color:var(--dark); text-transform:none; letter-spacing:0.2px; transition:color 0.2s, background 0.2s; }
.dropdown-menu li a:hover, .dropdown-menu li a.active { color:var(--gold); background:var(--light-bg); }
.dropdown-menu li a::after, .dropdown-menu li a::before { display:none; content:none; }

/* HERO */
.hero { position:relative; height:80vh; min-height:500px; overflow:hidden; }
.hero-slider, .slide { position:absolute; inset:0; }
.slide { opacity:0; transition:opacity 1.2s ease; }
.slide.active { opacity:1; }
.slide img { width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to right, rgba(26,26,26,0.75) 0%, rgba(26,26,26,0.3) 50%, transparent 100%); display:flex; align-items:center; padding:0 8%; z-index:2; }
.hero-content { max-width:600px; }
.hero-sub { color:var(--gold); font-size:0.85rem; font-weight:600; letter-spacing:3px; text-transform:uppercase; margin-bottom:1rem; }
.hero h1 { font-family:'Cormorant Garamond',serif; font-size:3.2rem; font-weight:600; color:var(--white); line-height:1.2; margin-bottom:1.8rem; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
.hero-arrows { position:absolute; bottom:30px; right:30px; z-index:3; display:flex; gap:8px; }
.hero-arrows button { width:48px; height:48px; background:rgba(255,255,255,0.1); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.2); color:var(--white); font-size:0.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.3s; }
.hero-arrows button:hover { background:var(--gold); border-color:var(--gold); }

/* BUTTONS */
.btn-gold { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; background:var(--gold); color:var(--dark); text-decoration:none; font-size:0.82rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; transition:background 0.3s; }
.btn-gold:hover { background:var(--gold-light); }
.btn-outline-w { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border:1px solid rgba(255,255,255,0.4); color:var(--white); text-decoration:none; font-size:0.82rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; transition:all 0.3s; }
.btn-outline-w:hover { background:var(--white); color:var(--dark); }
.btn-dark { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; border:1px solid var(--dark); color:var(--dark); text-decoration:none; font-size:0.78rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; transition:all 0.3s; }
.btn-dark:hover { background:var(--gold); border-color:var(--gold); color:var(--white); }
.label-tag { display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:0.8rem; }

/* SECTION HEAD */
.section-head { text-align:center; margin-bottom:3rem; }
.section-head h2 { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:500; color:var(--dark); }

/* DIENSTEN */
.diensten { padding:80px 5%; background:var(--light-bg); }
.diensten-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.dienst-card { position:relative; height:400px; background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden; opacity:1; transform:translateY(0); transition:transform 0.4s ease, opacity 0.4s ease; display:block; text-decoration:none; cursor:pointer; }
.dienst-card.fade { opacity:0; transform:translateY(30px); }
.dienst-card.fade.visible { opacity:1; transform:translateY(0); }
.dienst-overlay { position:absolute; inset:0; background:rgba(26,26,26,0.6); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; transition:background 0.4s; }
.dienst-card:hover .dienst-overlay { background:rgba(190,162,101,0.85); }
.dienst-overlay i { font-size:2rem; color:var(--white); margin-bottom:1rem; opacity:0.8; }
.dienst-overlay h3 { font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--white); margin-bottom:0.5rem; }
.dienst-overlay p { color:rgba(255,255,255,0.8); font-size:0.82rem; line-height:1.6; }

/* OVER ONS */
.over { display:grid; grid-template-columns:1fr 1.2fr; gap:0; max-width:1300px; margin:0 auto; padding:80px 5%; align-items:center; }
.over-img { overflow:hidden; opacity:0; transform:translateX(-30px); transition:all 0.8s ease; }
.over-img.visible { opacity:1; transform:translateX(0); }
.over-img img { width:100%; height:520px; object-fit:cover; }
.over-tekst { padding:0 0 0 50px; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateX(30px); transition:all 0.8s ease; }
.over-tekst.visible { opacity:1; transform:translateX(0); }
.over-tekst h2 { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:500; color:var(--dark); margin-bottom:1.2rem; }
.over-tekst p { color:var(--gray); font-size:0.9rem; line-height:1.9; margin-bottom:0.8rem; }
.over-tekst p strong { color:var(--dark); }
.over-tekst .btn-dark { margin-top:1rem; align-self:flex-start; }

/* VASTGOED */
.vastgoed { padding:80px 5%; background:var(--light-bg); }
.vastgoed-scroll { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; max-width:1200px; margin:0 auto; }
.property-card { background:var(--white); overflow:hidden; transition:all 0.4s; opacity:0; transform:translateY(20px); box-shadow:0 2px 12px rgba(0,0,0,0.04); }
.property-card.visible { opacity:1; transform:translateY(0); }
.property-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,0.1); }
.property-img { position:relative; height:220px; overflow:hidden; }
.property-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.property-card:hover .property-img img { transform:scale(1.06); }
.badge { position:absolute; top:12px; left:12px; background:var(--gold); color:var(--white); font-size:0.68rem; font-weight:700; padding:5px 12px; text-transform:uppercase; letter-spacing:0.5px; }
.badge.sold { background:var(--dark); }
.badge.optie { background:#c9302c; }

/* Sold / rented properties: non-clickable, dimmed appearance */
.property-card.sold-card { cursor:default; filter:grayscale(0.6); opacity:0.75; }
.property-card.sold-card:hover { transform:none; box-shadow:0 2px 12px rgba(0,0,0,0.04); }
.property-card.sold-card:hover .property-img img { transform:none; }
.property-card.sold-card .property-img img { transition:none; }
.property-card.sold-card .property-info h4 { color:var(--gray-500, #777); }
.property-card.sold-card .property-info { padding:1rem 1.4rem 1.2rem; }
.property-info { padding:1.2rem 1.4rem 1.4rem; }
.property-info h4 { font-size:0.95rem; font-weight:600; margin-bottom:0.3rem; color:var(--dark); }
.property-price { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600; color:var(--gold); margin-bottom:0.6rem; }
.property-specs { display:flex; gap:1rem; padding-top:0.6rem; border-top:1px solid rgba(0,0,0,0.06); }
.property-specs span { font-size:0.78rem; color:var(--gray); display:flex; align-items:center; gap:4px; }
.property-specs i { color:var(--gold); font-size:0.7rem; }

/* AANKOOP */
.aankoop { display:grid; grid-template-columns:1fr 1fr; min-height:500px; }
.aankoop-tekst { padding:80px 6%; display:flex; flex-direction:column; justify-content:center; background:var(--light-bg); opacity:0; transform:translateX(-30px); transition:all 0.8s ease; }
.aankoop-tekst.visible { opacity:1; transform:translateX(0); }
.aankoop-tekst h2 { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:500; color:var(--dark); margin-bottom:0.3rem; }
.aankoop-tekst h3 { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:400; color:var(--gold); font-style:italic; margin-bottom:1.5rem; }
.aankoop-tekst p { color:var(--gray); font-size:0.9rem; line-height:1.9; margin-bottom:0.8rem; }
.aankoop-tekst p strong { color:var(--dark); }
.aankoop-tekst .btn-dark { margin-top:1rem; align-self:flex-start; }
.aankoop-img { overflow:hidden; opacity:0; transform:translateX(30px); transition:all 0.8s ease; }
.aankoop-img.visible { opacity:1; transform:translateX(0); }
.aankoop-img img { width:100%; height:100%; object-fit:cover; }

/* CTA PARALLAX */
.cta-parallax { padding:100px 5%; background:url('assets/interieur-keuken.jpg') center/cover fixed; position:relative; text-align:center; }
.cta-parallax::before { content:''; position:absolute; inset:0; background:rgba(26,26,26,0.75); }
.cta-content { position:relative; z-index:2; max-width:650px; margin:0 auto; }
.cta-content h2 { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:500; color:var(--white); margin-bottom:1rem; }
.cta-content p { color:rgba(255,255,255,0.7); font-size:0.95rem; line-height:1.8; margin-bottom:2rem; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* CONTACT */
.contact { padding:80px 5%; background:var(--light-bg); }
.contact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px; margin:0 auto; }
.contact-card { text-align:center; padding:2rem 1.5rem; background:var(--white); box-shadow:0 2px 12px rgba(0,0,0,0.04); opacity:0; transform:translateY(20px); transition:all 0.5s ease; }
.contact-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.contact-card.visible { opacity:1; transform:translateY(0); }
.contact-card i { font-size:1.5rem; color:var(--gold); margin-bottom:1rem; }
.contact-card h4 { font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:0.5rem; color:var(--dark); }
.contact-card p, .contact-card a { font-size:0.88rem; color:var(--gray); text-decoration:none; line-height:1.7; }
.contact-card a:hover { color:var(--gold); }

/* FOOTER */
footer { background:var(--darker); color:rgba(255,255,255,0.5); }
.footer-main { display:grid; grid-template-columns:1.5fr 0.8fr 0.8fr 1fr; gap:2rem; padding:55px 5% 45px; max-width:1200px; margin:0 auto; }
.footer-logo { height:60px; margin-bottom:1rem; filter:brightness(0) invert(1); }
.footer-brand p { font-size:0.82rem; color:rgba(255,255,255,0.4); line-height:1.8; margin-bottom:0.5rem; }
.footer-col h4 { color:var(--gold); font-size:0.78rem; text-transform:uppercase; letter-spacing:2px; margin-bottom:1.2rem; }
.footer-col p, .footer-col a { font-size:0.82rem; color:rgba(255,255,255,0.45); text-decoration:none; line-height:2.2; display:block; }
.footer-col a:hover { color:var(--gold); }
.social-links { display:flex; gap:10px; margin-top:1.2rem; }
.social-links a { width:36px; height:36px; border:1px solid rgba(255,255,255,0.15); display:flex!important; align-items:center; justify-content:center; font-size:0.85rem; transition:all 0.3s; }
.social-links a:hover { background:var(--gold); border-color:var(--gold); color:var(--white)!important; }
.footer-legal { border-top:1px solid rgba(255,255,255,0.06); padding:16px 5%; max-width:1200px; margin:0 auto; }
.footer-legal p { font-size:0.68rem; color:rgba(255,255,255,0.3); line-height:1.8; text-align:center; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.06); text-align:center; padding:20px 5%; font-size:0.75rem; }
.footer-bottom span { color:var(--gold); }
.footer-bottom a, .footer-bottom a:visited, .footer-bottom a:active { color:var(--gold); text-decoration:none; transition:opacity 0.3s; }
.footer-bottom a:hover { opacity:0.75; color:var(--gold); }
.footer-legal-links { margin-top:8px; }
.footer-legal-links a { color:rgba(255,255,255,0.4); text-decoration:none; font-size:0.72rem; transition:color 0.3s; }
.footer-legal-links a:hover { color:var(--gold); }

/* LEGAL PAGES */
.legal-content { padding:60px 5%; background:var(--white); }
.legal-inner { max-width:800px; margin:0 auto; }
.legal-inner h2 { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600; color:var(--dark); margin:2.5rem 0 1rem; padding-bottom:0.5rem; border-bottom:1px solid rgba(0,0,0,0.08); }
.legal-inner h3 { font-size:1rem; font-weight:600; color:var(--dark); margin:1.5rem 0 0.5rem; }
.legal-inner p { color:var(--gray); font-size:0.9rem; line-height:1.9; margin-bottom:0.8rem; }
.legal-inner p a { color:var(--gold); text-decoration:none; transition:color 0.3s; }
.legal-inner p a:hover { color:var(--dark); }
.legal-inner ul { list-style:none; padding:0; margin:0 0 1.2rem; }
.legal-inner ul li { position:relative; padding-left:1.5rem; color:var(--gray); font-size:0.9rem; line-height:1.9; margin-bottom:0.3rem; }
.legal-inner ul li::before { content:'\2022'; color:var(--gold); font-weight:700; position:absolute; left:0; }
.legal-inner ul li strong { color:var(--dark); }
.legal-updated { font-size:0.8rem; color:rgba(85,85,85,0.6); font-style:italic; margin-bottom:2rem; }

/* WHATSAPP */
.whatsapp-btn { position:fixed; bottom:24px; right:24px; z-index:99; width:56px; height:56px; border-radius:50%; background:#25D366; color:white; display:flex; align-items:center; justify-content:center; font-size:1.6rem; text-decoration:none; box-shadow:0 4px 16px rgba(37,211,102,0.35); transition:transform 0.3s; }
.whatsapp-btn:hover { transform:scale(1.1); }

/* PHOTO STRIP (bottom of property detail) */
.photo-strip-section { max-width:1200px; margin:0 auto; padding:0 5% 40px; overflow:hidden; }
.photo-strip-wrapper { overflow:hidden; position:relative; }
.photo-strip { display:flex; gap:12px; animation:scrollStrip 20s linear infinite; width:max-content; }
.photo-strip:hover { animation-play-state:paused; }
.photo-strip-item { flex-shrink:0; width:220px; cursor:pointer; position:relative; overflow:hidden; }
.photo-strip-item img { width:100%; height:150px; object-fit:cover; display:block; transition:transform 0.4s; }
.photo-strip-item:hover img { transform:scale(1.05); }
.photo-strip-item .photo-strip-label { position:absolute; bottom:0; left:0; right:0; padding:6px 10px; background:linear-gradient(transparent, rgba(0,0,0,0.7)); color:var(--white); font-size:0.72rem; font-weight:500; letter-spacing:0.5px; opacity:0; transition:opacity 0.3s; }
.photo-strip-item:hover .photo-strip-label { opacity:1; }
@keyframes scrollStrip { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* LOADING & EMPTY STATES */
.loading, .no-results { text-align:center; color:var(--gray); padding:60px 20px; font-size:0.9rem; grid-column:1/-1; }

/* PAGE HEADER (SUBPAGES) */
.page-header { position:relative; height:420px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.page-header-content { position:relative; z-index:2; max-width:700px; padding:0 5%; }
.page-header-content h1 { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:600; color:var(--white); margin-bottom:0.8rem; }
.page-header-content p { color:rgba(255,255,255,0.7); font-size:0.95rem; line-height:1.6; margin-bottom:1.2rem; }

/* Solid dark header variant — used on te-koop / te-huur */
.page-header-solid-dark { background:var(--darker); height:240px; }
@media (max-width:1024px) { .page-header-solid-dark { height:200px; } }
@media (max-width:768px)  { .page-header-solid-dark { height:180px; } }

/* Screen-reader-only utility — visible to assistive tech / search engines, hidden from sighted users */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.breadcrumb { display:flex; align-items:center; justify-content:center; gap:10px; font-size:0.75rem; }
.breadcrumb a { color:rgba(255,255,255,0.5); text-decoration:none; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb i { color:var(--gold); font-size:0.55rem; }
.breadcrumb span { color:var(--gold); font-weight:600; }

/* FILTER BAR */
.filter-bar { background:var(--white); padding:30px 5%; border-bottom:1px solid rgba(0,0,0,0.06); }
.filter-inner { display:flex; gap:16px; align-items:flex-end; max-width:1200px; margin:0 auto; flex-wrap:wrap; }
.filter-group { flex:1; min-width:150px; }
.filter-group label { display:block; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gray); margin-bottom:6px; }
.filter-group select { width:100%; padding:12px 16px; border:1px solid rgba(0,0,0,0.08); background:var(--light-bg); font-family:'Montserrat',sans-serif; font-size:0.82rem; color:var(--dark); outline:none; cursor:pointer; appearance:none; }
.filter-group select:focus { border-color:var(--gold); }
.filter-btn { flex-shrink:0; height:46px; padding:0 28px; border:none; cursor:pointer; }

/* PROPERTIES SECTION */
.properties-section { padding:60px 5% 100px; background:var(--light-bg); }
.properties-count { max-width:1200px; margin:0 auto 24px; }
.properties-count p { font-size:0.85rem; color:var(--gray); }
.properties-count strong { color:var(--dark); }
.properties-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1200px; margin:0 auto; }
.badge.huur { background:#2c7a4b; }
.property-img-overlay { position:absolute; inset:0; background:rgba(26,26,26,0.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.4s; }
.property-card:hover .property-img-overlay { opacity:1; }
.btn-view { display:inline-flex; align-items:center; padding:10px 24px; background:var(--white); color:var(--dark); text-decoration:none; font-size:0.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.property-location { font-size:0.72rem; color:var(--gray); font-weight:500; margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.property-location i { color:var(--gold); font-size:0.65rem; }

/* PAGE CTA */
.page-cta { padding:80px 5%; background:var(--dark); text-align:center; }
.page-cta h2 { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:500; color:var(--white); margin-bottom:0.8rem; }
.page-cta p { color:rgba(255,255,255,0.6); font-size:0.92rem; margin-bottom:2rem; }
.page-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.page-cta .btn-dark { border-color:rgba(255,255,255,0.3); color:var(--white); }
.page-cta .btn-dark:hover { background:var(--gold); border-color:var(--gold); }

/* SERVICE INTRO */
.service-intro { padding:80px 5%; background:var(--white); }
.service-intro-inner { display:grid; grid-template-columns:1.2fr 0.8fr; gap:60px; max-width:1200px; margin:0 auto; align-items:center; }
.service-intro-text h2 { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:500; color:var(--dark); margin-bottom:1.2rem; }
.service-intro-text .intro-lead, .service-intro-text p { font-size:0.9rem; color:var(--gray); line-height:1.9; margin-bottom:0.8rem; }
.service-intro-text p strong { color:var(--dark); }
.service-highlights { display:flex; flex-direction:column; gap:12px; margin-top:1.5rem; }
.highlight { display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--dark); }
.highlight i { color:var(--gold); font-size:0.9rem; flex-shrink:0; }
.service-intro-img img { width:100%; height:500px; object-fit:cover; }
.service-intro-text, .service-intro-img { opacity:0; transform:translateX(0); transition:all 0.8s ease; }
.service-intro-text { transform:translateX(-30px); }
.service-intro-img { transform:translateX(30px); }
.service-intro-text.visible, .service-intro-img.visible { opacity:1; transform:translateX(0); }

/* STAPPEN TIMELINE */
.werkwijze { padding:80px 5%; background:var(--light-bg); }
.stappen-timeline { max-width:800px; margin:0 auto; position:relative; }
.stappen-timeline::before { content:''; position:absolute; left:34px; top:0; bottom:0; width:2px; background:rgba(190,162,101,0.2); }
.stap-timeline-item { display:flex; gap:30px; margin-bottom:40px; position:relative; opacity:0; transform:translateY(20px); transition:all 0.6s ease; }
.stap-timeline-item.visible { opacity:1; transform:translateY(0); }
.stap-timeline-nummer { width:70px; height:70px; background:var(--gold); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:700; flex-shrink:0; position:relative; z-index:1; }
.stap-timeline-content { padding-top:10px; }
.stap-timeline-content h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600; color:var(--dark); margin-bottom:0.6rem; }
.stap-timeline-content p { font-size:0.88rem; color:var(--gray); line-height:1.8; }

/* VOORDELEN */
.voordelen { padding:80px 5%; background:var(--light-bg); }
.voordelen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1100px; margin:0 auto; }
.voordeel-card { background:var(--white); padding:44px 32px; text-align:center; transition:all 0.4s; opacity:0; transform:translateY(20px); }
.voordeel-card.visible { opacity:1; transform:translateY(0); }
.voordeel-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,0.06); }
.voordeel-icon { width:64px; height:64px; background:var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; }
.voordeel-icon i { color:var(--white); font-size:1.3rem; }
.voordeel-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600; color:var(--dark); margin-bottom:0.6rem; }
.voordeel-card p { font-size:0.85rem; color:var(--gray); line-height:1.8; }

/* ABOUT PAGE */
.about-section { padding:80px 5%; background:var(--white); }
.about-inner { display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; max-width:1100px; margin:0 auto; align-items:center; }
.about-image img { width:100%; height:500px; object-fit:cover; }
.about-image, .about-text { opacity:0; transition:all 0.8s ease; }
.about-image { transform:translateX(-30px); }
.about-text { transform:translateX(30px); }
.about-image.visible, .about-text.visible { opacity:1; transform:translateX(0); }
.about-text h2 { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:500; color:var(--dark); margin-bottom:0.3rem; }
.about-subtitle { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-style:italic; color:var(--gold); margin-bottom:1.5rem; }
.about-text p { font-size:0.9rem; color:var(--gray); line-height:1.9; margin-bottom:0.8rem; }
.about-text p strong { color:var(--dark); }

/* WAARDEN */
.waarden { padding:80px 5%; background:var(--light-bg); }
.waarden-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1200px; margin:0 auto; }
.waarde-card { background:var(--white); padding:44px 28px; text-align:center; transition:all 0.4s; opacity:0; transform:translateY(20px); }
.waarde-card.visible { opacity:1; transform:translateY(0); }
.waarde-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,0.06); }
.waarde-icon { width:60px; height:60px; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; transition:all 0.3s; }
.waarde-card:hover .waarde-icon { background:var(--gold); }
.waarde-icon i { color:var(--gold); font-size:1.2rem; transition:color 0.3s; }
.waarde-card:hover .waarde-icon i { color:var(--white); }
.waarde-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:600; color:var(--dark); margin-bottom:0.6rem; }
.waarde-card p { font-size:0.84rem; color:var(--gray); line-height:1.8; }

/* SCHATTING */
.schatting-section { padding:80px 5%; background:var(--white); }
.schatting-inner { display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; max-width:1200px; margin:0 auto; align-items:flex-start; }
.schatting-text h2 { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:500; color:var(--dark); margin-bottom:1rem; }
.schatting-text h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600; color:var(--dark); margin-top:2rem; margin-bottom:1rem; }
.schatting-text p { font-size:0.9rem; color:var(--gray); line-height:1.9; margin-bottom:0.8rem; }
.schatting-text p strong { color:var(--dark); }
.schatting-lijst { list-style:none; margin:1rem 0 2rem; }
.schatting-lijst li { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:0.88rem; color:var(--dark); }
.schatting-lijst i { color:var(--gold); font-size:0.8rem; flex-shrink:0; }
.schatting-trust { display:flex; gap:20px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--light-bg); }
.trust-item i { color:var(--gold); font-size:1.2rem; }
.trust-item strong { display:block; font-size:0.78rem; color:var(--dark); }
.trust-item span { font-size:0.7rem; color:var(--gray); }
.schatting-form-card { background:var(--light-bg); padding:40px; position:sticky; top:120px; }
.schatting-form-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:600; color:var(--dark); margin-bottom:0.5rem; }
.schatting-form-card h3 i { color:var(--gold); font-size:1.2rem; }
.schatting-form-card > p { font-size:0.82rem; color:var(--gray); margin-bottom:1.5rem; line-height:1.6; }

/* CONTACT PAGE */
.contact-wrapper { display:grid; grid-template-columns:1fr 1.2fr; gap:50px; max-width:1100px; margin:0 auto; }
.contact-info-side { display:flex; flex-direction:column; gap:24px; }
.contact-side-title { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600; color:var(--dark); margin-bottom:1.2rem; }
.contact-info-item { display:flex; gap:18px; align-items:flex-start; padding:20px 24px; background:var(--white); transition:all 0.4s; opacity:0; transform:translateX(-20px); }
.contact-info-item.visible { opacity:1; transform:translateX(0); }
.contact-info-item:hover { transform:translateX(6px); box-shadow:0 6px 20px rgba(0,0,0,0.04); }
.contact-icon { width:44px; height:44px; background:var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-icon i { color:var(--white); font-size:0.9rem; }
.contact-info-item h4 { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--dark); margin-bottom:4px; }
.contact-info-item p, .contact-info-item a { font-size:0.88rem; color:var(--gray); text-decoration:none; line-height:1.6; }
.contact-info-item a:hover { color:var(--gold); }
.contact-form-side { background:var(--white); padding:40px; opacity:0; transform:translateX(20px); transition:all 0.8s ease; }
.contact-form-side.visible { opacity:1; transform:translateX(0); }
.contact-form-side h3 { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600; color:var(--dark); margin-bottom:1.5rem; }
.form-subtitle { font-size:0.85rem; color:var(--gray); margin-bottom:1.2rem; line-height:1.6; }
.contact-form { display:flex; flex-direction:column; gap:14px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form input, .contact-form select, .contact-form textarea { width:100%; padding:14px 18px; border:1px solid rgba(0,0,0,0.08); background:var(--light-bg); font-family:'Montserrat',sans-serif; font-size:0.85rem; color:var(--dark); outline:none; transition:border-color 0.3s; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color:var(--gold); }
.contact-form textarea { resize:vertical; min-height:100px; }
.contact-form .btn-gold { align-self:flex-start; border:none; cursor:pointer; }
.map-section { width:100%; height:400px; background:var(--light-bg); }
.map-section iframe { display:block; width:100%; height:100%; }

/* CONTACT PAGE LAYOUT */
.contact-page { padding:80px 5%; background:var(--light-bg); }
.contact-page-inner { display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px; max-width:1200px; margin:0 auto; align-items:stretch; }
.contact-info-col { display:flex; flex-direction:column; gap:14px; }
.contact-info-col .contact-side-title { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:600; color:var(--dark); margin-bottom:14px; padding-bottom:14px; border-bottom:2px solid var(--gold); }
.contact-info-col .contact-info-item { display:flex; gap:16px; align-items:flex-start; padding:18px 22px; background:var(--white); box-shadow:0 2px 12px rgba(0,0,0,0.04); transition:all 0.3s; opacity:1; transform:none; }
.contact-info-col .contact-info-item:hover { transform:translateX(4px); box-shadow:0 6px 20px rgba(0,0,0,0.06); }
.contact-info-col .contact-icon { width:42px; height:42px; background:var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-col .contact-icon i { color:var(--white); font-size:0.9rem; }
.contact-info-col .contact-info-item h4 { font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--dark); margin-bottom:4px; }
.contact-info-col .contact-info-item p, .contact-info-col .contact-info-item a { font-size:0.86rem; color:var(--gray); text-decoration:none; line-height:1.6; }
.contact-info-col .contact-info-item a:hover { color:var(--gold); }
.contact-map-col { width:100%; min-height:560px; background:var(--white); box-shadow:0 2px 12px rgba(0,0,0,0.04); overflow:hidden; }
.contact-map-col iframe { width:100%; height:100%; min-height:560px; display:block; border:0; }

/* ================================================
   PROPERTY DETAIL PAGE
   ================================================ */

/* Gallery */
.detail-gallery { max-width:1200px; margin:0 auto; padding:0 5%; }
.gallery-main { position:relative; width:100%; height:500px; overflow:hidden; background:var(--dark); cursor:pointer; }
.gallery-main img { width:100%; height:100%; object-fit:contain; display:block; }
.gallery-arrows { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 16px; pointer-events:none; }
.gallery-arrows button { width:48px; height:48px; background:rgba(26,26,26,0.6); border:none; color:var(--white); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; pointer-events:all; transition:background 0.3s; }
.gallery-arrows button:hover { background:var(--gold); }
.gallery-thumbs { display:flex; gap:6px; overflow-x:auto; padding:8px 0; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }
.gallery-thumbs img { width:80px; height:60px; object-fit:cover; cursor:pointer; opacity:0.5; transition:opacity 0.3s; flex-shrink:0; border:2px solid transparent; }
.gallery-thumbs img:hover, .gallery-thumbs img.active { opacity:1; border-color:var(--gold); }

/* Header */
.detail-header { max-width:1200px; margin:0 auto; padding:30px 5% 20px; display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; }
.detail-header-left { flex:1; }
.detail-type { display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.detail-optie-tag { display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#fff; background:#c9302c; padding:3px 8px; border-radius:3px; margin-left:8px; vertical-align:middle; }
.detail-address { font-family:'Montserrat',sans-serif; font-size:1.4rem; font-weight:700; color:var(--dark); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.detail-price { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:700; color:var(--gold); white-space:nowrap; }
.detail-key-specs { display:flex; gap:20px; flex-wrap:wrap; }
.detail-key-specs span { display:flex; align-items:center; gap:6px; font-size:0.85rem; color:var(--gray); }
.detail-key-specs i { color:var(--gold); font-size:0.8rem; }

/* Action bar */
.detail-actions { max-width:1200px; margin:0 auto; padding:14px 5%; display:flex; align-items:center; gap:30px; background:var(--dark); flex-wrap:wrap; }
.detail-actions .action-link { display:flex; align-items:center; gap:8px; color:var(--gold); font-size:0.78rem; font-weight:600; text-decoration:none; text-transform:uppercase; letter-spacing:0.5px; background:none; border:none; cursor:pointer; transition:color 0.3s; }
.detail-actions .action-link:hover { color:var(--gold-light); }
.detail-actions .action-share { display:flex; align-items:center; gap:10px; margin-left:auto; }
.detail-actions .action-share span { color:rgba(255,255,255,0.6); font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.detail-actions .share-icon { width:32px; height:32px; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.6); text-decoration:none; font-size:0.75rem; transition:all 0.3s; }
.detail-actions .share-icon:hover { background:var(--gold); border-color:var(--gold); color:var(--white); }

/* Two-column body */
.detail-body { max-width:1200px; margin:0 auto; padding:40px 5% 60px; display:grid; grid-template-columns:1fr 320px; gap:50px; }
.detail-main { min-width:0; }
.detail-sidebar { align-self:start; position:sticky; top:120px; }

/* Sections */
.detail-section { margin-bottom:50px; padding-bottom:10px; }
.detail-section h2 { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:600; color:var(--dark); margin-bottom:24px; padding-bottom:14px; border-bottom:2px solid var(--gold); }
.detail-section-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px; }
.detail-section-header h2 { margin-bottom:0; flex:1; }
.detail-ref { font-size:0.78rem; font-weight:600; color:var(--gray); letter-spacing:0.5px; white-space:nowrap; }
.detail-description-text { font-size:0.92rem; color:var(--gray); line-height:2; }
.detail-description-text p { margin-bottom:1rem; }

/* Specs grid */
.specs-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px 30px; }
.spec-group, .spec-section { margin-bottom:10px; }
.spec-group h3, .spec-section h3 { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--dark); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid rgba(0,0,0,0.08); }
.spec-row { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; border-bottom:1px solid rgba(0,0,0,0.04); }
.spec-label { font-size:0.82rem; color:var(--gray); }
.spec-value { font-size:0.82rem; font-weight:600; color:var(--gold); text-align:right; }
.spec-value.negative { color:var(--gold-light); font-weight:400; font-style:italic; }
.spec-table { width:100%; border-collapse:collapse; }
.spec-table td { padding:6px 0; font-size:0.82rem; border-bottom:1px solid rgba(0,0,0,0.04); }
.spec-table td:first-child { color:var(--gray); padding-right:12px; }
.spec-table td:last-child { color:var(--gold); font-weight:600; text-align:right; }

/* Contact card (sidebar) */
.contact-card-detail { background:var(--dark); padding:32px 28px; text-align:center; }
.contact-card-detail h3 { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:3px; color:var(--white); margin-bottom:20px; }
.contact-card-detail .agent-photo { width:80px; height:80px; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; border-radius:50%; overflow:hidden; }
.contact-card-detail .agent-photo i { font-size:2rem; color:var(--gold); }
.contact-card-detail .agent-name { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:600; color:var(--white); margin-bottom:12px; }
.contact-card-detail .agent-phone, .contact-card-detail .agent-email { font-size:0.85rem; color:rgba(255,255,255,0.7); margin-bottom:8px; }
.contact-card-detail .agent-phone i, .contact-card-detail .agent-email i { color:var(--gold); margin-right:6px; font-size:0.75rem; }
.contact-card-detail .agent-phone a, .contact-card-detail .agent-email a { color:rgba(255,255,255,0.7); text-decoration:none; transition:color 0.3s; }
.contact-card-detail .agent-phone a:hover, .contact-card-detail .agent-email a:hover { color:var(--gold); }
.contact-card-detail .btn-contact { display:inline-block; margin-top:20px; padding:12px 36px; border:1px solid rgba(255,255,255,0.4); color:var(--white); text-decoration:none; font-size:0.78rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; transition:all 0.3s; }
.contact-card-detail .btn-contact:hover { background:var(--gold); border-color:var(--gold); }

/* Downloads */
.downloads-list { display:flex; flex-direction:column; gap:8px; }
.download-item { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--white); border:1px solid rgba(0,0,0,0.06); text-decoration:none; color:var(--dark); font-size:0.85rem; font-weight:500; transition:all 0.3s; }
.download-item:hover { border-color:var(--gold); transform:translateX(4px); }
.download-item i { color:var(--gold); font-size:1rem; flex-shrink:0; }
.download-item .download-ext { flex:0 0 auto; padding:4px 10px; background:var(--gold); color:var(--white); font-size:0.7rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.download-item .download-name { flex:1; }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; }
.lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; }
.lightbox-close { position:absolute; top:20px; right:24px; width:48px; height:48px; background:none; border:1px solid rgba(255,255,255,0.3); color:var(--white); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.3s; z-index:1001; }
.lightbox-close:hover { background:var(--gold); border-color:var(--gold); }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:var(--white); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.3s; }
.lightbox-nav:hover { background:var(--gold); border-color:var(--gold); }
.lightbox-prev { left:20px; }
.lightbox-next { right:20px; }

/* Back link */
.back-link { max-width:1200px; margin:0 auto; padding:30px 5% 50px; }
.back-link a { display:inline-flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:600; color:var(--dark); text-decoration:none; text-transform:uppercase; letter-spacing:0.5px; transition:color 0.3s; }
.back-link a:hover { color:var(--gold); }
.back-link a i { font-size:0.75rem; }

/* Loading state */
.loading-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:120px 5%; text-align:center; }
.loading-spinner { width:48px; height:48px; border:3px solid rgba(190,162,101,0.2); border-top-color:var(--gold); border-radius:50%; animation:spin 0.8s linear infinite; margin-bottom:20px; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-size:0.9rem; color:var(--gray); }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:120px 5%; text-align:center; }
.empty-state i { font-size:3rem; color:var(--gold); margin-bottom:20px; }
.empty-state h2 { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:600; color:var(--dark); margin-bottom:10px; }
.empty-state p { font-size:0.9rem; color:var(--gray); margin-bottom:24px; }

/* Property detail container */
.property-detail { min-height:60vh; background:var(--light-bg); padding-top:20px; }

/* ============================================
   RESPONSIVE — 4 BREAKPOINTS
   1280px = small laptop
   1024px = tablet landscape
   768px  = tablet portrait
   480px  = phone
============================================ */

/* SMALL LAPTOP (1280px and below) */
@media(max-width:1280px) {
    .nav-links li a { padding:0 14px; font-size:0.82rem; letter-spacing:0.5px; }
    .nav-cta { padding:10px 20px; font-size:0.74rem; }
    .navbar { padding:0 4%; }
    .logo img { height:70px; }
    .hero h1 { font-size:2.8rem; }
    .vastgoed-scroll { grid-template-columns:repeat(3,1fr); }
    .properties-grid { grid-template-columns:repeat(3,1fr); }
    .detail-body { grid-template-columns:1fr 280px; gap:30px; }
}

/* TABLET LANDSCAPE (1024px and below) */
@media(max-width:1024px) {
    .topbar { padding:8px 4%; }
    .topbar-right { gap:1.2rem; }
    .navbar { height:90px; padding:0 4%; }
    .logo img { height:60px; }
    .nav-links li a { padding:0 12px; font-size:0.78rem; }
    .nav-cta { padding:9px 16px; font-size:0.72rem; }
    .hero { height:70vh; }
    .hero h1 { font-size:2.4rem; }
    .diensten-grid { grid-template-columns:repeat(2,1fr); }
    .vastgoed-scroll { grid-template-columns:repeat(2,1fr); }
    .contact-grid { grid-template-columns:repeat(2,1fr); }
    .properties-grid { grid-template-columns:repeat(2,1fr); }
    .voordelen-grid { grid-template-columns:repeat(2,1fr); }
    .waarden-grid { grid-template-columns:repeat(2,1fr); }
    .footer-main { grid-template-columns:1fr 1fr; gap:2.5rem; }
    .detail-body { grid-template-columns:1fr; gap:30px; }
    .detail-sidebar { position:static; }
    .specs-grid { grid-template-columns:1fr 1fr; gap:16px 24px; }
    .over { padding:60px 5%; gap:40px; }
    .over-img img { height:440px; }
    .contact-page-inner { grid-template-columns:1fr; gap:30px; }
    .contact-map-col, .contact-map-col iframe { min-height:420px; }
    .schatting-inner { grid-template-columns:1fr; gap:30px; }
    .schatting-form-card { position:static; }
    .about-inner { gap:40px; }
    .about-image img { height:420px; }
    .service-intro-inner { gap:40px; }
    .service-intro-img img { height:420px; }
}

/* ============================================================
   MOBILE (768px and below) — Clean rewrite, no overrides
============================================================ */
@media(max-width:768px) {

    /* === BODY SCROLL LOCK + Hide topbar when menu open === */
    body.menu-open { overflow:hidden; height:100vh; }
    body.menu-open .topbar { display:none !important; }

    /* === TOPBAR === */
    .topbar { padding:8px 5%; font-size:0.72rem; }
    .topbar-left { gap:12px; }
    .topbar-left span:last-child { display:none; }
    .topbar-right { display:none; }

    /* === NAVBAR (flex, logo left, hamburger right) === */
    .navbar {
        display:flex !important;
        justify-content:space-between;
        align-items:center;
        height:72px;
        padding:0 5%;
        position:sticky;
        top:0;
        z-index:1000;
        background:#fff;
    }
    .logo { justify-self:auto; }
    .logo img { height:50px; }
    .nav-cta { display:none !important; }

    /* === HAMBURGER BUTTON === */
    .hamburger {
        display:flex !important;
        align-items:center;
        justify-content:center;
        background:none;
        border:none;
        padding:10px;
        margin:0;
        cursor:pointer;
        font-size:1.6rem;
        color:var(--dark);
        position:relative;
        z-index:1002;
        min-width:48px;
        min-height:48px;
        -webkit-tap-highlight-color:transparent;
    }

    /* === MOBILE MENU PANEL (starts BELOW navbar, seamless integration) === */
    .nav-links {
        position:fixed !important;
        top:72px;
        left:0;
        right:0;
        bottom:0;
        width:100vw;
        height:calc(100vh - 72px);
        background:#fff;
        margin:0;
        padding:0;
        list-style:none;
        display:flex !important;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
        overflow-y:auto;
        z-index:99;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity 0.25s ease, visibility 0.25s ease;
        border-top:none;
        box-shadow:0 8px 16px rgba(0,0,0,0.04);
    }
    /* When menu is open, navbar stays on top with subtle border */
    .navbar { border-bottom:1px solid rgba(0,0,0,0.08) !important; }
    .nav-links.open {
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    /* Top-level menu items — force height auto so dropdowns push siblings down */
    .nav-links li,
    .nav-links > li {
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        position:static !important;
        list-style:none !important;
        display:block !important;
        flex:none !important;
    }
    /* CRITICAL: Reset all link heights so dropdowns don't break layout */
    .nav-links a,
    .nav-links li a,
    .nav-links > li > a {
        height:auto !important;
        min-height:0 !important;
        position:static !important;
    }
    .nav-links > li > a {
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        width:100% !important;
        padding:18px 28px !important;
        margin:0 !important;
        font-size:1rem !important;
        font-weight:600 !important;
        text-transform:uppercase !important;
        letter-spacing:1px !important;
        color:var(--dark) !important;
        text-decoration:none !important;
        border-bottom:1px solid rgba(0,0,0,0.06) !important;
        background:none !important;
    }
    .nav-links > li > a:hover,
    .nav-links > li > a.active { color:var(--gold); }
    .nav-links > li > a::after,
    .nav-links > li > a::before { display:none !important; content:none !important; }

    /* === MOBILE DROPDOWN ARROW === */
    .nav-dropdown {
        position:static !important;
        height:auto;
    }
    .nav-arrow {
        display:inline-block !important;
        font-size:0.65rem;
        transition:transform 0.3s ease;
        margin-left:auto;
    }
    .nav-dropdown.active > a .nav-arrow,
    .nav-dropdown.active .nav-arrow { transform:rotate(180deg); }

    /* === MOBILE DROPDOWN ITEMS (collapsible inline, neutral background) === */
    .dropdown-menu {
        display:none !important;
        position:static !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:none !important;
        margin:0 !important;
        padding:0 !important;
        background:#fafafa !important;
        box-shadow:inset 0 1px 0 rgba(0,0,0,0.04), inset 0 -1px 0 rgba(0,0,0,0.04) !important;
        border:none !important;
        border-radius:0 !important;
        min-width:100% !important;
        width:100% !important;
        list-style:none;
        z-index:auto;
    }
    .dropdown-menu::before,
    .dropdown-menu::after { display:none !important; content:none !important; }

    .nav-dropdown.active .dropdown-menu {
        display:block !important;
    }

    .dropdown-menu li {
        display:block;
        width:100%;
        height:auto;
        margin:0;
        padding:0;
        list-style:none;
    }
    .dropdown-menu li a {
        display:block !important;
        width:100% !important;
        padding:14px 28px 14px 50px !important;
        margin:0 !important;
        font-size:0.9rem !important;
        font-weight:500 !important;
        text-transform:none !important;
        letter-spacing:0.3px !important;
        color:var(--gray) !important;
        text-decoration:none !important;
        border-bottom:1px solid rgba(0,0,0,0.03) !important;
        background:transparent !important;
    }
    .dropdown-menu li a::before,
    .dropdown-menu li a::after { display:none !important; content:none !important; }
    .dropdown-menu li:last-child a { border-bottom:none !important; }
    /* Only show hover on devices that actually have hover (not touch) */
    @media (hover:hover) {
        .dropdown-menu li a:hover { color:var(--gold) !important; background:rgba(190,162,101,0.06) !important; }
    }
    .dropdown-menu li a.active { color:var(--gold) !important; }

    /* === HERO (centered on mobile) === */
    .hero { height:auto; min-height:80vh; }
    .hero-overlay {
        position:absolute !important;
        inset:0 !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        align-items:center !important;
        text-align:center !important;
        padding:60px 20px !important;
        background:linear-gradient(to bottom, rgba(26,26,26,0.55) 0%, rgba(26,26,26,0.4) 100%) !important;
    }
    .hero-content {
        max-width:100% !important;
        width:100% !important;
        display:block !important;
        text-align:center !important;
        margin:0 auto !important;
    }
    .hero h1 { font-size:2rem !important; line-height:1.25 !important; text-align:center !important; }
    .hero h1 br { display:none !important; }
    .hero-sub { font-size:0.75rem !important; text-align:center !important; display:block !important; }
    .hero-desc { text-align:center !important; }
    .hero-btns {
        display:block !important;
        text-align:center !important;
        width:100% !important;
        margin:1.5rem auto 0 !important;
        padding:0 !important;
    }
    .hero-btns a {
        display:block !important;
        width:240px !important;
        max-width:90% !important;
        margin:0 auto 12px auto !important;
        text-align:center !important;
        padding:14px 24px !important;
        font-size:0.78rem !important;
        box-sizing:border-box !important;
    }
    .hero-btns a:last-child { margin-bottom:0 !important; }
    .hero-arrows { bottom:20px !important; right:20px !important; }
    .hero-arrows button { width:42px !important; height:42px !important; }

    /* Sections */
    .diensten { padding:50px 5%; }
    .diensten-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .dienst-card { height:200px; }
    .dienst-overlay { padding:1rem; }
    .dienst-overlay i { font-size:1.4rem; margin-bottom:0.5rem; }
    .dienst-overlay h3 { font-size:1.1rem; margin-bottom:0.3rem; }
    .dienst-overlay p { font-size:0.7rem; line-height:1.4; }
    .over { grid-template-columns:1fr; padding:50px 5%; gap:24px; }
    .over-img { height:auto; }
    .over-img img { height:320px; }
    .over-tekst { padding:0; }
    .over-tekst h2 { font-size:1.8rem; }
    .vastgoed { padding:60px 5%; }
    .vastgoed-scroll { grid-template-columns:1fr; max-width:380px; margin:0 auto; }
    .section-head h2 { font-size:1.9rem; }
    .aankoop { grid-template-columns:1fr; }
    .aankoop-tekst { padding:50px 6%; }
    .aankoop-tekst h2 { font-size:1.8rem; }
    .aankoop-img { height:280px; }
    .aankoop-img img { height:100%; }
    .cta-parallax { padding:70px 5%; background-attachment:scroll; }
    .cta-content h2 { font-size:1.8rem; }
    .contact { padding:60px 5%; }
    .contact-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto; }

    /* Footer */
    .footer-main { grid-template-columns:1fr; gap:2rem; padding:45px 5% 35px; text-align:center; }
    .social-links { justify-content:center; }
    .footer-legal p { font-size:0.65rem; padding:0 10px; }

    /* Page header */
    .page-header { height:280px; }
    .page-header-content h1 { font-size:1.9rem; }
    .page-header-content p { font-size:0.85rem; }

    /* Properties / filter */
    .properties-section { padding:50px 5% 70px; }
    .properties-grid { grid-template-columns:1fr; max-width:380px; margin:0 auto; }
    .filter-bar { padding:24px 5%; }
    .filter-inner { gap:12px; }
    .filter-group { min-width:100%; }
    .filter-btn { width:100%; }

    /* Service pages */
    .service-intro { padding:60px 5%; }
    .service-intro-inner { grid-template-columns:1fr; gap:30px; }
    .service-intro-text h2 { font-size:1.8rem; }
    .service-intro-img img { height:280px; }

    /* Voordelen / Waarden */
    .voordelen { padding:60px 5%; }
    .voordelen-grid { grid-template-columns:1fr; max-width:380px; margin:0 auto; }
    .waarden { padding:60px 5%; }
    .waarden-grid { grid-template-columns:1fr 1fr; gap:14px; }
    .waarde-card { padding:32px 18px; }

    /* Contact page */
    .contact-page { padding:60px 5%; }
    .contact-page-inner { grid-template-columns:1fr; gap:24px; }
    .contact-map-col, .contact-map-col iframe { min-height:360px; }
    .contact-wrapper { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }

    /* About page */
    .about-section { padding:60px 5%; }
    .about-inner { grid-template-columns:1fr; gap:24px; }
    .about-image img { height:320px; }
    .about-text h2 { font-size:1.9rem; }

    /* Schatting */
    .schatting-section { padding:60px 5%; }
    .schatting-inner { grid-template-columns:1fr; gap:24px; }
    .schatting-form-card { position:static; padding:28px; }

    /* Werkwijze timeline */
    .stappen-timeline::before { left:24px; }
    .stap-timeline-nummer { width:50px; height:50px; font-size:1.2rem; }
    .stap-timeline-content h3 { font-size:1.15rem; }

    /* Property detail */
    .gallery-main { height:280px; }
    .gallery-thumbs img { width:60px; height:45px; }
    .detail-header { flex-direction:column; gap:10px; padding:20px 5% 16px; }
    .detail-price { font-size:1.8rem; }
    .detail-address { font-size:1.05rem; }
    .detail-actions { gap:14px; padding:12px 5%; }
    .detail-actions .action-share { margin-left:0; flex-wrap:wrap; }
    .detail-body { grid-template-columns:1fr; gap:30px; padding:30px 5% 40px; }
    .detail-sidebar { position:static; }
    .specs-grid { grid-template-columns:1fr; gap:16px; }
    .detail-section h2 { font-size:1.5rem; }
    .lightbox-nav { width:40px; height:40px; }
    .lightbox-close { width:40px; height:40px; top:14px; right:14px; }
    .photo-strip-item { width:160px; }
    .photo-strip-item img { height:120px; }
    .back-link { padding:20px 5% 30px; }

    /* CTA & buttons */
    .cta-btns { flex-direction:column; align-items:center; }
    .cta-btns a { width:100%; max-width:280px; justify-content:center; }
    .page-cta { padding:60px 5%; }
    .page-cta h2 { font-size:1.8rem; }
    .page-cta-btns { flex-direction:column; align-items:center; }
    .page-cta-btns a { width:100%; max-width:280px; justify-content:center; }
}

/* PHONE (480px and below) */
@media(max-width:480px) {
    .topbar { padding:6px 5%; }
    .topbar-left { font-size:0.7rem; }
    .topbar-left span:nth-child(2) { display:none; }
    .navbar { height:64px; padding:0 5%; }
    .logo img { height:44px; }
    .nav-links { top:64px; max-height:calc(100vh - 64px); }
    .hamburger { font-size:1.3rem; }

    .hero { height:60vh; min-height:380px; }
    .hero h1 { font-size:1.7rem; }
    .hero-sub { font-size:0.7rem; letter-spacing:2px; }
    .hero-content { max-width:100%; }
    .hero-btns { flex-direction:column; align-items:flex-start; gap:10px; width:100%; }
    .hero-btns a { width:100%; max-width:260px; justify-content:center; padding:13px 20px; font-size:0.72rem; }
    .hero-arrows { bottom:14px; right:14px; }
    .hero-arrows button { width:36px; height:36px; font-size:0.75rem; }

    .section-head h2 { font-size:1.6rem; }
    .over-tekst h2, .about-text h2, .about-text h2 { font-size:1.6rem; }
    .dienst-card { height:240px; }
    .dienst-overlay h3 { font-size:1.3rem; }
    .page-header { height:240px; }
    .page-header-content h1 { font-size:1.6rem; }
    .page-header-content p { font-size:0.8rem; }

    .waarden-grid { grid-template-columns:1fr; max-width:320px; }
    .footer-main { padding:35px 5% 25px; gap:1.5rem; }
    .footer-bottom { font-size:0.7rem; padding:16px 5%; }

    .contact-info-item { padding:16px 18px; gap:12px; }
    .contact-icon { width:38px; height:38px; }
    .contact-map-col, .contact-map-col iframe { min-height:300px; }

    .gallery-main { height:240px; }
    .detail-section h2 { font-size:1.3rem; }
    .photo-strip-item { width:140px; }
    .photo-strip-item img { height:100px; }
}

/* ============================================================
   PRINT — clean property fact-sheet
   ============================================================ */
@page { margin: 12mm; }

@media print {
    /* Kill everything that isn't the pand-fiche */
    .topbar,
    .navbar,
    .detail-actions,
    .back-link,
    .photo-strip-section,
    .lightbox,
    footer,
    #vh-cookie-banner,
    .gallery-arrows,
    .gallery-thumbs { display: none !important; }

    body { background: #fff !important; color: #000; font-size: 11pt; }
    a { color: #000; text-decoration: none; }

    /* Single-column layout for print */
    .detail-body { display: block !important; }
    .detail-sidebar { margin-top: 16pt; page-break-inside: avoid; }
    .contact-card-detail { box-shadow: none !important; border: 1px solid #ccc; }

    /* Gallery: show only the hero image, reasonable size */
    .detail-gallery { margin-bottom: 14pt; }
    .gallery-main { height: auto !important; max-height: 90mm; }
    .gallery-main img { width: 100%; height: auto; object-fit: contain; }

    /* Header */
    .detail-header { border-bottom: 1px solid #000; padding-bottom: 8pt; margin-bottom: 12pt; }
    .detail-price { color: #000 !important; }

    /* Sections: avoid awkward splits */
    .detail-section { page-break-inside: avoid; margin-bottom: 14pt; }
    .spec-section { page-break-inside: avoid; }
    .spec-table { width: 100%; border-collapse: collapse; }
    .spec-table td { padding: 3pt 6pt; border-bottom: 1px solid #ddd; }

    /* Kill animations / reveal state — everything must just show */
    * { animation: none !important; transition: none !important; }
    .property-card, .contact-card, .over-img, .over-tekst,
    .aankoop-tekst, .aankoop-img, [class*="-card"], [class*="-item"],
    [class*="-text"], [class*="-img"], [class*="-image"] {
        opacity: 1 !important;
        transform: none !important;
    }
}