.btn--red {
  /* Map legacy .btn--red to the primary blue styling so no buttons appear red.
     Keep this class for backward compatibility in HTML. */
  background:#0062cc; border-color:#0059b8; color:#fff;
}
.btn--red:hover{background:#0056b0; border-color:#004f9a}
/* Rode accenten voor headings en iconen */
h2 {
  color: var(--brand);
}
.checklist li::before {
  background: var(--brand);
  color: #fff;
}
/* ===== Base / Tokens ===== */
:root{
  /* Primary accent color changed from yellow (#ffc720) to red (#e63946) */
  --brand:#e63946;
  --ink:#111;
  --ink-soft:#444;
  --bg:#fff;
  --bg-alt:#f7f7f9;
  --line:#e9e9ee;
  --radius:12px;
  --radius-sm:8px;
  --space:clamp(16px, 2.5vw, 24px);
  --max:1152px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  max-width:100%;
  overflow-x:hidden;
}
body{
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--space)}
.section{padding-block:clamp(32px,6vw,72px)}
.section--alt{background:var(--bg-alt)}
.lead{font-size:clamp(1.05rem, 1.15rem + .6vw, 1.35rem); color:var(--ink-soft); font-weight:500}
.muted{color:#666}
.small{font-size:.9rem}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(6px);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:600}
.brand-mark{display:block}
.brand-text{letter-spacing:.2px}

.site-nav{display:flex; gap:16px; align-items:center}
.site-nav a{padding:8px 10px;border-radius:8px}
.site-nav a.is-active{background:var(--bg-alt)}
.nav-toggle{display:none}

@media (max-width:860px){
  .nav-toggle{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); background:#fff; border-radius:8px}
  .site-nav{position:absolute; inset:64px 0 auto 0; background:#fff; border-bottom:1px solid var(--line);
    display:none; flex-direction:column; align-items:flex-start; padding:16px var(--space); gap:8px}
  .site-nav.open{display:flex}
}

/* ===== Layout helpers ===== */
.grid2{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,40px)}
@media (max-width:860px){.grid2{grid-template-columns:1fr}}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(16px,2vw,24px); box-shadow:0 6px 18px rgba(16,24,40,0.04); transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(16,24,40,0.08)}
.card-list{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:720px){.card-list{grid-template-columns:1fr}}

