:root{ --pe-green:#133225; --pe-orange:#df6a3e; --pe-beige:#f9eee2; --pe-white:#fff; }
.oa--beige{ background:var(--pe-beige); }
.oa--white{ background:var(--pe-white); }
.oa-wrap{ max-width:1200px; margin:0 auto; padding: clamp(28px,6vw,72px) 20px; }

.pe-kicker{ color:var(--pe-orange); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin:0 0 6px; }
.pe-title{ color:var(--pe-green); font-size: clamp(28px,3.6vw,44px); margin:.1rem 0 .6rem; line-height:1.1; }
.pe-h2{ color:var(--pe-green); font-size: clamp(22px,2.6vw,32px); margin: 12px 0 10px; }
.pe-intro{ color:#2a3a31; max-width:65ch; margin:0 0 14px; }

.oa-s{ margin-top: clamp(18px,4vw,34px); }
.oa-s__grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(16px,3vw,24px); align-items:start; }
.oa-s__grid p { line-height:25px; }
@media (max-width:980px){ .oa-s__grid{ grid-template-columns:1fr; } }
.oa-s__media img{ width:100%; height:100%; object-fit:cover; border-radius:20px; box-shadow:0 12px 36px rgba(0,0,0,.08); }
.oa-bullets{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px; }
.oa-bullets li{ display:flex; gap:8px; }
.oa-bullets li::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--pe-orange); margin-top:.55em; }

/* charts */
.oa-charts{ display:grid; grid-template-columns:repeat(12,1fr); gap: clamp(14px,2vw,24px); }
.oa-chart{ grid-column: span 12; background:#fff; border:1px solid rgba(19,50,37,.12); border-radius:16px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.oa-chart__title{ margin:0 0 8px; color:var(--pe-green); font-weight:900; }
.oa-chart__grid{ display:grid; gap:8px; }
.oa-bar{ display:grid; grid-template-columns: 120px 1fr 90px; gap:10px; align-items:center; }
.oa-bar__label{ color:#2a3a31; font-weight:700; }
.oa-bar__row{ height:14px; background:rgba(19,50,37,.08); border-radius:999px; position:relative; overflow:hidden; display:flex; }
.oa-bar__s{ height:100%; }
.oa-bar__s--cool{ background:#91a8a0; } /* neutraal koel */
.oa-bar__s--eth{ background:var(--pe-orange); }
.oa-bar__vals{ display:flex; justify-content:space-between; color:#2a3a31; font-weight:700; }
.oa-legend{ list-style:none; margin:8px 0 0; padding:0; display:flex; gap:14px; color:#2a3a31; font-weight:700; }
.oa-legend .cool::before,.oa-legend .eth::before{ content:''; width:12px; height:12px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:middle; }
.oa-legend .cool::before{ background:#91a8a0; }
.oa-legend .eth::before{ background:var(--pe-orange); }

/* gear cards */
.oa-gear__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap: clamp(14px,2vw,24px); }
.oa-card{ grid-column: span 6; background:#fff; border:1px solid rgba(19,50,37,.12); border-radius:16px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.oa-card__img{ width:100%; height:220px; object-fit:cover; border-radius:12px; }
.oa-card__title{ margin:10px 0 6px; color:var(--pe-green); font-weight:900; }
.oa-card__text{ color:#2a3a31; }
.oa-card__text p { line-height:25px; }
@media (max-width:980px){ .oa-card{ grid-column: span 12; } }

/* tech */
.oa-sub{ color:var(--pe-green); margin:0 0 6px; font-weight:900; }
.oa-sensors{ background:#fff; border:1px solid rgba(19,50,37,.12); border-radius:16px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.06); }

/* resultaat-afbeeldingen */
.oa-graphs{
  display:block;
  grid-template-columns:repeat(12,1fr);
  gap: clamp(14px,2vw,24px);
}
.oa-graph{
  grid-column: span 12;
  background:#fff;
  border:1px solid rgba(19,50,37,.12);
  border-radius:16px;
  padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.oa-graph img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}
.oa-graph figcaption{
  margin-top:8px;
  color:#2a3a31;
  font-weight:700;
}
@media (min-width:900px){
  .oa-graph{ grid-column: span 6; } /* 2 naast elkaar */
  .oa-graph:last-child{ grid-column: span 12; } /* derde doorlopend onder */
}

.oa-s--beige { background: var(--pe-beige); }
.oa-s--white { background: #fff; }
.oa-s { padding: clamp(18px, 4vw, 34px); border-radius: 16px; }

/* Full-bleed band + centered wrap */
.band{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(24px,4vw,48px) 0;
}
.band--beige{ background:#f9eee2; }
.band--white{ background:#fff; }

.wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Sectiecard-styling blijft hetzelfde */
.oa-s{ border-radius: 0; padding: 0; } /* geen extra band-ruimte binnenin */