/* ============================================================
   RESCUEBAG BLOCKS — frontend + editor styles
   Tokens komen uit het child theme. Vallen anders terug op deze
   defaults zodat de blocks ook standalone werken.
   ============================================================ */
:root{
  --rb-ink:#0A0F14;
  --rb-ink-mid:#1A2B3C;
  --rb-orange:#E85218;
  --rb-orange-dark:#C94614;
  --rb-mist:#F2F4F6;
  --rb-text:#1A2633;
  --rb-text-dim:#64788C;
  --rb-rule-d:rgba(255,255,255,.08);
  --rb-rule-l:rgba(10,15,20,.08);
  --rb-font-display:"Bebas Neue",sans-serif;
  --rb-font-cond:"Barlow Condensed",sans-serif;
  --rb-font-body:"Barlow",sans-serif;
  --rb-font-mono:"JetBrains Mono",ui-monospace,monospace;
}

[class*="wp-block-rescuebag-"]{ font-family:var(--rb-font-body); }
[class*="wp-block-rescuebag-"] *{ box-sizing:border-box; }

/* ============================================================
   FULL-BLEED FORCE — laat alle rescuebag-blocks edge-to-edge
   renderen. !important + html-prefix beat Blocksy specificity.
   Werkt alleen als geen ancestor overflow:hidden heeft —
   daarom kill ik dat ook hieronder.
   ============================================================ */
html body.home [class*="wp-block-rescuebag-"],
html body.page-id-1350 [class*="wp-block-rescuebag-"],
html body.page-id-1130 [class*="wp-block-rescuebag-"],
html body.page-id-1131 [class*="wp-block-rescuebag-"],
html body.page-id-1132 [class*="wp-block-rescuebag-"],
html body.page-id-1133 [class*="wp-block-rescuebag-"],
html body.page-id-1134 [class*="wp-block-rescuebag-"],
html body.page-id-1155 [class*="wp-block-rescuebag-"],
html body.page-id-1156 [class*="wp-block-rescuebag-"],
html body.page-id-1157 [class*="wp-block-rescuebag-"],
html body.page-id-553 [class*="wp-block-rescuebag-"]{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  position:relative;
}

/* Ancestor wrappers van Blocksy mogen GEEN overflow:hidden of
   horizontal padding hebben — anders clipt 100vw expansion. */
html body.home .ct-site-content, html body.home .ct-main, html body.home #main,
html body.home .ct-content, html body.home article, html body.home .entry-content,
html body.page-id-1350 .ct-site-content, html body.page-id-1350 .ct-main, html body.page-id-1350 #main,
html body.page-id-1350 .ct-content, html body.page-id-1350 article, html body.page-id-1350 .entry-content,
html body.page-id-1130 .ct-site-content, html body.page-id-1130 .ct-main, html body.page-id-1130 #main,
html body.page-id-1130 .ct-content, html body.page-id-1130 article, html body.page-id-1130 .entry-content,
html body.page-id-1131 .ct-site-content, html body.page-id-1131 .ct-main, html body.page-id-1131 #main,
html body.page-id-1131 .ct-content, html body.page-id-1131 article, html body.page-id-1131 .entry-content,
html body.page-id-1132 .ct-site-content, html body.page-id-1132 .ct-main, html body.page-id-1132 #main,
html body.page-id-1132 .ct-content, html body.page-id-1132 article, html body.page-id-1132 .entry-content,
html body.page-id-1133 .ct-site-content, html body.page-id-1133 .ct-main, html body.page-id-1133 #main,
html body.page-id-1133 .ct-content, html body.page-id-1133 article, html body.page-id-1133 .entry-content,
html body.page-id-1134 .ct-site-content, html body.page-id-1134 .ct-main, html body.page-id-1134 #main,
html body.page-id-1134 .ct-content, html body.page-id-1134 article, html body.page-id-1134 .entry-content,
html body.page-id-1155 .ct-site-content, html body.page-id-1155 .ct-main, html body.page-id-1155 #main,
html body.page-id-1155 .ct-content, html body.page-id-1155 article, html body.page-id-1155 .entry-content,
html body.page-id-1156 .ct-site-content, html body.page-id-1156 .ct-main, html body.page-id-1156 #main,
html body.page-id-1156 .ct-content, html body.page-id-1156 article, html body.page-id-1156 .entry-content,
html body.page-id-1157 .ct-site-content, html body.page-id-1157 .ct-main, html body.page-id-1157 #main,
html body.page-id-1157 .ct-content, html body.page-id-1157 article, html body.page-id-1157 .entry-content,
html body.page-id-553 .ct-site-content, html body.page-id-553 .ct-main, html body.page-id-553 #main,
html body.page-id-553 .ct-content, html body.page-id-553 article, html body.page-id-553 .entry-content{
  overflow:visible !important;
  padding-left:0 !important;
  padding-right:0 !important;
  width:100% !important;
}

