/* Hepheastus V2 main stylesheet (clean consolidated) */
:root{
  --primary:#E4572E; --accent:#FF9838; --copper:#B87333; --blue:#2E9CCA;
  --light:#F5F5F5; --dark:#1C1C1C; --text:#1a1a1a; --muted:#6b7280;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
  /* Defaults for header accent sizing to prevent gaps */
  --header-accent-width:320px; --header-accent-extra:40px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;color:var(--text); background:var(--light); line-height:1.6}
h1,h2,h3{font-family:'Montserrat', Arial, sans-serif; margin:0 0 .5rem}
h1{font-size:clamp(2rem, 1.3rem + 2.5vw, 3rem); line-height:1.15}
h2{font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem)}
h3{font-size:1.25rem}
.container{width:min(1100px, 92vw); margin:0 auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,245,245,.9);
  backdrop-filter:saturate(180%) blur(8px);
  transition:background .25s ease;
}
.site-header::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none; z-index:0; background:
  linear-gradient(to right,
    transparent 0,
    transparent calc(var(--header-accent-width, 320px) + var(--header-accent-extra, 40px)),
    #eaeaea calc(var(--header-accent-width, 320px) + var(--header-accent-extra, 40px)),
    #eaeaea 100%
  )}
.site-header .header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0}
.site-header .header-accent{
  position:absolute; inset:auto 0 auto auto; top:0; bottom:0; left:0;
  width:var(--header-accent-width, 320px);
  background:#1c1c1c; z-index:0; pointer-events:none;
  transition:width .3s ease;
}
.site-header .header-accent::after{content:""; position:absolute; top:0; left:var(--header-accent-width, 320px); transform:translateX(-50%); height:100%; aspect-ratio:1/1; background:#1c1c1c; border-radius:50%; transition:left .3s ease;}
.site-header .header-inner, .site-header .brand, .site-header .nav, .site-header .header-ctas, .site-header .nav-toggle{position:relative; z-index:1}

/* Modus wanneer mobiel menu open is: accent vult hele header, hamburger wordt licht */
@media (max-width: 900px){
  .site-header.is-mobile-open{background:#1c1c1c; color:#f5f5f5;}
  .site-header.is-mobile-open .header-accent{
    width:100vw;
  }
  .site-header.is-mobile-open .header-accent::after{
    left:100vw;
  }
  .site-header.is-mobile-open .nav-toggle{
    color:#f5f5f5;
  }
}

.mobile-nav{position:relative; z-index:40; display:none; background:#1c1c1c; color:#f5f5f5; border-bottom:1px solid #111}
.mobile-nav .container{display:flex; flex-direction:column; gap:.25rem; padding:.5rem 0 .75rem}
.mobile-nav a{color:inherit; text-decoration:none; padding:.35rem 0; font-weight:500}
.mobile-nav a:hover{opacity:.85}
.mobile-nav.open{display:block}

.brand .logo{height:40px}
.logo.small{height:28px}
.logo.medium{height:80px;margin-top:-30px;margin-bottom:-30px}
.logo.mark{height:65px;margin-top:-12px;margin-bottom:-12px}
.logo-text{font-weight:800; font-size:1.25rem}
.nav a, .footer-nav a{margin:0 .5rem; text-decoration:none; color:inherit; font-weight:500}
.nav{display:flex; align-items:center}
.header-ctas{display:flex; gap:.5rem}
.nav-toggle{display:none}

/* Buttons */
.btn{display:inline-block; padding:.7rem 1rem; border-radius:var(--radius); text-decoration:none; border:1px solid transparent; box-shadow:var(--shadow)}
.btn-primary{background:var(--primary); color:white; border-color:var(--primary)}
.btn-outline{background:white; color:var(--primary); border-color:var(--primary)}
.btn-ghost{background:transparent; color:var(--primary)}

/* Badges */
.badge{display:inline-flex; align-items:center; justify-content:center; padding:.15rem .6rem; border-radius:999px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border:1px solid transparent; vertical-align:middle; white-space:nowrap}
.badge-discount{background:rgba(228,87,46,.08); color:var(--primary); border-color:rgba(228,87,46,.45)}

/* Sections */
.section{padding:64px 0}
.section-light{background:var(--light); color:var(--text)}
.section-dark{background:var(--dark); color:#f7f7f7}
.section-dark .muted{color:#c7c7c7}
.section-light .muted{color:var(--muted)}

/* Hero */
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center}
.hero-art img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}

/* USPs */
.usps{list-style:none; padding:0; margin:1rem 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem}
.usps li{background:white; border-radius:12px; padding:.4rem .6rem; box-shadow:var(--shadow); color:#111}
.usps .check{color:var(--blue); margin-right:.4rem}

/* Specs bullets */
#mini-showcase .slide-info .specs{list-style:none; padding-left:0}
#mini-showcase .slide-info .specs li{position:relative; padding-left:1.4rem}
#mini-showcase .slide-info .specs li::before{content:""; position:absolute; left:0; top:0.28em; width:0.7em; height:0.7em; border:3px solid var(--blue); border-radius:50%; background:transparent; box-sizing:border-box}
.specs{list-style:none; padding-left:0; margin:.5rem 0 0}
.specs li{position:relative; padding-left:1.4rem}
.specs li::before{content:""; position:absolute; left:0; top:0.28em; width:0.7em; height:0.7em; border:3px solid var(--blue); border-radius:50%; background:transparent; box-sizing:border-box}
#build-van-de-maand .specs li::before{top:0.2em; width:1em; height:1em; border:0; border-radius:0; background:url('../img/Fire.svg') center / contain no-repeat}
#portfolio .specs li::before{top:0.2em; width:1em; height:1em; border:0; border-radius:0; background:url('../img/Fire.svg') center / contain no-repeat}

/* Two-col and KV */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
.two-col .media img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}
.kv-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1rem}
.kv{background:rgba(255,255,255,.06); padding:1rem; border-radius:12px; border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:.2rem}
.section-light .kv{background:#fff; border:1px solid #eee; color:#111}
.section-dark .kv{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#eee}
.kv strong{display:block; font-weight:700}
.kv span{display:block; color:var(--muted)}
.section-dark .kv span{color:#c7c7c7}

/* Cards and grids */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{background:#fff; color:#111; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
.section-dark .card{background:#111; color:#eee; border:1px solid rgba(255,255,255,.08)}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}

/* Gallery */
.gallery img{width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow)}
.gallery .gallery-item{position:relative; display:block; overflow:hidden; border-radius:12px}
.gallery .gallery-item .specs-content{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:.25rem; padding:.75rem; background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.08)); color:#fff; opacity:0; transition:opacity .2s ease}
.gallery .gallery-item:hover .specs-content, .gallery .gallery-item:focus-within .specs-content{opacity:1}
.gallery .gallery-item .specs-content h3{margin:0 0 .25rem; font-size:1rem}
.gallery .gallery-item .specs-content .specs{margin:0; font-size:.9rem}
.gallery .gallery-item{aspect-ratio:var(--gallery-aspect, 4/3)}
.gallery .gallery-item img{width:100%; height:100%; object-fit:cover}

/* Lightbox overlay & dialog */
.lightbox-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.85);
  z-index:9999;
}
.lightbox-dialog{
  position:relative;
  display:grid;
  grid-template-columns:2fr 1.2fr;
  gap:1rem;
  max-width:min(1100px, 96vw);
  max-height:92vh; /* iets ruimer */
  padding:1rem;
  background:#111;
  color:#f5f5f5;
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.lightbox-media{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-media img{
  display:block;
  max-width:100%;
  max-height:80vh; /* hou altijd ruimte over voor titel/close */
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  background:#000;
}
.lightbox-info{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  overflow:auto;
}
.lightbox-info h3{margin:0; font-size:1.1rem}
.lightbox-specs{font-size:.95rem}
.lightbox-specs ul{margin:.25rem 0 0; padding-left:1rem}
.lightbox-specs li{margin-bottom:.25rem}
.lightbox-close{
  position:absolute;
  top:.6rem;
  right:.6rem;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.7);
  color:#fff;
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
}
.lightbox-close:hover{background:rgba(0,0,0,.9)}

@media (max-width: 900px){
  .lightbox-overlay{
    align-items:flex-start;
  }
  .lightbox-dialog{
    grid-template-columns:1fr;
    max-width:95vw;
    max-height:100vh;
    height:100vh;
    margin:0;
    overflow:auto; /* hele dialog scrollbaar op mobiel */
  }
  .lightbox-media{
    flex:0 0 auto;
  }
  .lightbox-media img{
    max-height:65vh; /* iets lager zodat er vaker specs onder passen */
  }
  .lightbox-info{
    flex:0 0 auto;
    max-height:none;
  }
}

/* Pricing */
.price-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:stretch}
.price-card{background:white; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); color:#111; border:1px solid #eee}
.price-card .price{font-size:1.6rem; font-weight:800; color:var(--primary)}
.price-card.featured{border-color:var(--primary); transform:translateY(-4px)}
.section-dark .price-card{background:#111; color:#eee; border-color:#222}
.price-card ul{list-style:none; padding-left:0; margin:.75rem 0 0}
.price-card ul li{position:relative; padding-left:1.4rem}
.price-card ul li::before{content:""; position:absolute; left:0; top:0.35em; width:0.7em; height:0.7em; border:3px solid var(--blue); border-radius:50%; background:transparent; box-sizing:border-box}

/* Contact */
.contact-form{display:grid; gap:1rem; margin-top:.5rem}
.section-dark .contact-form{background:#111; border:1px solid #222; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
.section-light .contact-form{background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
.contact-form .form-actions{padding-top:.5rem; border-top:1px solid rgba(0,0,0,.06)}
.section-dark .contact-form .form-actions{border-top:1px solid #222}
.form-row{display:grid; gap:.4rem}
.form-row.two{grid-template-columns:1fr 1fr; gap:1rem}
label{font-weight:600}
input, select, textarea{padding:.7rem .8rem; border-radius:12px; border:1px solid #ddd; background:#fff; color:#111; width:100%; transition:border-color .2s ease, box-shadow .2s ease}
input:focus, select:focus, textarea:focus{outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,156,202,.15)}
input::placeholder, textarea::placeholder{color:#9ca3af}
.section-dark input, .section-dark select, .section-dark textarea{background:#0f0f0f; border-color:#222; color:#eee}
.section-dark input::placeholder, .section-dark textarea::placeholder{color:#9ca3af}
input.hp{display:none!important}
.form-actions{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.form-actions .btn[type="submit"]{margin-right:.5rem}
.form-note{margin:0; font-size:.9rem; opacity:.8}
.contact-details{margin-top:2rem}

/* Contact - enhanced dropdown styling (scoped) */
.contact-form .form-select{
  -webkit-appearance:none; /* Safari/Chrome */
  -moz-appearance:none;    /* Firefox */
  appearance:none;
  padding-right:2.5rem; /* space for chevron */
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:14px 14px;
  cursor:pointer;
}
/* Hide legacy arrow on old IE/Edge */
.contact-form .form-select::-ms-expand{display:none}

/* Light variant */
.section-light .contact-form .form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.section-light .contact-form .form-select:hover{border-color:#cfcfcf}

/* Dark variant */
.section-dark .contact-form .form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23c7c7c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.section-dark .contact-form .form-select:hover{border-color:#2a2a2a}

/* Focus state keeps site-wide focus ring, just ensure arrow stays visible */
.contact-form .form-select:focus{background-position:right .9rem center}

/* Contact - custom select UI (scoped) */
.contact-form .cs-hidden{position:absolute!important; opacity:0!important; pointer-events:none!important; width:0!important; height:0!important; margin:0!important; padding:0!important; border:0!important}
.contact-form .custom-select{position:relative; width:100%}
.contact-form .cs-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; text-align:left;
  padding:.7rem .8rem; padding-right:2.5rem; /* room for chevron */
  border-radius:12px; border:1px solid #ddd; background:#fff; color:#111;
  font:inherit; line-height:1.4; cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  position:relative;
}
.contact-form .cs-trigger:focus{outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,156,202,.15)}
.contact-form .cs-trigger:hover{border-color:#cfcfcf}
/* Chevron */
.contact-form .cs-trigger::after{
  content:""; position:absolute; right:.9rem; top:50%; transform:translateY(-50%) rotate(0deg);
  width:14px; height:14px; background-repeat:no-repeat; background-size:14px 14px; background-position:center;
}
/* Rotate chevron when open */
.contact-form .custom-select.open .cs-trigger::after{transform:translateY(-50%) rotate(180deg)}

/* List panel */
.contact-form .cs-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#fff; color:#111; border:1px solid #eee; border-radius:12px; box-shadow:var(--shadow);
  max-height:260px; overflow:auto; padding:6px; margin:0; list-style:none; display:none; z-index:60;
}
.contact-form .custom-select.open .cs-list{display:block}
.contact-form .cs-list:focus{outline:0; box-shadow:0 0 0 3px rgba(46,156,202,.15)}

/* Options */
.contact-form .cs-option{padding:.6rem .75rem; border-radius:10px; cursor:pointer; user-select:none}
.contact-form .cs-option[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.contact-form .cs-option:hover{background:#f7f7f7}
.contact-form .cs-option[aria-selected="true"]{background:rgba(46,156,202,.12)}

/* Dark theme variants */
.section-dark .contact-form .cs-trigger{background:#0f0f0f; border-color:#222; color:#eee}
.section-dark .contact-form .cs-trigger:hover{border-color:#2a2a2a}
.section-dark .contact-form .cs-list{background:#141414; color:#eee; border-color:#222}
.section-dark .contact-form .cs-option:hover{background:#1c1c1c}
.section-dark .contact-form .cs-option[aria-selected="true"]{background:rgba(46,156,202,.22)}

/* Chevron theme colors */
.section-light .contact-form .cs-trigger::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.section-dark .contact-form .cs-trigger::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23c7c7c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Footer */
.site-footer{background:#0e0e0e; color:#ccc; padding:24px 0; border-top:1px solid #111}
.footer-grid{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}

/* Mini-showcase carousel */
#mini-showcase, #mini_showcase{position:relative; --container-w:min(1100px,92vw); --caro-btn-size:54px; --caro-btn-offset-y:12px}
#mini-showcase .carousel, #mini_showcase .carousel{position:relative; overflow:hidden}
#mini_showcase .carousel-track, #mini-showcase .carousel-track{display:flex; will-change:transform; transition:transform .35s ease; position:relative; z-index:1}
#mini-showcase .slide, #mini_showcase .slide{flex:0 0 100%; display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:center; padding:1rem}
#mini-showcase .slide-media img, #mini_showcase .slide-media img{width:100%; height:auto; display:block; border-radius:12px; box-shadow:var(--shadow)}
#mini-showcase .carousel-nav, #mini_showcase .carousel-nav{position:absolute; top:calc(50% + var(--caro-btn-offset-y)); transform:translateY(-50%); width:var(--caro-btn-size); height:var(--caro-btn-size); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid rgba(0,0,0,.08); background:rgba(28,28,28,.85); color:#F5F5F5; font-size:0; line-height:1; z-index:20; transition:background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; backdrop-filter:saturate(140%) blur(2px); pointer-events:auto}
#mini_showcase .carousel-nav::after, #mini-showcase .carousel-nav::after{content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; transform:translate(-50%,-50%); background-repeat:no-repeat; background-position:center; background-size:16px 16px}
#mini_showcase .carousel-nav.prev::after, #mini-showcase .carousel-nav.prev::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M7.5 2.5 L4.5 6 L7.5 9.5' stroke='%23F5F5F5' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transform:translate(calc(-50% - 0.5px), -50%)}
#mini_showcase .carousel-nav.next::after, #mini-showcase .carousel-nav.next::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 L7.5 6 L4.5 9.5' stroke='%23F5F5F5' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transform:translate(calc(-50% + 0.5px), -50%)}
#mini-showcase .carousel-nav:hover, #mini_showcase .carousel-nav:hover{background:rgba(28,28,28,.92); transform:translateY(-50%) scale(1.05); border-color:rgba(0,0,0,.16); box-shadow:0 10px 25px rgba(0,0,0,.25)}
#mini-showcase .carousel-nav:focus-visible, #mini_showcase .carousel-nav:focus-visible{outline:0; box-shadow:0 0 0 3px rgba(46,156,202,.35)}
#mini-showcase .carousel-nav.prev, #mini_showcase .carousel-nav.prev{left:clamp(.5rem, calc((100vw - var(--container-w)) / 4), 6rem)}
#mini-showcase .carousel-nav.next, #mini_showcase .carousel-nav.next{right:clamp(.5rem, calc((100vw - var(--container-w)) / 4), 6rem)}

/* Responsive tweaks for mini-showcase */
@media (max-width: 800px){
  #mini-showcase .slide, #mini_showcase .slide{grid-template-columns:1fr}
  #mini-showcase .carousel-nav, #mini_showcase .carousel-nav{width:48px; height:48px}
  #mini_showcase .carousel-nav::after, #mini-showcase .carousel-nav::after{width:14px; height:14px; background-size:14px 14px}
}

@media (prefers-reduced-motion: reduce){
  #mini_showcase .carousel_track{transition:none!important}
}

/* Portfolio carousel */
#portfolio{position:relative; --container-w:min(1100px,92vw); --caro-btn-size:54px; --caro-btn-offset-y:12px}
#portfolio .portfolio-carousel{position:relative; overflow:hidden}
#portfolio .portfolio-carousel .carousel-track{display:flex; will-change:transform; transition:transform .35s ease}
#portfolio .portfolio-carousel .slide{flex:0 0 100%; padding:.25rem 0}
#portfolio .carousel-nav{position:absolute; top:calc(50% + var(--caro-btn-offset-y)); transform:translateY(-50%); width:var(--caro-btn-size); height:var(--caro-btn-size); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid rgba(255,255,255,.25); background:rgba(28,28,28,.6); color:#F5F5F5; font-size:0; line-height:1; z-index:20; transition:background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; backdrop-filter:saturate(140%) blur(2px)}
#portfolio .carousel-nav::after{content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; transform:translate(-50%,-50%); background-repeat:no-repeat; background-position:center; background-size:16px 16px}
#portfolio .carousel-nav.prev::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M7.5 2.5 L4.5 6 L7.5 9.5' stroke='%23F5F5F5' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#portfolio .carousel-nav.next::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 L7.5 6 L4.5 9.5' stroke='%23F5F5F5' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#portfolio .carousel-nav:hover{background:rgba(28,28,28,.82); transform:translateY(-50%) scale(1.05); border-color:rgba(255,255,255,.35)}
#portfolio .carousel-nav:focus-visible{outline:0; box-shadow:0 0 0 3px rgba(46,156,202,.35)}
#portfolio .carousel-nav.prev{left:clamp(.5rem, calc((100vw - var(--container-w)) / 4), 6rem)}
#portfolio .carousel-nav.next{right:clamp(.5rem, calc((100vw - var(--container-w)) / 4), 6rem)}

/* Jaarplan checkbox styling */
.jaarplan-checkbox{display:flex; align-items:center; gap:.55rem; font-weight:600; cursor:pointer; user-select:none; line-height:1.3}
.jaarplan-checkbox input{position:absolute; opacity:0; width:0; height:0; margin:0; padding:0}
.jaarplan-checkbox .box{width:22px; height:22px; border:2px solid #ddd; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; background:#fff; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; flex-shrink:0}
.section-dark .jaarplan-checkbox .box{background:#0f0f0f; border-color:#222}
.jaarplan-checkbox:hover .box{border-color:#cfcfcf}
.section-dark .jaarplan-checkbox:hover .box{border-color:#2a2a2a}
.jaarplan-checkbox input:focus + .box{outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,156,202,.25)}
.jaarplan-checkbox input:checked + .box{background:var(--primary); border-color:var(--primary); color:#fff}
.jaarplan-checkbox input:checked + .box{transform:scale(1.05)}
.jaarplan-checkbox input:checked + .box::after{content:""; width:14px; height:14px; background-repeat:no-repeat; background-position:center; background-size:14px 14px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Disabled state (if ever used) */
.jaarplan-checkbox input:disabled + .box{opacity:.5; cursor:not-allowed}
.jaarplan-checkbox .jp-label{font-weight:600;}
/* Compact spacing when inside form-row */
.form-row .jaarplan-checkbox{margin-top:.25rem}

/* Responsive */
@media (max-width: 900px){
  .hero-grid, .two-col{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .cards-3, .price-row{grid-template-columns:1fr}
  .usps{grid-template-columns:1fr}
  .kv-grid{grid-template-columns:1fr}
  .nav{display:none}
  .nav-toggle{display:block; background:transparent; border:0; font-size:1.5rem}
  .header-ctas{display:none}
  /* Ensure mobile dropdown is only visible on mobile */
  .mobile-nav{display:none}
  .mobile-nav.open{display:block}
}
@media (max-width: 700px){
  .form-row.two{grid-template-columns:1fr}
}
@media (max-width: 500px){
  .form-actions .btn{width:100%}
  .form-note{width:100%}
}
@media (prefers-reduced-motion: reduce){
  #mini_showcase .carousel_track{transition:none!important}
  #portfolio .portfolio-carousel .carousel-track{transition:none!important}
}