:root{
    --ink: #14161A;
    --dark-bg: #575656;
    --bg: #EEF0F2;
    --white: #FFFFFF;
    --orange: #F39200;
    /* Het huisstijloranje haalt op een lichte achtergrond maar 2,06:1 en is
       daarmee te licht voor tekst (WCAG AA vraagt 4,5:1). Voor tekst en
       pictogrammen gelden daarom deze twee varianten. Vlakken, randen en
       accenten blijven gewoon --orange. */
    --orange-tekst: #9C5700;   /* op lichte achtergrond — 4,9:1 */
    --orange-licht: #FFC978;   /* op donkere achtergrond — 4,8:1 */
    --orange-tint: #FDEED9;
    --blue: #F39200;
    --blue-tint: #FDEED9;
    --slate: #5B6169;
    --slate-light: #9BA0A8;
    --border: #DCDFE3;
    --maxw: 1180px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body{
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; line-height: 1.1; }

  a { color: inherit; text-decoration: none; }

  .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

  .eyebrow{
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .eyebrow::before{
    content: "";
    width: 18px;
    height: 2px;
    background: currentColor;
    display: inline-block;
  }

  /* -------- header -------- */
  header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(238,240,242,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }

  .nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 110px;
  }

  /* min-width:0 laat de logolink krimpen; zonder dat blijft het logo op zijn
     eigen breedte staan (407px) en schuift de pagina op een telefoon zijwaarts */
  .logo-link{ display: flex; align-items: center; min-width: 0; }
  .logo-img{
    height: auto;
    max-height: 80px;
    max-width: 100%;
    width: auto;
    display: block;
  }

  .nav-links{
    display: flex;
    align-items: center;
    gap: 36px;
    font-size: 15px;
    font-weight: 500;
  }

  .nav-links a{
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    transition: border-color .15s ease, color .15s ease;
  }
  .nav-links a:hover, .nav-links a:focus-visible{ border-color: var(--orange); }

  .cta-btn{
    background: var(--ink);
    color: var(--white) !important;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    display: inline-block;
  }
  .cta-btn:hover, .cta-btn:focus-visible{ background: var(--orange); transform: translateY(-1px); }

  .menu-toggle{
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
  .menu-toggle span{ width: 22px; height: 2px; background: var(--ink); display:block; }

  .nav-actions{ display: flex; align-items: center; gap: 4px; }
  .home-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--ink);
    border-radius: 10px;
    transition: background .15s ease, color .15s ease;
  }
  .home-btn:hover, .home-btn:focus-visible{ background: var(--bg); color: var(--orange); }

  /* -------- hero -------- */
  .hero{
    background: var(--dark-bg);
    color: var(--white);
    padding: 120px 0 100px;
    overflow: hidden;
    position: relative;
  }

  .hero .wrap{ position: relative; z-index: 2; }

  .hero .eyebrow{ color: #fff; margin-bottom: 28px; display: block; font-size: clamp(15px, 3.3vw, 44px); white-space: nowrap; }
  .hero .eyebrow::before{ display: none; }

  .hero h1{
    font-size: clamp(44px, 8vw, 92px);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .hero h1 .swap{
    color: var(--orange);
    display: inline-block;
    transition: color .4s ease;
  }

  .hero h1 .swap-prefix{
    display: inline-block;
    transition: opacity .3s ease;
  }

  .hero p.sub{
    margin-top: 28px;
    max-width: 560px;
    font-size: 18px;
    color: #DEE0E2;
  }

  .hero-ctas{
    margin-top: 44px;
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
  }

  .btn-outline{
    border: 1px solid var(--orange);
    background: var(--orange);
    color: var(--white);
    padding: 19.5px 39px;
    border-radius: 999px;
    font-size: 21px;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
  }
  .btn-outline.reclame:hover, .btn-outline.reclame:focus-visible{ background: rgba(243,146,0,0.85); }
  .btn-outline.schade:hover, .btn-outline.schade:focus-visible{ background: rgba(243,146,0,0.85); }

  .btn-playful{
    background: var(--white);
    color: var(--orange);
    border: 2px solid var(--orange);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    animation: filmpjes-wiggle 4.5s ease-in-out infinite;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .15s ease, color .15s ease;
  }
  .btn-playful svg{ transition: transform .2s ease; }
  .btn-playful:hover, .btn-playful:focus-visible{
    background: var(--orange);
    color: var(--white);
    transform: scale(1.08) rotate(-2deg);
    animation-play-state: paused;
  }
  .btn-playful:hover svg, .btn-playful:focus-visible svg{ transform: rotate(-12deg) scale(1.15); }
  @keyframes filmpjes-wiggle{
    0%, 90%, 100%{ transform: rotate(0deg); }
    92%{ transform: rotate(-5deg); }
    94%{ transform: rotate(5deg); }
    96%{ transform: rotate(-3deg); }
    98%{ transform: rotate(2deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .btn-playful{ animation: none; }
  }

  .hero-bg-line{
    position: absolute;
    top: 0; right: -10%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent 45%, rgba(243,146,0,0.08) 45.5%, rgba(243,146,0,0.08) 47%, transparent 47.5%,
                transparent 60%, rgba(243,146,0,0.08) 60.5%, rgba(243,146,0,0.08) 62%, transparent 62.5%);
    z-index: 1;
  }

  /* -------- intro -------- */
  .intro{
    padding: 90px 0;
  }
  .intro-grid{
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: start;
  }
  .intro h2{
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
  }
  .intro-body p{ color: var(--slate); font-size: 16.5px; margin-bottom: 18px; }
  .intro-body p:last-child{ margin-bottom: 0; }

  .about-eyebrow{ color: var(--orange); margin-bottom: 16px; }
  .about-title{
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 700;
    margin-bottom: 22px;
  }
  .about-lead{
    font-size: 18px;
    color: var(--ink);
    max-width: 780px;
    margin-bottom: 48px;
  }
  .about-lead em{ font-style: normal; color: var(--orange); font-weight: 500; }
  .about-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
  }
  .about-col{ padding-top: 20px; border-top: 3px solid var(--orange); }
  .about-col.schade{ border-top-color: var(--blue); }
  .about-col h3,
  .about-col h2{
    font-family: 'Space Grotesk', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--orange);
    margin-bottom: 14px;
  }
  .about-col.schade h3, .about-col.schade h2{ color: var(--blue); }
  .about-col p{ color: var(--slate); font-size: 16px; margin-bottom: 14px; }
  .about-col p:last-child{ margin-bottom: 0; }

  .tagline-pair{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-top: 8px;
  }
  .tagline-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--orange);
  }

  /* -------- service sections -------- */
  .service-section{ padding: 90px 0; }
  .service-section.reclame{ background: var(--white); }
  .service-section.schade{ background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

  /* Reclame- en schadeherstel-secties zijn standaard verborgen, worden getoond via JS (knoppen) */
  #reclame.open{ display: block; animation: fadeIn .35s ease; }
  #schadeherstel.open{ display: block; animation: fadeIn .35s ease; }
  #filmpjes.open{ display: block; animation: fadeIn .35s ease; }
  #wie-zijn-wij.open{ display: block; animation: fadeIn .35s ease; }
  @keyframes fadeIn{ from{ opacity: 0; transform: translateY(-8px);} to{ opacity: 1; transform: translateY(0);} }

  .service-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 48px;
  }
  .service-head h2{ font-size: clamp(30px, 4vw, 42px); font-weight: 700; margin-top: 14px; }
  .service-section.reclame .eyebrow{ color: var(--orange); }
  .service-section.schade .eyebrow{ color: var(--blue); }

  .service-tagline{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 18px;
  }
  .service-section.reclame .service-tagline{ color: var(--orange); }
  .service-section.schade .service-tagline{ color: var(--blue); }

  .service-grid{
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
  }

  .service-card{
    background: var(--white);
    padding: 30px 26px;
    transition: background .15s ease;
    box-sizing: border-box;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    flex: 1 1 100%;
  }
  @media (min-width: 620px){
    .service-card{ flex-basis: 50%; }
  }
  .service-section.reclame .service-card{ border-top: 3px solid var(--orange); }
  .service-section.schade .service-card{ border-top: 3px solid var(--blue); }
  .service-card:hover{ background: var(--bg); }

  .service-card h3{
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .service-card p{ font-size: 14.5px; color: var(--slate); }

  /* Klikbare items op de reclame-pagina */
  button.service-card{
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-top: 3px solid var(--orange);
    font: inherit;
    cursor: pointer;
    border-radius: 0;
  }
  button.service-card.active{ background: var(--orange-tint); }
  button.service-card.active h3{ color: var(--orange); }

  /* Iconen + pijl op de reclame-knoppen */
  .service-section.reclame .service-card{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 22px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .service-section.reclame .service-card h3{ margin-bottom: 4px; overflow-wrap: break-word; word-break: break-word; }
  .service-section.reclame .service-card p{ margin: 0; }
  .service-card-text{ flex: 1; min-width: 0; }
  .service-icon{
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    color: var(--orange);
  }
  .service-arrow{
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--orange);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease;
  }
  .service-card:hover .service-arrow{ opacity: 1; transform: translateX(0); }
  .service-section.reclame .service-card.active .service-icon,
  .service-section.reclame .service-card.active .service-arrow{ color: var(--orange); }

  .service-section.schade .service-card{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 22px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .service-section.schade .service-card h3{ margin-bottom: 4px; overflow-wrap: break-word; word-break: break-word; }
  .service-section.schade .service-card p{ margin: 0; }
  .service-section.schade .service-icon{ color: var(--blue); }
  .service-section.schade .service-arrow{ color: var(--blue); }
  .service-section.schade .service-card.active .service-icon,
  .service-section.schade .service-card.active .service-arrow{ color: var(--blue); }

  .item-portfolios{ margin-top: 32px; }
  .item-portfolio{
    display: none;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px 28px;
    margin-top: 22px;
  }
  .item-portfolio.open{ display: block; animation: fadeIn .3s ease; }
  .item-portfolio-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
  }
  .item-portfolio-head h3{ font-size: 19px; font-weight: 700; }
  .item-portfolio-tagline{ font-size: 14.5px; color: var(--slate); margin-top: 4px; }
  .item-portfolio-points{
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 14.5px;
    color: var(--slate);
  }
  .item-portfolio-points li{ margin-top: 2px; }
  .item-portfolio-close{
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: var(--slate);
    padding: 4px 10px;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
  }
  .item-portfolio-close:hover{ background: var(--white); color: var(--ink); }
  .item-portfolio-empty{
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--slate);
    font-size: 14.5px;
  }
  .item-portfolio .portfolio-grid{ grid-template-columns: repeat(3, 1fr); }

  /* -------- portfolio -------- */
  .portfolio{ padding: 90px 0; }
  .films-section{ padding: 90px 0; background: var(--white); }
  .films-head{ text-align: center; margin-bottom: 40px; }
  .films-head .eyebrow{ color: var(--orange); justify-content: center; }
  .films-head h2{ font-size: clamp(30px, 4vw, 42px); font-weight: 700; margin-top: 14px; }
  .films-video-wrap{ max-width: 900px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(20,22,26,0.18); background: #000; }
  .films-video-wrap video{ width: 100%; height: auto; display: block; }
  .films-caption{ text-align: center; margin-top: 20px; color: var(--slate); font-size: 15px; }

  .portfolio .eyebrow{ color: var(--slate); margin-bottom: 14px; }
  .portfolio h2{ font-size: clamp(30px, 4vw, 42px); font-weight: 700; margin-bottom: 12px; }
  .portfolio > .wrap > p{ color: var(--slate); max-width: 560px; margin-bottom: 44px; }

  .portfolio-category{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--orange);
    margin-bottom: 22px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
  }


  .portfolio-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .portfolio-photo{
    aspect-ratio: 4/3;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow:
      0 2px 4px rgba(20, 20, 25, 0.08),
      0 10px 18px rgba(20, 20, 25, 0.12),
      0 26px 48px rgba(20, 20, 25, 0.20);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .portfolio-photo:hover{
    transform: translateY(-6px);
    box-shadow:
      0 4px 8px rgba(20, 20, 25, 0.10),
      0 16px 26px rgba(20, 20, 25, 0.14),
      0 34px 60px rgba(20, 20, 25, 0.26);
  }
  .portfolio-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
  }
  .portfolio-photo:hover img{ transform: scale(1.04); }
  .portfolio-photo img{ cursor: zoom-in; }

  .lightbox-overlay{
    position: fixed;
    inset: 0;
    background: rgba(15, 16, 20, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    padding: 32px;
  }
  .lightbox-overlay.open{ opacity: 1; visibility: visible; }
  .lightbox-overlay img{
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 10px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.5);
    cursor: default;
  }
  .lightbox-close{
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
  }
  .lightbox-close:hover{ background: rgba(255,255,255,0.24); }
  @media (max-width: 640px){
    .lightbox-overlay{ padding: 16px; }
    .lightbox-close{ top: 10px; right: 10px; width: 38px; height: 38px; font-size: 22px; }
  }

  .portfolio-caption{
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
  }
  .portfolio-caption + .portfolio-sub{
    font-size: 13px;
    color: var(--slate-light);
    margin-top: 2px;
  }

  /* -------- contact -------- */
  .contact{
    background: var(--dark-bg);
    color: var(--white);
    padding: 90px 0;
  }
  .contact .eyebrow{ color: var(--orange); margin-bottom: 20px; font-size: 52px; }
  .contact .eyebrow::before{ display: none; }
  .contact h2{ font-size: clamp(30px, 4vw, 42px); font-weight: 700; margin-bottom: 40px; max-width: 600px; }

  .contact-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }

  .contact-card{
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 14px;
    padding: 22px;
  }
  .contact-card .label{
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #D3D5D7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    display: block;
  }
  .contact-card .value{ font-size: 16px; font-weight: 500; }
  .contact-card a.value:hover{ color: var(--orange); }

  .openingstijden{
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.6;
  }
  .openingstijden th{
    font-weight: 400;
    text-align: left;
    padding: 0 18px 0 0;
    white-space: nowrap;
  }
  .openingstijden td{
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
  }

  .map-link{
    display: block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--orange);
  }
  .map-link:hover, .map-link:focus-visible{ text-decoration: underline; }

  .map-embed{
    margin-top: 30px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
  }
  .map-embed iframe{
    width: 100%;
    height: 320px;
    border: 0;
    display: block;
  }

  .social-links{
    display: flex;
    gap: 10px;
    margin-top: 4px;
  }
  .social-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: var(--white);
    transition: background .15s ease, transform .15s ease;
  }
  .social-link:hover, .social-link:focus-visible{
    transform: translateY(-2px);
  }
  .social-link.facebook:hover{ background: #1877F2; }
  .social-link.instagram:hover{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
  .social-link.linkedin:hover{ background: #0A66C2; }

  .contact-cta{ margin-top: 44px; }

  /* -------- footer -------- */
  footer{
    background: var(--white);
    color: var(--slate);
    border-top: 1px solid var(--border);
    padding: 34px 0;
  }
  .footer-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
  }
  .footer-logo-img{ height: 30px; width: auto; display: block; }
  .footer-taglines{ display: flex; gap: 22px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; }
  .footer-taglines .r{ color: var(--orange); }
  .footer-taglines .s{ color: var(--blue); }

  /* -------- responsive -------- */
  @media (max-width: 860px){
    .nav-links{
      position: fixed;
      top: 110px; left: 0; right: 0;
      background: var(--bg);
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding: 10px 32px 24px;
      border-bottom: 1px solid var(--border);
      transform: translateY(-8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .15s ease, transform .15s ease;
    }
    .nav-links.open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
    .nav-links a{ padding: 14px 0; width: 100%; border-bottom: 1px solid var(--border); }
    .nav-links .cta-btn{ margin-top: 12px; text-align: center; }
    .menu-toggle{ display: flex; }

    .intro-grid{ grid-template-columns: 1fr; gap: 32px; }
    .about-grid{ grid-template-columns: 1fr; gap: 32px; }
    .portfolio-grid{ grid-template-columns: 1fr 1fr; }
    .item-portfolio .portfolio-grid{ grid-template-columns: 1fr 1fr; }
    .contact-grid{ grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 540px){
    .wrap{ padding: 0 20px; }
    .portfolio-grid{ grid-template-columns: 1fr; }
    .item-portfolio .portfolio-grid{ grid-template-columns: 1fr; }
    .contact-grid{ grid-template-columns: 1fr; }
    .footer-row{ flex-direction: column; align-items: flex-start; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    .hero h1 .swap{ transition: none; }
    .hero h1 .swap-prefix{ transition: none; }
  }

  :focus-visible{ outline: 2px solid var(--orange); outline-offset: 2px; }

/* ==========================================================================
   Dienstpagina's (gegenereerd door build/generate.py)
   ========================================================================== */

.breadcrumbs{
  background: var(--white);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--slate);
}
.breadcrumbs .wrap{ padding-top: 9px; padding-bottom: 9px; }
.breadcrumbs a{ color: var(--slate); }
.breadcrumbs a:hover{ color: var(--orange); text-decoration: underline; }
.breadcrumbs .sep{ margin: 0 10px; color: var(--slate-light); }
.breadcrumbs [aria-current="page"]{ color: var(--ink); font-weight: 500; }

.page-hero{ background: var(--dark-bg); color: var(--white); padding: 30px 0 26px; }
/* lichter oranje: het huisstijloranje haalt op deze donkere achtergrond
   maar 3,1:1 contrast, te weinig voor kleine tekst (WCAG AA vraagt 4,5:1) */
.page-hero .eyebrow{ color: #FFC978; margin-bottom: 9px; }
.page-hero h1{
  font-size: clamp(27px, 3.5vw, 39px);
  max-width: 24ch;
  margin-bottom: 11px;
}
.page-lead{
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--slate);
  max-width: 74ch;
  line-height: 1.5;
}
.page-hero .page-lead{ color: rgba(255,255,255,.92); }

.page-body{ padding: 56px 0; }
.prose{ max-width: 74ch; }
.prose h2{
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 44px 0 16px;
}
.prose h2:first-child{ margin-top: 0; }
.prose p{ margin-bottom: 18px; color: var(--slate); line-height: 1.7; font-size: 17px; }
.prose ul{ margin: 0 0 22px; padding-left: 0; list-style: none; }
.prose li{
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--slate);
  line-height: 1.6;
  font-size: 17px;
}
.prose li::before{
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

/* Gelijke ruimte boven en onder, zodat het tegelraster verticaal in het
   midden van het lichtgrijze vlak staat in plaats van tegen het kopblok aan */
.page-children{ padding: 42px 0; }
.child-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
}
.child-card{
  display: block;
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 52px 24px 24px;
  transition: border-color .18s ease, transform .18s ease;
}
.child-card:hover{ border-color: var(--orange); transform: translateY(-2px); }
.child-card h3{ font-size: 19px; margin-bottom: 7px; }
.child-card p{ font-size: 15px; color: var(--slate); line-height: 1.5; }
.child-arrow{
  position: absolute;
  right: 22px; top: 26px;
  color: var(--orange);
  font-size: 20px;
}

.page-portfolio{ background: var(--white); padding: 60px 0; }
.page-portfolio h2{ font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 28px; }
.pf-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 26px 22px;
}
.pf-item{ margin: 0; }
.pf-item .portfolio-photo{ margin-bottom: 12px; }
.pf-item figcaption{ display: block; }
.pf-item .portfolio-caption,
.pf-item .portfolio-sub{ display: block; }

.page-faq{ padding: 60px 0; }
.page-faq h2{ font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 22px; }
.faq-item{
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
  max-width: 78ch;
}
.faq-item summary{
  cursor: pointer;
  padding: 16px 0;
  font-weight: 500;
  font-size: 17px;
  list-style: none;
  position: relative;
  padding-right: 34px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  position: absolute;
  right: 6px; top: 13px;
  font-size: 22px;
  color: var(--orange);
  line-height: 1;
}
.faq-item[open] summary::after{ content: "\2013"; }
.faq-item summary:hover{ color: var(--orange); }
.faq-item p{
  padding: 0 34px 18px 0;
  color: var(--slate);
  line-height: 1.65;
}

.page-cta{ background: var(--dark-bg); color: var(--white); padding: 60px 0; }
.page-cta h2{ font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; }
.page-cta p{ color: rgba(255,255,255,.8); max-width: 60ch; margin-bottom: 26px; }
.page-cta-actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.page-cta .btn{
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* bijna-zwart op oranje haalt 7,7:1; wit op oranje maar 2,35:1 */
.page-cta .btn-primary{ background: var(--orange); color: var(--ink); }
.page-cta .btn-primary:hover{ background: rgba(243,146,0,.85); }
.page-cta .btn-ghost{
  border: 1px solid rgba(255,255,255,.34);
  color: #fff;
}
.page-cta .btn-ghost:hover{ border-color: #fff; }

@media (max-width: 640px){
  .page-hero{ padding: 44px 0 38px; }
  .page-body{ padding: 40px 0; }
  .breadcrumbs{ font-size: 13px; }
  .breadcrumbs .sep{ margin: 0 6px; }
}

/* De startpagina moet in één beeld passen: balk bovenin, hero en voettekst.
   Daarom verdeelt de pagina zichzelf verticaal — de hero neemt precies de
   ruimte die overblijft. Geen vaste hoogtes, dus het klopt op elk scherm,
   ook als de balk of de voettekst van hoogte verandert. */
body.home{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body.home main{
  flex: 1 1 auto;
  display: flex;
  /* onder elkaar, niet naast elkaar: de hero vult het eerste scherm en het
     tekstblok komt daar een stuk onder, buiten beeld tot je scrolt */
  flex-direction: column;
  min-height: 0;
}
body.home .hero{
  /* vult het eerste scherm onder de balk (110px hoog + 1px rand), zodat de
     knoppen gecentreerd in beeld staan en het tekstblok pas na het scrollen
     verschijnt */
  flex: 1 0 auto;
  min-height: calc(100svh - 111px);
  display: flex;
  align-items: center;
  padding: 32px 0 96px;
}
body.home .hero > .wrap{ width: 100%; }

/* Het tekstblok krimpt niet mee en houdt flink afstand tot de knoppen. */
body.home .intro.about{
  flex: 0 0 auto;
  padding: 96px 0 72px;
}

@media (max-width: 640px){
  body.home .hero{ padding: 24px 0 56px; }
  body.home .intro.about{ padding: 56px 0 48px; }
}
/* lager venster (1280x720 en vergelijkbaar): krappere marges, zodat de
   voettekst nog steeds binnen het beeld valt */
@media (max-height: 800px) and (min-width: 641px){
  body.home .hero{ padding: 20px 0 64px; }
}
/* op een echt laag venster niet persen maar gewoon laten scrollen */
@media (max-height: 620px){
  body.home{ min-height: 0; }
  body.home .hero{ padding: 40px 0; min-height: 0; }
}

/* ==========================================================================
   Offerteformulier
   ========================================================================== */

.page-form{ background: var(--white); padding: 60px 0; border-top: 1px solid var(--border); }
.page-form h2{ font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; }
.form-intro{ color: var(--slate); max-width: 68ch; line-height: 1.65; margin-bottom: 34px; }

/* ==========================================================================
   Offertepagina: formulier links in een wit vlak, toelichting rechts in een
   lichtgrijs vlak. De toelichting is compacter gezet dan gewone paginatekst
   en plakt mee bij het scrollen, want het formulier is een stuk langer.
   ========================================================================== */
.tekst-naast-formulier{ padding: 40px 0 64px; }
.tnf-grid{
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 30px;
  align-items: start;
}

/* formulier — wit vlak */
.tnf-formulier{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
}
.tnf-formulier .offerte-form{ max-width: none; }
.tnf-formulier h2{
  font-size: clamp(21px, 2.4vw, 27px);
  margin: 0 0 14px;
}
.tnf-formulier .form-intro{ font-size: 15.5px; margin-bottom: 26px; }

/* toelichting — lichtgrijs vlak met alleen het lijstje */
.tnf-tekst{
  max-width: none;
  background: #E6E9EC;
  border-radius: 16px;
  padding: 28px 30px;
}
.tnf-tekst h2{ font-size: 19px; margin: 0 0 16px; }
.tnf-tekst ul{ margin-bottom: 0; }
.tnf-tekst li{ font-size: 15.5px; line-height: 1.55; margin-bottom: 11px; }
.tnf-tekst li:last-child{ margin-bottom: 0; }

/* rustige afsluiting onder de twee kolommen */
.tnf-onder{
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  max-width: var(--maxw);
}
.tnf-onder h2{ font-size: 19px; margin: 0 0 12px; }
.tnf-onder p{ font-size: 15.5px; line-height: 1.65; margin-bottom: 11px; max-width: 78ch; }
.tnf-onder p:last-child{ margin-bottom: 0; }

@media (min-width: 1024px){
  .tnf-tekst{ position: sticky; top: 130px; }
}

@media (max-width: 1023px){
  .tnf-grid{ grid-template-columns: 1fr; gap: 26px; }
  .tekst-naast-formulier{ padding: 32px 0 48px; }
  .tnf-tekst{ order: -1; }          /* op mobiel eerst lezen, dan invullen */
  .tnf-formulier{ padding: 26px 22px; }
}

.offerte-form{ max-width: 780px; }

.veld-rij{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.veld{ margin-bottom: 20px; }

.offerte-form label{
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--ink);
}
.offerte-form .verplicht{ color: var(--orange); }

.offerte-form input,
.offerte-form select,
.offerte-form textarea{
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 13px 14px;
  transition: border-color .15s ease, background .15s ease;
}
.offerte-form textarea{ resize: vertical; min-height: 130px; line-height: 1.6; }
.offerte-form input::placeholder,
.offerte-form textarea::placeholder{ color: var(--slate-light); }

.offerte-form input:focus,
.offerte-form select:focus,
.offerte-form textarea:focus{
  outline: none;
  border-color: var(--orange);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--orange-tint);
}
.offerte-form .veld-fout{
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}

.form-hint{
  font-size: 15px;
  color: var(--slate);
  background: var(--orange-tint);
  border-left: 3px solid var(--orange);
  padding: 13px 16px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 26px;
  line-height: 1.55;
}

.form-verzend{
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  padding: 16px 34px;
}

.form-fallback{
  margin-top: 20px;
  font-size: 15px;
  color: var(--slate);
}
.form-fallback a{ color: var(--orange); font-weight: 500; }
.form-fallback a:hover{ text-decoration: underline; }

@media (max-width: 640px){
  .veld-rij{ grid-template-columns: 1fr; gap: 0; }
  .page-form{ padding: 44px 0; }
}

/* ==========================================================================
   'Meer info' — knop in het kopblok, tekst klapt eronder uit
   ========================================================================== */

.page-hero .meer-info{
  margin-top: 18px;
  text-align: center;
}

.meer-info-knop{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  list-style: none;
  background: var(--white);
  border: 2px solid var(--orange);
  border-radius: 999px;
  padding: 10px 26px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--orange);
  transition: background .15s ease, color .15s ease;
}
.meer-info-knop::-webkit-details-marker{ display: none; }
.meer-info-knop:hover,
.meer-info-knop:focus-visible{
  background: var(--orange);
  color: var(--ink);
}
.meer-info-pijl{ transition: transform .2s ease; flex-shrink: 0; color: currentColor; }
.meer-info[open] .meer-info-pijl{ transform: rotate(180deg); }
.meer-info[open] .meer-info-knop{
  background: var(--orange);
  color: var(--ink);
}

/* de uitgeklapte tekst zelf blijft links uitgelijnd — gecentreerde lopende
   tekst leest slecht — maar het tekstblok staat wel gecentreerd op de pagina */
.meer-info-tekst{
  margin: 34px auto 0;
  max-width: 74ch;
  text-align: left;
  animation: meerInfoIn .28s ease;
}
@keyframes meerInfoIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* op het donkere kopblok van schadeherstel de knop omkeren */
.page-hero .meer-info-knop{
  background: transparent;
  color: var(--white);
  border-color: var(--orange);
}
.page-hero .meer-info-knop:hover,
.page-hero .meer-info-knop:focus-visible,
.page-hero .meer-info[open] .meer-info-knop{
  background: var(--orange);
  color: var(--ink);
}
.page-hero .meer-info-tekst p,
.page-hero .meer-info-tekst li{ color: rgba(255,255,255,.86); }
.page-hero .meer-info-tekst h2{ color: var(--white); }

@media (prefers-reduced-motion: reduce){
  .meer-info-tekst{ animation: none; }
  .meer-info-pijl{ transition: none; }
}

/* ==========================================================================
   Dienstentegels op de overzichtspagina's

   Losse tegels met een eigen oranje kader en afgeronde hoeken, met echte
   tussenruimte ertussen. De achtergrond van het raster is doorzichtig; het
   oranje zit dus in de rand van elke tegel en niet meer in de ondergrond.
   ========================================================================== */

.page-children .service-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: none;
}

.page-children .service-card{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 22px;
  background: var(--white);
  border: 3px solid var(--orange);
  border-radius: 10px;
  flex: 1 1 100%;
  transition: background .15s ease, transform .15s ease;
}
.page-children .service-card h3{
  margin-bottom: 4px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.page-children .service-card p{ margin: 0; }
.page-children .service-card:hover{
  background: var(--orange-tint);
  transform: translateY(-2px);
}

@media (min-width: 620px){
  /* twee kolommen; de helft van de tussenruimte er afhalen zodat ze passen */
  .page-children .service-card{ flex-basis: calc(50% - 7px); }
}

/* ==========================================================================
   'Terug'-link: één niveau omhoog, tot je op de startpagina uitkomt
   ========================================================================== */

.terug-nav{ padding: 6px 0 52px; }

.terug-link{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--slate);
  padding: 8px 2px;
  transition: color .15s ease;
}
.terug-link svg{
  color: var(--orange);
  flex-shrink: 0;
  transition: transform .18s ease;
}
.terug-link:hover,
.terug-link:focus-visible{ color: var(--orange); }
.terug-link:hover svg,
.terug-link:focus-visible svg{ transform: translateX(-3px); }

/* staat de link direct onder het tegelraster, dan mag de ruimte krapper */
.page-children + .terug-nav{ padding-top: 0; }

@media (prefers-reduced-motion: reduce){
  .terug-link svg{ transition: none; }
}

/* ==========================================================================
   Pagina 'Wie zijn wij': het blok 'Eén adres voor allebei' stond 194px onder
   de twee kolommen. Dat kwam uit drie marges achter elkaar: de 48px onder het
   kolomraster (die ruimte was voor het slogan-paar dat daar niet meer staat),
   de 90px onderkant van de sectie en de 56px bovenkant van het tekstblok.
   ========================================================================== */

.intro.about .about-grid:last-child{ margin-bottom: 0; }
.intro.about{ padding: 50px 0 40px; }
.intro.about + .page-body{ padding-top: 0; }

/* ==========================================================================
   Contactpagina
   Het lichtgrijze tekstblok is hier maar één alinea lang. Die staat
   gecentreerd en met minder ruimte eromheen, zodat het donkere blok met de
   gegevens hoger op de pagina begint.
   ========================================================================== */
.pagina-contact .page-body{ padding: 30px 0 26px; }
.pagina-contact .page-body .prose{
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
}
.pagina-contact .page-body .prose p:last-child{ margin-bottom: 0; }
.pagina-contact .contact{ padding: 40px 0 70px; }
.pagina-contact .contact .eyebrow{ font-size: 34px; margin-bottom: 26px; }

@media (max-width: 900px){
  .pagina-contact .page-body{ padding: 24px 0 20px; }
  .pagina-contact .contact{ padding: 32px 0 56px; }
  .pagina-contact .contact .eyebrow{ font-size: 28px; }
}

/* ==========================================================================
   Leesbaar oranje
   Toegevoegd 20-08-2026. Het huisstijloranje #F39200 geeft op de lichte
   achtergrond 2,06:1 en op wit 2,35:1 — te weinig voor tekst en pictogrammen.
   Hieronder krijgt alle oranje tekst de donkere variant, en de oranje tekst
   op de donkere blokken de lichte variant. De kleur blijft herkenbaar oranje;
   alleen vlakken, randen en grote sierletters houden #F39200.
   ========================================================================== */

/* --- tekst en pictogrammen op lichte achtergrond --- */
.about-eyebrow,
.about-lead em,
.about-col h3,
.about-col h2,
.tagline-pill,
.footer-taglines .r,
.footer-taglines .s,
.service-section.reclame .eyebrow,
.service-section.reclame .service-tagline,
button.service-card.active h3,
.service-icon,
.service-arrow,
.service-section.reclame .service-card.active .service-icon,
.films-head .eyebrow,
.portfolio-category,
.child-arrow,
.faq-item summary::after,
.offerte-form .verplicht,
.form-fallback a,
.meer-info-knop,
.terug-link svg{
  color: var(--orange-tekst);
}

/* hover- en focustoestanden op lichte achtergrond */
.home-btn:hover, .home-btn:focus-visible,
.breadcrumbs a:hover,
.faq-item summary:hover,
.child-card:hover,
.terug-link:hover, .terug-link:focus-visible{
  color: var(--orange-tekst);
}

/* --- tekst op de donkere blokken --- */
.contact .map-link,
.contact-card a.value:hover{
  color: var(--orange-licht);
}

/* De knop 'Filmpje' staat wel op de donkere hero, maar heeft zelf een witte
   achtergrond. Daar hoort dus de donkere variant, niet de lichte. */
.hero .btn-playful{ color: var(--orange-tekst); border-color: var(--orange-tekst); }
.hero .btn-playful:hover,
.hero .btn-playful:focus-visible{
  background: var(--orange-tekst);
  border-color: var(--orange-tekst);
  color: var(--white);
}

/* De schadekant gebruikt --blue, maar dat is dezelfde kleur (#F39200) en
   heeft een hogere specificiteit dan de regels hierboven. Ook meenemen,
   anders zou 'Onzichtbaar beter!' lichter blijven dan 'Zichtbaar mooier!'. */
.about-col.schade h3,
.about-col.schade h2,
.service-section.schade .eyebrow,
.service-section.schade .service-tagline,
.service-section.schade .service-icon,
.service-section.schade .service-arrow,
.service-section.schade .service-card.active .service-icon,
.footer-taglines .s{
  color: var(--orange-tekst);
}

/* De pijl van de actieve tegel staat in een regel met hoge specificiteit
   en zou anders aan de bovenstaande overschrijving ontsnappen. */
.service-section.reclame .service-card.active .service-arrow,
.service-section.schade .service-card.active .service-arrow{
  color: var(--orange-tekst);
}

/* ==========================================================================
   Mobiel — toegevoegd 20-08-2026
   ========================================================================== */

/* Vangnet: niets mag breder worden dan het scherm. */
img, svg, video, iframe, table{ max-width: 100%; }

/* De balk bovenin: logo kleiner naarmate het scherm smaller wordt, zodat het
   naast de twee knoppen blijft passen. */
@media (max-width: 860px){
  .nav{ height: 84px; }
  .logo-img{ max-height: 56px; }
  .nav-links{ top: 84px; }
}
@media (max-width: 540px){
  .nav{ height: 70px; }
  .logo-img{ max-height: 44px; }
  .nav-links{ top: 70px; }
}
@media (max-width: 380px){
  .logo-img{ max-height: 36px; }
}

/* Het bovenschrift in de hero stond op nowrap en werd op een telefoon
   afgekapt. Onder 640px mag het over twee regels. */
@media (max-width: 640px){
  .hero .eyebrow{
    white-space: normal;
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 18px;
  }
}

/* De startpagina rekent met een balk van 111px; die is op smallere schermen
   lager geworden. */
@media (max-width: 860px){
  body.home .hero{ min-height: calc(100svh - 85px); }
}
@media (max-width: 540px){
  body.home .hero{ min-height: calc(100svh - 71px); }
}

/* Aanraakvlakken minstens 44px, zoals de richtlijn vraagt. */
@media (max-width: 860px){
  .home-btn, .menu-toggle{ width: 44px; height: 44px; }
}

/* ==========================================================================
   Filmpjespagina: het filmpje staat bovenaan, de tekst eronder.
   Zonder de eigen kop erboven kan het blok krapper, en de tekst eronder
   sluit er direct op aan.
   ========================================================================== */
.pagina-filmpjes .films-section{ padding: 44px 0 40px; }
.pagina-filmpjes .films-section + .page-body{ padding-top: 40px; }

@media (max-width: 640px){
  .pagina-filmpjes .films-section{ padding: 28px 0 26px; }
  .pagina-filmpjes .films-section + .page-body{ padding-top: 28px; }
}