:root {
  --orange: #f15a24;
  --ink: #171817;
  --muted: #656761;
  --line: #dedfda;
  --paper: #fff;
  --subpage-dark-band-image: url("../images/drive/sirvion-car.webp");
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
  --shell: min(100% - 2 * clamp(1.25rem, 4vw, 4rem), 86rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.55 var(--body); }
img { display: block; max-width: 100%; }
.site-main a { color: inherit; }
.page-shell { width: var(--shell); margin-inline: auto; }
.site-main { padding-top: calc(4.5rem + var(--sv-announcement-height, 1.875rem)); }
.eyebrow { margin: 0 0 1.2rem; color: var(--orange); font: 700 .72rem/1.1 var(--body); letter-spacing: .09em; text-transform: uppercase; }

.page-hero { padding: clamp(4.75rem, 9vw, 8.5rem) 0 clamp(3.8rem, 7vw, 6.8rem); border-bottom: 1px solid var(--line); }
.page-hero--visual { padding: clamp(4rem, 6.5vw, 6.25rem) 0 clamp(3rem, 5vw, 4.5rem); background: #fff; border-bottom: 0; }
.page-hero--visual.services-hero { color: var(--ink); }
.page-hero--visual.services-hero .hero-intro { color: var(--muted); }
.page-hero--visual .page-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr); gap: clamp(3rem, 5vw, 5rem); align-items: center; }
.page-hero__copy { max-width: 43rem; }
.page-hero__media { position: relative; aspect-ratio: 1 / 1; margin: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(23,25,23,.1); border-radius: 1.25rem; background: #f0f1ed; box-shadow: 0 1.25rem 3rem rgba(23,30,26,.12); }
.page-hero__image { width: 100%; height: 100%; margin: 0; }
.page-hero__media::after { position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(transparent, rgba(0,0,0,.52)); content: ""; pointer-events: none; }
.page-hero__media img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: center; }
.page-hero__badge { position: absolute; right: 1.15rem; bottom: 1.15rem; z-index: 1; display: grid; gap: .2rem; min-width: 10.5rem; padding: .85rem 1rem; border-radius: .8rem; background: #fff; color: var(--ink); box-shadow: 0 .8rem 2rem rgba(0,0,0,.14); }
.page-hero__badge span { color: var(--orange); font: 700 .64rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.page-hero__badge strong { font: 600 .9rem/1.2 var(--display); }
.page-proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; width: var(--shell); margin: 2.75rem auto 0; }
.page-proof-strip article { min-height: 5.75rem; padding: 1.1rem 1.25rem; border-radius: .7rem; background: #f3f3f0; }
.page-proof-strip strong { display: block; margin-bottom: .35rem; color: var(--orange); font: 700 .72rem/1.1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.page-proof-strip span { color: var(--ink); font: 600 1.05rem/1.2 var(--display); letter-spacing: -.03em; }
.page-proof-strip--dark { background: transparent; }
.page-proof-strip--dark article { background: var(--ink); }
.page-proof-strip--dark span { color: #fff; }
.page-hero h1,
.section-title,
.dark-band h2,
.cta-panel h2 { margin: 0; font-family: var(--display); font-weight: 550; letter-spacing: -.065em; line-height: .98; }
.page-hero h1 { max-width: 16ch; font-size: clamp(3.15rem, 5.55vw, 6.1rem); }
.page-hero h1 em { color: var(--orange); font-style: normal; }
.page-hero p:not(.eyebrow) { max-width: 43rem; margin: 1.7rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.35vw, 1.22rem); }

.section { padding: clamp(4.25rem, 7vw, 6.75rem) 0; }
.section + .section { padding-top: clamp(4rem, 6vw, 5.75rem); }
.section-title { max-width: 12ch; color: var(--ink); font-size: clamp(2.55rem, 4.2vw, 4.65rem); }
.two-col { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 8vw, 9rem); align-items: start; }
.copy { max-width: 39rem; color: var(--muted); font-size: 1.08rem; }
.copy p { margin: 0 0 1.2rem; }

.subpage-comparison { margin-top: 0; padding: clamp(1.25rem, 2.3vw, 2.25rem); border-radius: 1rem; background: #f3f3f0; }
.subpage-comparison__intro { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 1.35rem; }
.subpage-comparison__intro h2 { max-width: 12ch; margin: 0; font: 550 clamp(2.4rem, 4vw, 4.6rem)/.98 var(--display); letter-spacing: -.065em; }
.subpage-comparison__intro > p { max-width: 25rem; margin: 0; color: var(--muted); }
.subpage-comparison__card { max-width: 70rem; margin: 0 auto; }
.subpage-comparison .before-after { --position: 50%; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: 1.15rem; background: var(--ink); touch-action: pan-y; cursor: ew-resize; box-shadow: 0 1rem 2.5rem rgba(23,24,23,.1); }
.subpage-comparison .ba-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; user-select: none; pointer-events: none; }
.subpage-comparison .ba-before-wrap { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--position)) 0 0); }
.subpage-comparison .ba-before { width: 100%; max-width: none; object-position: center; }
.subpage-comparison .ba-label { position: absolute; top: 1rem; z-index: 3; padding: .42rem .7rem; border: 1px solid rgba(255,255,255,.24); border-radius: 99rem; background: rgba(23,24,23,.68); color: #fff; font: 700 .66rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); pointer-events: none; }
.subpage-comparison .ba-label-before { left: 1rem; }
.subpage-comparison .ba-label-after { right: 1rem; }
.subpage-comparison .ba-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.subpage-comparison .ba-divider { position: absolute; top: 0; bottom: 0; left: var(--position); z-index: 3; width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.subpage-comparison .ba-divider span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.85rem; height: 2.85rem; border: 2px solid #fff; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(0,0,0,.13); color: #fff; font-size: 0; transform: translate(-50%,-50%); }
.subpage-comparison .ba-divider span::before { position: absolute; top: 50%; left: 50%; display: block; width: 24px; height: 24px; background: center / 24px 24px no-repeat url("data:image/svg+xml,%3Csvg height='24' width='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M102,60A10,10,0,1,1,92,50,10,10,0,0,1,102,60Zm62,10a10,10,0,1,0-10-10A10,10,0,0,0,164,70ZM92,118a10,10,0,1,0,10,10A10,10,0,0,0,92,118Zm72,0a10,10,0,1,0,10,10A10,10,0,0,0,164,118ZM92,186a10,10,0,1,0,10,10A10,10,0,0,0,92,186Zm72,0a10,10,0,1,0,10,10A10,10,0,0,0,164,186Z'/%3E%3C/svg%3E"); content: ""; transform: translate(-50%,-50%); }
.subpage-comparison .ba-range:focus-visible + .ba-divider span { outline: 3px solid var(--orange); outline-offset: 4px; }
.subpage-comparison .comparison-caption { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.3rem .25rem 0; }
.subpage-comparison .comparison-caption span { color: var(--orange); font: 700 .68rem/1.1 var(--body); letter-spacing: .09em; text-transform: uppercase; }
.subpage-comparison .comparison-caption h3 { margin: .3rem 0 0; font: 550 clamp(1.35rem, 2vw, 1.8rem)/1.1 var(--display); letter-spacing: -.045em; }
.subpage-comparison .comparison-caption > p { max-width: 24rem; margin: .2rem 0 0; color: var(--muted); font-size: .82rem; }

.page-note { padding: clamp(4rem, 7vw, 6.5rem) 0; background: var(--ink); color: #fff; }
.page-note--orange { background: var(--orange); }
.page-note--orange .eyebrow { color: #fff; }
.page-note .page-shell { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 7vw, 7rem); align-items: end; }
.page-note h2 { max-width: 12ch; margin: 0; font: 550 clamp(2.7rem, 4.7vw, 5rem)/.98 var(--display); letter-spacing: -.065em; }
.page-note p { max-width: 38rem; margin: 0; color: #d0d1cd; font-size: 1.08rem; }
.page-note--orange p { color: #fff; }

.points { border-top: 1px solid var(--line); }
.point { display: grid; grid-template-columns: 1.8rem 1fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.point span { padding-top: .16rem; color: var(--orange); font: 600 1.15rem/1 var(--display); }
.point h3 { margin: 0; font: 600 1.18rem/1.2 var(--display); letter-spacing: -.04em; }
.point p { grid-column: 2; margin: .35rem 0 0; color: var(--muted); font-size: .98rem; }

.image-wide { width: 100%; margin: 0; overflow: hidden; border-radius: 1rem; }
.image-wide img { width: 100%; height: clamp(18rem, 33vw, 30rem); object-fit: cover; }
.image-copy { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.25rem, 3vw, 3rem); border-radius: 1.25rem; background: #f3f3f0; }
.image-copy .image-wide img { height: clamp(21rem, 33vw, 32rem); }
.image-copy h2 { margin-bottom: 1rem; }

.dark-band,
.approach-section { position: relative; isolation: isolate; overflow: hidden; }
.dark-band { padding: clamp(4.5rem, 7vw, 6.5rem) 0; background: var(--ink); color: #fff; }
.dark-band::before,
.approach-section::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(23,24,23,.97) 0%, rgba(23,24,23,.84) 48%, rgba(23,24,23,.36) 100%), var(--subpage-dark-band-image) center / cover no-repeat; content: ""; opacity: .78; }
.dark-band > *,
.approach-section > * { position: relative; z-index: 1; }
.dark-band h2,
.approach-section h2 { max-width: 13ch; color: #fff; font-size: clamp(2.75rem, 4.5vw, 5rem); }
.dark-band p { max-width: 38rem; margin: 1.5rem 0 0; color: #d0d1cd; font-size: 1.08rem; }
.dark-band .eyebrow { color: #ffba9d; }

.process { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-right: 0; }
.process article { min-height: 21.5rem; padding: 1.5rem; border-right: 1px solid var(--line); }
.process img { width: 4.1rem; height: 4.1rem; margin: 0 0 3.6rem; object-fit: contain; }
.process h3 { margin: 0; font: 600 1.45rem/1.15 var(--display); letter-spacing: -.045em; }
.process p { margin: .7rem 0 0; color: var(--muted); font-size: .94rem; }

.projects-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 1rem; }
.project-card { position: relative; min-height: 22rem; overflow: hidden; border-radius: 1rem; background: var(--ink); color: #fff; }
.project-card:first-child { grid-row: span 2; min-height: 45rem; }
.project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.project-card::after { position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); content: ""; }
.project-card span { position: absolute; z-index: 1; inset: auto 1.35rem 1.2rem; font: 600 1.15rem/1.1 var(--display); letter-spacing: -.035em; }
.project-card:hover img { transform: scale(1.035); }

.project-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.project-case { overflow: hidden; border-radius: 1.2rem; background: #f3f3f0; }
.project-case .before-after { border: 0; border-radius: 0; box-shadow: none; }
.project-case__copy { padding: 1.5rem; }
.project-case__copy h3 { margin: 0; font: 550 clamp(1.6rem, 2.4vw, 2.25rem)/1.05 var(--display); letter-spacing: -.05em; }
.project-case__copy > p { margin: .8rem 0 0; color: var(--muted); }
.project-case__story { display: grid; gap: .75rem; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.project-case__story p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.project-case__story strong { display: block; margin-bottom: .2rem; font: 700 .68rem/1.1 var(--body); letter-spacing: .09em; text-transform: uppercase; }
.project-case__story-item--challenge strong { color: var(--orange); }
.project-case__story-item--solution strong { color: #367355; }

.sustainability-section-heading { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .75fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: 2.5rem; }
.sustainability-section-heading > p { max-width: 33rem; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.sustainability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sustainability-card { min-height: 14rem; padding: 1.5rem; border: 1px solid transparent; border-radius: 1rem; background: #f3f3f0; }
.sustainability-icon { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; margin-bottom: 1.3rem; border: 1px solid rgba(241, 90, 36, .24); border-radius: .8rem; background: rgba(241, 90, 36, .1); color: var(--orange, #f15a24); }
.sustainability-icon svg { width: 1.45rem; height: 1.45rem; }
.sustainability-card h3 { margin: 0 0 .7rem; font: 600 1.35rem/1.12 var(--display); letter-spacing: -.04em; }
.sustainability-card p { margin: 0; color: var(--muted); }
.sustainability-card > .eyebrow { margin: 0 0 .45rem; }

.faq-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(3rem, 8vw, 9rem); }
.faq-layout .copy { margin-top: 1.6rem; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
.faq-list summary { cursor: pointer; list-style: none; font: 600 1.2rem/1.2 var(--display); letter-spacing: -.035em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { float: right; color: var(--orange); content: "+"; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 40rem; margin: 1rem 2rem .25rem 0; color: var(--muted); }
body[data-page="faq"] .faq-hero-list { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
body[data-page="faq"] .faq-hero-list .section-title { max-width: none; margin: 0; font-size: clamp(2.25rem, 3.5vw, 3.5rem); }
body[data-page="faq"] .faq-hero-list .faq-list { margin-top: 1.5rem; }
body[data-page="faq"] .faq-hero-list .faq-list details p { margin: 1rem 2rem .25rem 0; font-size: 1rem; line-height: 1.62; }
.faq-media { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; align-items: stretch; margin-top: clamp(2rem, 5vw, 4rem); }
.faq-media figure { margin: 0; overflow: hidden; border-radius: 1rem; }
.faq-media img { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; }
.faq-media figcaption { display: flex; flex-direction: column; justify-content: flex-end; min-height: 18rem; padding: 1.7rem; border-radius: 1rem; background: var(--orange); color: #fff; }
.faq-media figcaption .eyebrow { color: #fff; }
.faq-media strong { max-width: 12ch; font: 550 clamp(1.9rem, 3vw, 3.1rem)/1 var(--display); letter-spacing: -.06em; }

.cta-panel { padding: clamp(4rem, 6vw, 5.5rem) 0; background: var(--orange); color: #fff; }
.cta-panel .eyebrow { color: #fff; }
.cta-panel h2 { max-width: 12ch; font-size: clamp(2.8rem, 4.6vw, 5rem); }
.cta-panel p:not(.eyebrow) { max-width: 35rem; margin: 1.4rem 0 2rem; font-size: 1.08rem; }
.cta-button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.15rem; padding: .82rem 1.25rem; border-radius: 99rem; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.cta-button:hover { background: #33352f; transform: translateY(-1px); }

@media (max-width: 800px) {
  :root { --shell: min(100% - 2.5rem, 86rem); }
  .site-main { padding-top: 4rem; }
  .page-hero { padding: 4.5rem 0 4rem; }
  .page-hero--visual { padding: 3.5rem 0 3rem; }
  .page-hero--visual .page-shell { grid-template-columns: 1fr; gap: 1.6rem; }
  .page-hero__media { aspect-ratio: 1 / 1; min-height: 0; order: 2; }
  .page-proof-strip { grid-template-columns: 1fr; width: min(100% - 2.5rem, 84rem); margin-top: 2rem; }
  .page-proof-strip article { min-height: 3.75rem; padding: .8rem 1rem; }
  .page-hero h1 { font-size: clamp(3rem, 12vw, 4.5rem); }
  .page-hero--visual.services-hero h1 { max-width: 11.5ch; font-size: clamp(3rem, 11.5vw, 4.15rem); }
  .two-col, .faq-layout, .image-copy, .sustainability-section-heading { grid-template-columns: 1fr; gap: 2.5rem; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process article { min-height: 15rem; }
  .process article:nth-child(even) { border-right: 0; }
  .process article:nth-child(-n + 4) { border-bottom: 1px solid var(--line); }
  .process article:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .process img { width: 3.35rem; height: 3.35rem; margin-bottom: 1.8rem; }
  .projects-grid { grid-template-columns: 1fr 1fr; }
  .project-cases, .sustainability-grid { grid-template-columns: 1fr; }
  .project-card { min-height: 15rem; }
  .project-card:first-child { grid-column: span 2; grid-row: auto; min-height: 24rem; }
  .section-title { font-size: clamp(2.5rem, 10vw, 3.8rem); }
  .section { padding: 4.5rem 0; }
  .section + .section { padding-top: 4rem; }
  .subpage-comparison { width: calc(100% - 1rem); padding: 0; border-radius: 0; background: transparent; }
  .subpage-comparison__intro { display: block; padding-inline: .75rem; }
  .subpage-comparison__intro > p { margin-top: 1rem; }
  .subpage-comparison .before-after { aspect-ratio: 4 / 3; border-radius: .85rem; }
  .subpage-comparison .comparison-caption { display: block; padding-inline: .75rem; }
  .subpage-comparison .comparison-caption > p { margin-top: .8rem; }
  .page-note .page-shell { grid-template-columns: 1fr; gap: 1.8rem; }
  .faq-media { grid-template-columns: 1fr; }
  .faq-media img, .faq-media figcaption { min-height: 15rem; }
}

/* --------------------------------------------------------------------------
   Sirvion subpages · unified commercial system
   A final layer keeps every supporting page on the same visual grid as home.
   -------------------------------------------------------------------------- */
:root {
  --subpage-shell: min(100% - clamp(2.5rem, 7vw, 8rem), 84rem);
  --subpage-soft: #f5f6f3;
  --subpage-soft-strong: #eceeea;
}

body[data-page] {
  background: #fff;
  color: var(--ink);
}

body[data-page] .page-shell {
  width: var(--subpage-shell);
}

body[data-page] .site-main {
  padding-top: calc(4.5rem + var(--sv-announcement-height, 1.875rem));
}

body[data-page] .page-hero--visual {
  padding: clamp(4.25rem, 7vw, 6.75rem) 0 clamp(3.75rem, 6vw, 5.75rem);
  border: 0;
  background: #fff;
}

body[data-page] .page-hero--visual .page-shell {
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr);
  gap: clamp(3rem, 7vw, 7.5rem);
  align-items: center;
}

body[data-page] .page-hero__copy {
  max-width: 44rem;
}

body[data-page] .page-hero h1 {
  max-width: 17ch;
  font-size: clamp(3.2rem, 4.35vw, 5.25rem);
  font-weight: 550;
  letter-spacing: -.06em;
  line-height: .99;
  text-wrap: pretty;
}

body[data-page] .page-hero h1 em {
  color: var(--orange);
}

body[data-page] .page-hero p:not(.eyebrow) {
  max-width: 38rem;
  margin-top: 1.65rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.62;
}

body[data-page] .page-hero__media {
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(23, 25, 23, .1);
  border-radius: 1.25rem;
  background: var(--subpage-soft);
  box-shadow: 0 1.5rem 3.25rem rgba(23, 24, 23, .1);
}

body[data-page] .page-hero__media::before {
  display: none;
}

body[data-page] .page-hero__media::after {
  height: 28%;
  background: linear-gradient(transparent, rgba(0, 0, 0, .44));
}

body[data-page] .page-hero__media img {
  object-position: center;
}

body[data-page="duurzaamheid"] .page-hero__media {
  aspect-ratio: 1500 / 1009;
  background: #edf0e9;
}

body[data-page="duurzaamheid"] .page-hero__media img {
  object-fit: contain;
  object-position: center;
}

/* Duurzaamheid keeps the Sirvion brand mark, but gives every page accent its own green palette. */
body[data-page="duurzaamheid"] {
  --orange: #367355;
  --primary: #367355;
  --primary-hover: #24543f;
  --sv-orange: #367355;
  --subpage-dark-band-image: url("../images/drive/duurzaam-2.webp");
  --sustainability-deep: #1f4b38;
  --sustainability-soft: #edf4ea;
  --sustainability-line: #c9ddc7;
}

body[data-page="duurzaamheid"] .page-hero__media {
  border-color: rgba(54, 115, 85, .18);
  background: var(--sustainability-soft);
  box-shadow: 0 1.5rem 3.25rem rgba(31, 75, 56, .12);
}

body[data-page="duurzaamheid"] .page-hero__copy .page-proof-strip {
  display: none !important;
}

body[data-page="duurzaamheid"] .page-hero__media::after {
  background: linear-gradient(transparent, rgba(31, 75, 56, .28));
}

body[data-page="duurzaamheid"] .sustainability-card,
body[data-page="duurzaamheid"] .image-copy {
  background: var(--sustainability-soft);
}

body[data-page="duurzaamheid"] .sustainability-icon {
  border-color: rgba(54, 115, 85, .25);
  background: rgba(54, 115, 85, .1);
  color: var(--orange);
}

body[data-page="duurzaamheid"] .dark-band {
  background: var(--sustainability-deep);
}

body[data-page="duurzaamheid"] .dark-band .eyebrow { color: #c5e4c4; }
body[data-page="duurzaamheid"] .dark-band p { color: #d8e9d7; }
body[data-page="duurzaamheid"] .cta-button { background: #183d2d; }
body[data-page="duurzaamheid"] .cta-button:hover { background: #102d21; }
body[data-page="duurzaamheid"] .sv-contact-island__offer:hover { background: var(--primary-hover); }

body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-modal-close:hover,
body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-service-options label:hover {
  border-color: var(--orange);
  color: var(--orange);
}

body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-modal-progress span.is-active,
body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-service-options label:has(input:checked),
body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-next,
body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-submit,
body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-success > span {
  border-color: var(--orange);
  background: var(--orange);
}

body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-step-number,
body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-success .quote-back {
  color: var(--orange);
}

body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-modal-fields input:focus,
body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-modal-fields textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(54, 115, 85, .14);
}

body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-photo-upload {
  border-color: var(--orange);
}

body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-next:hover,
body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-submit:hover {
  background: var(--primary-hover);
}

body[data-page="duurzaamheid"] [data-global-quote-modal] .quote-privacy input {
  accent-color: var(--orange);
}

body[data-page] .page-hero__badge {
  right: 1rem;
  bottom: 1rem;
  min-width: 12rem;
  padding: .78rem .9rem;
  border-radius: .72rem;
  box-shadow: 0 .9rem 2rem rgba(23, 24, 23, .14);
}

/* Shared composition with the About hero: keywords belong to the copy, never over the image. */
body[data-page] .page-hero--visual {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

body[data-page] .page-hero--visual::before {
  display: none;
}

body[data-page] .page-hero--visual .page-shell {
  position: relative;
  z-index: 1;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

body[data-page] .page-hero__copy .page-proof-strip,
body[data-page] .services-hero-copy .page-proof-strip {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: auto;
  margin: 2rem 0 0;
}

body[data-page] .page-hero__copy .page-proof-strip article,
body[data-page] .services-hero-copy .page-proof-strip article {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page] .page-hero__copy .page-proof-strip strong,
body[data-page] .services-hero-copy .page-proof-strip strong {
  margin-bottom: .3rem;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.2vw, 2.1rem);
  letter-spacing: -.045em;
  text-transform: none;
}

body[data-page] .page-hero__copy .page-proof-strip span,
body[data-page] .services-hero-copy .page-proof-strip span {
  max-width: 12ch;
  color: var(--muted);
  font: 600 .9rem/1.35 var(--body);
  letter-spacing: 0;
}

body[data-page] .page-proof-strip {
  position: relative;
  z-index: 1;
  gap: .7rem;
  margin-top: -1rem;
}

body[data-page] .page-proof-strip article {
  min-height: 5.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid transparent;
  border-radius: .72rem;
  background: var(--subpage-soft);
}

body[data-page] .page-proof-strip article:hover {
  border-color: rgba(241, 90, 36, .22);
  background: #fff;
}

body[data-page] .page-proof-strip span {
  font-size: 1rem;
}

body[data-page] .section {
  padding: clamp(4.75rem, 7vw, 7rem) 0;
}

body[data-page] .section + .section {
  padding-top: clamp(3.5rem, 5.5vw, 5.5rem);
}

body[data-page] .two-col {
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  gap: clamp(3rem, 7vw, 8rem);
}

body[data-page] .section-title,
body[data-page] .subpage-comparison__intro h2,
body[data-page] .page-note h2,
body[data-page] .cta-panel h2,
body[data-page] .dark-band h2 {
  font-weight: 550;
  letter-spacing: -.06em;
  line-height: .99;
  text-wrap: pretty;
}

body[data-page] .section-title {
  max-width: 13ch;
  font-size: clamp(2.65rem, 4vw, 4.65rem);
}

body[data-page] .copy,
body[data-page] .point p,
body[data-page] .section-intro > p {
  font-size: 1.03rem;
  line-height: 1.6;
}

body[data-page] .points {
  padding: 0 1.35rem;
  border: 1px solid var(--line);
  border-radius: .95rem;
  background: #fff;
  box-shadow: 0 .9rem 2.2rem rgba(23, 24, 23, .05);
}

body[data-page] .point {
  grid-template-columns: 1.2rem 1fr;
  gap: .85rem;
  padding: 1.35rem 0;
}

body[data-page] .point h3 {
  font-size: 1.16rem;
}

body[data-page] .point p {
  grid-column: 2;
  margin-top: .4rem;
}

body[data-page] .image-copy {
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 1.15rem;
  background: var(--subpage-soft);
}

body[data-page] .image-copy .image-wide {
  border-radius: .9rem;
}

body[data-page] .image-copy .image-wide img {
  height: clamp(20rem, 32vw, 30rem);
}

body[data-page] .image-copy .copy {
  padding: clamp(.5rem, 2vw, 1.5rem) clamp(.6rem, 3vw, 2.5rem) clamp(.5rem, 2vw, 1.5rem) 0;
}

body[data-page] .subpage-comparison {
  padding: clamp(1.4rem, 2.5vw, 2.35rem);
  border-radius: 1.1rem;
  background: var(--subpage-soft);
}

body[data-page] .subpage-comparison__intro {
  margin-bottom: 1.7rem;
}

body[data-page] .subpage-comparison__intro h2 {
  max-width: 14ch;
  font-size: clamp(2.45rem, 3.6vw, 4.25rem);
}

body[data-page] .subpage-comparison .before-after {
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: .9rem;
  box-shadow: 0 .9rem 2rem rgba(23, 24, 23, .12);
}

body[data-page] .subpage-comparison .comparison-caption {
  padding-top: 1.15rem;
}

body[data-page] .project-cases {
  gap: 1rem;
}

body[data-page] .project-case {
  border: 1px solid var(--line);
  border-radius: .95rem;
  background: #fff;
}

body[data-page] .project-case__copy {
  padding: 1.25rem 1.35rem 1.35rem;
}

body[data-page] .project-case__copy h3 {
  font-size: clamp(1.45rem, 2.1vw, 2rem);
}

body[data-page] .dark-band {
  padding: clamp(5rem, 8vw, 7.5rem) 0;
}

body[data-page] .dark-band::before {
  background: linear-gradient(90deg, rgba(23, 24, 23, .97) 0%, rgba(23, 24, 23, .8) 52%, rgba(23, 24, 23, .42) 100%), var(--subpage-dark-band-image) center / cover no-repeat;
  opacity: .88;
}

body[data-page] .dark-band h2 {
  max-width: 14ch;
  font-size: clamp(2.75rem, 4.3vw, 4.9rem);
}

body[data-page] .dark-band p {
  max-width: 36rem;
  margin-top: 1.35rem;
  font-size: 1.05rem;
  line-height: 1.62;
}

body[data-page] .cta-panel,
body[data-page] .page-note {
  padding: clamp(4.75rem, 7vw, 6.75rem) 0;
}

body[data-page] .cta-panel .page-shell,
body[data-page] .page-note .page-shell {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

body[data-page] .cta-panel h2,
body[data-page] .page-note h2 {
  max-width: 13ch;
  font-size: clamp(2.7rem, 4.35vw, 4.9rem);
}

body[data-page] .cta-panel p:not(.eyebrow),
body[data-page] .page-note p:not(.eyebrow) {
  max-width: 38rem;
  margin: 0 0 1.7rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

body[data-page] .cta-button {
  min-height: 3.35rem;
  padding-inline: 1.35rem;
  font-weight: 700;
}

/* Diensten keeps its horizontal browse behaviour on mobile, while desktop is a calm three-up catalogue. */
body[data-page="diensten"] .services-hero {
  padding: clamp(4.25rem, 7vw, 6.75rem) 0 clamp(3.75rem, 6vw, 5.75rem);
  background: #fff;
  color: var(--ink);
}

body[data-page="diensten"] .services-hero h1 {
  max-width: 17ch;
  font-size: clamp(3.2rem, 4.35vw, 5.25rem);
  font-weight: 550;
}

body[data-page="diensten"] .services-overview {
  padding: clamp(4.75rem, 7vw, 7rem) 0;
}

body[data-page="diensten"] .section-intro {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .65fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-bottom: 2rem;
}

body[data-page="diensten"] .section-intro h2 {
  max-width: 15ch;
  font-size: clamp(2.7rem, 4vw, 4.5rem);
}

@media (max-width: 800px) {
  body[data-page] .site-main {
    padding-top: 4rem;
  }

  body[data-page] .page-shell {
    width: min(100% - 2.5rem, 84rem);
  }

  body[data-page] .page-hero--visual,
  body[data-page="diensten"] .services-hero {
    padding: 3.5rem 0 3.25rem;
  }

  body[data-page] .page-hero--visual .page-shell {
    grid-template-columns: 1fr;
    gap: 1.7rem;
  }

  body[data-page] .page-hero h1,
  body[data-page="diensten"] .services-hero h1 {
    max-width: 12.5ch;
    font-size: clamp(2.95rem, 11vw, 4.35rem);
    line-height: 1;
  }

  body[data-page] .page-hero p:not(.eyebrow) {
    margin-top: 1.35rem;
    font-size: 1rem;
  }

  body[data-page] .page-hero__media {
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
  }

  body[data-page="duurzaamheid"] .page-hero__media {
    order: -1;
  }

  body[data-page="duurzaamheid"] .page-hero__media {
    aspect-ratio: 1500 / 1009;
  }

  body[data-page] .page-proof-strip {
    grid-template-columns: 1fr;
    margin-top: 1.25rem;
  }

  body[data-page] .page-proof-strip article {
    min-height: 3.9rem;
    padding: .8rem 1rem;
  }

  body[data-page="faq"] .faq-hero-list { margin-top: 2.5rem; }

  body[data-page="faq"] .faq-hero-list .section-title {
    font-size: clamp(2.25rem, 9vw, 3.2rem);
  }

  body[data-page="faq"] .faq-hero-list .faq-list {
    margin-top: 1rem;
  }

  body[data-page] .section {
    padding: 4.5rem 0;
  }

  body[data-page] .two-col,
  body[data-page] .faq-layout,
  body[data-page] .image-copy,
  body[data-page] .cta-panel .page-shell,
  body[data-page] .page-note .page-shell {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  body[data-page] .section-title {
    max-width: 14ch;
    font-size: clamp(2.5rem, 10vw, 3.8rem);
  }

  body[data-page] .image-copy {
    padding: .75rem;
  }

  body[data-page] .image-copy .copy {
    padding: .5rem .75rem 1.25rem;
  }

  body[data-page] .subpage-comparison {
    width: min(100% - 1rem, 84rem);
    padding: .75rem;
    border-radius: .9rem;
  }

  body[data-page] .subpage-comparison__intro {
    padding: .35rem .4rem 0;
  }

  body[data-page] .subpage-comparison .before-after {
    aspect-ratio: 1.08 / 1;
    border-radius: .7rem;
  }

  body[data-page] .subpage-comparison .comparison-caption {
    padding: 1rem .4rem .35rem;
  }

  body[data-page] .dark-band,
  body[data-page] .cta-panel,
  body[data-page] .page-note {
    padding: 4.5rem 0;
  }

  body[data-page] .dark-band h2,
  body[data-page] .cta-panel h2,
  body[data-page] .page-note h2 {
    max-width: 13ch;
    font-size: clamp(2.65rem, 10vw, 3.9rem);
  }

  body[data-page="diensten"] .section-intro {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin-bottom: 1.5rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  body[data-page] * {
    scroll-behavior: auto !important;
  }
}

/* Over ons · project switcher */
body[data-page="over-ons"] .over-results {
  padding-top: clamp(4rem, 6vw, 6rem);
}

body[data-page="over-ons"] .results-tabs-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .62fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: 2rem;
}

body[data-page="over-ons"] .results-tabs-heading h2 {
  max-width: 13ch;
  margin: 0;
  font: 550 clamp(2.65rem, 4vw, 4.7rem)/.99 var(--display);
  letter-spacing: -.06em;
  text-wrap: pretty;
}

body[data-page="over-ons"] .results-tabs-heading > p {
  max-width: 31rem;
  margin: 0 0 .2rem;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.6;
}

body[data-page="over-ons"] .results-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .35rem;
  overflow-x: auto;
  border-radius: 99rem;
  background: var(--subpage-soft-strong);
  scrollbar-width: none;
}

body[data-page="over-ons"] .results-tabs::-webkit-scrollbar {
  display: none;
}

body[data-page="over-ons"] .results-tab {
  flex: 0 0 auto;
  min-height: 2.7rem;
  padding: .65rem 1.1rem;
  border: 0;
  border-radius: 99rem;
  background: transparent;
  color: #555752;
  cursor: pointer;
  font: 600 .82rem/1 var(--body);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

body[data-page="over-ons"] .results-tab:hover,
body[data-page="over-ons"] .results-tab:focus-visible {
  color: var(--ink);
}

body[data-page="over-ons"] .results-tab.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 .25rem .75rem rgba(23, 24, 23, .08);
}

body[data-page="over-ons"] .results-panels {
  min-width: 0;
}

body[data-page="over-ons"] .results-panel[hidden] {
  display: none;
}

body[data-page="over-ons"] .results-panel {
  overflow: hidden;
  border-radius: 1rem;
  background: var(--subpage-soft);
  box-shadow: 0 .9rem 2rem rgba(23, 24, 23, .07);
}

body[data-page="over-ons"] .results-panel .before-after {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  box-shadow: none;
}

body[data-page="over-ons"] .results-panel-copy {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: end;
  padding: 1.35rem 1.5rem 1.5rem;
}

body[data-page="over-ons"] .results-panel-kicker {
  color: var(--orange);
  font: 700 .68rem/1.1 var(--body);
  letter-spacing: .09em;
  text-transform: uppercase;
}

body[data-page="over-ons"] .results-panel-copy h3 {
  max-width: 16ch;
  margin: .3rem 0 0;
  font: 550 clamp(1.55rem, 2.4vw, 2.35rem)/1.05 var(--display);
  letter-spacing: -.05em;
}

body[data-page="over-ons"] .results-panel-copy > p {
  max-width: 25rem;
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
}

@media (max-width: 800px) {
  body[data-page="over-ons"] .results-tabs-heading {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  body[data-page="over-ons"] .results-tabs-heading h2 {
    font-size: clamp(2.5rem, 10vw, 3.8rem);
  }

  body[data-page="over-ons"] .results-tabs {
    margin-inline: -.4rem;
    padding-inline: .4rem;
    border-radius: 0;
    background: transparent;
  }

  body[data-page="over-ons"] .results-tab {
    border: 1px solid var(--line);
    background: #fff;
  }

  body[data-page="over-ons"] .results-tab.is-active {
    border-color: var(--orange);
    background: var(--orange);
    color: #fff;
    box-shadow: none;
  }

  body[data-page="over-ons"] .results-panel {
    border-radius: .85rem;
  }

  body[data-page="over-ons"] .results-panel .before-after {
    aspect-ratio: 1.08 / 1;
  }

  body[data-page="over-ons"] .results-panel-copy {
    display: block;
    padding: 1.15rem 1.2rem 1.3rem;
  }

  body[data-page="over-ons"] .results-panel-copy > p {
    margin-top: .8rem;
  }
}

/* Keep this sustainability explanation deliberately editorial, not card-like. */
body[data-page="duurzaamheid"] .image-copy {
  display: block;
  max-width: 48rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="duurzaamheid"] .image-copy .image-wide {
  display: none;
}

body[data-page="duurzaamheid"] .image-copy .copy {
  padding: 0;
}

body[data-page="duurzaamheid"] .page-hero__copy .page-proof-strip {
  display: none !important;
}

body[data-page="duurzaamheid"] .sustainability-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}

body[data-page="duurzaamheid"] .sustainability-overview-item {
  max-width: 36rem;
}

body[data-page="duurzaamheid"] .sustainability-overview-item .section-title {
  max-width: 12ch;
  font-size: clamp(2.15rem, 2.7vw, 3rem);
  line-height: 1.02;
}

body[data-page="duurzaamheid"] .sustainability-overview-item > p,
body[data-page="duurzaamheid"] .sustainability-overview-item .copy {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.6;
}

body[data-page="duurzaamheid"] .sustainability-overview-item .copy p + p {
  margin-top: 1rem;
}

body[data-page="duurzaamheid"] .sustainability-longform__intro {
  max-width: 48rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body[data-page="duurzaamheid"] .sustainability-longform__intro .section-title {
  max-width: 14ch;
  margin-bottom: 1.25rem;
  font-size: clamp(2.15rem, 2.7vw, 3rem);
  line-height: 1.02;
}

body[data-page="duurzaamheid"] .sustainability-longform__intro > p,
body[data-page="duurzaamheid"] .sustainability-longform__columns p {
  margin: 0;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.6;
}

body[data-page="duurzaamheid"] .sustainability-longform__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}

body[data-page="duurzaamheid"] .sustainability-longform__columns article {
  padding-top: 1.25rem;
  border-top: 1px solid var(--sustainability-line);
}

body[data-page="duurzaamheid"] .sustainability-longform__columns h3 {
  margin: 0 0 1rem;
  font: 600 clamp(1.35rem, 1.8vw, 1.75rem)/1.08 var(--display);
  letter-spacing: -.045em;
}

body[data-page="duurzaamheid"] .sustainability-longform__columns p + p {
  margin-top: 1rem;
}

@media (max-width: 800px) {
  /* Content headings should use the full mobile column, not an artificial character width. */
  body[data-page] .section-title,
  body[data-page] .subpage-comparison__intro h2,
  body[data-page] .page-note h2,
  body[data-page] .dark-band h2,
  body[data-page] .cta-panel h2,
  body[data-page] .faq-media strong {
    max-width: none;
  }

  body[data-page="duurzaamheid"] .sustainability-overview-item .section-title,
  body[data-page="duurzaamheid"] .sustainability-longform__intro .section-title {
    max-width: none;
  }

  body[data-page="duurzaamheid"] .sustainability-overview-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  body[data-page="duurzaamheid"] .sustainability-overview-item .section-title {
    font-size: clamp(2.15rem, 8.4vw, 3rem);
  }

  body[data-page="duurzaamheid"] .sustainability-longform__intro .section-title {
    font-size: clamp(2.15rem, 8.4vw, 3rem);
  }

  body[data-page="duurzaamheid"] .sustainability-longform__columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  body[data-page="duurzaamheid"] .page-hero--visual {
    padding-top: 1.25rem;
  }
}

/* Additional project proof: a compact visual rail keeps the new Drive cases
   useful without making the project page feel like an image archive. */
body[data-page="projecten"] .project-more {
  background: var(--subpage-soft);
}

body[data-page="projecten"] .project-more__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .65fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: 2rem;
}

body[data-page="projecten"] .project-more__intro h2 {
  max-width: 15ch;
  margin: 0;
  font: 550 clamp(2.15rem, 3.4vw, 3.6rem)/.99 var(--display);
  letter-spacing: -.06em;
}

body[data-page="projecten"] .project-more__intro p {
  max-width: 32rem;
  margin: 0 0 .3rem;
  color: var(--muted);
  line-height: 1.65;
}

body[data-page="projecten"] .project-more__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

body[data-page="projecten"] .project-more__card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
}

body[data-page="projecten"] .project-more__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body[data-page="projecten"] .project-more__media > img,
body[data-page="projecten"] .project-more__media--comparison .ba-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="projecten"] .project-more__media--comparison .before-after {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
  touch-action: pan-y;
  cursor: ew-resize;
}

body[data-page="projecten"] .project-more__media--comparison .ba-image {
  position: absolute;
  inset: 0;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

body[data-page="projecten"] .project-more__media--comparison .ba-before-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
}

body[data-page="projecten"] .project-more__media--comparison .ba-label {
  position: absolute;
  top: .8rem;
  z-index: 3;
  padding: .4rem .65rem;
  border-radius: 99rem;
  color: #fff;
  font: 700 .62rem/1 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

body[data-page="projecten"] .project-more__media--comparison .ba-label-before { left: .8rem; }
body[data-page="projecten"] .project-more__media--comparison .ba-label-after { right: .8rem; }

body[data-page="projecten"] .project-more__media--comparison .ba-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

body[data-page="projecten"] .project-more__media--comparison .ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  z-index: 3;
  width: 2px;
  background: #fff;
  transform: translateX(-1px);
  pointer-events: none;
}

body[data-page="projecten"] .project-more__media--comparison .ba-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .13);
  color: #fff;
  font-size: 1rem;
  transform: translate(-50%, -50%);
}

body[data-page="projecten"] .project-more__media--comparison .ba-divider span::before {
  content: "↔";
}

body[data-page="projecten"] .project-more__copy {
  padding: 1.15rem 1.25rem 1.3rem;
}

body[data-page="projecten"] .project-more__copy > span {
  color: var(--orange);
  font: 700 .65rem/1.1 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-page="projecten"] .project-more__copy h3 {
  margin: .45rem 0 0;
  font: 600 clamp(1.2rem, 1.7vw, 1.5rem)/1.12 var(--display);
  letter-spacing: -.04em;
}

body[data-page="projecten"] .project-more__copy p {
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

@media (max-width: 800px) {
  body[data-page="projecten"] .project-more__intro {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  body[data-page="projecten"] .project-more__intro h2 {
    max-width: none;
  }

  body[data-page="projecten"] .project-more__grid {
    display: flex;
    gap: .85rem;
    margin-inline: calc(-1 * var(--subpage-gutter, 1.25rem));
    padding: .1rem var(--subpage-gutter, 1.25rem) .7rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--subpage-gutter, 1.25rem);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="projecten"] .project-more__grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="projecten"] .project-more__card {
    flex: 0 0 min(84vw, 24rem);
    scroll-snap-align: start;
  }
}