/* ========= Supabase aanvraag notice (start-project) ========= */
.notice{
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  padding: 12px 14px;
  border-radius: 14px;
  margin: 0 0 16px 0;
  font-size: 0.96rem;
}
body.dark .notice{
  border-color: rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
}
.notice.ok{ border-color: rgba(0, 200, 140, 0.35); }
.notice.err{ border-color: rgba(255, 90, 90, 0.45); }

#projectWizard form.is-busy{ opacity: 0.85; pointer-events: none; }

/* JABO – calm, high-end engineering */
:root{
  --topbar-h: 72px;
  --footer-h: 88px;
  /* Used for landing hero artwork inset (adds "margin" around the big wireframe on wide screens) */
  --hero-art-pad: clamp(18px, 5.2vw, 140px);
  --fab-offset: 18px;
  --brand: #0b1a36;
  --bg: #ffffff;
  --ink: #0b1b3a;
  --muted: rgba(11,27,58,0.72);
  --line: rgba(11,27,58,0.10);

  --accent: #ff7a00;
  --accent2: #ffb000;

  --surface: rgba(255,255,255,0.86);
  --surface2: rgba(255,255,255,0.70);
  --shadow: 0 18px 40px rgba(0,0,0,0.10);

  --radius: 18px;
  --radius2: 24px;

  --max: 1120px;
  --pad: clamp(18px, 4vw, 36px);

  --grid-alpha: 0.035;
}

/* =====================================================================
   v78 – Landing hero: ALWAYS fullscreen (no scroll) + responsive “breathing room”
   - No page scroll on index
   - Hero area is exactly between fixed header and fixed footer
   - Artwork + surrounding space scale with screen size (no scroll)
   ===================================================================== */

html.is-landing, html.is-landing body,
body.is-landing{
  height: 100% !important;
  overflow: hidden !important; /* hard lock */
}

/* On landing we don't need global body padding for footer; hero already subtracts it */
html.is-landing body{ padding-bottom: 0 !important; }

/* Pin the hero viewport so it can never create extra page height */
body.is-landing main.landing-hero{
  position: fixed !important;
  top: var(--topbar-h) !important;
  bottom: var(--footer-h) !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Responsive breathing room around the artwork (the space stays inside the pinned hero) */
body.is-landing{ --hero-art-pad: clamp(14px, 4.8vw, 120px); }

/* Artwork scales WITH the available hero viewport (incl. padding) */
body.is-landing .hero-art{
  position: absolute !important;
  inset: var(--hero-art-pad) !important; /* creates margin without affecting layout */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  pointer-events: none;
  z-index: 2;
}

/* Keep the hero card fully visible on short viewports */
@media (max-height: 780px){
  body.is-landing .landing-hero > .container{ padding-top: clamp(10px, 2.6vh, 26px) !important; }
  body.is-landing .hero-panel{ padding: clamp(16px, 2.6vw, 26px) !important; }
  body.is-landing .hero-panel h1{ font-size: clamp(26px, 3.0vw, 40px) !important; }
  body.is-landing .hero-panel p{ font-size: clamp(12px, 1.2vw, 14px) !important; }
}


/* === Landing page (index) hard lock: no scroll, hero fits between fixed header + footer === */
html.is-landing, html.is-landing body{
  height: 100% !important;
  overflow: hidden !important;
}

/* On small/mobile screens the "no-scroll landing" causes collisions (footer + FABs + hero).
   Allow normal scrolling so content can breathe and fixed elements don't stack on top of the hero. */
@media (max-width: 640px), (max-height: 740px){
  html.is-landing, html.is-landing body{
    height: auto !important;
    overflow: auto !important;
  }

  /* Hero wireframe sizing: current min 900px is too big on mobile */
  .landing-hero::before{
    background-position: center 46% !important;
    background-size: 120vw auto !important;
    opacity: .92;
  }

  /* Hero card: tighter + avoid being covered by floating actions */
  .hero-panel, .hero-card{
    width: min(92vw, 520px) !important;
    padding: 18px !important;
    border-radius: 20px !important;
  }
  .hero-title{ font-size: clamp(26px, 8.2vw, 38px) !important; }
  .hero-actions{ gap: 8px !important; }

  /* Header: keep CTA usable and prevent crowding */
  .topbar{ padding: 10px 12px !important; gap: 10px !important; }
  .brand-logo{ height: 44px !important; }
  .nav-actions .btn-primary{ padding: 10px 12px !important; }

  /* Floating WhatsApp/Mail: smaller + sit in the true bottom-right */
  :root{
    --fab-size: clamp(44px, 12vw, 56px);
    --fab-right: 14px;
    --fab-gap: 14px;
    --fab-stack-gap: 12px;
  }
  a.wa-float{ bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
  a.mail-float{ bottom: calc(14px + env(safe-area-inset-bottom) + var(--fab-size) + var(--fab-stack-gap)) !important; }
}

/* Prevent horizontal jiggle on small devices */
html, body{ max-width: 100%; overflow-x: hidden; }


body.dark{
  --bg: #071126;
  --ink: #f7f9ff;
  --muted: rgba(247,249,255,0.72);
  --line: rgba(247,249,255,0.12);

  --surface: rgba(255,255,255,0.06);
  --surface2: rgba(255,255,255,0.04);
  --shadow: 0 18px 40px rgba(0,0,0,0.55);

  --grid-alpha: 0.05;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ min-height: 100vh; display:flex; flex-direction:column;
  padding-bottom: var(--footer-h);
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.45;
  font-size: 16px;
  /* subtle engineering grid */
  background-image:
    linear-gradient(to right, rgba(255,255,255,var(--grid-alpha)) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,var(--grid-alpha)) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center;
  padding-bottom: var(--footer-h);
}

/* Fixed footer bar */
footer.footer, .footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  margin-top: 0;
  border-top: 1px solid var(--line);
  padding: 12px var(--pad);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

main{ flex: 1 0 auto; }

/* Links */
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* Layout */
.container{
width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}


.section{
  padding: clamp(56px, 8vh, 96px) 0;
  position: relative;
}
.section--tint{
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02));
}
body.dark .section--tint{
  background: transparent;
}

/* Topbar */
.topbar{
  padding: 14px var(--pad);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 40;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px var(--pad);
}
.brand{  
  display:flex; align-items:center; gap:12px;
 flex: 0 0 auto; }
.brand-logo{ height: clamp(40px, 4.2vw, 56px); width: auto; display:block; object-fit: contain; }
.brand-text{
  font-weight: 800;
  letter-spacing: 0.01em;
}
.brand-sub{
  font-weight: 700;
  opacity: 0.72;
  margin-left: 6px;
}
.nav{
  display:flex; gap: 18px;
}
.nav a{
  /* Make top navigation labels (Diensten / Werkwijze / Contact) more prominent */
  font-size: 16px;
  opacity: 0.82;
  padding: 8px 10px;
  border-radius: 999px;
}
.nav a:hover{
  background: rgba(255,122,0,0.10);
  text-decoration: none;
}
.nav-actions{
  display:flex; gap: 10px; align-items:center;
}

/* Buttons */
.btn{
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,0.10); text-decoration:none; }
.btn:active{ transform: translateY(0px); }
.btn-primary{
  border-color: rgba(255,122,0,0.45);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #0b1b3a;
}
body.dark .btn-primary{ color: #0b1b3a; }
.btn-ghost{
  background: transparent;
}
.btn-block{ width: 100%; }

/* Sections head */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 24px;
}
.section-title{
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 0;
  font-weight: 850;
  letter-spacing: 0.01em;
  position: relative;
}
.section-title::after{
  content:"";
  display:block;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  margin-top: 10px;
  opacity: 0.95;
}
.muted{ color: var(--muted); }
.small{ font-size: 13px; }
.lead{ font-size: 19px; }

/* Hero */
.section--full{ padding-top: clamp(44px, 7vh, 76px); padding-bottom: 0; }
.hero{
  /* Needed because .hero::before is absolutely positioned.
     Without this, the overlay can anchor to the page/viewport and create
     a dark "band" behind other sections when scrolling (seen on annotate). */
  position: relative;
  overflow: hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(16px, 3.8vw, 44px);
  align-items: start;
}
.hero-copy{ padding-bottom: 22px; }
.hero-kicker{
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  opacity: 0.72;
  margin: 0 0 12px 0;
}
.hero-title{
  letter-spacing: -0.015em;
  font-weight: 900;
  line-height: 1.06;
  margin: 0 0 14px 0;
  font-size: clamp(34px, 3.2vw, 48px);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  max-width: 100%;
  display: block;
}
.hero-accent{
  display:inline-block;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.hero-accent::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  height: 10px;
  bottom: -10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,122,0,0.0), rgba(255,122,0,0.35), rgba(255,176,0,0.0));
}
.hero-muted{ opacity: 0.9; }
.hero-sub{
  margin: 0 0 18px 0;
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--muted);
  max-width: 62ch;
}
.hero-sub strong{ color: var(--ink); }
body.dark .hero-sub strong{ color: var(--ink); }

.hero-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 14px 0; }

.hero-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
}
.meta-item{
  display:flex; align-items:center; gap: 10px;
  font-size: 14px;
  color: var(--muted);
}
.meta-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 20px rgba(255,122,0,0.25);
}

/* Side panel */
.hero-side{ position: relative; }
.side-panel{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 18px;
  position: sticky;
  top: 88px;
}
.side-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 10px;
}
.side-title{ font-weight: 900; letter-spacing: .01em; }
.side-tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,122,0,0.12);
  border: 1px solid rgba(255,122,0,0.18);
}
.side-list{ margin: 10px 0 14px 18px; color: var(--muted); }
.side-list li{ margin: 6px 0; }
.side-cta{ margin-top: 12px; }

.hero-graphic{
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding: 12px 0 0 0;
}
.hero-graphic svg{ width:100%; height: 120px; display:block; opacity: .95; }

/* Cards */
.grid{ display:grid; gap: 14px; }
.cards{ display:grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.card{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.07);
  position: relative;
}
body.dark .card{ box-shadow: 0 10px 26px rgba(0,0,0,0.45); }

/* Service card icons (diensten) */
.card.link-card{ position: relative; display:block; color: inherit; text-decoration: none; }
.card.link-card:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.card-ico{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  background-color: var(--ink);
  opacity: 0.45;
  -webkit-mask: var(--card-ico) no-repeat center / contain;
  mask: var(--card-ico) no-repeat center / contain;
  pointer-events: none;
  z-index: 2;
}
body.dark .card-ico{ opacity: 0.55; }
.card.link-card:hover .card-ico{ opacity: 0.85; }

/* Service card thumbnails (diensten) */
.card.link-card.svc .svc-thumb{
  margin: -6px -6px 12px;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--line);
  background: var(--surface2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 112px;
  opacity: 0.95;
}
@media (max-width: 920px){
  .card.link-card.svc .svc-thumb{ height: 94px; }
}

/* Light theme thumbnails */
body:not(.dark) .card.svc-doorbraak .svc-thumb{ background-image: url('assets/examples/doorbraak-zwart.png'); }
body:not(.dark) .card.svc-woningbouw .svc-thumb{ background-image: url('assets/examples/woningbouw-zwart.png'); }
body:not(.dark) .card.svc-utiliteit .svc-thumb{ background-image: url('assets/examples/staalbouw-zwart.png'); }
body:not(.dark) .card.svc-houtbouw .svc-thumb{ background-image: url('assets/examples/houtbouw-zwart.png'); }

/* Dark theme thumbnails */
body.dark .card.svc-doorbraak .svc-thumb{ background-image: url('assets/examples/doorbraak-wit.png'); }
body.dark .card.svc-woningbouw .svc-thumb{ background-image: url('assets/examples/woningbouw-wit.png'); }
body.dark .card.svc-utiliteit .svc-thumb{ background-image: url('assets/examples/staalbouw-wit.png'); }
body.dark .card.svc-houtbouw .svc-thumb{ background-image: url('assets/examples/houtbouw-wit.png'); }


.card-media{
  margin: 12px 0 10px;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--line);
  background: var(--surface2);
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  min-height: clamp(140px, 18vw, 220px);
}
.card-illu{
  width: 100%;
  height: clamp(140px, 18vw, 220px);
  object-fit: contain;
  opacity: 0.94;
}
body.dark .card-illu{ opacity: 0.95; }
@media (max-width: 920px){
  .card-illu{ height: 110px; }
}
.card-kicker{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--muted);
}
.card h3{ margin: 10px 0 8px 0; }
.card p{ margin: 0; color: var(--muted); }