.usps{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (max-width:720px){.usps{grid-template-columns:1fr}}
.usp{background:#fff; border:1px dashed var(--line); border-radius:10px; padding:14px}

.quotes{display:grid; gap:12px}
.quotes blockquote{margin:0; padding:16px 18px; background:#fff; border-left:4px solid var(--brand); border-radius:8px}

.steps{counter-reset:step; display:grid; gap:10px; padding-left:0; list-style:none}
.steps li{background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; position:relative}
.steps li::before{counter-increment:step; content:counter(step); position:absolute; left:-10px; top:-10px; background:var(--brand); color:#111; font-weight:700; border-radius:999px; width:28px; height:28px; display:grid; place-items:center; border:2px solid #111}

.checklist{padding-left:0; list-style:none; display:grid; gap:10px}
.checklist li{padding-left:40px; position:relative}
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; width:26px; height:26px; display:grid; place-items:center; background:var(--brand); color:#fff; font-weight:700; border-radius:999px}

/* Make the USP boxes on the homepage use the same checkmark badge styling */
.usps{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.usps .usp{position:relative; padding-left:40px}
.usps .usp::before{content:"✓"; position:absolute; left:0; top:6px; width:26px; height:26px; display:grid; place-items:center; background:var(--brand); color:#fff; font-weight:700; border-radius:999px}

/* ===== Hero ===== */
.hero{background:linear-gradient(180deg, #fff 0%, #fff 60%, var(--bg-alt) 100%); padding-block:48px}
.hero--slim{background:#fff}
.hero h1{font-size:clamp(1.6rem, 2.4rem + 1.4vw, 3rem); margin:0 0 .6rem; line-height:1.08}
.hero .lead{font-size:clamp(1.05rem,1.15rem + .6vw,1.35rem); color:var(--ink-soft); margin-bottom:1rem}
.trust-list{margin-top:16px; padding-left:0; list-style:none; color:#333; display:grid; gap:6px}
.hero-media img{display:block; border-radius:12px; box-shadow:0 8px 24px rgba(16,24,40,0.08)}

/* Profile photo container: high-end crop using aspect-ratio + object-fit
   - Uses a slightly tall portrait ratio (4:5) for classical profile composition
   - Falls back to square on very small screens for compact layout */
.profile-photo{
  width:100%;
  max-width:420px; /* keeps the portrait from growing too wide on large screens */
  aspect-ratio: 4 / 5; /* portrait crop */
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(16,24,40,0.08);
  background:linear-gradient(180deg,#f6f7fb,#fff); /* subtle placeholder while image loads */
}
.profile-photo img{
  width:100%;
  height:100%;
  object-fit:cover;   /* crop to fill the container */
  object-position:center center; /* focus on the center */
  display:block;
}

@media (max-width:520px){
  .profile-photo{ aspect-ratio: 1 / 1; max-width:320px; }
}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:10px; border:1px solid transparent; font-weight:600; text-decoration:none}

/* Primary filled buttons (blue) */
.btn--primary{background:#0062cc; border-color:#0059b8; color:#fff}
.btn--primary:hover{background:#0056b0; border-color:#004f9a}

/* Ghost buttons (outline) */
.btn--ghost{background:transparent; border:1px solid rgba(0,98,204,0.15); color:#0062cc}
.btn--ghost:hover{background:rgba(0,98,204,0.06)}

.btn--lg{padding:14px 20px; font-size:1.05rem}

/* Neutral (no color) - used for 'Meer over mij' */
.btn--neutral{background:transparent; border:1px solid var(--line); color:inherit}
.btn--neutral:hover{border-color:#cfd8e3}

/* ===== CTA band ===== */
.cta-band{background:#111; color:#fff}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:20px}
.cta-inner .btn{background:#0062cc; border-color:#0059b8; color:#fff}

/* ===== Forms ===== */
.form{display:grid; gap:12px}
label{display:grid; gap:8px; font-weight:500}
input, textarea{
  width:100%; padding:12px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit
}
input:focus, textarea:focus{outline:2px solid var(--brand); outline-offset:2px}
.checkbox{display:flex; align-items:flex-start; gap:10px}
.checkbox input{margin-top:5px}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line); background:#fafbfd}
.footer-inner{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-block:32px}
.site-footer a{color:var(--ink)}
.footer-nav{display:flex; gap:12px; flex-wrap:wrap}

/* ===== Card images (small thumbnails) ===== */
.card--with-image {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.card--with-image .card-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  object-fit: cover;
}


/* ===== Accessibility ===== */
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}

/* Utility accents (red) - not for buttons */
.border-accent { border-color: var(--brand) !important }
.link--accent-red:hover { color: var(--brand) }
.h3-accent { position:relative }
.h3-accent::after { content:''; display:block; width:40px; height:4px; background:var(--brand); margin-top:8px; border-radius:4px }

/* Additional tasteful red accent utilities for a premium look */
.accent-badge{display:inline-block;padding:.25rem .5rem;border-radius:999px;background:linear-gradient(180deg,rgba(230,57,70,0.12),rgba(230,57,70,0.06));color:var(--brand);font-weight:700;border:1px solid rgba(230,57,70,0.12)}
.accent-underline{position:relative}
.accent-underline::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:3px;background:linear-gradient(90deg,transparent,rgba(230,57,70,0.18),transparent);border-radius:3px}
.card--accent-top{position:relative}
.card--accent-top::before{content:'';position:absolute;left:16px;right:16px;top:0;height:6px;background:linear-gradient(90deg,var(--brand),rgba(230,57,70,0.6));border-top-left-radius:8px;border-top-right-radius:8px}
.corner-accent{position:relative}
.corner-accent::after{content:'';position:absolute;right:12px;top:12px;width:10px;height:10px;background:var(--brand);opacity:.18;border-radius:2px;filter:blur(3px)}

/* ===== Google Reviews ===== */
.google-reviews{margin-top:18px;background:linear-gradient(180deg,#fff,#fbfbfe);border:1px solid var(--line);border-radius:12px;padding:16px}
.google-reviews .gr-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.google-reviews .gr-title{font-weight:700}
.google-reviews .review-list{display:grid;gap:12px}
.google-reviews .review{background:#fff;border-radius:10px;padding:12px;border:1px solid var(--line);display:flex;gap:12px}
.google-reviews .review .avatar{width:44px;height:44px;border-radius:999px;background:#eee;flex:0 0 44px;display:grid;place-items:center;font-weight:700;color:var(--ink-soft)}
.google-reviews .review .body{flex:1}
.google-reviews .review .meta{font-size:.85rem;color:var(--ink-soft);margin-bottom:8px}
.google-reviews .gr-actions{display:flex;gap:8px;align-items:center}
.google-reviews .btn--gm{background:transparent;border:1px solid var(--line);padding:8px 10px;border-radius:8px}
.google-reviews .gr-empty{padding:12px;color:var(--ink-soft)}