.rb-tag{
  font-family:var(--rb-font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rb-orange);
  display:inline-flex;align-items:center;gap:10px;font-weight:600;margin:0 0 14px;
}
.rb-tag::before{content:"";width:22px;height:1px;background:var(--rb-orange)}

/* Heading-vorm van .rb-tag (h1/h2/h3 met centered align): inline-flex
   shrinkwrapt de h2 → text-align:center op self heeft geen effect.
   Switch naar block-flex met justify-content:center zodat de h2 vol
   breed is en de dash+tekst gecentreerd in de viewport komen. */
h1.rb-tag.has-text-align-center,
h2.rb-tag.has-text-align-center,
h3.rb-tag.has-text-align-center{
  display:flex;
  justify-content:center;
  width:100%;
}

/* ===== BUTTONS ===== */
.rb-btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 22px;
  font-family:var(--rb-font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;border:1px solid transparent;
  border-radius:0;text-decoration:none;transition:background .18s ease, border-color .18s ease;
}
.rb-btn--primary{ background:var(--rb-orange); color:#fff; }
.rb-btn--primary:hover{ background:var(--rb-orange-dark); }
.rb-btn--ghost{ background:transparent; border-color:rgba(255,255,255,.25); color:#fff; }
.rb-btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.05); }
/* on light bg */
.rb-section--mist .rb-btn--ghost,
.wp-block-column .rb-btn--ghost{ border-color:var(--rb-rule-l); color:var(--rb-ink); }