/* Steps */
.steps{
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 12px;
}
.step{
  display:grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  border: 1px solid var(--line);
  background: var(--surface2);
  border-radius: var(--radius);
  padding: 16px;
}
.step-no{
  width: 44px; height: 44px;
  border-radius: 16px;
  position: relative;
  display:grid;
  place-items:center;
  font-weight: 900;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #0b1b3a;
}
.step-no .step-ico{ width: 24px; height: 24px; }
.step-no .step-badge{
  position:absolute;
  right:-6px;
  bottom:-6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  background: rgba(11,27,58,.92);
  color: #fff;
  border: 2px solid color-mix(in srgb, #fff 20%, transparent);
}
.step-body h3{ margin: 0 0 6px 0; }
.step-body p{ margin: 0; color: var(--muted); }

/* Panels / forms */
.panel{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
}
.panel--soft{ background: var(--surface2); }
.panel--success{ border-color: rgba(32, 160, 80, 0.35); }
.panel--error{ border-color: rgba(220, 80, 80, 0.35); }

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
label span{ display:block; font-weight: 800; font-size: 13px; margin: 0 0 6px 2px; opacity: 0.9; }
input, select, textarea{
  width:100%;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  color: var(--ink);
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
}
textarea{ resize: vertical; }
input:focus, select:focus, textarea:focus{
  border-color: rgba(255,122,0,0.55);
  box-shadow: 0 0 0 4px rgba(255,122,0,0.14);
}
.hint{ display:block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.span-2{ grid-column: span 2; }
.checkbox{ display:flex; gap: 12px; align-items:flex-start; }
.checkbox input{ width: 18px; height: 18px; margin-top: 2px; }
.form-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Contact */
.contact-grid{ grid-template-columns: 1fr; }
@media (min-width: 900px){
  .contact-grid{ grid-template-columns: 1fr 1fr; align-items: start; }
  .contact-grid > .panel{ height: 100%; }
}

.contact-lines{ display:grid; gap: 10px; margin-top: 12px; }
/* Contact details alignment */
.contact-lines > div{
  display:grid;
  grid-template-columns: clamp(84px, 18vw, 120px) 1fr;
  column-gap: 14px;
  align-items:center;
}
.contact-lines > div > span:last-child{
  min-width:0;
}
.contact-lines a{ word-break: break-word; }

/* Contact: keep labels perfectly aligned inside the grid (no extra pill margin) */
.contact-lines .pill{ margin-right: 0; }

.pill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 10px;
}

/* Contact pills should align as a grid label, not push the column */
.contact-lines .pill{ margin-right: 0; }
.footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;

  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;

  /* Visual */
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Spacing / sizing */
  padding: 12px var(--pad);
}

/* WhatsApp FAB */
.wa-fab{
  position: fixed;
  right: 18px;
  bottom: calc(var(--footer-h) + var(--fab-offset) + env(safe-area-inset-bottom));
  z-index: 60;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: #25D366;
  color: #0b1b3a;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.10);
}
.wa-fab:hover{ transform: translateY(-1px); text-decoration:none; }
.wa-ico{
  width: 36px; height: 36px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.20);
  border-radius: 999px;
  color: #0b1b3a;
}
.wa-label{
  font-weight: 900;
  letter-spacing: .02em;
}
@media (max-width: 520px){
  .wa-label{ display:none; }
  .wa-fab{ padding: 12px; }
}

@media (max-width: 768px){
  .wa-fab{ bottom: calc(120px + env(safe-area-inset-bottom)); right: 16px; }
}

/* Responsive */
@media (max-width: 980px){
  .nav{ display:none; }
  .hero-grid{ grid-template-columns: 1fr; }
  .side-panel{ position: relative; top: 0; }
  .cards{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
@media (min-width: 900px){
  .contact-grid{ grid-template-columns: 1fr 1fr; align-items: start; }
  .contact-grid > .panel{ height: 100%; }
}

}
@media (max-width: 780px){
  .form-grid{ grid-template-columns: 1fr; }
  .span-2{ grid-column: span 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; transition: none !important; }
}


/* Footer lock-up */

/* === Fixed footer bar (both themes) === */
footer.footer, .footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 12px var(--pad);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Fixed, premium footer bar (both themes) */
footer.footer, .footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  margin-top: 0;
  border-top: 1px solid var(--line);
  padding: 12px var(--pad);
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  flex-wrap: wrap;
}
.footer-lockup{
  display:flex;
  align-items:center;
  gap: 16px;
}
.footer-logo{
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.footer-name{ font-weight: 900; letter-spacing: .01em; }
.footer-note{ font-size: 13px; color: var(--muted); }
.footer-links{ display:flex; gap: 14px; align-items:center; flex-wrap: wrap; }

/* Footer social icons */
.footer-social{ display:flex; gap: 10px; align-items:center; }
.footer-social .social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(255,255,255,.55);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
body.dark .footer-social .social{ background: rgba(17,24,39,.35); }
.footer-social .social:hover{ transform: translateY(-1px); background: rgba(255,255,255,.8); }
body.dark .footer-social .social:hover{ background: rgba(17,24,39,.55); }


/* Intake chips + checkboxes */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:999px; background: rgba(255,255,255,.65); color: var(--ink); font-size: 14px; }
body.dark .chip{ background: rgba(17,24,39,.45); }
.chip input{ accent-color: var(--accent); }
.checkbox{ display:flex; gap:10px; align-items:flex-start; margin-top:10px; }
.checkbox input{ margin-top:3px; accent-color: var(--accent); }


/* --- Responsive tweaks (mobile) --- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.section-head .section-kicker{ max-width: 52ch; }
@media (max-width: 720px){
  .section-head{ align-items:flex-start; }
  .section-head .section-kicker{ max-width: 100%; }
}

/* Make long lines wrap nicely */
.section-kicker, .muted, .lead{ text-wrap: pretty; }
.hero-title{ text-wrap: balance; }

/* WhatsApp button: scale & avoid covering content */
.wa-fab{ position: fixed; right: 18px; bottom: calc(var(--footer-h) + var(--fab-offset) + env(safe-area-inset-bottom)); z-index: 50; }
@media (max-width: 520px){
  .wa-fab{ right: 14px; bottom: 14px; }
  .wa-fab a{ padding: 12px 14px !important; border-radius: 999px !important; }
  .wa-fab a span{ font-size: 14px !important; }
  .wa-fab a svg{ width: 18px !important; height: 18px !important; }
}
@media (max-width: 380px){
  /* icon-only on very small screens */
  .wa-fab a span{ display:none !important; }
  .wa-fab a{ width: 48px !important; height: 48px !important; padding: 0 !important; display:flex !important; align-items:center !important; justify-content:center !important; }
}

.section-kicker{ font-size: clamp(14px, 1.6vw, 16px); }


/* Form sections */
.form-section{ padding-top: 6px; }
.form-section h3{ margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.form-section p{ margin: 6px 0 0 0; }
.inline-check{ display:flex; gap:10px; align-items:center; margin-top:10px; font-size: 14px; color: var(--muted); }
.inline-check input{ accent-color: var(--accent); }


/* ===== Wizard (Offerte aanvragen) ===== */
.wizard{ display:block; }

.wizard-progress{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.65);
  margin-bottom:14px;
}
body.dark .wizard-progress{ background: rgba(17,24,39,.45); }

.wstep{
  appearance:none;
  border:1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor:pointer;

  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;

  font: inherit;
  line-height: 1;
}
.wstep:focus{ outline: 2px solid rgba(255,255,255,.18); outline-offset: 2px; }
.wstep .num{
  width:24px; height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: rgba(0,0,0,.06);
  color: var(--ink);
  font-weight:700;
  font-size:12px;
}
body.dark .wstep .num{ background: rgba(255,255,255,.08); }

.wstep.is-active{
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255,255,255,.6);
}
body.dark .wstep.is-active{ background: rgba(17,24,39,.55); }

/* Wizard step icons */
.wstep{ --wstep-ico: url("assets/icons/ico-drawing.svg"); }
.wstep .ico{
  width:18px; height:18px;
  display:inline-block;
  background-color: currentColor;
  -webkit-mask: var(--wstep-ico) no-repeat center / contain;
  mask: var(--wstep-ico) no-repeat center / contain;
  opacity:.85;
}
.wstep.is-active .ico{
  background-color: var(--accent);
  opacity:1;
}
.wstep[data-step="1"]{ --wstep-ico: url("assets/icons/ico-permit.svg"); }
.wstep[data-step="2"]{ --wstep-ico: url("assets/icons/ico-drawing.svg"); }
.wstep[data-step="3"]{ --wstep-ico: url("assets/icons/ico-foundation.svg"); }
.wstep[data-step="4"]{ --wstep-ico: url("assets/icons/ico-concrete.svg"); }
.wstep[data-step="5"]{ --wstep-ico: url("assets/icons/ico-drawing.svg"); }
.wstep[data-step="6"]{ --wstep-ico: url("assets/icons/ico-permit.svg"); }

.wpanel{ display:block; padding-top: 2px; }
.wpanel[hidden]{ display:none !important; }
.wpanel.is-active{ display:block; }

.upload-card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  background: rgba(255,255,255,.6);
  margin: 12px 0;
}
body.dark .upload-card{ background: rgba(17,24,39,.45); }
.upload-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }

.choice-row{ display:flex; gap:14px; flex-wrap:wrap; margin: 10px 0; }
.radio{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background: rgba(255,255,255,.55);
  cursor:pointer;
}
body.dark .radio{ background: rgba(17,24,39,.4); }
.radio input{ accent-color: var(--accent); }

.conditional{ margin-top: 10px; }

.wizard-actions{ display:flex; align-items:center; gap:12px; margin-top: 14px; }
.wiz-spacer{ flex:1; }
#wizSubmit{ display:none; }
.wizard[data-step="6"] #wizNext{ display:none; }
.wizard[data-step="6"] #wizSubmit{ display:inline-flex; }

@media (max-width: 520px){
  .wizard-progress{ gap:8px; }
  .wstep{ padding:8px 10px; }
  .wstep .lbl{ display:none; }
}

