/* ================ Agency The Blazers — CLEAN (aligned, rem-based) ================ */

/* Vars */
:root{
  /* === Type & Content Baseline ======================================== */
/* 1) Body copy: vaste maat + leesbaarheid */
html { font-size: 16px; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-300);      /* 18px vaste body */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2) Koppen (h1–h6) – op je rem-schaal */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 .6em;
}
h1{ font-size: var(--fs-800); line-height: 1.15; letter-spacing:-0.03em; }
h2{ font-size: var(--fs-800); line-height: 1.25; letter-spacing:-0.03em; }
h3{ font-size: var(--fs-500); line-height: 1.28; }
h4{ font-size: var(--fs-400); line-height: 1.3;  }
h5{ font-size: var(--fs-300); line-height: 1.35; }
h6{ font-size: var(--fs-200); line-height: 1.4;  }

@media (min-width:1480px){
  h1{ font-size: 5rem; }     /* 80px */
  h2{ font-size: 2.25rem; }  /* 36px */
}

/* 3) Paragraaf & inline text */
p { margin: 0 0 1em; }
small { font-size: var(--fs-100); }
strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* 4) Lijsten */
ul, ol { margin: 0 0 1em 1.2em; padding: 0; }
li { margin: .25em 0; }
li > ul, li > ol { margin-top: .25em; }

/* 5) Links */
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover, a:focus { text-decoration: underline; }

/* 6) Media */
img, video, svg { max-width: 100%; height: auto; display: block; }
figure { margin: 0 0 1em; }
figcaption {
  margin-top: .5rem;
  font: 500 var(--fs-200)/1.4 var(--font-body);
  color: color-mix(in oklab, var(--color-text), #000 15%);
}

/* 7) Quotes & code */
blockquote {
  margin: 0 0 1.2em;
  padding: .75em 1em;
  border-left: 4px solid color-mix(in oklab, var(--color-primary), #000 20%);
  background: color-mix(in oklab, var(--color-primary) 6%, #fff);
}
code, kbd, samp {
  font: 400 .95em/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: #f6f6f7;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: .1em .35em;
}

/* 8) HR, tabel, forms (licht) */
hr {
  border: 0; height: 1px;
  background: #eaeaea;
  margin: 2rem 0;
}
table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; }
th, td { text-align: left; padding: .6em .75em; border-bottom: 1px solid #eee; }
thead th { font-weight: 700; }

/* 9) Content wrappers – veilige breedte */
.container, .prose, .richtext, .section-richtext {
  width: var(--safe-width);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* 10) Optionele 'prose' tweak (ruimere typografie in contentblokken) */
.prose p { margin-bottom: 1.1em; }
.prose h2 { margin-top: 1.4em; }
.prose h3 { margin-top: 1.2em; }

  
  /* Colors */
  --color-primary:#9B0C00; --color-red-2:#950827; --color-black:#000; --color-ink:#191919; --color-white:#fff;
  --color-text:var(--color-ink); --color-bg:var(--color-white);

  /* Radius */
  --radius:12px;

  /* Canvas & safe area */
  --container-max:1440px;
  --page-pad:clamp(16px,1.6667vw,32px);
  --safe-width:min(calc(100vw - 2*var(--page-pad)),var(--container-max));
  --safe-left:max(var(--page-pad),calc((100vw - var(--safe-width))/2));

  /* Fonts */
  --font-heading:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Type scale (fixed rems) */
  --fs-100: 0.875rem;  /* 14px  */
  --fs-200: 1rem;      /* 16px  */
  --fs-300: 1.125rem;  /* 18px  */
  --fs-400: 1.25rem;   /* 20px  */
  --fs-500: 1.5rem;    /* 24px  */
  --fs-600: 2rem;      /* 32px  */
  --fs-700: 3rem;      /* 48px  */
  --fs-800: 4rem;      /* 64px  */
  /* --fs-900: 5rem;   // 80px (optioneel voor mega-hero) */

  /* Header & logo */
  --header-h:72px; --logo-h:56px;

  /* Hero rails */
  --hero-rail-right:24px;
  --social-gap:130px;
}

/* Root: 1rem = 16px */
html{font-size:16px; box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html,body{overflow-x:hidden}

/* Base */
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--fs-200);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:var(--safe-width);margin-inline:auto}

/* Header */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:100;
  height:var(--header-h); background:transparent;
  display:flex; align-items:center;
}
.header-inner{
  width:var(--safe-width); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:10px; padding-inline:var(--page-pad);
}
.logo img{height:var(--logo-h);width:auto;display:block;filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
.header-cta .btn--header{
  background:#9B0C00;color:#fff;border-radius:12px;padding:12px 18px;font-weight:400;
  box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .15s,box-shadow .2s,background-color .2s;
}
.header-cta .btn--header:hover{background:#950827;transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.22)}
@media (max-width:640px){
  .site-header{height:64px}
  .logo img{height:44px}
  .header-cta .btn--header{padding:10px 14px;font-size:.95rem}
}

/* Main */
.site-main{padding-top:0;padding-bottom:0}

/* Hero */
.hero{
  position:relative; width:100%; min-height:100vh;
  display:grid; place-items:center; overflow:hidden;
  background:center/cover var(--hero-bg,none),#000;
}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--overlay,.4));z-index:1}
.hero>*{position:relative;z-index:2;color:#fff}
.hero .inner{width:var(--safe-width);margin-inline:auto}

/* Hero type (fixed rems) */
.hero h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, var(--fs-800));
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  color: white;
}
.hero .eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.75rem, 1.6vw, var(--fs-200));
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 0 0 .25rem;
  opacity: .95;
}