/* ===== HERO ===== */
.rb-hero{ background:var(--rb-ink); color:#fff; padding:72px 0; position:relative; overflow:hidden; }
/* Contact- en offerte-pagina: hero heeft geen specpanel, minder ruimte nodig onder */
body.page-id-553 .rb-hero,
body.page-id-1157 .rb-hero{ padding-bottom:40px; }
.rb-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
}
.rb-hero__inner{ max-width:1240px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:start; position:relative; z-index:1; }
.rb-hero__inner > .rb-hero__main:only-child{ grid-column:1 / -1; max-width:880px; }
.rb-hero__main{ min-width:0; }
.rb-hero__title{ font-family:var(--rb-font-display); font-size:92px; line-height:.94; color:#fff; margin:8px 0 18px; }
.rb-hero__title .o,
.rb-hero__title .accent{ color:var(--rb-orange); }
.rb-hero__body{ font-size:17px; line-height:1.55; color:rgba(255,255,255,.78); max-width:560px; margin:0 0 24px; font-weight:300; }
.rb-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
.rb-hero__cta .arr{ font-family:var(--rb-font-mono); display:inline-block; transition:transform .18s ease; }
.rb-hero__cta a:hover .arr{ transform:translateX(3px); }

/* Stats — bovenin de left-col (nu boven titel) */
.rb-hero__stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rb-rule-d); border-bottom:1px solid var(--rb-rule-d); margin-bottom:20px; }
.rb-hero__stat{ padding:20px 24px 20px 0; border-right:1px solid var(--rb-rule-d); }
.rb-hero__stat:last-child{ border-right:0; padding-right:0; }
.rb-hero__stat .num{ font-family:var(--rb-font-display); font-size:54px; line-height:.9; display:flex; align-items:baseline; gap:4px; color:#fff; }
.rb-hero__stat .num small{ font-size:22px; color:var(--rb-orange); font-family:var(--rb-font-cond); font-weight:900; }
.rb-hero__stat .lbl{ font-family:var(--rb-font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--rb-text-dim); margin-top:8px; font-weight:500; }

/* Pills onderaan left-col */
.rb-hero__pills{ display:flex; flex-wrap:wrap; gap:6px; }
.rb-hero__pill{
  font-family:var(--rb-font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 12px; border:1px solid var(--rb-rule-d); color:rgba(255,255,255,.7);
  transition:all .15s; cursor:default;
}
.rb-hero__pill:hover{ border-color:var(--rb-orange); color:var(--rb-orange); }

/* Spec-panel rechts */
.rb-hero__spec{ background:rgba(255,255,255,.02); border:1px solid var(--rb-rule-d); position:relative; align-self:start; }
.rb-hero__spec-head{
  background:var(--rb-orange); color:#fff; padding:14px 22px;
  font-family:var(--rb-font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center; font-weight:600;
}
.rb-hero__spec-head .id{ opacity:.85; font-weight:500; }
.rb-hero__spec-list{ padding:6px 0; }
.rb-hero__spec-row{
  display:grid; grid-template-columns:140px 1fr; gap:18px;
  padding:14px 22px; border-bottom:1px solid var(--rb-rule-d); align-items:baseline;
}
.rb-hero__spec-row:last-child{ border-bottom:0; }
.rb-hero__spec-row .k{
  color:rgba(255,255,255,.55);
  text-transform:uppercase; letter-spacing:.14em;
  font-family:var(--rb-font-mono); font-size:10.5px; font-weight:600;
}
.rb-hero__spec-row .v{
  color:#fff;
  font-family:var(--rb-font-body); font-size:14px; font-weight:500;
  line-height:1.4;
}

@media (max-width:980px){
  .rb-hero__inner{ grid-template-columns:1fr; gap:48px; }
  .rb-hero__title{ font-size:72px; }
}

/* ===== TICKER ===== */
.rb-ticker{ background:var(--rb-orange); height:48px; display:flex; align-items:center; overflow:hidden; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(0,0,0,.12); }
.rb-ticker__track{ display:flex; gap:60px; animation:rb-tick 40s linear infinite; white-space:nowrap; padding-right:60px; }
.rb-ticker__item{ font-family:var(--rb-font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#fff; display:flex; align-items:center; gap:60px; font-weight:500; }
.rb-ticker__item::after{ content:"◆"; color:rgba(255,255,255,.55); font-size:8px; }
@keyframes rb-tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ===== SPEC PANEL ===== */
.rb-spec{ background:rgba(255,255,255,.02); border:1px solid var(--rb-rule-d); max-width:560px; }
.rb-spec--light{ background:#fff; border-color:var(--rb-rule-l); }
.rb-spec__head{ background:var(--rb-orange); color:#fff; padding:14px 22px; font-family:var(--rb-font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.rb-spec__head .id{ opacity:.85; font-weight:500; }
.rb-spec__list{ padding:6px 0; }
.rb-spec__row{ display:grid; grid-template-columns:170px 1fr; gap:18px; padding:16px 22px; border-bottom:1px solid var(--rb-rule-d); align-items:baseline; }
.rb-spec--light .rb-spec__row{ border-bottom-color:var(--rb-rule-l); }
.rb-spec__row:last-child{ border-bottom:0; }
.rb-spec__k{ color:rgba(255,255,255,.55); font-family:var(--rb-font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.rb-spec--light .rb-spec__k{ color:var(--rb-text-dim); }
.rb-spec__v{ color:#fff; font-family:var(--rb-font-body); font-size:15px; font-weight:500; line-height:1.4; }
.rb-spec--light .rb-spec__v{ color:var(--rb-ink); }

/* ===== SECTOR GRID ===== */
.rb-sectors{ background:var(--rb-ink-mid); color:#fff; padding:80px 0; }

/* Section head: tag + grote h2 links, meta rechts (mockup-stijl) */
.rb-sectors__head{
  max-width:1240px; margin:0 auto 56px; padding:0 40px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
}
.rb-sectors__title{ font-family:var(--rb-font-display); font-size:64px; line-height:.95; color:#fff; max-width:760px; margin:0; }
.rb-sectors__meta{ font-family:var(--rb-font-mono); font-size:11px; color:var(--rb-text-dim); letter-spacing:.12em; text-transform:uppercase; text-align:right; line-height:1.7; }
.rb-sectors__meta b{ color:var(--rb-orange); font-weight:500; }

.rb-sectors__grid{
  max-width:1240px; margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:transparent;  /* geen tint-frame — gaps tonen sectie-bg */
}
.rb-sector{
  background:var(--rb-ink-mid); padding:24px 22px 28px; min-height:340px;
  display:flex; flex-direction:column; gap:6px;
  text-decoration:none; color:inherit;
  border:1px solid rgba(255,255,255,.08);
  transition:background .2s, border-color .2s, transform .2s;
}
.rb-sector:hover{ background:#22384F; color:inherit; border-color:var(--rb-orange); transform:translateY(-2px); }

.rb-sector__id{ font-family:var(--rb-font-mono); font-size:13px; color:var(--rb-orange); letter-spacing:.14em; font-weight:600; }

.rb-sector__visual{
  flex:1; display:flex; align-items:center; justify-content:center;
  margin:14px 0 16px; min-height:120px;
  background:rgba(0,0,0,.2); position:relative; overflow:hidden;
}
.rb-sector__visual::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(45deg, transparent 49%, rgba(255,255,255,.06) 49%, rgba(255,255,255,.06) 51%, transparent 51%);
  background-size:8px 8px;
}
.rb-sector__visual-label{
  position:relative; z-index:1;
  font-family:var(--rb-font-cond); font-size:18px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.7); font-weight:800;
}

.rb-sector__uitvoering{
  font-family:var(--rb-font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rb-orange); font-weight:600; margin-top:4px;
}
.rb-sector__name{
  font-family:var(--rb-font-cond); font-weight:900; font-size:22px; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; margin:2px 0 6px;
}
.rb-sector__sub{
  font-family:var(--rb-font-body); font-size:13px; line-height:1.45;
  color:rgba(255,255,255,.65); margin:0; font-weight:400; letter-spacing:0; text-transform:none;
}

@media (max-width:980px){
  .rb-sectors__grid{ grid-template-columns:repeat(2,1fr); }
  .rb-sectors__title{ font-size:44px; }
}

/* ===== TECH / NORM GRID ===== */
.rb-techgrid{ background:var(--rb-ink); color:#fff; padding:80px 0; position:relative; }
.rb-techgrid__head{
  max-width:1240px; margin:0 auto 48px; padding:0 40px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
}
.rb-techgrid__title{ font-family:var(--rb-font-display); font-size:64px; line-height:.95; color:#fff; max-width:680px; margin:0; }
.rb-techgrid__meta{ font-family:var(--rb-font-mono); font-size:11px; color:var(--rb-text-dim); letter-spacing:.12em; text-transform:uppercase; text-align:right; line-height:1.7; }
.rb-techgrid__meta b{ color:var(--rb-orange); font-weight:500; }

/* Cells (4-col grid) */
.rb-techgrid__cells{
  max-width:1240px; margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:transparent;  /* geen tint-frame rond cellen — gaps tonen sectie-bg */
}
.rb-tech-cell{
  background:var(--rb-ink); padding:36px 28px; min-height:280px;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
  border:1px solid var(--rb-rule-d);
  transition:background .2s, border-color .2s;
}
.rb-tech-cell:hover{ background:#0F161E; border-color:var(--rb-orange); }
.rb-tech-cell__ix{
  font-family:var(--rb-font-mono); font-size:13px; letter-spacing:.14em;
  color:var(--rb-orange); text-transform:uppercase; font-weight:600;
}
.rb-tech-cell__icon{
  position:absolute; top:24px; right:28px;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  font-family:var(--rb-font-cond); font-weight:900; font-size:14px; color:rgba(255,255,255,.45);
  border:1px solid var(--rb-rule-d);
}
.rb-tech-cell__title{
  font-family:var(--rb-font-display); font-size:32px; line-height:1; color:#fff;
  margin:14px 0 6px; padding-right:36px;
}
.rb-tech-cell__desc{
  font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.65); margin:0; flex:1;
}
.rb-tech-cell__data{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-top:14px; border-top:1px solid var(--rb-rule-d);
  font-family:var(--rb-font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
}
.rb-tech-cell__data span{ color:rgba(255,255,255,.5); }
.rb-tech-cell__data b{ color:var(--rb-orange); font-weight:600; font-size:12px; }

/* Legacy row layout — backward compat als items {norm,scope,status} hebben */
.rb-techgrid__list{ max-width:1240px; margin:0 auto; padding:0 40px; display:flex; flex-direction:column; }
.rb-tech{ display:grid; grid-template-columns:220px 1fr 220px; gap:24px; padding:22px 0; border-bottom:1px solid var(--rb-rule-d); align-items:baseline; }
.rb-tech:last-child{ border-bottom:0; }
.rb-tech__norm{ font-family:var(--rb-font-cond); font-weight:800; font-size:18px; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
.rb-tech__scope{ font-size:14px; color:rgba(255,255,255,.7); line-height:1.5; }
.rb-tech__status{ font-family:var(--rb-font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--rb-orange); font-weight:500; text-align:right; }

@media (max-width:980px){
  .rb-techgrid__cells{ grid-template-columns:repeat(2,1fr); }
  .rb-techgrid__title{ font-size:44px; }
  .rb-tech{ grid-template-columns:1fr; gap:6px; }
  .rb-tech__status{ text-align:left; }
}

/* ===== DOC CARDS ===== */
.rb-docs{ background:var(--rb-ink); color:#fff; padding:80px 0; }
.rb-docs__grid{ max-width:1240px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rb-doc{ position:relative; background:rgba(255,255,255,.02); border:1px solid var(--rb-rule-d); padding:28px 24px; display:flex; flex-direction:column; gap:14px; min-height:220px; transition:all .2s; text-decoration:none; color:inherit; }
.rb-doc:hover{ border-color:var(--rb-orange); background:rgba(232,82,24,.04); transform:translateY(-2px); }
.rb-doc__corner{
  position:absolute; top:0; right:0; width:14px; height:14px;
  background:var(--rb-ink);
  border-left:1px solid rgba(255,255,255,.3);
  border-bottom:1px solid rgba(255,255,255,.3);
}
.rb-doc__cat{ font-family:var(--rb-font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--rb-orange); font-weight:600; }
.rb-doc__title{ font-family:var(--rb-font-cond); font-weight:700; font-size:18px; letter-spacing:.04em; text-transform:uppercase; color:#fff; line-height:1.2; }
.rb-doc__meta{ margin-top:auto; font-family:var(--rb-font-mono); font-size:10px; color:var(--rb-text-dim); letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
@media (max-width:980px){ .rb-docs__grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== PRODUCT GRID PATTERN HELPERS ===== */
/* Card-styling op de wp:column children in een rb-prodgrid: subtle border,
   oranje hover. Geeft visueel duidelijke alignment + interactiefeedback. */
.rb-prodgrid > .wp-block-column{
  background:rgba(255,255,255,.02);
  border:1px solid var(--rb-rule-d);
  padding:32px 28px;
  transition:background .2s, border-color .2s;
}
.rb-prodgrid > .wp-block-column:hover{
  background:rgba(232,82,24,.04);
  border-color:var(--rb-orange);
}
.rb-prod__id{ font-family:var(--rb-font-mono); font-size:13px; color:var(--rb-orange); letter-spacing:.14em; font-weight:600; text-transform:uppercase; margin:0 0 6px; }
.rb-prod__name{ font-family:var(--rb-font-cond); font-weight:800; font-size:24px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 12px; }
.rb-link{ font-family:var(--rb-font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--rb-orange); text-decoration:none; font-weight:600; }
.rb-link:hover{ text-decoration:underline; }
.rb-rule{ border:0; border-top:1px solid var(--rb-rule-l); height:1px; background:none; margin:0; }

/* ============================================================
   PHOTO SLOT — placeholder voor productfoto's die later via
   wp-admin vervangen worden. Verwijder de wp:html en plaats
   een wp:image block om in te vullen.
   ============================================================ */
.rb-photo-slot{
  max-width:1240px; margin:0 auto; padding:0 40px;
}
.rb-photo-slot__inner{
  aspect-ratio:21/9; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:rgba(255,255,255,.02);
  border:1px dashed rgba(255,255,255,.2);
  background-image:
    linear-gradient(45deg, transparent 49%, rgba(255,255,255,.04) 49%, rgba(255,255,255,.04) 51%, transparent 51%);
  background-size:16px 16px;
  position:relative;
}
.rb-photo-slot__inner::before{
  content:""; position:absolute; top:14px; left:14px;
  width:18px; height:18px;
  border-left:1px solid var(--rb-orange); border-top:1px solid var(--rb-orange);
}
.rb-photo-slot__inner::after{
  content:""; position:absolute; bottom:14px; right:14px;
  width:18px; height:18px;
  border-right:1px solid var(--rb-orange); border-bottom:1px solid var(--rb-orange);
}
.rb-photo-slot__label{
  font-family:var(--rb-font-mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rb-orange); font-weight:600;
}
.rb-photo-slot__hint{
  font-family:var(--rb-font-body); font-size:13px;
  color:rgba(255,255,255,.5);
}
.rb-photo-slot--portrait .rb-photo-slot__inner{ aspect-ratio:4/5; max-width:560px; margin:0 auto; }
.rb-photo-slot--square   .rb-photo-slot__inner{ aspect-ratio:1/1; }

/* ============================================================
   Split photo layout — donkere content links · grayscale foto rechts
   ============================================================ */
.rb-photo-split{
  display:grid; grid-template-columns:1fr 1fr; min-height:480px; overflow:hidden;
}
.rb-photo-split--reverse{ direction:rtl; }
.rb-photo-split--reverse > *{ direction:ltr; }
.rb-photo-split__txt{
  padding:56px 48px; display:flex; flex-direction:column; justify-content:center;
  background:var(--rb-ink); border:1px solid rgba(255,255,255,.08); border-right:none;
}
.rb-photo-split__eyebrow{
  font-family:var(--rb-font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--rb-orange); margin-bottom:14px; display:block;
}
.rb-photo-split__head{
  font-family:var(--rb-font-display); font-size:38px; line-height:1.0;
  margin:0 0 18px; color:#fff;
}
.rb-photo-split__body{
  font-size:15px; color:rgba(255,255,255,.70); line-height:1.65; margin:0;
}
.rb-photo-split__img-wrap{
  position:relative; overflow:hidden; min-height:360px;
}
.rb-photo-split__img-wrap img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; display:block;
  filter:grayscale(1) contrast(1.15) brightness(0.80);
}
@media(max-width:700px){
  .rb-photo-split{ grid-template-columns:1fr; }
  .rb-photo-split__txt{ border-right:1px solid rgba(255,255,255,.08); padding:36px 24px; }
  .rb-photo-split__img-wrap{ min-height:260px; position:relative; }
}

/* ============================================================
   Full-bleed foto — foto als achtergrond met tekst overlay
   ============================================================ */
.rb-photo-fullbleed{
  position:relative; min-height:500px; overflow:hidden; display:flex; align-items:flex-end;
}
.rb-photo-fullbleed img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%; display:block;
  filter:grayscale(1) brightness(0.52) contrast(1.15);
}
.rb-photo-fullbleed__overlay{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,15,20,.10) 0%, rgba(10,15,20,.88) 100%);
}
.rb-photo-fullbleed__content{
  position:relative; z-index:1; padding:56px 48px; max-width:700px;
}
.rb-photo-fullbleed__tag{
  font-family:var(--rb-font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--rb-orange); border:1px solid var(--rb-orange);
  display:inline-block; padding:4px 10px; margin-bottom:16px;
}
.rb-photo-fullbleed__head{
  font-family:var(--rb-font-display); font-size:48px; line-height:1.0;
  margin:0 0 14px; color:#fff;
}
.rb-photo-fullbleed__body{
  font-size:16px; color:rgba(255,255,255,.75); line-height:1.6; margin:0;
}

/* Form grid layout + required marker */
.rb-form-grid label{ display:block; }
.rb-form-grid > label + label{ margin-top:18px; }
.rb-form-req{ color:var(--rb-orange); }

/* 2-koloms form-row grid (demo-aanvragen)
   Gebruik <p class="rb-form-row"> zodat CF7 wpautop de structuur niet breekt. */
.rb-section-dark p.rb-form-row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0 32px; margin:0 0 24px;
}
.rb-section-dark p.rb-form-row--full{ grid-template-columns:1fr; }
.rb-section-dark p.rb-form-row label{ display:block; }
@media(max-width:640px){
  .rb-section-dark p.rb-form-row{ grid-template-columns:1fr; }
}

/* Submit knop — volledige breedte in demo form */
.rb-section-dark .wpcf7 .wpcf7-submit{ width:100%; justify-content:center; }

/* ============================================================
   CONTACT FORM 7 — dark canvas styling
   Inputs en buttons stylen om in de huisstijl te passen wanneer
   het form binnen een .rb-section-dark wrapper staat.
   ============================================================ */
.rb-section-dark .wpcf7{ color:#fff; }
.rb-section-dark .wpcf7 label,
.rb-section-dark .wpcf7-form label{
  display:block; margin:0 0 8px;
  font-family:var(--rb-font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.92); font-weight:600;
}
.rb-section-dark .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio):not(.wpcf7-checkbox):not(.wpcf7-acceptance):not(.wpcf7-list-item):not(.wpcf7-list-item-label){
  width:100%; box-sizing:border-box;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  color:#fff;
  padding:10px 0;
  font-family:var(--rb-font-body); font-size:15px; line-height:1.4;
  border-radius:0;
  transition:border-color .18s ease;
}
.rb-section-dark .wpcf7-form-control:not(.wpcf7-submit):focus{
  outline:none;
  border-bottom-color:var(--rb-orange);
}
.rb-section-dark .wpcf7 textarea{ min-height:140px; resize:vertical; }
.rb-section-dark .wpcf7-form-control::placeholder{ color:rgba(255,255,255,.38); }
.rb-section-dark .wpcf7 select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--rb-orange) 50%), linear-gradient(135deg, var(--rb-orange) 50%, transparent 50%); background-position:calc(100%) 55%, calc(100% - 6px) 55%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:20px; color:#fff; }
.rb-section-dark .wpcf7 select option{ background:#1A2B3C; color:#fff; }

/* Radio + checkbox velden */
.rb-section-dark .wpcf7-list-item{ display:inline-flex; align-items:center; margin:0 16px 8px 0; }
.rb-section-dark .wpcf7-list-item input[type="radio"],
.rb-section-dark .wpcf7-list-item input[type="checkbox"]{ margin-right:8px; accent-color:var(--rb-orange); }
.rb-section-dark .wpcf7-list-item-label{
  font-family:var(--rb-font-body); font-size:14px; color:rgba(255,255,255,.85);
  text-transform:none; letter-spacing:0; font-weight:400;
}

/* Form rows — als CF7-form via paragraphs gestructureerd is */
.rb-section-dark .wpcf7-form p{ margin:0 0 18px; color:rgba(255,255,255,.85); }

/* Submit button */
.rb-section-dark .wpcf7-submit{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  background:var(--rb-orange); color:#fff; border:1px solid var(--rb-orange);
  font-family:var(--rb-font-mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600;
  border-radius:0; cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.rb-section-dark .wpcf7-submit:hover{ background:var(--rb-orange-dark); border-color:var(--rb-orange-dark); }

/* Validation messages */
.rb-section-dark .wpcf7-not-valid-tip{ color:var(--rb-orange); font-size:12px; margin-top:4px; font-family:var(--rb-font-mono); letter-spacing:.04em; }
.rb-section-dark .wpcf7-response-output{
  margin:24px 0 0; padding:14px 18px; border:1px solid var(--rb-rule-d);
  background:rgba(255,255,255,.02); color:rgba(255,255,255,.85);
  font-family:var(--rb-font-body); font-size:14px;
}
.rb-section-dark .wpcf7-mail-sent-ok ~ .wpcf7-response-output,
.rb-section-dark .wpcf7 form.sent .wpcf7-response-output{ border-color:#3FCF8E; color:#3FCF8E; }
.rb-section-dark .wpcf7 form.failed .wpcf7-response-output,
.rb-section-dark .wpcf7 form.invalid .wpcf7-response-output{ border-color:var(--rb-orange); color:var(--rb-orange); }

/* ============================================================
   PAGE-LEVEL DARK CANVAS — kills witte stroken tussen secties
   en de witte strip tussen Blocksy-header en hero.
   Werkt op body + neutraliseert Blocksy's content-wrapper bg.
   ============================================================ */
body.home,
body.page-id-1350,
body.page-id-1130,
body.page-id-1131,
body.page-id-1132,
body.page-id-1133,
body.page-id-1134,
body.page-id-1155,
body.page-id-1156,
body.page-id-1157,
body.page-id-553{ background:var(--rb-ink); }

/* Blocksy wrapt de page-content in `.ct-site-content > #main > .entry-content`
   die elk een eigen achtergrond + verticale padding hebben.
   Op de homepage moeten die transparant zijn zodat de body-dark
   doorschijnt — anders houd je een witte strook boven de hero. */
body.home .ct-site-content,
body.home #main,
body.home .entry-content,
body.home .ct-container,
body.home article.post,
body.home article.page,
body.page-id-1350 .ct-site-content, body.page-id-1350 #main, body.page-id-1350 .entry-content, body.page-id-1350 .ct-container, body.page-id-1350 article.post, body.page-id-1350 article.page,
body.page-id-1130 .ct-site-content, body.page-id-1130 #main, body.page-id-1130 .entry-content, body.page-id-1130 .ct-container, body.page-id-1130 article.post, body.page-id-1130 article.page,
body.page-id-1131 .ct-site-content, body.page-id-1131 #main, body.page-id-1131 .entry-content, body.page-id-1131 .ct-container, body.page-id-1131 article.post, body.page-id-1131 article.page,
body.page-id-1132 .ct-site-content, body.page-id-1132 #main, body.page-id-1132 .entry-content, body.page-id-1132 .ct-container, body.page-id-1132 article.post, body.page-id-1132 article.page,
body.page-id-1133 .ct-site-content, body.page-id-1133 #main, body.page-id-1133 .entry-content, body.page-id-1133 .ct-container, body.page-id-1133 article.post, body.page-id-1133 article.page,
body.page-id-1134 .ct-site-content, body.page-id-1134 #main, body.page-id-1134 .entry-content, body.page-id-1134 .ct-container, body.page-id-1134 article.post, body.page-id-1134 article.page,
body.page-id-1155 .ct-site-content, body.page-id-1155 #main, body.page-id-1155 .entry-content, body.page-id-1155 .ct-container, body.page-id-1155 article.post, body.page-id-1155 article.page,
body.page-id-1156 .ct-site-content, body.page-id-1156 #main, body.page-id-1156 .entry-content, body.page-id-1156 .ct-container, body.page-id-1156 article.post, body.page-id-1156 article.page,
body.page-id-1157 .ct-site-content, body.page-id-1157 #main, body.page-id-1157 .entry-content, body.page-id-1157 .ct-container, body.page-id-1157 article.post, body.page-id-1157 article.page,
body.page-id-553 .ct-site-content, body.page-id-553 #main, body.page-id-553 .entry-content, body.page-id-553 .ct-container, body.page-id-553 article.post, body.page-id-553 article.page{
  background:transparent !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  max-width:none !important;
}

/* Blocksy page-title / breadcrumbs balk verbergen op de rebuild-pagina's —
   die zit standaard tussen header en hero met witte bg. */
body.home .page-title, body.home .ct-hero-section, body.home .page-header,
body.page-id-1350 .page-title, body.page-id-1350 .ct-hero-section, body.page-id-1350 .page-header,
body.page-id-1130 .page-title, body.page-id-1130 .ct-hero-section, body.page-id-1130 .page-header,
body.page-id-1131 .page-title, body.page-id-1131 .ct-hero-section, body.page-id-1131 .page-header,
body.page-id-1132 .page-title, body.page-id-1132 .ct-hero-section, body.page-id-1132 .page-header,
body.page-id-1133 .page-title, body.page-id-1133 .ct-hero-section, body.page-id-1133 .page-header,
body.page-id-1134 .page-title, body.page-id-1134 .ct-hero-section, body.page-id-1134 .page-header,
body.page-id-1155 .page-title, body.page-id-1155 .ct-hero-section, body.page-id-1155 .page-header,
body.page-id-1156 .page-title, body.page-id-1156 .ct-hero-section, body.page-id-1156 .page-header,
body.page-id-1157 .page-title, body.page-id-1157 .ct-hero-section, body.page-id-1157 .page-header,
body.page-id-553 .page-title, body.page-id-553 .ct-hero-section, body.page-id-553 .page-header{ display:none !important; }

/* ============================================================
   SECTIE-WRAPPERS — twee-toon ritme
   --rb-ink     (#0A0F14)  rb-section-dark  — primaire secties (hero, form, CTA)
   --rb-ink-mid (#1A2B3C)  rb-section-mid   — contrast-secties (overzichten, direct-contact)

   Ritme per pagina:
     [ink hero] → [ink-mid overzicht/contact] → [ink form/CTA]
   ============================================================ */

/* Primair donker */
.rb-section-dark{ background:var(--rb-ink) !important; color:rgba(255,255,255,.85); }
.rb-section-dark.alignfull{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

/* Mid-toon blauw-grijs */
.rb-section-mid{ background:var(--rb-ink-mid) !important; color:rgba(255,255,255,.85); }
.rb-section-mid.alignfull{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

@media (max-width:1300px){
  .rb-section-dark.alignfull,
  .rb-section-mid.alignfull{ padding-left:24px; padding-right:24px; }
}

.rb-section-dark h2,.rb-section-dark h3,.rb-section-dark .wp-block-heading,
.rb-section-mid h2,.rb-section-mid h3,.rb-section-mid .wp-block-heading{ color:#fff; }

.rb-section-dark h2.rb-tag,.rb-section-dark .rb-tag,
.rb-section-mid h2.rb-tag,.rb-section-mid .rb-tag{ color:var(--rb-orange); }

.rb-section-dark .rb-prod__id,
.rb-section-mid .rb-prod__id{ color:var(--rb-orange); }
.rb-section-dark .rb-prod__name{ color:#fff; }
.rb-section-dark p{ color:rgba(255,255,255,.78); }
.rb-section-dark .rb-link{ color:var(--rb-orange); }
.rb-section-dark .rb-rule{ border-top-color:var(--rb-rule-d); }
.rb-section-dark .wp-block-button.rb-btn--ghost .wp-block-button__link{ background:transparent; color:#fff; border-color:rgba(255,255,255,.25); }
.rb-section-dark .wp-block-button.rb-btn--ghost .wp-block-button__link:hover{ border-color:#fff; background:rgba(255,255,255,.05); }