/* ===== WhatsApp (brand) ===== */
.wa-fab{
  position: fixed;
  right: 18px;
  bottom: calc(var(--footer-h) + var(--fab-offset) + env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.wa-fab:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.wa-fab svg{ width: 20px; height: 20px; }
.wa-fab span{ font-weight: 700; font-size: 14px; }

@media (max-width: 520px){
  .wa-fab{ right: 14px; bottom: 14px; padding: 12px 14px; }
  .wa-fab span{ font-size: 13px; }
}
@media (max-width: 380px){
  .wa-fab span{ display:none; }
  .wa-fab{ width: 48px; height: 48px; padding:0; justify-content:center; }
}


/* Compact hero on Offerte aanvragen page */
.hero--compact{ padding-top: 34px; padding-bottom: 22px; }
.panel--cta{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
@media (max-width: 720px){
  .panel--cta{ flex-direction:column; align-items:flex-start; }
}

.wizard-progress .wstep{display:inline-flex !important; gap:10px !important; align-items:center !important;}


/* Theme toggle icon */
.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;
}
#themeToggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
#themeToggle .theme-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
}
#themeToggle svg{ width:20px; height:20px; }
#themeToggle .ico-moon{ display:inline; }
#themeToggle .ico-sun{ display:none; }
body.dark #themeToggle .ico-moon{ display:none; }
body.dark #themeToggle .ico-sun{ display:inline; }

#themeToggle{ width:44px; height:44px; padding:0; }

/* Minimal landing */
.landing-min{
  min-height: calc(100vh - var(--topbar-h) - var(--footer-h));
  display:flex;
  align-items:center;
}
body.dark /* Hero panel (inspired by clean "content card" hero layouts) */
.landing-hero .container{
position: relative;
  z-index: 2;
}

.hero-panel{
  width: min(620px, 92vw);
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 22px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.dark .hero-panel{
  background: rgba(7,17,38,0.45);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 22px 50px rgba(0,0,0,0.55);
}




body.dark .landing-hero .container{
  position: relative;
  z-index: 1;
}
.landing-hero .kicker{
  color: rgba(11,18,32,.78);
}
body.dark .landing-hero .kicker{
  color: rgba(247,249,255,.85);
}
.landing-hero p{
  color: rgba(11,18,32,.72);
  max-width: 56ch;
}
body.dark .landing-hero p{
  color: rgba(247,249,255,.80);
  max-width: 56ch;
}
.landing-inner{
  width: min(980px, 92vw);
  margin: 0 auto;
}
.landing-inner .kicker{
  letter-spacing:.12em;
  text-transform: uppercase;
  font-weight:700;
  opacity:.75;
  margin: 0 0 14px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 22px;
}
.hero-notes{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top: 18px;
  opacity:.85;
  font-size: 13px;
}
.hero-notes span{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
body:not(.dark) .hero-notes span{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}

/* Inner pages */
.page .page-hero{
  padding: 110px 0 18px;
}
.page .container{
  width: min(980px, 92vw);
  margin: 0 auto;
}
.page-title{
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  margin: 0 0 10px;
}
.page-sub{
  margin: 0 0 22px;
  opacity: .85;
}

main{ display:block; }
html:not(.is-landing) body main{ padding-bottom: 96px; /* ruimte voor vaste footer */ }


/* Tarieven */
.section{ padding: 18px 0 34px; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px){ .grid-2{ grid-template-columns: 1fr; } }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px){ .grid-3{ grid-template-columns: 1fr; } }
.card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
body:not(.dark) .card{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}
.bullets{ margin: 10px 0 0 18px; }
.ratebox{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  gap: 10px;
}
body:not(.dark) .ratebox{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}
.rate-row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.rate-label{ opacity: .82; }
.rate-value{ font-weight: 900; letter-spacing: -0.01em; }

.price-card{ height: 100%; }
.price-top{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.price-amount{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.price-tag{
  display:inline-flex;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  opacity: .95;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
body:not(.dark) .price-tag{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}
.price-card--featured{
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.10));
}
body:not(.dark) .price-card--featured{
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(0,0,0,.10));
}
.pricebox{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap: 4px;
}
body:not(.dark) .pricebox{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}
.pricebig{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.steps{ margin: 10px 0 0 18px; }

/* Active nav link */
.nav a.is-active{
  position: relative;
  font-weight: 700;
}
.nav a.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  background: var(--accent, #ff8a00);
  border-radius: 2px;
  opacity: .9;
}


/* --- Mobile nav --- */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items:center;
  justify-content:center;
  gap:4px;
}
[data-theme="dark"] .nav-toggle{
  border-color: rgba(255,255,255,.14);
  background: rgba(10,18,35,.55);
}
.nav-toggle span{
  display:block;
  width:18px; height:2px;
  border-radius:2px;
  background: currentColor;
  opacity:.9;
}
@media (max-width: 860px){
  .nav-toggle{ display:flex; }

  /* Mobile: hamburger icon (3 horizontal bars stacked). */
  .nav-toggle::before{ content: none; }
  .nav-toggle span{ display:block; }

  /* Mobile: place the menu button on the far right (typical pattern).
     Keep the CTA (Offerte aanvragen) directly left of it. */
  .topbar{ justify-content: flex-start; }
  .nav-actions{ margin-left: auto; order: 2; }
  .nav-toggle{ order: 3; margin-left: 10px; }
  .nav{
    position: absolute;
    top: 70px;
    left: 16px;
    right: 16px;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 18px 60px rgba(0,0,0,.10);
    z-index: 50;
  }
  [data-theme="dark"] .nav{
    background: rgba(10,18,35,.92);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding: 10px 12px; border-radius: 12px; }
  .nav a:hover{ background: rgba(255,138,0,.10); }
}

/* --- Small-screen header fit: keep everything neatly inside viewport (no horizontal overflow) --- */
@media (max-width: 520px){
  html, body{ overflow-x: hidden; }
  .topbar{
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 10px;
  }
  .brand{ min-width: 0; }
  .brand-logo{ height: 40px; }
  .nav-actions{ gap: 8px; }
  .topbar .btn{ padding: 9px 12px; font-size: 13px; }
  .topbar .btn-primary{ padding: 9px 12px; }
  /* Ensure CTA can shrink instead of pushing elements off-screen */
  .nav-actions .btn-primary{ max-width: 175px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Make the hamburger easier to tap without stealing layout */
  .nav-toggle{ width: 42px; height: 42px; }
}

/* --- Contact audience chips --- */
.audience{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.audience-label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}
.chips{ display:flex; gap: 10px; flex-wrap: wrap; }
.chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  font-weight: 600;
  font-size: 13px;
}
[data-theme="dark"] .chip{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

/* --- Callout --- */
.callout{
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,138,0,.28);
  background: rgba(255,138,0,.08);
}
.callout-title{
  font-weight: 800;
  margin-bottom: 6px;
}
.callout-body{
  opacity: .9;
}


/* SEO landing helpers */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);text-decoration:none}
.pill:hover{transform:translateY(-1px)}
.grid.two{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media (max-width:900px){.grid.two{grid-template-columns:1fr}}
.card-soft{background:rgba(255,255,255,.03)}
.list-check{list-style:none;padding-left:0;margin:0}
.list-check li{padding-left:26px;position:relative;margin:10px 0}
.list-check li:before{content:"✓";position:absolute;left:0;top:0;opacity:.9}
.faq-grid{display:grid;gap:12px}
.faq{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.02)}
.faq summary{cursor:pointer;font-weight:600}
.faq-body{padding-top:8px}
.section-muted{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0))}


/* SEO landing links */
.seo-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:16px}
.seo-link{display:block;padding:16px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);text-decoration:none}
.seo-link:hover{transform:translateY(-1px)}
.seo-link strong{display:block;margin-bottom:6px}
.seo-link .muted{margin:0}


/* Floating WhatsApp (placeholder) */
.wa-float .wa-label{font-weight:700;font-size:14px;letter-spacing:.2px}
/* (fixed) removed stray @media wrapper */
/* Make Werkwijze steps clickable */
.steps .step .step-link{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  text-decoration: none;
  color: inherit;
}
.steps .step .step-link:hover{
  transform: translateY(-1px);
}
.steps .step{
  cursor: pointer;
}
.step-detail{
  scroll-margin-top: 110px; /* offset for sticky nav */
}
.step-detail .back-top{
  display:inline-block;
  margin-top: 10px;
}



/* === v26_19 werkwijze layout === */
.steps{
  display: grid;
  gap: 16px;
}
.step{
  width: 100%;
}
.steps .step .step-link{
  grid-template-columns: 52px 1fr;
  padding: 18px 18px;
}
.step-no{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (min-width: 920px){
  .steps{
    grid-template-columns: 1fr;
  }
  .steps .step .step-link{
    grid-template-columns: 56px 1fr;
  }
}



/* === v26_20 align contact/tarieven blocks === */
.section .card{
  width: 100%;
}
.page .card{
  max-width: 100%;
}

.audience{
  justify-content: flex-start;
}
.audience-label{
  opacity: .75;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 11px;
}
.audience a{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--ink);
  text-decoration: none;
}
.audience a:hover{
  background: var(--surface);
}
.audience a.active{
  border-color: var(--line);
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  color: var(--ink);
}

.panel--soft{
  max-width: 100%;
}
.panel--soft .btn, .panel--soft button, .panel--soft a.btn{
  white-space: nowrap;
}
@media (max-width: 720px){
  .panel--soft .btn, .panel--soft button, .panel--soft a.btn{
    width: 100%;
    white-space: normal;
  }
}




/* v26_20 contact grid tuning (fixed) */
.grid.contact-grid{ grid-template-columns: 1fr; }
@media (min-width: 900px){
  .contact-grid{ grid-template-columns: 1fr 1fr; align-items: start; }
  .contact-grid > .panel{ height: 100%; }
}
@media (max-width: 920px){
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 920px){
  .contact-grid{ grid-template-columns: 1fr; }
@media (min-width: 900px){
  .contact-grid{ grid-template-columns: 1fr 1fr; align-items: start; }
  .contact-grid > .panel{ height: 100%; }
}

}



/* === v26_21 werkwijze width fix === */
.steps .step{
  width: 100%;
}
.steps .step .step-link{
  width: 100%;
}
.steps .step .step-body{
  width: 100%;
  max-width: none !important;
  min-width: 0;
}
.steps .step .step-body p{
  max-width: 72ch; /* keep readable line length */
}



/* === v26_22 werkwijze truly full-width === */
.steps .step{
  display: block !important;
  padding: 0 !important;
}
.steps .step .step-link{
  display: flex !important;
  width: 100% !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 18px 18px !important;
}
.steps .step .step-no{
  flex: 0 0 44px !important;
}
.steps .step .step-body{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}
.steps .step .step-body p{
  max-width: none !important;
}



/* === v26_24 voorbeelden spacing === */
#voorbeelden .container > .card{
  margin-top: 16px;
}
#voorbeelden .container > .card:first-child{
  margin-top: 0;
}



/* === v26_25 voorbeelden gap between example cards === */
.examples-grid{
  gap: 18px !important;
}
@media (max-width: 920px){
  .examples-grid{ gap: 14px !important; }
}



/* === v26_32 contact audience tabs polish === */
.audience{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0 2px;
}
.audience .label{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
  margin-right: 4px;
  white-space: nowrap;
}
.audience a{
  line-height: 1;
}
@media (max-width: 520px){
  .audience{ gap: 8px; }
  .audience .label{ width: 100%; margin: 0 0 6px; }
}




/* === v26_34 Design tokens + responsive system === */
:root{
  --topbar-h: 72px;
  --footer-h: 88px;
  --fab-offset: 18px;
  --container-max: 1180px;
  --container-pad: clamp(16px, 3vw, 28px);

  --radius-lg: 22px;
  --radius-md: 16px;

  --shadow-soft: 0 14px 36px rgba(0,0,0,.22);
  --shadow-soft-2: 0 10px 26px rgba(0,0,0,.18);

  --glass-bg: rgba(255,255,255,.05);
  --glass-border: rgba(255,255,255,.10);

  --text-strong: rgba(255,255,255,.92);
  --text: rgba(255,255,255,.78);
  --text-dim: rgba(255,255,255,.62);

  --h1: clamp(34px, 4.0vw, 58px);
  --h2: clamp(22px, 2.4vw, 34px);
  --h3: clamp(18px, 1.6vw, 22px);
  --p:  clamp(14px, 1.2vw, 16px);

  --space-1: 10px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 34px;
  --space-5: 46px;

  --footer-h: 70px;
}

/* Container */
.container{
  width: min(var(--container-max), calc(100% - (var(--container-pad) * 2)));
  margin: 0 auto;
}

/* Responsive grids */
.grid-auto{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2);
}
.grid-auto-lg{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-3);
}

/* Better readable text defaults */
h1{ font-size: var(--h1); line-height: 1.06; }
h2{ font-size: var(--h2); line-height: 1.12; }
h3{ font-size: var(--h3); line-height: 1.2; }
p, li{ font-size: var(--p); }

/* Panels/cards consistent */
.card, .panel{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft-2);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}

/* Hero readability overlay */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(1200px 520px at 38% 38%, rgba(0,0,0,.42), rgba(0,0,0,.72));
}

/* Offerte aanvragen: keep background clean (no dark hero overlay) */
body.page-start-project .hero::before{
  background: none !important;
}


/* Fixed footer safe-area so content doesn't hide behind it */
body{
  padding-bottom: calc(var(--footer-h) + 14px);
}
.site-footer{
  min-height: var(--footer-h);
}
.floating-actions{
  bottom: calc(var(--footer-h) + 18px) !important;
}

/* Small screens: tighten spacing */
@media (max-width: 520px){
  :root{
  --topbar-h: 72px;
  --footer-h: 88px;
  --fab-offset: 18px; --footer-h: 78px; }
  .grid-auto, .grid-auto-lg{ gap: 12px; }
  body{ padding-bottom: calc(var(--footer-h) + 22px); }
}



/* === v26_34 card icons === */
.card-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  margin-bottom: 12px;
}
.card-icon img{
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,.85);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
html[data-theme="light"] .card-icon{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}
html[data-theme="light"] .card-icon img{
  color: rgba(0,0,0,.78);
  filter: none;
}



