:root{
    --esc-bg: #111;                /* pagina achtergrond */
    --esc-panel: #111;          /* kaart/paneel */
    --esc-border: #1a1a1a;         /* subtiele rand */
    --esc-accent: #f5d76e;         /* goud/gele kleur */
    --esc-accent-strong:#e7c23a;   /* accent voor hover/strepen */
    --esc-text: #f6f6f6;           /* primaire tekst */
    --esc-muted:#bdbdbd;           /* secundaire tekst */
    --esc-radius: 18px;
    --esc-max: 1400px;
  }

  .esc-footer{
    background: var(--esc-bg);
    color: var(--esc-text);
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    padding: 56px 20px;
  }

  .esc-footer__card{
    max-width: var(--esc-max);
    margin: 0 auto;
    background: var(--esc-panel);
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    padding: 40px 32px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 10px 30px rgba(0,0,0,.35);
  }

  .esc-footer__grid{
    display: grid;
    gap: 28px;
  }
  @media (min-width: 820px){
    .esc-footer__grid{ grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  }

  /* Brand */
  .esc-brand{
    display:flex; align-items:center; gap:12px; margin-bottom: 14px;
  }
  .esc-brand img{ height:38px; width:auto; display:block; }
  .esc-brand span{ font-weight:800; letter-spacing:.5px; color: var(--esc-accent); font-size: 28px; }

  /* Columns */
  .esc-col h3{
    text-align: left;
    color: var(--esc-accent);
    font-weight: 700;
    margin: 8px 0 10px;
    font-size: 18px;
  }

  /* Lists */
  .esc-list{ list-style:none; padding:0; margin:0; }
  .esc-list li{ display:flex; align-items:flex-start; gap:12px; margin: 10px 0; color: var(--esc-muted); line-height: 1.55; text-align: left; }
  .esc-list a{ color: var(--esc-muted); text-decoration:none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
  .esc-list a:hover{ color: var(--esc-text); border-color: var(--esc-accent-strong); }


  /* Contact icons */
  .esc-ico{ display:inline-flex; width:22px; height:22px; color: var(--esc-accent); flex:0 0 22px; margin-top: 2px;}
  .esc-ico svg{ width:100%; height:100%; stroke: currentColor; stroke-width:1.7; }

  /* Socials */
  .esc-socials{ display:flex; gap:12px; margin-top:6px; }
  .esc-social{
    width:40px; height:40px; display:grid; place-items:center;
    background:#141414; border:1px solid var(--esc-border);
    border-radius: 999px; color:#d7d7d7; transition: transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .esc-social svg{ width:18px; height:18px; }
  .esc-social:hover{ background: var(--esc-accent); color:#111; border-color: var(--esc-accent-strong); transform: translateY(-1px); }

  /* Divider + copy */
  .esc-divider{
    margin: 26px 0 16px;
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent 0, var(--esc-accent-strong) 12%, var(--esc-accent-strong) 88%, transparent 100%);
    opacity: .9;
  }
  .esc-copy{
    text-align:center; color:#cfcfcf; font-size:14px; letter-spacing:.2px;
  }

  /* Small polish */
  .esc-list--contact a{ color: var(--esc-text); }
  .esc-list--contact a:hover{ color: var(--esc-accent); border-color: transparent; }



.esc-brand img {
  width: 140px;   /* stel breedte in */
  height: auto;   /* verhouding behouden */
}