/* WebsiteRenovatie uses the site's shared editorial layout and interaction rules. */
#website-renovatie {
  --wrr-ink: var(--foreground, #1b1b1b);
  --wrr-paper: var(--heroBg, #faf9f7);
  --wrr-accent: var(--heroAccent, #fc4926);
  position: relative;
  overflow: hidden;
  padding: 0 0 clamp(64px, 7vw, 104px);
  background: var(--wrr-paper);
  color: var(--wrr-ink);
  scroll-margin-top: 104px;
}
.wrr-section *, .wrr-section *::before, .wrr-section *::after { box-sizing: border-box; }
.wrr-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px, 3.65vw, 56px); }
.wrr-feature {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(40px, 5vw, 68px) 0 0;
  border-top: 1px solid var(--heroLine, rgba(0,0,0,.3));
}
.wrr-visual { display: flex; align-items: center; justify-content: center; min-height: 0; }
.wrr-laptop { display: block; width: 100%; max-width: 520px; height: auto; object-fit: contain; }
.wrr-details { max-width: 720px; }
.wrr-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 19px;
  color: var(--wrr-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wrr-eyebrow::before { width: 16px; height: 1px; background: currentColor; content: ''; }
.wrr-details h2 {
  margin: 0;
  font-size: clamp(2rem, 3.3vw, 3.5rem);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.02;
  text-wrap: balance;
}
.wrr-details h2 em {
  font-family: Georgia, Cambria, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.065em;
}
.wrr-intro {
  max-width: 650px;
  margin: 21px 0 0;
  color: var(--wrr-ink);
  opacity: .72;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
}
.wrr-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 0 0 7px;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--wrr-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}
.wrr-cta > span:last-child { font-size: 17px; font-weight: 400; line-height: .8; }
.wrr-cta:hover { opacity: .65; }
.wrr-cta:focus-visible { outline: 3px solid var(--wrr-accent); outline-offset: 5px; }
@media (max-width: 850px) {
  .wrr-feature { grid-template-columns: 1fr; gap: 28px; }
  .wrr-visual { min-height: 0; }
  .wrr-laptop { width: 100%; max-width: 520px; }
  .wrr-details { max-width: 650px; }
}
@media (max-width: 640px) {
  #website-renovatie { padding: 0 0 64px; }
  .wrr-inner { padding-inline: 20px; }
  .wrr-feature { gap: 24px; padding: 36px 0 0; }
  .wrr-eyebrow { margin-bottom: 16px; font-size: 10px; letter-spacing: .15em; }
  .wrr-details h2 { font-size: clamp(32px, 8.5vw, 44px); }
  .wrr-intro { margin-top: 18px; font-size: 15px; }
  .wrr-cta { margin-top: 22px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .wrr-cta { transition: none; } }