/* === Responsive polish + fixed footer === */
:root{
  --fab-size: clamp(46px, 5.4vw, 62px);
  --fab-right: clamp(14px, 2.4vw, 22px);
  --fab-gap: clamp(12px, 2.2vw, 18px);
  --fab-stack-gap: clamp(12px, 2.0vw, 16px);
  --topbar-h: 72px;
  --footer-h: 88px;
  --fab-offset: 18px;
  --footer-h: 72px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow-soft: 0 18px 50px rgba(0,0,0,0.28);
  --shadow-card: 0 12px 28px rgba(0,0,0,0.22);
}
h1{ font-size: clamp(40px, 5vw, 64px); letter-spacing:-0.02em; }
h2{ font-size: clamp(28px, 3.2vw, 40px); letter-spacing:-0.015em; }
h3{ font-size: clamp(18px, 2.0vw, 24px); }
p, li{ line-height: 1.55; }
.section{ padding: clamp(44px, 6vw, 84px) 0; }

footer, .site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
}
body{ padding-bottom: var(--footer-h); }
.site-footer, footer{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}




/* === Floating contact buttons: always bottom-right, above fixed footer === */
a.mail-float, a.wa-float{
  position: fixed !important;
  right: var(--fab-right) !important;
  left: auto !important;
  width: var(--fab-size) !important;
  height: var(--fab-size) !important;
  bottom: calc(var(--footer-h) + var(--fab-gap)) !important;
  border-radius: 999px;
  z-index: 90;
}
a.wa-float{ bottom: calc(var(--footer-h) + var(--fab-gap)) !important; }
a.mail-float{ bottom: calc(var(--footer-h) + var(--fab-gap) + var(--fab-size) + var(--fab-stack-gap)) !important; }

/* Keep floating action buttons above footer */
.fab-stack, .floating-actions, .quick-actions{
  bottom: calc(var(--footer-h) + 18px) !important;
}

/* Better card spacing on small screens */
@media (max-width: 520px){
  :root{
  --topbar-h: 72px;
  --footer-h: 88px;
  --fab-offset: 18px; --footer-h: 84px; }
  .cards{ gap: 14px; }
}

/* Landing hero overlays tuned (avoid milky wash) */
body.dark body:not(.dark) .hero-card{
max-width: min(640px, 100%);
  padding: 28px 28px;
  border-radius: 18px;
  background: rgba(160, 170, 185, 0.18);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  max-width: min(640px, 100%);
  box-sizing: border-box;
  overflow: hidden;
  width: min(640px, calc(100vw - (2 * var(--pad))));
}

@media (max-width: 720px){
  .container{ width: calc(100% - 32px); }
  .hero-card{ max-width: 100%; padding: 18px; }
  header .nav-links{ flex-wrap: wrap; justify-content: center; gap: 10px; }
}

@media (max-width: 420px){
  }

.landing-hero{
  position: relative;
  height: calc(100dvh - var(--topbar-h) - var(--footer-h));
  min-height: calc(100dvh - var(--topbar-h) - var(--footer-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: none;
}
body:not(.dark) .landing-hero{ color: #0b1220; }


/* === v28 Premium light theme (paper + brushed steel) === */
/*
   Goals:
   - Paper-white background (warm, premium)
   - Brushed steel texture for header/footer and neutral buttons
   - Smaller hero typography (less “shouting”)
   - Fix light footer overflow/cropping
*/

html[data-theme="light"] body{
  background-color: #f7f5ef;
  /* grid should be subtle + visible on paper */
  background-image:
    linear-gradient(to right, rgba(11,27,58,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,27,58,0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center;
}

html[data-theme="light"]{
  --bg: #f7f5ef;
  --ink: #0b1b3a;
  --muted: rgba(11,27,58,0.72);
  --line: rgba(11,27,58,0.16);
  --surface: rgba(255,255,255,0.70);
  --surface2: rgba(255,255,255,0.52);

  /* brushed steel palette */
  --steel-base: #bfc6cf;
  --steel-dark: #aab2bd;
  --steel-edge: rgba(11,27,58,0.22);
  --steel-glow: rgba(255,255,255,0.72);
}

/* Satin metal (premium) for header/footer in light theme */
/* Neutral buttons -> brushed steel. Keep primary CTA as orange. */
html[data-theme="light"] .btn{
  border: 1px solid rgba(11,27,58,0.22);
  background:
    radial-gradient(520px 160px at 18% 0%, rgba(255,255,255,0.92), rgba(255,255,255,0.0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.10)),
    linear-gradient(90deg, #dde2e8, #c5cdd6);
  color: rgba(11,27,58,0.92);
  font-size: 13px;
}
html[data-theme="light"] .btn:hover{
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}
html[data-theme="light"] .btn-primary{
  /* keep the brand CTA */
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-color: rgba(255,122,0,0.55);
  color: #0b1b3a;
}

/* Make hero typography smaller + more premium */
.hero-title{
  font-size: clamp(34px, 3.6vw, 52px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em !important;
}

/* Reduce general H1 sizing a touch (prevents oversized titles on wide screens) */
h1{ font-size: clamp(34px, 4.2vw, 58px) !important; }

body.dark .landing-hero{ color: #f7f9ff; }

.landing-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: right 10% center;
  background-size: clamp(900px, 86vw, 1500px) auto;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
  filter: none;
}
body.dark .landing-hero::before{
  /* Dark theme uses blueprint hero (white lines on dark) */
  background-image: url("assets/hero-blueprint.png");
}
body:not(.dark) .landing-hero::before{
  /* Light theme uses clean light hero (dark lines on light) */
  background-image: url("assets/hero-light.png");
}
.landing-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 600px at 40% 40%, rgba(0,0,0,0.0), rgba(0,0,0,0.25));
  pointer-events: none;
  z-index: 2;
}


/* Text wrap safety: prevent long Dutch compound words from overflowing cards */
h1, h2, h3, .hero-title{
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Premium text selection (avoid harsh default blue highlight) */
::selection{
  background: rgba(255, 122, 0, 0.28);
  color: inherit;
}
body.dark ::selection{
  background: rgba(255, 122, 0, 0.35);
  color: #f7f9ff;
}


@media (max-width: 640px){
  .hero-title{ font-size: clamp(30px, 8vw, 38px) !important; line-height: 1.08 !important; }
}
@media (min-width: 1100px){
  .hero-title{ font-size: clamp(38px, 3.0vw, 52px) !important; }
}

/* Cards responsive */
@media (max-width: 1100px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .cards{ grid-template-columns: 1fr; }
}


/* Spacing between large content containers/panels */
.stack, .panel-stack, .contact-grid, .section .container > .panel + .panel{
  gap: 18px;
}
.contact-grid{
  display: grid;
  gap: 18px;
}

/* ===============================
   v29 Fundamental layout fix
   - Footer is part of normal document flow (no fixed footer)
   - No body padding hacks that create blank bands
   - FABs avoid footer via --fab-offset (set in script.js)
   =============================== */

/* Fallback spacing when panels are direct siblings */
.panel + .panel{ margin-top: 18px; }
@media (min-width: 900px){
  .contact-grid{ grid-template-columns: 1fr 1fr; align-items: start; }
  .panel + .panel{ margin-top: 0; } /* grid handles spacing */
}



/* Contact layout (robust): keep panels separate and spaced */
.grid.contact-grid{ gap: 24px; }
@media (min-width: 900px){
  .grid.contact-grid{ grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Panel separation when stacked */
@media (max-width: 899px){
  .grid.contact-grid .panel{ margin-bottom: 0; }
}

/* FIX: Contact panels must be separate (2 columns on desktop, spaced when stacked) */
.grid.contact-grid{
  gap: 28px;              /* row + column gap */
  grid-auto-flow: row;
}
@media (min-width: 900px){
  .grid.contact-grid{
    grid-template-columns: 1fr 1fr !important;
    align-items: start;
  }
}
@media (max-width: 899px){
  .grid.contact-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Light theme: high-performance brushed aluminium */
:root{
  --topbar-h: 72px;
  --footer-h: 88px;
  --fab-offset: 18px;
  --alu-1: #e6e8ed;
  --alu-2: #d7dae2;
  --alu-3: #f2f4f7;
  --alu-line: rgba(11,27,58,0.12);
}
body:not(.dark) .header,
body:not(.dark) header,
body:not(.dark) .topbar,
body:not(.dark) .footer{
  background-color: var(--alu-1);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.75), rgba(0,0,0,0.04)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 2px, rgba(0,0,0,0.025) 4px, rgba(0,0,0,0.025) 6px);
  border-color: var(--alu-line);
}
body:not(.dark) .header,
body:not(.dark) header,
body:not(.dark) .topbar{
  border-bottom: 1px solid var(--alu-line);
}
body:not(.dark) .footer{
  border-top: 1px solid var(--alu-line);
}

body:not(.dark) .btn,
body:not(.dark) button,
body:not(.dark) a.btn{
  background-color: var(--alu-2);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.75), rgba(0,0,0,0.06)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.20) 0px, rgba(255,255,255,0.20) 2px, rgba(0,0,0,0.02) 4px, rgba(0,0,0,0.02) 6px);
  border: 1px solid rgba(11,27,58,0.20);
  color: var(--ink);
}
body:not(.dark) .btn:hover,
body:not(.dark) button:hover,
body:not(.dark) a.btn:hover{
  filter: brightness(0.99);
}


/* Light theme: paper-white background + subtle grid */
body:not(.dark){
  background-color: #ffffff;
  background-image:
    linear-gradient(to right, rgba(11,27,58,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,27,58,0.055) 1px, transparent 1px);
  background-size: 48px 48px;
}


/* Light theme: brushed aluminium / RVS feel (stronger) */
:root{
  --topbar-h: 72px;
  --footer-h: 88px;
  --fab-offset: 18px;
  --alu-base: #e6e8ee;
  --alu-mid:  #d6d9e2;
  --alu-hi:   #f6f7fa;
  --alu-edge: rgba(11,27,58,0.16);
  --alu-edge2: rgba(255,255,255,0.55);
}

/* apply to bars */
body:not(.dark) .header,
body:not(.dark) header,
body:not(.dark) .topbar,
body:not(.dark) .footer{
  position: relative;
  background-color: var(--alu-base);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.35) 35%, rgba(0,0,0,0.06) 100%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.38) 0px,
      rgba(255,255,255,0.38) 1px,
      rgba(0,0,0,0.06) 3px,
      rgba(255,255,255,0.22) 6px
    ),
    linear-gradient(90deg, rgba(255,255,255,0.18), rgba(0,0,0,0.03));
  box-shadow:
    inset 0 1px 0 var(--alu-edge2),
    inset 0 -1px 0 rgba(0,0,0,0.06);
}

body:not(.dark) .header,
body:not(.dark) header,
body:not(.dark) .topbar{
  border-bottom: 1px solid var(--alu-edge);
}
body:not(.dark) .footer{
  border-top: 1px solid var(--alu-edge);
}

/* buttons */
body:not(.dark) .btn,
body:not(.dark) button,
body:not(.dark) a.btn{
  background-color: var(--alu-mid);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.22) 45%, rgba(0,0,0,0.10) 100%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.35) 0px,
      rgba(255,255,255,0.35) 1px,
      rgba(0,0,0,0.07) 3px,
      rgba(255,255,255,0.18) 6px
    );
  border: 1px solid rgba(11,27,58,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 8px 18px rgba(0,0,0,0.08);
  color: var(--ink);
}

body:not(.dark) .btn:hover,
body:not(.dark) button:hover,
body:not(.dark) a.btn:hover{
  filter: brightness(1.02);
}

body:not(.dark) .btn:active,
body:not(.dark) button:active,
body:not(.dark) a.btn:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 6px 14px rgba(0,0,0,0.07);
}



/* Floating quick-contact buttons (theme-aware) */
.mail-float, .wa-float{
  position: fixed;
  right: 18px;
  z-index: 999;
  width: 54px;
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .15s ease, filter .15s ease;
}
/* Keep floating buttons above the fixed footer */
.mail-float{ bottom: calc(var(--footer-h) + 86px); }
.wa-float{ bottom: calc(var(--footer-h) + 18px); }

.mail-float:hover, .wa-float:hover{ transform: translateY(-1px); }