.hero .lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 2.4vw, var(--fs-300));
  line-height: 1.6;
  max-width: 65ch;
  color: #fff;
}
@media (min-width:1280px){
  .hero h1{ font-size:5rem; } /* 80px optioneel, geen vw */
}

/* Hero slider */
.hero.hero-slider::before{background:rgba(0,0,0,var(--overlay,.4))}
.hero__track{position:relative;width:100%;height:100%}
.hero__slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  background:center/cover var(--slide-bg,none) no-repeat;
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s ease;
}
.hero__slide.is-active{opacity:1; visibility:visible}

/* Hero nav */
.hero__nav{position:absolute;top:0;bottom:0;right:var(--hero-rail-right);
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  width:56px;padding:12px 0;z-index:3}
.hero__dot{all:unset;flex:1 1 0;width:100%;display:flex;align-items:center;justify-content:flex-start;
  cursor:pointer;position:relative;padding-left:20px}
.hero__dot span{font:600 12px/1 var(--font-body);letter-spacing:.12em;color:#fff;transition:color .2s}
.hero__dot:hover span,.hero__dot.is-active span{color:var(--color-primary)}
.hero__dot:hover::before,.hero__dot.is-active::before{content:"";width:8px;height:8px;border-radius:50%;
  position:absolute;left:6px;top:50%;transform:translateY(-50%);background:var(--color-primary)}
@media (max-width:640px){
  .hero__nav{right:12px;width:48px}
  .hero__dot{padding-left:18px}
  .hero__dot span{font-size:11px}
  .hero__dot:hover::before,.hero__dot.is-active::before{width:7px;height:7px;left:5px}
}
/* Hero content altijd links met vaste breedte, niet gecentreerd */
.hero__slide {
  display: grid;
  align-items: center;
  justify-items: start; /* was center */
  padding-left: 1.5rem;
  padding-right: 25vw; /* ruimte voor rails / gewoon lucht */
  box-sizing: border-box;
}

/* Max breedte content zelf */
.hero__slide .inner,
.hero__slide .inner.container {
  width: 100%;
  max-width: 75vw;
}

/* Social rail */
.hero__social{position:absolute;top:30%;right:calc(var(--hero-rail-right) + var(--social-gap));
  transform:translateY(-50%) rotate(-90deg);transform-origin:right center;
  display:flex;align-items:center;gap:12px;font:500 12px/1 var(--font-body);letter-spacing:.08em;
  color:#fff;opacity:.9;z-index:3}
.hero__social a{color:#fff;text-decoration:none;transition:color .2s ease,opacity .2s ease}
.hero__social a:hover{color:var(--color-primary);opacity:1}
@media (max-width: 640px){
  .hero__social{
    right: 20%;
  }
}

/* Hero more */
.hero__more{position:absolute;right:calc(var(--hero-rail-right) + 130px);bottom:80px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--font-body);letter-spacing:.02em;color:#fff}
.hero__more:hover{opacity:.9}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;padding:.75rem 1.1rem;font:500 var(--fs-200)/1.2 var(--font-body);text-decoration:none;border:1px solid transparent;transition:transform .15s,box-shadow .15s,background-color .2s,color .2s}
.btn--primary{background:var(--color-primary);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.btn--secondary{background:color-mix(in srgb,var(--color-primary) 12%,#fff);color:var(--color-primary)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.btn--link{display:inline-flex;align-items:center;gap:6px;font:600 var(--fs-200)/1.4 var(--font-body);color:#fff;transition:color .2s}
.btn--link::after{content:"→";font-size:1.1em;transition:transform .2s}
.btn--link:hover{color:var(--color-primary)}
.btn--link:hover::after{transform:translateX(4px)}

/* Footer */
.site-footer{margin-top:48px;border-top:1px solid #eee;padding:24px 0;color:#6b7280}

/* Gravity Forms minimal */
.gform_wrapper{font-family:var(--font-body)}
.gform_wrapper input,.gform_wrapper textarea,.gform_wrapper select{font-family:var(--font-body);font-size:var(--fs-200);line-height:1.4;border:1px solid #e5e7eb;border-radius:10px;padding:.65rem .8rem}
.gform_wrapper .gform_button{background:var(--color-primary);color:#fff;border:0;border-radius:12px;padding:.75rem 1.1rem}

/* Mobile tweaks */
@media (max-width:640px){
  :root{--social-gap:48px}
  .hero__more{right:calc(var(--hero-rail-right) + 64px)}
}

/* === Section: Tekst links — 2 kolommen ================================ */
.section.tekst-links{padding-block:clamp(48px,8vw,120px)}
.section.tekst-links .__safe{width:var(--safe-width);margin-inline:auto}
.section.tekst-links .__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start}
.section.tekst-links .__text{padding-right:5%;display:flex;flex-direction:column;gap:clamp(8px,1.2vw,16px);overflow:visible}
.section.tekst-links .__title{margin:0 0 .6em 0}
.section.tekst-links .__content > *:first-child{margin-top:0}
.section.tekst-links .__content > *:last-child{margin-bottom:0}
.section.tekst-links .__figure{margin:0}
.section.tekst-links .__media{width:100%;height:100%;position:relative;z-index:auto}
.section.tekst-links .__img{width:100%;height:auto;display:block;border-radius:var(--radius);object-fit:cover}
.section.tekst-links.is-image-left .__grid{grid-template-columns:1.1fr 1fr}
.section.tekst-links.is-image-left .__media{order:1}
.section.tekst-links.is-image-left .__text{order:2}
@media (max-width:1024px){
  .section.tekst-links .__grid{grid-template-columns:1fr}
  .section.tekst-links .__media{order:2}
  .section.tekst-links .__text{order:1;padding-right:0}
}

/* (Optionele image-behandeling als je geen crop wilt) */
/*
.section.tekst-links .__img{
  border-radius:0; object-fit:contain; max-height:80vh;
}
*/

/* === Global Headings (fixed rems) ==================================== */
h1{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-800);line-height:1.15;letter-spacing:-0.03em;margin:0 0 .6em}
h2{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-600);line-height:1.3;letter-spacing:-0.03em;margin:0 0 .6em}

/* === Typewriter (indien gebruikt) ==================================== */
.hero__title{display:inline-block;overflow:hidden;white-space:nowrap;border-right:.1em solid var(--color-primary);animation:typing 3s steps(30,end), blink .7s step-end infinite}
@keyframes typing{from{width:0} to{width:100%}}
@keyframes blink{from,to{border-color:transparent} 50%{border-color:var(--color-primary)}}

/* === Section: BTS Slider (no-lib, clean + white border) ============== */
.section-bts{ /* config vars */
  --per: 3;                      /* items per view (desktop) */
  --gap: 0;                      /* slide gap */
  --overlap: clamp(12px,2vw,28px);
  --ratio: 885/1024;             /* ~0.864, consistent met 679/786 */
  --frame: 4px;                   /* witte rand */
}

.naive-slider{ position:relative; }
.naive-slider__viewport{ overflow:visible; }
.naive-slider__track{
  display:flex; gap:var(--gap); transition:transform .4s ease; will-change:transform;
  align-items:center; /* verticaal centreren tov hoogste item */
}
.naive-slider__slide{
  flex:0 0 calc(100% / var(--per)); list-style:none; position:relative;
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s ease, z-index .2s;
}

/* Media (frame) */
.bts-figure{ margin:0; }
.bts-frame{ aspect-ratio:var(--ratio); border:var(--frame) solid #fff; border-radius:0; overflow:hidden; transform:scale(var(--scale,1)); transition:transform .3s ease; }
.bts-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Captions */
.bts-caption{ margin-top:.8rem; font:600 var(--fs-300)/1.5 var(--font-body); color:var(--color-text); text-align:left; }

/* Focus compositie: midden groter, buitenste iets kleiner en naar binnen */
.section-bts .naive-slider__slide.is-left  { transform: translateX(calc(var(--overlap) * 1.2)); z-index:3; }
.section-bts .naive-slider__slide.is-right { transform: translateX(calc(-1 * var(--overlap) * 1.2)); z-index:3; }
.section-bts .naive-slider__slide.is-center{ z-index:1; }

/* Schaalverschil op frame */
.section-bts .naive-slider__slide.is-left  .bts-frame,
.section-bts .naive-slider__slide.is-right .bts-frame{ --scale:.92; }
.section-bts .naive-slider__slide.is-center .bts-frame{ --scale:1.06; }

/* Variant: 3-overlap (grotere middenkaart) */
.section-bts.is-3overlap .naive-slider__slide.is-left,
.section-bts.is-3overlap .naive-slider__slide.is-right{ flex-basis:28%; transform:translateX(0) scale(.92); z-index:3; }
.section-bts.is-3overlap .naive-slider__slide.is-center{ flex-basis:44%; transform:scale(1.06); z-index:1; }

/* Responsive */
@media (max-width:1024px){
  .section-bts{ --per:2; }
  .section-bts .naive-slider__slide.is-left  { transform: translateX(calc(var(--overlap)*.5)); }
  .section-bts .naive-slider__slide.is-right { transform: translateX(calc(-1 * var(--overlap)*.5)); }
}
@media (max-width:640px){
  .section-bts{ --per:1; }
  .section-bts .naive-slider__slide.is-left,
  .section-bts .naive-slider__slide.is-right,
  .section-bts .naive-slider__slide.is-center{ transform:none; z-index:auto; }
}
/* === BTS Slider v2 (scroll-snap, clean) ============================== */
.section-bts.v2{
  --ratio: 885/1024;         /* vaste verhouding (matcht 885×1024 & 679×786) */
  --frame: 4px;              /* witte rand */
  --gap: 24px;               /* ruimte tussen kaarten */
}

.section-bts.v2 .__inner{ width: var(--safe-width); margin-inline: auto; padding-inline: var(--page-pad); }
.section-bts.v2 .section-title{ margin-bottom: 1rem; }

/* Scroller */
.bts-scroller{ position: relative; }
.bts-track{
  display: flex; gap: var(--gap);
  overflow-x: auto; padding: 8px 0;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 10%;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  align-items: center;             /* verticaal centreren */
}

/* Cards */
.bts-slide{
  scroll-snap-align: center;
  flex: 0 0 90%;                   /* mobiel: 1 per view */
  list-style: none;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 768px){
  .bts-slide{ flex-basis: calc((100% - 2*var(--gap)) / 3); } /* desktop: 3 per view */
}

.bts-figure{ margin: 0; width: 100%; }
.bts-frame{
  aspect-ratio: var(--ratio);
  border: var(--frame) solid #fff;  /* witte rand 4px */
  border-radius: 0;                 /* geen radius */
  overflow: hidden;
}
.bts-img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Captions */
.bts-caption{
  margin-top: .75rem;
  font: 600 clamp(16px,1.4vw,20px)/1.5 var(--font-body);
  color: var(--color-text);
  text-align: left;                 /* links uitgelijnd */
}

/* Arrows */
.bts-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: #fff; color: var(--color-text);
  display: grid; place-items: center; font: 700 20px/1 var(--font-body);
  box-shadow: 0 2px 8px rgba(0,0,0,.15); cursor: pointer;
}
.bts-arrow.is-prev{ left: -10px; }
.bts-arrow.is-next{ right: -10px; }
@media (max-width: 1024px){
  .bts-arrow.is-prev{ left: 6px; }
  .bts-arrow.is-next{ right: 6px; }
}

/* Dots */
.bts-dots{ display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.bts-dots button{ width:10px; height:10px; border-radius:50%; border:0; background:#cfcfcf; cursor:pointer }
.bts-dots button.is-active{ background: var(--color-primary); transform: scale(1.1); }

/* === Hero only: witte tekstknoppen met pijl ======================== */
.hero .btn,
.hero .btn--primary,
.hero .btn--secondary,
.hero .btn--link {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 var(--fs-200)/1.4 var(--font-body);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: color .25s ease, transform .25s ease;
}

.hero .btn::after,
.hero .btn--link::after {
  content: "→";
  font-size: 1.1em;
  transition: transform .25s ease;
}

.hero .btn:hover,
.hero .btn--link:hover {
  color: var(--color-primary);
}

.hero .btn:hover::after,
.hero .btn--link:hover::after {
  transform: translateX(4px);
}
/* Tablet & kleiner: stapelen (werkt ook voor .is-image-left) */
@media (max-width:1024px){
  .section.tekst-links .__grid,
  .section.tekst-links.is-image-left .__grid {
    grid-template-columns: 1fr;      /* 2 → 1 kolom */
    min-height: unset;
  }

  /* volgorde + uitlijning */
  .section.tekst-links .__media,
  .section.tekst-links.is-image-left .__media {
    order: 2;
    justify-content: center;
    margin-top: 32px;
  }

  .section.tekst-links .__text,
  .section.tekst-links.is-image-left .__text {
    order: 1;
    padding-right: 0;
  }
}
/* ===== Footer Section (clean) ===== */
.section-footer{
  /* achtergrond + overlay */
  --footer-overlay:0;                         /* donkerte overlay */
  position:relative;
  background: #000 url('http://the-blazers.local/wp-content/uploads/2025/10/DDF2D33D-7F21-45DA-815F-7EDDCCCF979D.png') center/cover no-repeat;
  color:#fff;
  display:flex; align-items:center;
  min-height:70vh;                             /* hero-achtig blok */
  padding-block:clamp(72px,10vh,160px);
  align-items: stretch;
}
.section-footer::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,var(--footer-overlay));
  z-index:1;
}
.section-footer .__inner{
  position:relative; z-index:2;
  width:var(--safe-width); margin-inline:auto;
  min-height: 100%;
  justify-content: space-between;
  padding-inline:var(--page-pad);
  display:flex; flex-direction:column; gap:var(--space-6);
}

/* Content */
.section-footer .__content{max-width:min(780px,90vw)}
.section-footer .__title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size: clamp(4rem, 8vw, 6rem);
  line-height:1.3; letter-spacing:-0.02em;
  margin:0 0 var(--space-3);
  text-shadow:0 2px 18px rgba(0,0,0,.35);
  color: #fff;
}
.section-footer .__subtitle{
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  margin:0 0 var(--space-3);
  opacity:.95;
}
.section-footer .btn {
  background: var(--color-primary);
  color: #fff;
  font-size: 20px;
  border-radius: 50px;
  max-width: 200px;
  margin-top: 3%;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
/* Verticaal centreren van de footer-content */
.section-footer{
  display:flex;
  flex-direction:column;
  justify-content:center;   /* centreert alles verticaal binnen de sectie */
}

.section-footer .__inner{
  width:var(--safe-width);
  margin-inline:auto;
  padding-inline:var(--page-pad);
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between; /* houdt bottom-bar onderaan */
  height:100%;                   /* vult de volledige sectiehoogte */
}

.section-footer .__content{
  display:flex;
  flex-direction:column;
  justify-content:center;   /* centreer verticaal */
  height:100%;              /* zorgt dat het blok de ruimte pakt */
  max-width:min(780px,90vw);
}


/* Bottom bar (full-bleed, content in safe area) */
.section-footer .__bottom{
  margin-top:auto;
  width:calc(100% + 2*var(--page-pad));
  margin-left:calc(-1*var(--page-pad));
  margin-right:calc(-1*var(--page-pad));
  background:rgba(0,0,0,.6);
  backdrop-filter:saturate(120%) blur(2px);
  border-top:1px solid rgba(255,255,255,.06);
}
.section-footer .__bottom > .__safe{
  width:var(--safe-width); margin-inline:auto;
  padding:14px var(--page-pad);
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--fs-small); line-height:1.4;
  color:#e9e9e9;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}

/* Responsive tweaks */
@media (max-width: 720px){
  .section-footer{min-height:45vh}
  .section-footer .__content{max-width:unset}
  .section-footer .__title{font-size:clamp(2rem,8vw,3rem)}
  .section-footer .__bottom > .__safe{
    flex-direction:column; gap:6px; text-align:left;
  }
}
.section-footer-bar {
  background: #000;
  color: #e9e9e9;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 16px var(--page-pad);
}

.section-footer-bar .__safe {
  width: var(--safe-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-small);
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

@media (max-width: 720px) {
  .section-footer-bar .__safe {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}
/* ==== Footer bar overlay above section ==== */
.footer-bar{
  position: relative;
  z-index: 10;
  margin-top: calc(-1 * 56px); /* trek hem omhoog — hoogte = padding + lineheight */
  background: transparent;     /* transparant, zodat achtergrond doorschijnt */
  color:#e9e9e9;
  padding:14px var(--page-pad);
}
.footer-bar .__safe{
  width:var(--safe-width);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:var(--fs-small);
  line-height:1.4;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}

/* optioneel subtiele rand */
.footer-bar::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:rgba(255,255,255,.1);
  pointer-events:none;
}

/* mobiel */
@media(max-width:720px){
  .footer-bar{
    margin-top:calc(-1 * 64px); /* iets meer marge bij smallere layout */
  }
  .footer-bar .__safe{
    flex-direction:column;
    gap:6px;
    text-align:center;
  }
}