:root{
    --red:#D32027;
    --red-dark:#A31820;
    --red-hover:#B81C22;
    --black:#141414;
    --black-soft:#2A2A2A;
    --white:#FFFFFF;
    --off-white:#FAFAFA;
    --gray-50:#F6F6F6;
    --gray-100:#EEEEEE;
    --gray-200:#DCDCDC;
    --gray-400:#9A9A9A;
    --gray-600:#555555;
    --gray-800:#2E2E2E;
    --line:#E8E8E8;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Barlow',system-ui,-apple-system,sans-serif;
    background:var(--white);
    color:var(--black);
    line-height:1.6;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--red);color:var(--white)}
  img{max-width:100%;display:block}

  h1,h2,h3,h4,.display{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    line-height:1;
    letter-spacing:-.005em;
    text-transform:uppercase;
  }

  .wrap{max-width:1320px;margin:0 auto;padding:0 28px}
  .eyebrow{
    display:inline-flex;align-items:center;gap:12px;
    font-family:'Barlow',sans-serif;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--red);
  }
  .eyebrow::before{
    content:'';width:32px;height:2px;background:var(--red);
  }

  /* ——— TOP BAR — zwart, zoals in v2 ——— */
  .topbar{
    background:var(--black);
    color:var(--white);
    font-size:13px;
    padding:10px 0;
    border-bottom:3px solid var(--red);
  }
  .topbar-inner{
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    flex-wrap:wrap;
  }
  .topbar-left,.topbar-right{
    display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  }
  .topbar a{color:var(--white);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
  .topbar a:hover{color:var(--red)}
  .topbar svg{width:14px;height:14px;color:var(--red);flex-shrink:0}
  .topbar-divider{opacity:.3}
  .topbar-right svg{width:13px;height:13px;vertical-align:-2px;margin-right:6px}
  .topbar-right strong{font-weight:700}

  /* ——— NAV ——— */
  nav.main{
    background:var(--white);
    padding:16px 0;
    position:sticky;top:0;z-index:100;
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 rgba(0,0,0,.02);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .logo-link{display:flex;align-items:center;text-decoration:none}
  .logo-img{
    height:52px;
    width:auto;
    display:block;
  }
  .nav-links{display:flex;gap:30px;align-items:center;list-style:none}
  .nav-links a{
    color:var(--black);
    text-decoration:none;
    font-size:13.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    position:relative;padding:6px 0;
    transition:color .2s;
  }
  .nav-links a:hover,.nav-links a.active{color:var(--red)}
  .nav-links a::after{
    content:'';position:absolute;bottom:0;left:0;width:0;height:2px;
    background:var(--red);transition:width .25s ease;
  }
  .nav-links a:hover::after,.nav-links a.active::after{width:100%}
  .nav-cta{
    background:var(--red);color:var(--white);
    padding:12px 20px;
    text-decoration:none;
    font-weight:700;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.06em;
    transition:background .2s;
    display:inline-flex;align-items:center;gap:10px;
  }
  .nav-cta:hover{background:var(--red-dark)}
  .burger{display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--black)}

  /* ——— HERO — lichte split layout met pand-foto ——— */
  .hero{
    position:relative;
    background:#FAF8F5;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }
  .hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    align-items:stretch;
    min-height:560px;
  }
  .hero-text{
    padding:80px 60px 80px 28px;
    display:flex;flex-direction:column;justify-content:center;
    max-width:680px;
    margin-left:auto;
    position:relative;
    background:
      radial-gradient(circle at 85% 15%, rgba(211,32,39,.09) 0%, transparent 50%),
      radial-gradient(circle at 8% 92%, rgba(211,32,39,.06) 0%, transparent 40%),
      #FAF8F5;
  }
  .hero-text::before{
    content:'';
    position:absolute;left:0;top:54px;bottom:54px;width:4px;background:var(--red);
    z-index:2;
  }
  /* Grote decoratieve rode V op de achtergrond */
  .hero-text::after{
    content:'V';
    position:absolute;
    right:-40px;bottom:-80px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    font-size:460px;
    line-height:.8;
    color:var(--red);
    opacity:.07;
    pointer-events:none;
    z-index:0;
    letter-spacing:-.04em;
  }
  .hero-text > *{position:relative;z-index:1}
  /* Handgeschreven "Kom eens kijken" — knipoog naar de banner op het pand */
  .hero-slogan{
    font-family:'Caveat',cursive;
    font-weight:700;
    font-size:40px;
    color:var(--black);
    line-height:1;
    margin:4px 0 28px;
    display:inline-block;
    position:relative;
    padding:0 4px 6px 0;
    align-self:flex-start;
  }
  .hero-slogan::after{
    content:'';
    position:absolute;left:0;right:0;bottom:0;
    height:5px;background:var(--red);
    border-radius:3px;
    transform:skewX(-4deg);
  }
  .hero h1{
    font-size:clamp(54px,7.5vw,104px);
    line-height:.93;
    letter-spacing:-.01em;
    margin:22px 0 24px;
    color:var(--black);
  }
  .hero h1 .red{color:var(--red)}
  .hero-lead{
    font-size:18px;
    line-height:1.65;
    max-width:46ch;
    color:var(--gray-600);
    margin-bottom:36px;
  }
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 26px;
    font-family:'Barlow',sans-serif;
    font-weight:700;
    font-size:13.5px;
    text-transform:uppercase;
    letter-spacing:.08em;
    text-decoration:none;
    transition:all .25s;
    border:2px solid transparent;
    cursor:pointer;
  }
  .btn-primary{background:var(--red);color:var(--white);border-color:var(--red)}
  .btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-1px)}
  .btn-outline-dark{background:transparent;color:var(--black);border-color:var(--black)}
  .btn-outline-dark:hover{background:var(--black);color:var(--white)}
  .btn svg{width:15px;height:15px;transition:transform .25s}
  .btn:hover svg{transform:translateX(3px)}

  .hero-info{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    border-top:1px solid var(--line);
    padding-top:24px;
    margin-top:auto;
  }
  .hero-info-block{
    display:flex;align-items:center;gap:14px;
  }
  .hero-info-block + .hero-info-block{
    padding-left:24px;border-left:1px solid var(--line);
  }
  .hero-info-icon{
    flex-shrink:0;
    width:40px;height:40px;
    background:var(--red);
    color:var(--white);
    display:flex;align-items:center;justify-content:center;
  }
  .hero-info-icon svg{width:18px;height:18px}
  .hero-info-label{
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--gray-600);
    font-weight:700;
    margin-bottom:3px;
  }
  .hero-info-val{
    font-family:'Barlow Condensed',sans-serif;
    font-size:18px;
    font-weight:700;
    text-transform:uppercase;
    line-height:1.15;
    color:var(--black);
  }
  .hero-info-val a{color:var(--black);text-decoration:none}
  .hero-info-val a:hover{color:var(--red)}

  .hero-photo{
    position:relative;
    background-image:var(--pand-url);
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    background-color:#FAF8F5;
    min-height:460px;
    border-left:6px solid var(--red);
    box-shadow:inset 12px 0 24px -12px rgba(0,0,0,.25);
  }
  .hero-photo-caption{
    position:absolute;
    right:24px;bottom:24px;
    background:var(--black);
    color:var(--white);
    padding:10px 16px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.08em;
    display:inline-flex;align-items:center;gap:8px;
    z-index:2;
  }
  .hero-photo-caption::before{
    content:'';width:8px;height:8px;border-radius:50%;background:var(--red);
  }

  /* ——— USP STRIP ——— */
  .usps{background:var(--red);color:var(--white)}
  .usps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  .usp{
    padding:28px 24px;
    display:flex;align-items:center;gap:16px;
    border-right:1px solid rgba(255,255,255,.2);
    transition:background .2s;
  }
  .usp:last-child{border-right:0}
  .usp:hover{background:var(--red-dark)}
  .usp-icon{
    flex-shrink:0;
    width:44px;height:44px;
    border:2px solid rgba(255,255,255,.35);
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
  }
  .usp-icon svg{width:20px;height:20px;color:var(--white)}
  .usp-title{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;font-size:18px;
    text-transform:uppercase;letter-spacing:.02em;line-height:1.1;margin-bottom:2px;
  }
  .usp-sub{font-size:12.5px;opacity:.85;line-height:1.3}

  /* ——— Generic section ——— */
  section{padding:96px 0}
  .section-head{
    margin-bottom:56px;
    display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  }
  .section-head h2{
    font-size:clamp(42px,4.8vw,68px);
    margin-top:14px;
    max-width:22ch;
  }
  .section-head h2 .red{color:var(--red)}
  .section-head-right{
    font-size:15.5px;color:var(--gray-600);max-width:42ch;line-height:1.65;
  }

  /* ——— ABOUT ——— */
  .about{background:var(--white)}
  .about-grid{
    display:grid;grid-template-columns:1fr 1.2fr;gap:72px;align-items:center;
  }
  .about-photo-wrap{position:relative;z-index:1}
  .about-photo{
    aspect-ratio:4/5;
    background:
      linear-gradient(160deg, rgba(211,32,39,.12), transparent 60%),
      url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=900&q=80') center/cover;
    position:relative;
  }
  .about-photo::after{
    content:'';position:absolute;inset:14px;
    border:2px solid var(--red);pointer-events:none;
    transform:translate(16px,16px);z-index:-1;
  }
  .about-photo-tag{
    position:absolute;left:-1px;bottom:32px;
    background:var(--red);color:var(--white);
    padding:12px 20px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;font-size:19px;
    text-transform:uppercase;letter-spacing:.02em;z-index:2;
  }
  .about-content h2{
    font-size:clamp(40px,4.8vw,64px);margin:18px 0 26px;max-width:18ch;
  }
  .about-content h2 .red{color:var(--red)}
  .about p{
    font-size:16.5px;line-height:1.75;color:var(--gray-800);
    margin-bottom:18px;max-width:60ch;
  }
  .about-sign{
    margin-top:26px;padding-top:26px;
    border-top:3px solid var(--black);
    display:flex;align-items:center;gap:18px;
  }
  .about-sign-name{
    font-family:'Barlow Condensed',sans-serif;
    font-size:26px;font-weight:700;
    text-transform:uppercase;line-height:1;
  }
  .about-sign-role{
    font-size:12px;color:var(--gray-600);
    text-transform:uppercase;letter-spacing:.2em;
    font-weight:600;margin-top:4px;
  }

  /* ——— OCCASIONS — Autowereld iframe ——— */
  .occasions{background:var(--gray-50);position:relative}
  .occ-frame-wrap{
    background:var(--white);border:1px solid var(--line);
    padding:0;box-shadow:0 10px 40px -15px rgba(0,0,0,.1);
    overflow:hidden;position:relative;
  }
  .occ-frame-wrap::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--red);z-index:2;
  }
  .occ-frame-head{
    padding:16px 24px;background:var(--black);color:var(--white);
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;font-size:13px;flex-wrap:wrap;
  }
  .occ-frame-head-left{display:flex;align-items:center;gap:12px}
  .occ-frame-head-left svg{color:var(--red)}
  .occ-frame-head strong{font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:13px}
  .occ-frame-head a{
    color:var(--red);text-decoration:none;font-weight:600;
    font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;
  }
  .occ-frame-head a:hover{color:var(--white)}
  iframe.autowereld{
    width:100%;height:1200px;border:0;display:block;background:var(--white);
  }
  .occ-note{
    margin-top:36px;text-align:center;color:var(--gray-600);
    font-size:15.5px;max-width:56ch;
    margin-left:auto;margin-right:auto;line-height:1.65;
  }
  .occ-note strong{color:var(--red);font-weight:700}
  .occ-note a{color:var(--red);font-weight:700;text-decoration:none;border-bottom:2px solid var(--red)}

  /* ——— REVIEWS ——— */
  .reviews{background:var(--white);border-top:1px solid var(--line)}
  .google-badge{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--black);color:var(--white);
    padding:10px 18px;font-weight:600;font-size:14px;
  }
  .google-badge .score{color:var(--red);font-size:18px;font-weight:700}
  .google-badge .stars{color:#FFB400;letter-spacing:2px;font-size:14px}
  .review-topline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
  .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .review{
    background:var(--white);border:1px solid var(--line);
    border-top:4px solid var(--red);padding:32px;
    position:relative;transition:all .25s;
    display:flex;flex-direction:column;
  }
  .review:hover{
    border-color:var(--red);
    box-shadow:0 16px 40px -20px rgba(211,32,39,.3);
    transform:translateY(-3px);
  }
  .review::after{
    content:'"';position:absolute;top:6px;right:20px;
    font-family:'Barlow Condensed',sans-serif;font-size:100px;
    color:var(--red);line-height:1;font-weight:700;opacity:.15;
  }
  .review-stars{color:#FFB400;letter-spacing:3px;font-size:15px;margin-bottom:16px}
  .review-text{
    font-size:16px;line-height:1.65;color:var(--gray-800);
    flex:1;margin-bottom:22px;position:relative;z-index:1;
  }
  .review-author{
    display:flex;align-items:center;gap:14px;
    padding-top:20px;border-top:1px solid var(--line);
  }
  .review-avatar{
    width:40px;height:40px;background:var(--red);color:var(--white);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:15px;font-family:'Barlow Condensed',sans-serif;
  }
  .review-meta strong{display:block;font-weight:600;font-size:14.5px;color:var(--black)}
  .review-meta span{font-size:12.5px;color:var(--gray-600)}
  .reviews-cta{margin-top:48px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

  /* ——— CONTACT ——— */
  .contact{background:var(--gray-50);border-top:1px solid var(--line)}
  .contact-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    border:1px solid var(--line);background:var(--white);
  }
  .contact-left{
    background:var(--black);color:var(--white);
    padding:52px 44px;position:relative;
  }
  .contact-left::before{
    content:'';position:absolute;top:0;left:0;width:5px;height:76px;background:var(--red);
  }
  .contact-left h3{font-size:40px;margin-bottom:16px;color:var(--white)}
  .contact-left h3 .red{color:var(--red)}
  .contact-left > p{
    color:rgba(255,255,255,.75);font-size:15.5px;
    line-height:1.65;margin-bottom:36px;max-width:42ch;
  }
  .contact-block{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .contact-block:last-child{border:0;padding-bottom:0}
  .contact-label{
    font-size:11px;text-transform:uppercase;letter-spacing:.24em;
    color:var(--red);font-weight:700;margin-bottom:8px;
  }
  .contact-val{
    font-family:'Barlow Condensed',sans-serif;font-size:21px;
    font-weight:600;text-transform:uppercase;line-height:1.3;
  }
  .contact-val a{color:var(--white);text-decoration:none}
  .contact-val a:hover{color:var(--red)}
  .hours-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:5px 0;font-size:14.5px;font-family:'Barlow',sans-serif;
    text-transform:none;letter-spacing:0;font-weight:400;
    color:rgba(255,255,255,.9);
  }
  .hours-row strong{font-weight:400}
  .hours-row span:last-child{color:var(--red);font-weight:600;font-variant-numeric:tabular-nums}
  .hours-row.closed span:last-child{color:rgba(255,255,255,.5)}

  .contact-right{background:var(--white);padding:52px 44px}
  .contact-right h3{font-size:34px;margin-bottom:6px}
  .contact-right h3 .red{color:var(--red)}
  .contact-right p.lead{color:var(--gray-600);font-size:15px;margin-bottom:28px}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .form-group{display:flex;flex-direction:column;margin-bottom:14px}
  .form-group label{
    font-size:11px;text-transform:uppercase;letter-spacing:.2em;
    color:var(--gray-600);font-weight:700;margin-bottom:7px;
  }
  .form-group input,.form-group textarea{
    padding:13px 15px;border:1px solid var(--line);
    background:var(--gray-50);font-family:inherit;font-size:15px;
    color:var(--black);transition:all .2s;
  }
  .form-group input:focus,.form-group textarea:focus{
    outline:none;border-color:var(--red);background:var(--white);
  }
  .form-group textarea{resize:vertical;min-height:110px;line-height:1.5}
  .form-submit{
    width:100%;border:0;background:var(--red);color:var(--white);
    padding:15px;font-family:'Barlow',sans-serif;font-weight:700;
    font-size:14px;text-transform:uppercase;letter-spacing:.1em;
    cursor:pointer;transition:background .2s;margin-top:6px;
  }
  .form-submit:hover{background:var(--red-dark)}

  /* Honeypot — onzichtbaar voor mensen, gevuld door bots */
  .honeypot{
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;height:1px;
    overflow:hidden;
  }

  /* Status banner na verzending */
  .form-status{
    display:none;
    padding:16px 18px;
    margin-bottom:24px;
    border-left:4px solid;
    font-size:14.5px;
    line-height:1.5;
  }
  .form-status.show{display:block}
  .form-status.success{
    background:#EAF6EC;
    border-color:#2E7D32;
    color:#1B5E20;
  }
  .form-status.error{
    background:#FBEAEA;
    border-color:var(--red);
    color:var(--red-dark);
  }
  .form-status strong{font-weight:700;display:block;margin-bottom:2px}

  /* ——— FOOTER ——— */
  footer{
    background:var(--black);color:var(--white);
    padding:56px 0 24px;border-top:5px solid var(--red);
  }
  .foot-top{
    display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:40px;padding-bottom:36px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .foot-logo{height:64px;width:auto;margin-bottom:14px;display:block}
  .foot-tag{
    font-size:14px;color:rgba(255,255,255,.65);
    max-width:34ch;line-height:1.6;
  }
  .foot-col h4{
    font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;
    text-transform:uppercase;letter-spacing:.1em;color:var(--red);margin-bottom:18px;
  }
  .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .foot-col a,.foot-col li{
    color:rgba(255,255,255,.8);text-decoration:none;
    font-size:14px;transition:color .2s;
  }
  .foot-col a:hover{color:var(--red)}
  .foot-bot{
    padding-top:26px;display:flex;justify-content:space-between;
    flex-wrap:wrap;gap:16px;font-size:12.5px;color:rgba(255,255,255,.45);
  }
  .foot-bot a{color:inherit;text-decoration:none}
  .foot-bot a:hover{color:var(--red)}

  @media (max-width:1100px){
    .nav-links{gap:22px}
  }
  @media (max-width:960px){
    .hero-inner{grid-template-columns:1fr;min-height:auto}
    .hero-text{padding:56px 28px 56px 32px;max-width:none;margin:0}
    .hero-text::before{top:28px;bottom:28px}
    .hero-photo{min-height:340px;order:-1}
    .hero-photo::before{display:none}
    .usps-grid{grid-template-columns:1fr 1fr}
    .usp{border-right:1px solid rgba(255,255,255,.2)}
    .usp:nth-child(2n){border-right:0}
    .usp:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.2)}
    .about-grid{grid-template-columns:1fr;gap:48px}
    .about-photo{max-width:440px;margin:0 auto}
    .reviews-grid{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
    .foot-top{grid-template-columns:1fr 1fr}
  }
  @media (max-width:640px){
    .nav-links{display:none}
    .burger{display:block}
    section{padding:60px 0}
    .hero h1{font-size:clamp(42px,11vw,68px)}
    .hero-info{grid-template-columns:1fr;gap:14px}
    .hero-info-block + .hero-info-block{padding-left:0;border-left:0;padding-top:14px;border-top:1px solid var(--line)}
    .usps-grid{grid-template-columns:1fr}
    .usp{border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
    .usp:last-child{border-bottom:0}
    .topbar{font-size:12px}
    .topbar-inner{justify-content:center;text-align:center}
    .form-row{grid-template-columns:1fr}
    .contact-left,.contact-right{padding:32px 24px}
    .foot-top{grid-template-columns:1fr;gap:28px}
    iframe.autowereld{height:900px}
    .logo-img{height:42px}
  }

  .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}