/* Dark theme: WA + mail in JABO theme */
html[data-theme="dark"] .wa-float,
body.dark .wa-float{
  background: linear-gradient(180deg, rgba(255,180,0,0.18), rgba(0,0,0,0.18)), #ff7a00;
  border: 1px solid rgba(255,255,255,0.16);
  color: #0b1b3a;
}
html[data-theme="dark"] .mail-float,
body.dark .mail-float{
  background: rgba(160, 170, 185, 0.22);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

/* Light theme: keep them subtle (alu/gray) */
html[data-theme="light"] .wa-float,
body:not(.dark) .wa-float{
  background: rgba(11,27,58,0.06);
  border: 1px solid rgba(11,27,58,0.18);
  color: rgba(11,27,58,0.90);
}
html[data-theme="light"] .mail-float,
body:not(.dark) .mail-float{
  background: rgba(11,27,58,0.06);
  border: 1px solid rgba(11,27,58,0.18);
  color: rgba(11,27,58,0.90);
}

.mail-float svg, .wa-float svg{ width: 22px; height: 22px; }



/* === FINAL LIGHT THEME POLISH (paper + RVS + clean hero card) === */
body:not(.dark){
  background-color: #ffffff;
  background-image:
    linear-gradient(to right, rgba(11,27,58,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,27,58,0.035) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* Landing hero artwork: keep crisp black lines on light theme */
body:not(.dark) .landing-hero::before{
  opacity: 1;
  filter: contrast(1.08) brightness(1.00);
}

/* Hero card: engineered plate (no cloudy blur) */
body:not(.dark) .hero-panel{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,27,58,0.16);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
}
body:not(.dark) .hero-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* subtle brushed texture + top highlight */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.15) 40%, rgba(0,0,0,0.06) 100%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.22) 0px,
      rgba(255,255,255,0.22) 1px,
      rgba(0,0,0,0.03) 3px,
      rgba(255,255,255,0.10) 6px
    );
  mix-blend-mode: normal;
  opacity: 0.55;
}

/* === v32 fixes: hero artwork visibility + consistent FAB sizing/position ===
   Reason:
   - Multiple legacy blocks define landing-hero rules; depending on cascade order/screen size the artwork can end up effectively off-canvas.
   - FAB (mail/WA) must remain consistent across themes/pages.
*/

/* Lock landing hero artwork placement so the PNG is always clearly visible */
.landing-hero::before{
  background-repeat: no-repeat !important;
  /* Keep the structure in-frame behind the hero panel */
  background-position: 72% 56% !important;
  background-size: min(1750px, 125vw) auto !important;
  opacity: 1 !important;
}

/* Ensure theme-to-art mapping is correct even if other blocks override */
body.dark .landing-hero::before{ background-image: url("assets/hero-blueprint.png") !important; }
body:not(.dark) .landing-hero::before{ background-image: url("assets/hero-light.png") !important; }

/* Keep the hero panel position consistent with the earlier layout */
.landing-hero .container{
  padding-top: clamp(16px, 4vh, 48px) !important;
  padding-bottom: clamp(16px, 4vh, 48px) !important;
}

/* Floating quick-contact buttons: lock sizing + right-side placement */
.mail-float, .wa-float{
  right: 18px !important;
  left: auto !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
}
.mail-float svg, .wa-float svg{
  width: 22px !important;
  height: 22px !important;
}
body:not(.dark) .hero-panel *{ position: relative; z-index: 1; }

/* Typography: slightly stronger + cleaner breaks */
body:not(.dark) .hero-panel h1{
  color: #0b1b3a;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-weight: 850;
  word-break: keep-all;
  overflow-wrap: normal;
}
body:not(.dark) .hero-panel p{
  color: rgba(11,27,58,0.78);
  font-size: 16px;
  line-height: 1.55;
}


/* Satin metal (premium) */
html[data-theme="light"] .topbar,
html[data-theme="light"] footer.footer,
html[data-theme="light"] .footer{
  background:
    radial-gradient(1200px 260px at 12% 0%, rgba(255,255,255,0.85), rgba(255,255,255,0.0) 58%),
    radial-gradient(900px 260px at 92% 0%, rgba(255,255,255,0.55), rgba(255,255,255,0.0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.18)),
    linear-gradient(90deg, #e1e5ea, #c9d0d8);
  border-color: rgba(11,27,58,0.18) !important;
  color: var(--ink);
}

html[data-theme="light"] .btn{
  border: 1px solid rgba(11,27,58,0.22);
  background:
    radial-gradient(520px 160px at 18% 0%, rgba(255,255,255,0.92), rgba(255,255,255,0.0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.10)),
    linear-gradient(90deg, #dde2e8, #c5cdd6);
  color: rgba(11,27,58,0.92);
}

.landing-hero h1{
  font-size: clamp(34px, 4.0vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* Floating action buttons (always above fixed footer) */
.wa-float{
  bottom: calc(var(--footer-h) + 18px + env(safe-area-inset-bottom)) !important;
}
.mail-float{
  bottom: calc(var(--footer-h) + 18px + 68px + env(safe-area-inset-bottom)) !important;
}


/* Landing hero title sizing (both themes) */
.landing-hero h1{
  font-size: clamp(34px, 4.0vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
@media (max-width: 640px){
  .landing-hero h1{ max-width: 16ch; }
}

/* === v30 premium layout + footer (single source of truth) === */
:root{
  --topbar-h: 72px;
  --footer-h: 92px; /* updated by JS to real height */
  --fab-offset: 18px;
}

html, body{ height: auto; }
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--topbar-h);
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom));
}

main{ flex: 1 0 auto; }

/* Fixed footer bar (both themes). Theme only changes colors, not positioning. */
footer.footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 12px var(--pad);
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Keep hero inside viewport above fixed footer */
.landing-hero{
  min-height: calc(100vh - var(--topbar-h) - var(--footer-h));
}

/* Floating buttons: always sit above fixed footer */
.wa-float{
  bottom: calc(var(--footer-h) + var(--fab-offset) + env(safe-area-inset-bottom)) !important;
}
.mail-float{
  bottom: calc(var(--footer-h) + var(--fab-offset) + 68px + env(safe-area-inset-bottom)) !important;
}

/* Light theme: premium paper + satin aluminium (NO stripes) */
html[data-theme="light"] body{
  background-color: #f7f5ef;
  background-image:
    linear-gradient(to right, rgba(11,27,58,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,27,58,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center;
}

html[data-theme="light"] .topbar,
html[data-theme="light"] footer.footer{
  background:
    radial-gradient(1200px 260px at 12% 0%, rgba(255,255,255,0.86), rgba(255,255,255,0.0) 58%),
    radial-gradient(900px 260px at 92% 0%, rgba(255,255,255,0.55), rgba(255,255,255,0.0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.18)),
    linear-gradient(90deg, #e0e5eb, #c7cfd8);
}

html[data-theme="light"] .btn:not(.btn-primary){
  border: 1px solid rgba(11,27,58,0.22);
  background:
    radial-gradient(520px 160px at 18% 0%, rgba(255,255,255,0.92), rgba(255,255,255,0.0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.10)),
    linear-gradient(90deg, #dde2e8, #c5cdd6);
  color: rgba(11,27,58,0.92);
}

/* Typography: calmer headline in landing hero (both themes) */
.landing-hero h1{
  font-size: clamp(34px, 3.1vw, 50px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em !important;
  max-width: 16ch;
}

/* Avoid accidental selection styles looking like a UI bug */
::selection{ background: rgba(255,122,0,0.28); color: inherit; }



/* === v34: HERO + FAB single-source-of-truth (responsive, consistent across themes) === */

/* Landing hero should fill the viewport minus fixed header/footer */
.landing-hero{
  position: relative;
  min-height: calc(100vh - var(--topbar-h) - var(--footer-h));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: clamp(18px, 3vh, 38px) 0;
}

/* Keep content above artwork */
.landing-hero .container{ position: relative; z-index: 2; }

/* Remove any legacy pseudo artwork */
.landing-hero::before,
.landing-hero::after{ content: none !important; background-image: none !important; }

/* Responsive hero artwork: behaves like your old “background cover”, but reliable */
.hero-art{
  position: absolute;
  right: var(--hero-art-pad);
  bottom: var(--hero-art-pad);
  width: min(980px, calc(100vw - (2 * var(--hero-art-pad))));
  height: auto;
  max-height: calc(86vh - var(--topbar-h) - var(--hero-art-pad));
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  z-index: 2;
  user-select: none;
  z-index: 0;
  opacity: 0.82;
}

@media (max-width: 1100px){
  .hero-art{
    right: calc(var(--hero-art-pad) * 0.6);
    bottom: calc(var(--hero-art-pad) * 0.6);
    width: min(860px, 92vw);
    opacity: 0.82;
  }
}
@media (max-width: 760px){
  .hero-art{
    right: -28vw;
    bottom: -20vh;
    width: min(1040px, 170vw);
    opacity: 0.70;
  }
}

/* === FAB (mail / whatsapp): bigger, right-aligned, theme-colored, always above footer === */
.mail-float, .wa-float{
  position: fixed !important;
  left: auto !important;
  right: var(--fab-right) !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important;
  text-decoration: none !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.wa-float{ bottom: calc(var(--footer-h) + 18px) !important; }
.mail-float{ bottom: calc(var(--footer-h) + 92px) !important; }


/* === v35: hard overrides to restore the original “dynamic hero” feel + ensure FABs never drift === */

/* Make the hero layout independent of theme: header/footer are fixed, so we pad the main area accordingly */
.landing-hero{
  min-height: 100vh !important;
  padding-top: calc(var(--topbar-h) + clamp(18px, 3vh, 34px)) !important;
  padding-bottom: calc(var(--footer-h) + clamp(18px, 3vh, 34px)) !important;
  align-items: flex-start !important;
}

/* Keep the hero panel placed like the older versions: slightly down from the top, not vertically centered */
.landing-hero .hero-panel{
  margin-top: clamp(4px, 4vh, 36px) !important;
}

/* Hero artwork: anchored bottom-right, but not filling the whole screen */
.hero-art{
  right: clamp(-140px, -8vw, -34px) !important;
  bottom: clamp(-120px, -10vh, -28px) !important;
  width: min(980px, 78vw) !important;
  max-height: none !important;
  opacity: 0.92 !important;
}

@media (max-width: 1100px){
  .hero-art{
    right: -16vw !important;
    bottom: -14vh !important;
    width: min(980px, 118vw) !important;
    opacity: 0.82 !important;
  }
}
@media (max-width: 760px){
  .hero-art{
    right: -26vw !important;
    bottom: -18vh !important;
    width: min(980px, 165vw) !important;
    opacity: 0.70 !important;
  }
}

/* Make light theme hero artwork slightly more subtle */
html[data-theme='light'] .hero-art,
body:not(.dark) .hero-art{
  opacity: 0.72 !important;
}

/* FABs: lock to the RIGHT and restore the bigger colored look */
.mail-float, .wa-float{
  left: auto !important;
  right: var(--fab-right) !important;
  width: var(--fab-size) !important;
  height: var(--fab-size) !important;
}

/* Strong theme colors for FABs (whatsapp orange / mail dark) */
html[data-theme='light'] .mail-float,
body:not(.dark) .mail-float{
  background: rgba(15, 23, 42, 0.90) !important;
  color: #fff !important;
}
html[data-theme='light'] .wa-float,
body:not(.dark) .wa-float{
  background: rgba(255, 122, 0, 0.96) !important;
  color: #0b0f1a !important;
}

html[data-theme='dark'] .mail-float,
body.dark .mail-float{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #fff !important;
}
html[data-theme='dark'] .wa-float,
body.dark .wa-float{
  background: rgba(255, 122, 0, 0.96) !important;
  color: #0b0f1a !important;
}

/* Ensure icons are nicely sized */
.mail-float svg, .wa-float svg{ width: 26px !important; height: 26px !important; }

/* FAB colors */
html[data-theme="dark"] .wa-float,
body.dark .wa-float{
  background: linear-gradient(180deg, rgba(255,180,0,0.18), rgba(0,0,0,0.18)), var(--accent) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #0b1b3a !important;
}
html[data-theme="dark"] .mail-float,
body.dark .mail-float{
  background: rgba(160, 170, 185, 0.22) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.92) !important;
}

html[data-theme="light"] .wa-float,
body:not(.dark) .wa-float{
  background: linear-gradient(180deg, rgba(255,180,0,0.18), rgba(0,0,0,0.02)), var(--accent) !important;
  border: 1px solid rgba(11,27,58,0.14) !important;
  color: #0b1b3a !important;
}
html[data-theme="light"] .mail-float,
body:not(.dark) .mail-float{
  background: rgba(11,27,58,0.07) !important;
  border: 1px solid rgba(11,27,58,0.18) !important;
  color: rgba(11,27,58,0.92) !important;
}

.mail-float svg, .wa-float svg{ width: 24px !important; height: 24px !important; }


.mail-float svg, .wa-float svg{
  width: 24px !important;
  height: 24px !important;
}

/* Brand colors: WhatsApp button in JABO orange, mail in premium steel */
html[data-theme='dark'] .wa-float,
body.dark .wa-float,
html[data-theme='light'] .wa-float,
body:not(.dark) .wa-float{
  background: linear-gradient(180deg, rgba(255,180,0,0.20), rgba(0,0,0,0.10)), #ff7a00 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #0b1b3a !important;
}

html[data-theme='dark'] .mail-float,
body.dark .mail-float{
  background: rgba(160, 170, 185, 0.22) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.92) !important;
}

html[data-theme='light'] .mail-float,
body:not(.dark) .mail-float{
  background:
    radial-gradient(520px 160px at 18% 0%, rgba(255,255,255,0.92), rgba(255,255,255,0.0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10)),
    linear-gradient(90deg, #dde2e8, #c5cdd6) !important;
  border: 1px solid rgba(11,27,58,0.20) !important;
  color: rgba(11,27,58,0.92) !important;
}

/* === v36: Fullscreen landing hero (no page scroll) ===
   Goal: background artwork fills the viewport area BETWEEN header and footer.
   Only apply on index via body.is-landing.
*/
html{height:100%;}
body.is-landing{height:100%;
  overflow: hidden; /* no page scroll on landing */
  padding-top: var(--topbar-h) !important;
  padding-bottom: var(--footer-h) !important;
}

/* Header/footer always visible */
body.is-landing .topbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 50;
}
body.is-landing .footer{
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
}

/* Hero occupies the remaining viewport height */
body.is-landing .landing-hero{
  height: calc(100vh - var(--topbar-h) - var(--footer-h)) !important;
  min-height: calc(100vh - var(--topbar-h) - var(--footer-h)) !important;
  overflow: hidden !important;
  margin: 0 !important;
  position: relative;
}

/* Keep content nicely placed and responsive */
body.is-landing .landing-hero > .container{
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: clamp(18px, 4.2vh, 52px) !important;
}

/* Make sure the hero card never forces scroll */
body.is-landing .hero-panel{
  max-width: min(640px, 92vw) !important;
  padding: clamp(22px, 3.2vw, 34px) !important;
}
body.is-landing .hero-panel h1{
  font-size: clamp(30px, 3.2vw, 44px) !important;
  line-height: 1.08 !important;
}
body.is-landing .hero-panel p{
  font-size: clamp(13px, 1.2vw, 15px) !important;
  max-width: 46ch;
}

/* The artwork fills the hero area (no gaps) */
body.is-landing .hero-art{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 86% 88% !important; /* keep it right/bottom */
  pointer-events: none;
  z-index: 2;
}

/* Subtle tuning per theme */
body.is-landing.dark .hero-art,
html[data-theme='dark'] body.is-landing .hero-art{
  opacity: 0.95;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.22));
}
body.is-landing:not(.dark) .hero-art,
html[data-theme='light'] body.is-landing .hero-art{
  opacity: 0.55;
}

/* Floating action buttons: always right + above fixed footer */
body.is-landing .mail-float,
body.is-landing .wa-float{
  left: auto !important;
  right: 20px !important;
  bottom: calc(var(--footer-h) + 18px) !important;
}
body.is-landing .wa-float{ bottom: calc(var(--footer-h) + 86px) !important; }
/* v45 overrides */

/* === v45 FIX: hero background must be true full-screen cover (no offsets) === */
body.is-landing .landing-hero{ position: relative; overflow: hidden; height: calc(100dvh - var(--topbar-h) - var(--footer-h)) !important; min-height: calc(100dvh - var(--topbar-h) - var(--footer-h)) !important; }
body.is-landing .hero-art{
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  margin: 0 !important;
  opacity: 0.92;
}

/* === v45 FIX: mail/whatsapp must ALWAYS be right-bottom, above footer === */
a.mail-float, a.wa-float{
  position: fixed !important;
  right: var(--fab-right) !important;
  left: auto !important;
  z-index: 2000 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}
/* stack: WA lowest, Mail above */
a.wa-float{ bottom: calc(var(--footer-h) + 18px + env(safe-area-inset-bottom)) !important; }
a.mail-float{ bottom: calc(var(--footer-h) + 18px + 74px + env(safe-area-inset-bottom)) !important; }

/* ensure they are visible on both themes */
html[data-theme='dark'] a.wa-float, body.dark a.wa-float{ background: #ff7a00 !important; color: #0b1b3a !important; border: 1px solid rgba(255,255,255,0.16) !important; }
html[data-theme='dark'] a.mail-float, body.dark a.mail-float{ background: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.94) !important; border: 1px solid rgba(255,255,255,0.14) !important; }
html[data-theme='light'] a.wa-float, body:not(.dark) a.wa-float{ background: rgba(11,27,58,0.10) !important; color: rgba(11,27,58,0.92) !important; border: 1px solid rgba(11,27,58,0.22) !important; }
html[data-theme='light'] a.mail-float, body:not(.dark) a.mail-float{ background: rgba(11,27,58,0.10) !important; color: rgba(11,27,58,0.92) !important; border: 1px solid rgba(11,27,58,0.22) !important; }


/* =====================================================================
   RESPONSIVE BASELINE (v46) – one authoritative set of rules
   Goal: hero artwork always covers the hero viewport, panel floats above,
   and FABs stay bottom-right above the fixed footer across common sizes.
   ===================================================================== */

/* Landing hero sizing: exactly between fixed header + fixed footer */
html.is-landing body{ padding-bottom: 0 !important; }
.landing-hero{
  position: relative;
  height: calc(100dvh - var(--topbar-h) - var(--footer-h));
  min-height: calc(100dvh - var(--topbar-h) - var(--footer-h));
  overflow: hidden;
  display: block;
}

/* Hero artwork: true full-cover background */
.hero-art{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 20% 72% !important; /* desktop default: show structure lower-left */
  z-index: 0 !important;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}

/* Hero content floats above background */
.landing-hero .container{
  position: relative;
  z-index: 2;
  width: min(var(--max), calc(100% - (2 * var(--pad))));
  margin: 0 auto;
  padding-top: clamp(20px, 6vh, 70px);
}

/* Panel layout tuning */
.landing-hero .hero-panel{
  max-width: min(720px, 100%);
  margin-left: clamp(0px, 6vw, 72px);
}

/* Headline: avoid ugly mid-word breaks on mobile */
.landing-hero h1{
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Floating action buttons: always bottom-right, safe-area aware, above footer */
a.mail-float, a.wa-float{
  position: fixed !important;
  left: auto !important;
  right: max(18px, calc(env(safe-area-inset-right) + 18px)) !important;
  z-index: 120 !important;
}
a.wa-float{
  bottom: calc(var(--footer-h) + 18px + env(safe-area-inset-bottom)) !important;
}
a.mail-float{
  bottom: calc(var(--footer-h) + 92px + env(safe-area-inset-bottom)) !important;
}

/* Common breakpoints */
@media (max-width: 980px){
  .hero-art{ object-position: 18% 66% !important; }
  .landing-hero .hero-panel{ margin-left: clamp(0px, 4vw, 36px); }
}

@media (max-width: 640px){
  :root{ --topbar-h: 68px; --footer-h: 92px; }
  .hero-art{ object-position: 18% 58% !important; }
  .landing-hero .container{ padding-top: 18px; }
  .landing-hero .hero-panel{ margin-left: 0; border-radius: 22px; }
  .landing-hero h1{ font-size: clamp(30px, 8vw, 38px); line-height: 1.06; }
  a.mail-float, a.wa-float{ width: 60px !important; height: 60px !important; }
  a.mail-float{ bottom: calc(var(--footer-h) + 86px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 420px){
  .hero-art{ object-position: 16% 54% !important; }
  .landing-hero h1{ font-size: 30px; }
}

/* === v47 Hard overrides (desktop+mobile) === */
html.is-landing, html.is-landing body{
  overflow: hidden !important;
  height: 100% !important;
}

/* Hero layout: card overlaps blueprint */
body.is-landing .landing-hero{
  position: relative !important;
  height: calc(100dvh - var(--topbar-h) - var(--footer-h)) !important;
  min-height: calc(100dvh - var(--topbar-h) - var(--footer-h)) !important;
  overflow: hidden !important;
}
body.is-landing .landing-hero .hero-art{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 18% 62% !important; /* building in frame */
  transform: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
body.is-landing .landing-hero .container{
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-top: clamp(34px, 7vh, 96px) !important;
}
body.is-landing .landing-hero .hero-panel{
  margin-left: clamp(0px, 6vw, 86px) !important;
}

/* Floating action buttons: ALWAYS bottom-right, big, above footer */
a.mail-float, a.wa-float{
  position: fixed !important;
  right: calc(18px + env(safe-area-inset-right)) !important;
  left: auto !important;
  z-index: 999 !important;
  width: 74px !important;
  height: 74px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(10px);
}
a.wa-float{
  bottom: calc(var(--footer-h) + 20px + env(safe-area-inset-bottom)) !important;
  background: #25D366 !important;
  color: #0b1b3a !important;
}
a.mail-float{
  bottom: calc(var(--footer-h) + 108px + env(safe-area-inset-bottom)) !important;
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Slightly smaller on very small phones */
@media (max-width: 520px){
  a.mail-float, a.wa-float{ width: 66px !important; height: 66px !important; }
  a.mail-float{ bottom: calc(var(--footer-h) + 96px + env(safe-area-inset-bottom)) !important; }
}



/* ===========================
   v48 Typography + Werkwijze alignment fixes
   =========================== */

/* Prevent ugly Dutch word breaks like "constructiebereke-ning" */
h1, h2, h3, .hero-title, .step-body h3{
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Paragraphs: keep readable wrapping without forced hyphenation */
p, li, .lead, .muted, .step-body p{
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Werkwijze: keep lines readable and neatly aligned */
.steps .step .step-body{
  text-align: left;
}
.steps .step .step-body p{
  max-width: 72ch !important;
}

/* === v49 werkwijze typography + alignment hardening === */
.steps .step .step-link{
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  text-decoration: none;
  color: inherit;
}
.steps .step .step-no{
  flex: 0 0 44px !important;
}
.steps .step .step-body{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.steps .step .step-body h3,
.steps .step .step-body p{
  text-align: left;
  hyphens: manual;
  word-break: normal;
  overflow-wrap: break-word;
}
.mail-float{ position: fixed !important; right: var(--fab-right) !important; left:auto !important; width: var(--fab-size) !important; height: var(--fab-size) !important; border-radius:999px; z-index:91; }


/* Mobile: keep header CTA (Offerte aanvragen) on one line and sized appropriately */
@media (max-width: 520px){
  .topbar .btn-primary{
    white-space: nowrap;
    padding: 8px 10px !important;
    font-size: 13px;
    line-height: 1;
  }
}
@media (max-width: 380px){
  .topbar .btn-primary{
    padding: 7px 9px !important;
    font-size: 12px;
  }
}


@media (max-width: 700px){
  :root{ --hero-art-pad: clamp(14px, 4vw, 28px); }
  .hero-art{ width: min(720px, 94vw); opacity: 0.78; }
}

/* Simple CTA row */
.cta-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  margin-top: 14px;
}


/* ============================
   GLOBAL RESPONSIVE POLISH
   - footer stays visible, but becomes compact on small screens
   - mail/whatsapp floating buttons scale via CSS vars (no JS overrides)
   ============================ */

/* Keep content clear of the fixed footer (also account for iOS safe-area) */
body{ padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom)) !important; }

footer.footer, .footer{
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* Floating action buttons (mail/whatsapp) – dynamic sizing */
:root{
  --fab-size: clamp(52px, 5.5vw, 64px);
  --fab-right: 22px;
  --fab-gap: 18px;
  --fab-stack-gap: 12px;
}

a.mail-float, a.wa-float{
  width: var(--fab-size) !important;
  height: var(--fab-size) !important;
  right: calc(var(--fab-right) + env(safe-area-inset-right)) !important;
  left: auto !important;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

a.wa-float{
  bottom: calc(var(--footer-h) + var(--fab-gap) + env(safe-area-inset-bottom)) !important;
}

a.mail-float{
  bottom: calc(var(--footer-h) + var(--fab-gap) + var(--fab-size) + var(--fab-stack-gap) + env(safe-area-inset-bottom)) !important;
}

/* Footer: add compact line support */
.footer-note--compact{ display:none; }

@media (max-width: 720px){
  :root{
    --fab-size: clamp(46px, 13vw, 58px);
    --fab-right: 14px;
    --fab-gap: 14px;
    --fab-stack-gap: 12px;
  }

  /* Footer becomes a single clean row + compact note */
  footer.footer, .footer{ padding: 10px 14px; }
  .footer-logo{ height: 34px; }
  .footer-note{ display:none !important; }
  .footer-note--compact{ display:block; }

  /* Mobile footer layout: avoid "glitchy" spacing by stacking and left-aligning */
  .footer{ justify-content: flex-start !important; align-items: flex-start; gap: 10px; }
  .footer-lockup{ width: 100%; flex-wrap: wrap; }
  .footer-text{ min-width: 0; }
  .footer-links{ width: 100%; justify-content: flex-start; }

  /* Prevent "space-between" glitches on narrow screens */
  .footer{ justify-content: flex-start !important; align-items: flex-start; }
  .footer-lockup{ width: 100%; flex-wrap: wrap; }
  .footer-text{ min-width: 0; }
  .footer-links{ width: 100%; justify-content: flex-start; }

  /* Reduce footer clutter: keep only the essentials */
  .footer-social{ display:none !important; }
  .footer-links{ gap: 10px; flex-wrap: wrap; }
  .footer-links span:nth-child(4){ display:none; } /* hide DNR link on mobile */
}

@media (max-width: 420px){
  /* Extra-tight phones: keep footer stable and avoid layout jumps */
  .footer-logo{ height: 30px; }
  .footer-name{ font-size: 14px; }
  .footer-links{ gap: 8px; }
}

@media (max-height: 740px){
  /* On short viewports, prefer compact footer even on wider screens */
  .footer-note{ display:none !important; }
  .footer-note--compact{ display:block; }
  .footer-social{ display:none !important; }
}


/* Annotate app: keep workspace inside the viewport between fixed header/footer */
.page-annotate .workspace{
  height: calc(100vh - var(--topbar-h) - var(--footer-h));
}

/* Landing hero artwork: add breathing room on wide screens (reduce the apparent "zoom") */
@media (min-width: 900px){
  body.is-landing .hero-art{
    inset: var(--hero-art-pad) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* =====================================================================
   v78 – LANDING (INDEX) AUTHORITATIVE OVERRIDES
   Fixes the “hero padding creates scroll” case by pinning the hero area
   between the fixed header and fixed footer, and hard-locking overflow.
   ===================================================================== */

html.is-landing,
html.is-landing body{
  height: 100dvh !important;
  overflow: hidden !important;
}

/* Ensure body padding cannot accidentally create scroll on the landing */
html.is-landing body{
  padding-bottom: 0 !important;
}

/* Pin the hero exactly inside the visible window (between header/footer) */
body.is-landing main.landing-hero{
  position: fixed !important;
  top: var(--topbar-h) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--footer-h) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Make the artwork + “space around it” scale together at all sizes */
body.is-landing{
  --hero-art-pad: clamp(14px, 4.8vw, 140px);
}

body.is-landing .hero-art{
  position: absolute !important;
  inset: var(--hero-art-pad) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Keep hero card comfortably below the header on short screens */
body.is-landing .landing-hero > .container{
  padding-top: clamp(14px, 3.6vh, 52px) !important;
}

@media (max-width: 720px), (max-height: 740px){
  body.is-landing{ --hero-art-pad: clamp(10px, 4vw, 26px); }
  body.is-landing .hero-panel{ padding: 18px !important; }
  body.is-landing .hero-panel h1{ font-size: clamp(26px, 7.6vw, 38px) !important; }
}

/* =====================================================================
   v80 – LANDING HERO ART: ACTUAL “BREATHING ROOM” ON ULTRAWIDE
   Why you still saw it huge: the PNG itself is edge-to-edge linework.
   So we scale the artwork element inside the fixed hero viewport.
   Result: no scroll, header/footer stay fixed, but the blueprint is
   visibly smaller with space around it.
   ===================================================================== */

html.is-landing,
html.is-landing body{
  height: 100dvh !important;
  overflow: hidden !important;
}

body.is-landing main.landing-hero{
  position: fixed !important;
  top: var(--topbar-h, 64px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--footer-h, 70px) !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Default scale (desktop): smaller artwork + visible margin */
body.is-landing{
  --hero-art-scale: 0.84;
}

/* Ultrawide: shrink a bit more */
@media (min-width: 1400px){
  body.is-landing{ --hero-art-scale: 0.78; }
}
@media (min-width: 1800px){
  body.is-landing{ --hero-art-scale: 0.74; }
}

/* Short screens: don’t over-shrink (keep readable composition) */
@media (max-height: 760px){
  body.is-landing{ --hero-art-scale: 0.86; }
}

/* The blueprint behaves like a background, but scaled down inside the viewport */
body.is-landing .hero-art{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: 50% 60% !important;
  transform: scale(var(--hero-art-scale)) !important;
  transform-origin: 50% 60% !important;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}


/* =========================================================
   FINAL OVERRIDE — Landing hero background artwork sizing
   This fixes the "too big" hero blueprint on wide screens.
   ========================================================= */
body.is-landing{ --hero-art-pad: clamp(28px, 5.6vmin, 180px); }

body.is-landing .landing-hero::before{
  /* The blueprint/light hero image is painted on ::before (background-image).
     Constrain it inside the viewport with breathing room, without introducing scroll. */
  inset: var(--hero-art-pad) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}

/* Ultrawide: add more breathing room */
@media (min-aspect-ratio: 21/9){
  body.is-landing{ --hero-art-pad: clamp(46px, 7.8vmin, 260px); }
}

/* Hide legacy <img class="hero-art"> layer (we use ::before for hero art) */
body.is-landing .hero-art{ display: none !important; }

/* === v82: LANDING HERO BLUEPRINT (authoritative) ===
   The blueprint artwork on the homepage is rendered via .landing-hero::before.
   Earlier legacy blocks may set content:none; this final block forces it ON.
   Also guarantees: no scroll, scales with screen size, keeps breathing room.
*/
body.is-landing .landing-hero{
  overflow: hidden !important;
}

body.is-landing .landing-hero::before{
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  user-select: none !important;

  /* breathing room that scales with viewport */
  --hero-art-pad: clamp(26px, 4.5vmin, 140px);
  inset: var(--hero-art-pad) !important;

  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: 78% 62% !important;
}

/* Theme-specific artwork files */
html[data-theme='dark'] body.is-landing .landing-hero::before,
body.is-landing.dark .landing-hero::before,
body.dark.is-landing .landing-hero::before{
  background-image: url("assets/hero-blueprint.png") !important;
  opacity: 0.92 !important;
}

html[data-theme='light'] body.is-landing .landing-hero::before,
body.is-landing:not(.dark) .landing-hero::before{
  background-image: url("assets/hero-light.png") !important;
  opacity: 0.55 !important;
}

/* Extra shrink on ultrawide so it never feels "too big" */
@media (min-aspect-ratio: 21/9){
  body.is-landing .landing-hero::before{
    --hero-art-pad: clamp(44px, 6.5vmin, 220px);
    background-position: 72% 58% !important;
  }
}

/* Make sure any <img class="hero-art"> cannot interfere on landing */
body.is-landing img.hero-art{ display: none !important; }

/* === v88: LOCK header/footer positioning across themes (fix light theme bug) ===
   Light theme had legacy "brushed aluminium" rules setting position: relative on .topbar/.footer.
   Positioning must be identical across themes; only colors should change.
*/
header.topbar, .topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 60 !important;
}
footer.footer, .footer{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 55 !important;
}

/* Extra safety: cover both theme selectors explicitly */
html[data-theme='light'] header.topbar,
html[data-theme='light'] .topbar,
html[data-theme='light'] footer.footer,
html[data-theme='light'] .footer{
  position: fixed !important;
}


/* v89: Voorbeelden – maak illustraties + titels klikbaar */
.card-media-link{
  display:block;
  width:100%;
  cursor:pointer;
}
.card-media-link .card-illu{
  display:block;
}
.card-title-link{
  color: inherit;
  text-decoration: none;
}
.card-title-link:hover{
  text-decoration: underline;
}


/* === v94 Light theme refinement (matte metal, no brushed steel) ===
   - Removes brushed/striped aluminium textures in light theme
   - Keeps brand CTA orange, but makes UI symbols/accents neutral grey
*/
html[data-theme="light"]{
  --metal-a: #b2bac4;   /* top of metal gradient (darker) */
  --metal-b: #9aa3ad;   /* bottom of metal gradient (darker) */
  --metal-btn-a: #dde2ea;
  --metal-btn-b: #c4cbd6;
  --metal-line: rgba(11,27,58,0.18);
  --symbol-gray: rgba(11,27,58,0.62);
}

/* Header / footer: clean matte metal (no brushed stripes) */
html[data-theme="light"] .header,
html[data-theme="light"] header,
html[data-theme="light"] .topbar,
html[data-theme="light"] .footer,
html[data-theme="light"] footer.footer{
  background-color: var(--metal-a) !important;
  background-image: linear-gradient(180deg, var(--metal-a), var(--metal-b)) !important;
  border-color: var(--metal-line) !important;
}

/* Neutral buttons: matte metal. (Primary CTA stays orange) */
html[data-theme="light"] .btn,
html[data-theme="light"] button,
html[data-theme="light"] a.btn{
  background-color: var(--metal-btn-a) !important;
  background-image: linear-gradient(180deg, var(--metal-btn-a), var(--metal-btn-b)) !important;
  border-color: rgba(11,27,58,0.22) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .btn-primary{
  background-image: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  background-color: var(--accent) !important;
  border-color: rgba(255,122,0,0.55) !important;
}

/* Remove any brushed overlay texture from hero panel */
html[data-theme="light"] .hero-panel::before,
body:not(.dark) .hero-panel::before{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Neutral (grey) UI symbols/accents in light theme */
html[data-theme="light"] .nav a:hover{ background: rgba(11,27,58,0.06) !important; }
html[data-theme="light"] .nav a.is-active::after{ background: rgba(11,27,58,0.38) !important; }
html[data-theme="light"] .wstep.is-active .ico{ background-color: var(--symbol-gray) !important; }

/* Light theme selection highlight should be neutral, not orange */
html[data-theme="light"] ::selection{ background: rgba(11,27,58,0.18) !important; }


/* Projectaanvraag status + errors */
.form-status{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);padding:12px 14px;border-radius:14px;margin:0 0 14px 0}
.form-status.ok{border-color:rgba(60,180,120,.55);background:rgba(60,180,120,.12)}
.form-status.err{border-color:rgba(230,90,90,.55);background:rgba(230,90,90,.12)}
.form-status .title{font-weight:700;margin:0 0 6px 0}
.form-status ul{margin:6px 0 0 18px}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.is-loading{opacity:.7;pointer-events:none}


/* ========= Hufterproof helpers: live validatie + review modal ========= */
.form .hint{ display:block; font-size: 12.5px; opacity:.78; margin-top:6px; line-height:1.35; }
label.is-valid > input, label.is-valid > select, label.is-valid > textarea{ outline: 2px solid rgba(0,200,140,.45); outline-offset: 2px; }
label.is-invalid > input, label.is-invalid > select, label.is-invalid > textarea{ outline: 2px solid rgba(239,68,68,.55); outline-offset: 2px; }

label.span-2.is-valid, label.is-valid{ position:relative; }
label.span-2.is-valid::after, label.is-valid::after{
  content:"✓";
  position:absolute;
  right: 10px;
  top: 10px;
  font-weight:700;
  opacity:.75;
}
label.span-2.is-invalid::after, label.is-invalid::after{
  content:"!";
  position:absolute;
  right: 11px;
  top: 10px;
  font-weight:800;
  opacity:.8;
}

.modal{ position:fixed; inset:0; display:none; z-index: 9999; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.modal__dialog{
  position:relative;
  max-width: 760px;
  margin: 6vh auto;
  background: rgba(12, 22, 45, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.modal__head, .modal__foot{ padding: 14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modal__head{ border-bottom: 1px solid rgba(255,255,255,0.08); }
.modal__body{ padding: 14px 16px; }
.modal__close{
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
}
.review{ display:grid; gap:10px; }
.review__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.review__item{ padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); }
.review__k{ font-size: 12px; opacity:.8; margin:0 0 4px 0; }
.review__v{ margin:0; white-space: pre-wrap; word-break: break-word; }
.review__files{ margin:0; padding-left: 18px; }
@media (max-width: 720px){
  .review__grid{ grid-template-columns: 1fr; }
  .modal__dialog{ margin: 4vh 12px; }
}



/* ========= Mobile header icons: force white in dark theme ========= */
html[data-theme="dark"] .nav-toggle,
body.dark .nav-toggle,
html[data-theme="dark"] #themeToggle,
body.dark #themeToggle{
  color: var(--ink);
}



/* ========= Fix: remove "brushed steel" texture in light theme (clean header/buttons) ========= */
body:not(.dark) .header,
body:not(.dark) header,
body:not(.dark) .topbar,
body:not(.dark) .footer{
  background-image: none !important;
  background-color: color-mix(in oklab, var(--bg) 96%, transparent) !important;
}

body:not(.dark) .btn,
body:not(.dark) button,
body:not(.dark) a.btn{
  background-image: none !important;
  background-color: var(--surface) !important;
}


/* ========= Hufterproof: inline field errors ========= */
.field-error{
  display:block;
  font-size: 12.5px;
  margin-top: 6px;
  color: rgba(239,68,68,.95);
  line-height: 1.35;
}
label.is-valid .field-error{ display:none; }


/* ========= Fix: date input calendar icon should be white in dark theme ========= */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
body.dark input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.1) contrast(1.1);
  opacity: .9;
  cursor: pointer;
}
html[data-theme="dark"] input[type="date"]::-webkit-inner-spin-button,
body.dark input[type="date"]::-webkit-inner-spin-button{
  filter: invert(1);
  opacity: .9;
}



/* ========= Wizard: strakkere true/false (checkbox) controls ========= */
#projectWizard input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  box-shadow: 0 4px 16px rgba(0,0,0,.18) inset, 0 6px 18px rgba(0,0,0,.12);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  vertical-align: middle;
}
#projectWizard input[type="checkbox"]:hover{
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.09);
}
#projectWizard input[type="checkbox"]:active{
  transform: scale(.96);
}
#projectWizard input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,166,0,.22), 0 4px 16px rgba(0,0,0,.18) inset, 0 6px 18px rgba(0,0,0,.12);
}
#projectWizard input[type="checkbox"]::after{
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2.5px solid rgba(255,255,255,.0);
  border-bottom: 2.5px solid rgba(255,255,255,.0);
  transform: rotate(-45deg) translateY(-1px);
  transition: border-color .12s ease;
}
#projectWizard input[type="checkbox"]:checked{
  background: linear-gradient(180deg, rgba(255,166,0,.95), rgba(255,126,0,.95));
  border-color: rgba(255,200,120,.9);
  box-shadow: 0 10px 22px rgba(255,140,0,.25);
}
#projectWizard input[type="checkbox"]:checked::after{
  border-color: rgba(10,18,35,.95);
}
#projectWizard label{
  gap: 10px;
}
/* Optional: if we have row wrappers, keep checkbox aligned right */
#projectWizard .check-row,
#projectWizard .confirm-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
#projectWizard .check-row label,
#projectWizard .confirm-row label{
  display:flex;
  align-items:center;
  justify-content: space-between;
  width: 100%;
  gap: 14px;
}



/* Sketch step */
.sketch-step{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 12px;
  align-items: start;
}
.sketch-stage{
  min-height: 520px;
  height: min(70vh, 760px);
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
}
.sketch-frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#0b0f14;
}
.sketch-side{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.sketch-actions .btn{ width:100%; }
.sketch-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-height: min(55vh, 620px);
  overflow:auto;
  padding-right: 4px;
}
.sketch-card{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  padding: 10px;
}
.sketch-card .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}
.sketch-card img{
  width:100%;
  height:auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  margin-top: 8px;
}
.sketch-card .meta{
  font-size: 12px;
  color: rgba(255,255,255,0.70);
}
.sketch-card .btn{
  padding: 8px 10px;
}
@media (max-width: 980px){
  .sketch-step{ grid-template-columns: 1fr; }
  .sketch-stage{ height: 70vh; min-height: 520px; }
}


/* ─────────────────────────────────────────────────────────────
   Planning indicator (traffic light) - start-project + mail UX
   ───────────────────────────────────────────────────────────── */
.planning-indicator{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin: 10px 0 14px 0;
}
.planning-indicator__dot{
  width:12px; height:12px; border-radius:999px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.planning-indicator__text{ display:flex; flex-direction:column; line-height:1.2; }
.planning-indicator__title{ font-weight:700; font-size:14px; }
.planning-indicator__sub{ opacity:.85; font-size:12.5px; }

.planning--green  .planning-indicator__dot{ background:#22c55e; }
.planning--orange .planning-indicator__dot{ background:#f59e0b; }
.planning--red    .planning-indicator__dot{ background:#ef4444; }

.planning-indicator__meta{
  margin-left:auto;
  font-size:12px;
  opacity:.8;
  white-space:nowrap;
}
@media (max-width: 700px){
  .planning-indicator{ flex-wrap:wrap; }
  .planning-indicator__meta{ margin-left:0; }
}

/* ──────────────────────────────────────────────────────────────
   STARTFASE: availability/planning HIDDEN in aanvraag
   In de startfase (pre-drukte) willen we klanten niet afschrikken met
   doorlooptijd/capaciteit-indicaties. Daarom verbergen we:
   - de planning indicator ("Beschikbaarheid")
   - planning velden in stap "Planning & vergunning" (deadline / extra info)

   Later weer aanzetten:
   - verwijder 'startphase-hide-planning' van <body> in start-project.html
   - (optioneel) deze CSS-regel verwijderen
   ────────────────────────────────────────────────────────────── */
.startphase-hide-planning #planningIndicator,
.startphase-hide-planning .field-availability{
  display:none !important;
}


/* --- v225 mobile fit overrides --- */
@media (max-width: 560px){
  .footer-note--full{display:none !important;}
  .footer-note--compact{display:flex !important; align-items:center; gap:6px; flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .footer-note--compact span, .footer-note--compact a{white-space:nowrap;}
  .footer-note--compact{font-size:12px; line-height:1.2;}
  .footer-text{min-width:0;}
}
@media (max-width: 420px){
  .footer-note--compact{font-size:11px;}
  .footer-social{display:none !important;}
}


/* v230: hard mobile header/footer constraints (one-row topbar, one-line footer) */
@media (max-width: 480px){
  :root{
    --topbar-h: 56px;
    --footer-h: 72px;
  }
  .topbar{
    height: var(--topbar-h) !important;
    min-height: var(--topbar-h) !important;
    max-height: var(--topbar-h) !important;
    padding: 0 12px !important;
    overflow: hidden;
  }
  .topbar, .topbar .nav, .topbar .nav-actions{
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  /* Keep only essentials visible in header on mobile */
  #themeToggle{ display: none !important; }
  .nav-links{ display: none !important; }
  .brand-logo{ height: 40px !important; }
  .nav-actions{ gap: 10px !important; }
  .nav-actions .btn-primary{
    white-space: nowrap !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* Footer: always one line (no wrap), allow swipe if needed */
  .footer-links{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  }
  .footer-links::-webkit-scrollbar{ display:none; }
  .footer-note, .footer-text{
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .footer-note::-webkit-scrollbar, .footer-text::-webkit-scrollbar{ display:none; }
}


/* v233: Tarieven pagina rustiger (JABO clean) */
.tarieven-page .page-hero{
  padding: 96px 0 22px;
}
.tarieven-page .page-title{
  letter-spacing: -0.02em;
}
.tarieven-page .page-sub{
  max-width: 62ch;
}
.tarieven-page .section{
  padding: 26px 0 46px;
}
.tarieven-page .container{
  width: min(1040px, 92vw);
}

/* Calmer cards: less shadow, more whitespace, subtle borders */
.tarieven-page .card{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
  padding: 22px;
  border-radius: 18px;
}
body:not(.dark).tarieven-page .card{
  background: rgba(0,0,0,.025);
  border-color: rgba(0,0,0,.08);
}

.tarieven-page .card h2{
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 1.18;
  margin-bottom: 10px;
}
.tarieven-page .card p{
  max-width: 70ch;
}

/* Primary top blocks: subtle accent + more hierarchy */
.tarieven-page .grid-2 > .card{
  position: relative;
}
.tarieven-page .grid-2 > .card::before{
  content: "";
  position: absolute;
  left: 18px; right: 18px; top: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
body:not(.dark).tarieven-page .grid-2 > .card::before{
  background: rgba(0,0,0,.12);
}

/* Bullets: tighter + calmer */
.tarieven-page .bullets{
  margin: 10px 0 0 18px;
}
.tarieven-page .bullets li{
  margin: 6px 0;
}

/* Price/value blocks: reduce visual noise */
.tarieven-page .ratebox{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}
body:not(.dark).tarieven-page .ratebox{
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.08);
}
.tarieven-page .rate-row{
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body:not(.dark).tarieven-page .rate-row{
  border-bottom-color: rgba(0,0,0,.06);
}
.tarieven-page .rate-row:last-child{ border-bottom: 0; }
.tarieven-page .rate-label{ opacity: .78; }
.tarieven-page .rate-value{ font-weight: 800; }

/* Grids: slightly more breathing room */
.tarieven-page .grid-2{ gap: 18px; }
.tarieven-page .grid-3{ gap: 18px; }

/* Reduce “card-wall” feeling on mobile with section dividers */
@media (max-width: 520px){
  .tarieven-page .page-hero{ padding: 84px 0 18px; }
  .tarieven-page .card{ padding: 18px; border-radius: 16px; }
  .tarieven-page .section{ padding: 20px 0 34px; }
}

/* v234: Tarieven inhoud & uitlijning (JABO waardig) */
.tarieven-page .section-title{ margin: 0 0 10px; }
.tarieven-page .section-lead{ margin: 0 0 14px; max-width: 70ch; }
.tarieven-page .section-note{ margin-top: 14px; }

/* Price list rows (clean, aligned) */
.tarieven-page .price-list{
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.tarieven-page .price-row{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: none;
}
body:not(.dark).tarieven-page .price-row{
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.08);
}
.tarieven-page .price-row--featured{
  border-color: rgba(255,255,255,.18);
}
body:not(.dark).tarieven-page .price-row--featured{
  border-color: rgba(0,0,0,.14);
}
.tarieven-page .price-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.tarieven-page .price-title{
  font-weight: 800;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.tarieven-page .price-range{
  font-weight: 900;
  white-space: nowrap;
  font-size: 18px;
}
.tarieven-page .pill{
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  opacity: .85;
  margin-left: 8px;
  transform: translateY(-1px);
}
body:not(.dark).tarieven-page .pill{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}
.tarieven-page .price-bullets{
  margin: 0 0 8px 18px;
}
.tarieven-page .price-bullets li{
  margin: 6px 0;
}

/* Examples as calm appendix */
.tarieven-page .example-list{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.tarieven-page .example-row{
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
body:not(.dark).tarieven-page .example-row{
  border-top-color: rgba(0,0,0,.08);
}
.tarieven-page .example-row:first-child{ border-top: 0; padding-top: 0; }
.tarieven-page .example-title{
  font-weight: 800;
  letter-spacing: -0.01em;
}
.tarieven-page .example-price{
  font-weight: 900;
  white-space: nowrap;
  margin-top: 4px;
}
.tarieven-page .example-desc{
  opacity: .78;
  margin-top: 8px;
  max-width: 90ch;
}

/* Mobile alignment */
@media (max-width: 520px){
  .tarieven-page .price-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tarieven-page .price-range{ font-size: 17px; }
}

/* v241: modal */
.modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.modal-card{position:relative;min-width:320px;max-width:520px;width:92vw;background:#0f172a;border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:16px;color:#fff}
.modal-title{font-weight:700;font-size:18px;margin-bottom:4px}
.modal-sub{opacity:.8;margin-bottom:12px;font-size:13px}
.radio-row{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid rgba(255,255,255,.10);border-radius:12px;margin-bottom:8px}
.radio-row input{transform:scale(1.1)}
.modal-sep{height:1px;background:rgba(255,255,255,.10);margin:12px 0}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.modal-card .input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;outline:none}


/* v245: active level badge */
.level-badge{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,0.10);border:1px solid rgba(0,0,0,0.18);font-weight:700;font-size:12px;color:#1a1f2a;}
.dark .level-badge{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.18);color:#fff;}